-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
370 lines (329 loc) · 17.3 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Achieved!</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="./js/loader.js"></script>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<audio class="audio_file" src="./js/MusicByREDProductions.ogg" type="audio/ogg" loop style="display: none;"></audio>
<div class="music_by">Music By: RED Productions <br> pixabay</div>
<div id='loader'>welcome<br>Nice to see you!</div>
<div id='dim'>
<div id='highlight'>
<div id='popup'>you can toggle on and off music and full screen mode from here!</div>
</div>
</div>
<div id='pop__arrows'>
<div id='popup2'>this is a scroll <br>experience</div>
<div id="arrow">
<div>
<span class="arrow primera next "></span>
<span class="arrow segunda next "></span>
</div>
</div>
</div>
<div class="container">
<div class="container__panel1">
<p class="container__panel1_main">achieved</p>
<p class="container__panel1_title1">a clear speak-up of what has</p>
<p class="container__panel1_title2">been done and how those</p>
<p class="container__panel1_title3">achievements are</p>
<p class="container__panel1_title4 diff">different</p>
</div>
<div class="container__panel2">
<p class="container__panel2_1 animated2">hi</p>
<p class="container__panel2_2 animated2">this is</p>
<p class="container__panel2_3 animated2">taric <br>ov</p>
<p class="container__panel2_4 animated2">and I am</p>
<p class="container__panel2_5 creat">creative</p>
</div>
<div class="container__panel3">
<p class="container__panel3_1 animated3">Work is</p>
<p class="container__panel3_2 funn">fun</p>
<p class="container__panel3_3 animated3">'cuz I do what I</p>
<p class="container__panel3_4 likey">like what I am doing</p>
</div>
<div class="container__panel4">
<div class="module pseudo1"></div>
<div class="container__panel4_values">
<p class="container__panel4_1 animated3">and <br>those are</p>
<p class="container__panel4_2 animated3">my values</p>
</div>
<div class="pseudo1"></div>
<div class="module different"><strong>different</strong><br> everybody is unique and has his/her own thing,
and i like, for me, to be more of those things to really stand out.
<!-- means, to me, to extend what's in hand to the
unknown, and
examining
the opposite and beyond to know more about the known. -->
</div>
<div class="module pseudo2"></div>
<div class="module creative"><strong>creative</strong> <br> i like to get exposed to many different areas
that I then, take all that, mix them all up to come up with something new.
<!-- I used to learn little about more, which helps a
lot in the
out-of-the-box quest. -->
</div>
<div class="module pseudo2"></div>
<div class="module fun"><strong>fun</strong><br>they always say work smarter rather harder, but i feel it in
me going like
"work the fun, and fun the work".
</div>
<div class="module pseudo2"></div>
<div class="module like"><strong>i like what i am doing</strong><br>i am passionate about data, and feel a
deep excitment when working it out to facilitate it to others using different
technologies.
</div>
</div>
</div>
<div class="container__panel5">
<div class="container__panel5_1">
<div class="container__panel5_1_left">if there are two buttons,</div>
<div class="container__panel5_1_right">you'd click the one that looks really like a button</divm>
</div>
<div class="btns">
<button class=" btn first_btn" type="button">click him!</button>
<button class="btn second_btn" type="button">click me</button>
<div class="container__panel5_3 clicked"></div>
</div>
</div>
<div class="container__panel6">
<p class="container__panel6_quote">A year from now you may wish you had started</p>
<span class="today">today</span>
</div>
<div class="container__panel7">
<div class="container__panel7_1">
<span class="lowercase"><span></span><span class="impLetters">implementation</span><span
class="lowercase"></span></span>
</div>
<div class="container__panel7_2">
aka customization team <br> this is where i started my journey in izam.inc and our main goal was fitting
the standard provided services to
users needs and meet their business requirements. <br>here is how i contributed to build up that team
and boost operations in 6 months:
</div>
<div class="container__panel7_3">
<div>
<div class="bars-counters" style="height:100px"></div>
<div class="counter1 imp-counters"></div>
</div>
<div>
<div class="bars-counters" style="height:200px"></div>
<div class="counter2 imp-counters"></div>
</div>
<div>
<div class="bars-counters" style="height:300px"></div>
<div class="counter3 imp-counters"></div>
</div>
</div>
</div>
</div>
<div class="container__panel8">
<div class="container__panel8_1">
<div>
<div class="lines-counters" style="height:100px"></div>
<div class="para-counters">avg. <br>per month increase <br><span class="detail">(Q4 2021
- Q1
2022)</span></div>
</div>
<div>
<div class="lines-counters" style="height:200px"></div>
<div class="para-counters">revenue almost doubled <br><span class="detail">(over quarters)</span></div>
</div>
<div>
<div class="lines-counters" style="height:300px"></div>
<div class="para-counters">no. of<br> custom <br>requests are doubled<br><span class="detail">(Q4
2021
- Q1
2022)</span></div>
</div>
</div>
<div class="container__panel8_2">
<div class="begining">
<p>started here!</p>
</div>
<svg class="dotted_line" width="600" height="1900" viewBox="0 0 4228 12637" fill="none">
<path
d="M3882.29 2C3321.08 428.071 2210.96 1492.56 2260.17 2341.97C2321.68 3403.73 1510.62 3185 731.461 3653.22C229.176 3955.06 -204.902 4620.43 107.219 5119.41C419.34 5618.39 1135.85 6025.09 1510.62 6055.85C1885.4 6086.61 1886.54 5743.7 2509.64 5899.78C3008.12 6024.64 3101.99 6055.85 3507.51 6429.52C3843.5 6953.5 2777.56 6866.53 3101.99 7365.96C3426.41 7865.4 3912.59 7868.5 4101 8114.44C4414 8523 4057.26 8776.55 3882.29 9050.88C3663.57 9393.79 2572.29 9580.62 2260.17 9705.93C1948.05 9831.25 1510.62 9487.2 1510.62 10048.8C1510.62 10610.5 823.73 10985.7 1666.68 11172.5C2509.64 11359.4 2766.5 12212 2175.5 12634"
stroke="#ffc62c" stroke-width="5" stroke-dasharray="60 101" />
</svg>
<div class="circle1">
<p class="circ_para">8.7%<br><span class="small">increase in avg. price</span></p>
</div>
<div class="circle2">
<p class="circ_para">6.0X<br><span class="small">increase in the avg. agent efficiency </span></p>
</div>
<div class="circle3">
<p class="circ_para">67%<br><span class="small">increase in revenue <br>per action taken</span></p>
</div>
<div class="ending">
<p>the end</p>
</div>
</div>
</div>
<div class="container__panel9">
<div class="container__panel9_1">
<p class="container__panel9_1_start_analytics">analytics</p>
</div>
<div class="container__panel9_2">
<div class="for_anime">
<div class="container__panel9_2_circle">
<div class="analytics_bar">
<div class=" analytics_circle">
<p class="analytics_label mod" style="color: #ffc62c;">10</p>
</div>
<p class="analytics_label">efficient</p>
</div>
</div>
<div class="container__panel9_2_circle">
<div class="analytics_bar">
<div class=" analytics_circle">
<p class="analytics_label mod" style="color: #ffc62c;">20</p>
</div>
<p class="analytics_label">time-driven</p>
</div>
</div>
<div class="container__panel9_2_circle">
<div class="analytics_bar">
<div class=" analytics_circle">
<p class="analytics_label mod" style="color: #ffc62c;">30</p>
</div>
<p class="analytics_label">accurate</p>
</div>
</div>
<div class="container__panel9_2_circle">
<div class="analytics_bar">
<div class=" analytics_circle">
<p class="analytics_label mod" style="color: #ffc62c;">40</p>
</div>
<p class="analytics_label">presentable</p>
</div>
</div>
</div>
</div>
<div class="container__panel9_3">
<div class="container__panel9_3_para1">
"analytics" section covers what have been done regarding <strong>business intellgence</strong> and data
reporting. <br> all the previous labels are values i deliver and you can see in my work, and if noticed
<strong>all add up to 100 </strong>
</div>
<div class="container__panel9_3_para2">
the figures that are shown in here belong to a period <strong>less than 3 months</strong>.
</div>
<div class="container__panel9_3_figures">
<div class="container__panel9_2_circle">
<div class="analytics_figs">
<p class="analytics_fig1">40%</p>
<p class="fig_desc"><strong>presentations</strong> have been delivered in <strong>3</strong>
different business
aspects. </p>
</div>
</div>
<div class="container__panel9_2_circle">
<div class="analytics_figs">
<p class="analytics_fig2">40%</p>
<p class="fig_desc">full <strong>data report</strong> on different business functions such as
sales with almost
<br> <strong>3 dynamic dashboards</strong>.</p>
</div>
</div>
<div class="container__panel9_2_circle">
<div class="analytics_figs">
<p class="analytics_fig3">40%</p>
<p class="fig_desc">projection models <strong>(bi tools)</strong> to help make business
decisions and <strong>visualize</strong> goals/estimations.</p>
</div>
</div>
<div class="container__panel9_2_circle">
<div class="analytics_figs">
<p class="analytics_fig4">40%</p>
<p class="fig_desc">designs that work as media collaterals to deliver <strong> educationals
</strong>about data and <strong>summarize</strong> the status quo.</p>
</div>
</div>
</div>
</div>
<div class="container__panel10">
<div class="container__panel10_gallary">
<img src="./assets//imgs/1.png" data-img="" alt="" class="imgg">
<img src="./assets//imgs/2.png" alt="" class="imgg">
<img src="./assets//imgs/3.png" alt="" class="imgg">
<img src="./assets//imgs/4.png" alt="" class="imgg">
<img src="./assets//imgs/5.png" alt="" class="imgg">
<img src="./assets//imgs/6.png" alt="" class="imgg">
<img src="./assets//imgs/7.png" alt="" class="imgg">
<img src="./assets//imgs/8.png" alt="" class="imgg">
<!-- <img src="k./assets//imgs/9.png" alt="" class="imgg"> -->
<img src="./assets//imgs/10.png" alt="" class="imgg">
<img src="./assets//imgs/11.png" alt="" class="imgg">
<img src="./assets//imgs/12.png" alt="" class="imgg">
<img src="./assets//imgs/13.png" alt="" class="imgg">
<img src="./assets//imgs/14.png" alt="" class="imgg">
</div>
</div>
<div class="container__panel11">
<div class="container__panel11_pie">
<svg class="svg_pie" viewBox="0 0 500 400">
<circle class="pieG" cx="150" cy="55" r="40" />
<circle class="pie" cx="50%" cy="50%" r="100" />
<text class="pieText" x="50%" y="50%" text-anchor="middle" dy=".3em"></text>
</svg>
</div>
<p class="fun__fact"><strong>fun fact</strong><br>I almost wrote, i mean scribbled, over a 300 piece of
paper/sticky note, beside using Trello
and notion but I contributed to the company, of the implementations' whole revenue in quarter, <strong>
41%
</strong>alone</p>
</div>
</div>
<div class="footer">
<p class="today_date"></p>
<p class="work_date">this prez was finished at<br>16:20 on March 20 2022</p>
<div class="thanx">
<p class="thank">Thank you for your time</p>
<p class="thank">for any question or further</p>
<p class="thank">queries about the figures </p>
<p class="thank">shown above, do not hesitate </p>
<p class="thank">to ask or email me</p>
</div>
</div>
<div class="mobile">
<p class="mobile__para">this website was <strong>not</strong> meant for small-sized screen devices. <br>for the
full experience
copy the link to your clipboard and <span style="text-decoration: underline;">use it on desktop or
tablet</span>.</p>
<button data-link="https://www.taricov.com/achieved" class=" btn mobile__btn" type="button">Copy url</button>
</div>
</div>
<div class="icons">
<svg class="audio" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 287.386 287.386"
style="enable-background:new 0 0 287.386 287.386;" xml:space="preserve">
<g>
<path class="cup" d="M62.743,155.437v98.42c0,5.867,4.741,10.605,10.605,10.605c5.854,0,10.605-4.738,10.605-10.605v-98.42
c0-5.856-4.751-10.605-10.605-10.605C67.484,144.832,62.743,149.576,62.743,155.437z" />
<path class="cup"
d="M29.456,264.582h23.351v-116.85c0.064-0.56,0.166-1.119,0.166-1.693c0-50.412,40.69-91.42,90.698-91.42
c50.002,0,90.692,41.008,90.692,91.42c0,0.771,0.113,1.518,0.228,2.263v116.28h23.354c16.254,0,29.442-13.64,29.442-30.469
v-60.936c0-13.878-8.989-25.57-21.261-29.249c-1.129-66.971-55.608-121.124-122.45-121.124
c-66.86,0-121.347,54.158-122.465,121.15C8.956,147.638,0,159.32,0,173.187v60.926C0,250.932,13.187,264.582,29.456,264.582z" />
<path class="cup" d="M203.454,155.437v98.42c0,5.867,4.748,10.605,10.604,10.605s10.604-4.738,10.604-10.605v-98.42
c0-5.856-4.748-10.605-10.604-10.605C208.191,144.832,203.454,149.576,203.454,155.437z" />
</g>
</svg>
<svg class="fullscreen" viewBox="0 0 48 48" fill="none">
<path class="screen"
d="M42 8H6C4.89543 8 4 8.89543 4 10V38C4 39.1046 4.89543 40 6 40H42C43.1046 40 44 39.1046 44 38V10C44 8.89543 43.1046 8 42 8Z" />
</svg>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>
<script src="./js/script.js" type="module"></script>
</body>
</html>