-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
334 lines (329 loc) · 32.2 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;300&family=Poppins:wght@300;500&display=swap" rel="stylesheet">
<link href="https://fonts.cdnfonts.com/css/kenoky" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css"/>
<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js" type="module"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vivus/0.4.6/vivus.min.js" type="module" integrity="sha512-oUUeA7VTcWBqUJD/VYCBB4VeIE0g1pg5aRMiSUOMGnNNeCLRS39OlkcyyeJ0hYx2h3zxmIWhyKiUXKkfZ5Wryg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="icon" type="image/png" href="images/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hans portfolio.</title>
</head>
<body>
<div id="custom-cursor">
<div id="cursor-content">
<svg width="650" height="400" viewBox="0 0 650 400">
<g>
<image id="first-img" xlink:href="images/egJS.png" x="0" y="0" height="400" width="650" style="opacity: 0;"/>
<image id="second-img" xlink:href="images/MusicPlayerSmall.jpg" x="0" y="0" height="400" width="650" style="opacity: 0;"/>
<image id="third-img" xlink:href="images/Day1.PNG" x="0" y="0" height="400" width="650" style="opacity: 0;"/>
<image id="fourth-img" xlink:href="images/Day2.PNG" x="0" y="0" height="400" width="650" style="opacity: 0;"/>
<image id="fifth-img" xlink:href="images/Day3.PNG" x="0" y="0" height="400" width="650" style="opacity: 0;"/>
<image id="sixth-img" xlink:href="images/WeatherLondon.PNG" x="0" y="0" height="400" width="650" style="opacity: 0;"/>
<image id="seventh-img" xlink:href="images/SentimentFlask2.PNG" x="0" y="0" height="400" width="650" style="opacity: 0;"/>
<image id="eighth-img" xlink:href="images/PhotoGalleryDog.PNG" x="0" y="0" height="400" width="650" style="opacity: 0;"/>
</g>
</svg>
</div>
</div>
<div class="menu">
<ul class="menu-ul">
<li class="anchor-link">
<a class="link-menu underline-styling" onclick="navigateSwiper('Home');return false;" href="#" >Home</a>
</li>
<li class="anchor-link">
<a class="link-menu underline-styling" onclick="navigateSwiper('About me');return false;" href="#" >About me</a>
</li>
<li class="anchor-link">
<a class="link-menu underline-styling" onclick="navigateSwiper('Experience');return false;" href="#" >Work experience</a>
</li>
<li class="anchor-link">
<a class="link-menu underline-styling" onclick="navigateSwiper('Projects');return false;" href="#" >Projects</a>
</li>
<li class="anchor-link">
<a class="link-menu underline-styling" onclick="navigateSwiper('Badges');return false;" href="#" >Courses/Badges</a>
</li>
<li class="anchor-link">
<a class="link-menu underline-styling" onclick="navigateSwiper('Contact');return false;" href="#" >Contact me</a>
</li>
</ul>
<p class="swipe-right">
Swipe right
</p>
</div>
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide" id="frontpage">
<div id="background">
<h1>Hey There </h1>
<p>I love to code. And it's simple as that.</p>
</div>
<div class="svg-animation-logo">
<svg width="100%" height="203" id="myLogo" fill="#F3DDB6" xmlns="http://www.w3.org/2000/svg">
<path d="M74.4641 14.752C76.9601 14.752 79.0721 15.376 80.8001 16.624C82.5281 17.776 83.3921 19.216 83.3921 20.944C83.3921 24.016 82.4321 26.512 80.5121 28.432C78.5921 30.256 75.8561 31.168 72.3041 31.168C66.7361 31.168 62.5121 31.216 59.6321 31.312C59.4401 32.464 58.5761 37.648 57.0401 46.864C55.3121 57.136 54.2561 63.424 53.8721 65.728L50.8481 84.592C48.7361 98.704 47.0561 110.512 45.8081 120.016C47.8241 119.92 50.5601 119.872 54.0161 119.872C59.1041 119.872 62.5601 120.544 64.3841 121.888C66.2081 123.232 67.1201 125.248 67.1201 127.936C67.1201 130.432 66.1121 132.544 64.0961 134.272C62.1761 136 59.4401 136.864 55.8881 136.864C53.4881 136.864 49.6961 136.768 44.5121 136.576C39.7121 136.384 36.5441 136.288 35.0081 136.288C28.9601 136.288 22.3361 136.816 15.1361 137.872C11.9681 138.352 9.71213 138.592 8.36813 138.592C6.25613 138.592 4.48013 138.016 3.04013 136.864C1.60013 135.712 0.880127 134.032 0.880127 131.824C0.880127 128.368 2.41613 125.68 5.48813 123.76C8.56013 121.84 12.8801 120.832 18.4481 120.736L25.2161 120.592L25.6481 117.424C27.9521 102.064 29.6321 91.216 30.6881 84.88L33.8561 66.016C35.7761 54.88 37.5041 43.408 39.0401 31.6L26.9441 31.744C23.4881 31.744 21.0881 31.216 19.7441 30.16C18.4961 29.008 17.8721 27.424 17.8721 25.408C17.8721 18.88 22.5761 15.376 31.9841 14.896C36.4001 14.704 41.7761 14.608 48.1121 14.608L74.4641 14.752Z" stroke="#F3DDB6"/>
<path d="M97.809 50.32C95.697 50.32 94.017 49.84 92.769 48.88C91.521 47.92 90.897 46.384 90.897 44.272C90.897 43.408 91.041 42.4 91.329 41.248C92.385 36.832 93.153 32.752 93.633 29.008C94.209 25.264 94.497 21.088 94.497 16.48C94.497 11.68 95.601 7.98398 97.809 5.39198C100.113 2.79999 103.041 1.50399 106.593 1.50399C110.049 1.50399 112.641 2.46399 114.369 4.38399C116.193 6.20799 117.105 8.70399 117.105 11.872C117.105 15.232 116.097 19.696 114.081 25.264C112.065 30.832 109.617 36.256 106.737 41.536C104.817 45.088 103.281 47.44 102.129 48.592C101.073 49.744 99.633 50.32 97.809 50.32Z" stroke="#F3DDB6"/>
<path d="M125.792 136.72C122.144 136.72 119.552 134.8 118.016 130.96C116.576 127.12 115.856 120.976 115.856 112.528C115.856 100.048 117.632 88.192 121.184 76.96C122.048 74.176 123.44 72.16 125.36 70.912C127.376 69.568 130.16 68.896 133.712 68.896C135.632 68.896 136.976 69.136 137.744 69.616C138.512 70.096 138.896 71.008 138.896 72.352C138.896 73.888 138.176 77.344 136.736 82.72C135.776 86.56 135.008 89.92 134.432 92.8C133.856 95.584 133.376 99.088 132.992 103.312C135.584 95.824 138.656 89.488 142.208 84.304C145.856 79.12 149.552 75.28 153.296 72.784C157.136 70.192 160.736 68.896 164.096 68.896C167.456 68.896 169.808 69.664 171.152 71.2C172.592 72.736 173.312 75.088 173.312 78.256C173.312 81.328 172.4 86.896 170.576 94.96C169.808 98.416 169.28 101.008 168.992 102.736C172.16 94.672 175.664 88.096 179.504 83.008C183.44 77.92 187.28 74.32 191.024 72.208C194.768 70 198.224 68.896 201.392 68.896C204.464 68.896 206.768 69.712 208.304 71.344C209.936 72.88 210.752 75.184 210.752 78.256C210.752 80.752 210.224 85.456 209.168 92.368C208.208 98.224 207.44 103.792 206.864 109.072C206.288 114.256 206 120.064 206 126.496C206 130.144 205.232 132.784 203.696 134.416C202.256 135.952 199.856 136.72 196.496 136.72C193.328 136.72 191.024 135.904 189.584 134.272C188.144 132.64 187.424 130.192 187.424 126.928C187.424 123.088 188.096 116.752 189.44 107.92C190.592 100.24 191.168 95.344 191.168 93.232C191.168 91.696 190.64 90.928 189.584 90.928C188.336 90.928 186.56 92.56 184.256 95.824C181.952 98.992 179.648 103.216 177.344 108.496C175.04 113.776 173.168 119.344 171.728 125.2C170.672 129.808 169.424 132.88 167.984 134.416C166.64 135.952 164.432 136.72 161.36 136.72C158.192 136.72 155.792 135.232 154.16 132.256C152.624 129.184 151.856 125.488 151.856 121.168C151.856 117.52 152.336 112.24 153.296 105.328C154.064 99.184 154.448 95.152 154.448 93.232C154.448 91.696 153.92 90.928 152.864 90.928C151.424 90.928 149.6 92.656 147.392 96.112C145.184 99.568 143.024 103.984 140.912 109.36C138.896 114.736 137.264 120.016 136.016 125.2C134.96 129.712 133.712 132.784 132.272 134.416C130.928 135.952 128.768 136.72 125.792 136.72Z" stroke="#F3DDB6"/>
<path d="M392.49 103.888C393.738 103.888 394.698 104.464 395.37 105.616C396.138 106.768 396.522 108.352 396.522 110.368C396.522 114.112 395.61 117.088 393.786 119.296C384.282 130.912 374.154 136.72 363.402 136.72C354.09 136.72 346.65 133.12 341.082 125.92C335.514 118.72 332.73 108.4 332.73 94.96C332.73 91.696 332.874 88.432 333.162 85.168C326.826 86.32 319.914 87.184 312.426 87.76C307.434 88.144 304.026 88.384 302.202 88.48C300.282 98.272 297.594 110.272 294.138 124.48C292.122 132.832 288.282 137.008 282.618 137.008C276.474 137.008 273.402 134.224 273.402 128.656C273.402 127.408 273.642 125.68 274.122 123.472C277.386 110.32 279.978 99.184 281.898 90.064L274.986 90.352C271.818 90.352 269.514 89.824 268.074 88.768C266.634 87.616 265.914 85.792 265.914 83.296C265.914 80.128 266.826 77.824 268.65 76.384C270.474 74.848 273.498 73.984 277.722 73.792L285.354 73.504C287.85 59.968 289.098 49.648 289.098 42.544C289.098 38.032 288.426 34.96 287.082 33.328C285.738 31.696 283.962 30.88 281.754 30.88C275.034 30.88 267.45 36.496 259.002 47.728C257.754 49.36 256.362 50.176 254.826 50.176C253.482 50.176 252.33 49.552 251.37 48.304C250.41 47.056 249.93 45.472 249.93 43.552C249.93 40.576 251.13 37.408 253.53 34.048C257.754 28.192 263.082 23.392 269.514 19.648C275.946 15.808 282.474 13.888 289.098 13.888C295.338 13.888 300.138 16.048 303.498 20.368C306.954 24.592 308.682 31.216 308.682 40.24C308.682 48.208 307.53 59.008 305.226 72.64L319.338 71.92C325.386 71.632 330.57 71.152 334.89 70.48C336.618 59.92 339.258 50.032 342.81 40.816C346.362 31.6 350.778 24.112 356.058 18.352C361.338 12.592 367.242 9.71199 373.77 9.71199C378.57 9.71199 382.362 11.632 385.146 15.472C387.93 19.216 389.322 24.16 389.322 30.304C389.322 54.112 377.178 70.624 352.89 79.84C352.602 83.68 352.458 87.664 352.458 91.792C352.458 101.872 353.706 109.024 356.202 113.248C358.698 117.472 362.202 119.584 366.714 119.584C370.65 119.584 374.25 118.576 377.514 116.56C380.778 114.448 384.474 110.896 388.602 105.904C389.754 104.56 391.05 103.888 392.49 103.888ZM373.05 22.24C370.938 22.24 368.682 24.16 366.282 28C363.978 31.84 361.77 37.072 359.658 43.696C357.546 50.32 355.866 57.568 354.618 65.44C362.298 62.272 367.962 57.76 371.61 51.904C375.258 46.048 377.082 38.512 377.082 29.296C377.082 27.088 376.698 25.36 375.93 24.112C375.162 22.864 374.202 22.24 373.05 22.24Z" stroke="#F3DDB6"/>
<path d="M402.577 136.72C396.625 136.72 391.873 134.56 388.321 130.24C384.769 125.92 382.993 120.256 382.993 113.248C382.993 105.568 384.769 98.32 388.321 91.504C391.873 84.592 396.577 79.072 402.433 74.944C408.385 70.72 414.673 68.608 421.297 68.608C423.409 68.608 424.801 69.04 425.473 69.904C426.241 70.672 426.865 72.112 427.345 74.224C429.361 73.84 431.473 73.648 433.681 73.648C438.385 73.648 440.737 75.328 440.737 78.688C440.737 80.704 440.017 85.504 438.577 93.088C436.369 104.128 435.265 111.808 435.265 116.128C435.265 117.568 435.601 118.72 436.273 119.584C437.041 120.448 438.001 120.88 439.153 120.88C440.977 120.88 443.185 119.728 445.777 117.424C448.369 115.024 451.873 111.184 456.289 105.904C457.441 104.56 458.737 103.888 460.177 103.888C461.425 103.888 462.385 104.464 463.057 105.616C463.825 106.768 464.209 108.352 464.209 110.368C464.209 114.208 463.297 117.184 461.473 119.296C457.537 124.192 453.361 128.32 448.945 131.68C444.529 135.04 440.257 136.72 436.129 136.72C432.961 136.72 430.033 135.664 427.345 133.552C424.753 131.344 422.785 128.368 421.441 124.624C416.449 132.688 410.161 136.72 402.577 136.72ZM407.761 122.176C409.873 122.176 411.889 120.928 413.809 118.432C415.729 115.936 417.121 112.624 417.985 108.496L423.313 82C419.281 82.096 415.537 83.632 412.081 86.608C408.721 89.488 406.033 93.328 404.017 98.128C402.001 102.928 400.993 108.016 400.993 113.392C400.993 116.368 401.569 118.576 402.721 120.016C403.969 121.456 405.649 122.176 407.761 122.176Z" stroke="#F3DDB6"/>
<path d="M462.73 136.72C459.082 136.72 456.49 134.8 454.954 130.96C453.514 127.12 452.794 120.976 452.794 112.528C452.794 100.048 454.57 88.192 458.122 76.96C458.986 74.176 460.378 72.16 462.298 70.912C464.314 69.568 467.098 68.896 470.65 68.896C472.57 68.896 473.914 69.136 474.682 69.616C475.45 70.096 475.834 71.008 475.834 72.352C475.834 73.888 475.114 77.344 473.674 82.72C472.714 86.56 471.946 89.92 471.37 92.8C470.794 95.68 470.314 99.232 469.93 103.456C473.098 95.2 476.65 88.48 480.586 83.296C484.522 78.112 488.362 74.416 492.106 72.208C495.946 70 499.45 68.896 502.618 68.896C508.858 68.896 511.978 72.016 511.978 78.256C511.978 82 510.922 88.768 508.81 98.56C506.986 106.912 506.074 112.432 506.074 115.12C506.074 118.96 507.466 120.88 510.25 120.88C512.17 120.88 514.426 119.728 517.018 117.424C519.706 115.024 523.258 111.184 527.674 105.904C528.826 104.56 530.122 103.888 531.562 103.888C532.81 103.888 533.77 104.464 534.442 105.616C535.21 106.768 535.594 108.352 535.594 110.368C535.594 114.208 534.682 117.184 532.858 119.296C528.73 124.384 524.266 128.56 519.466 131.824C514.762 135.088 509.386 136.72 503.338 136.72C498.442 136.72 494.746 135.328 492.25 132.544C489.754 129.664 488.506 125.536 488.506 120.16C488.506 117.472 489.178 112.672 490.522 105.76C491.77 99.712 492.394 95.536 492.394 93.232C492.394 91.696 491.866 90.928 490.81 90.928C489.562 90.928 487.786 92.56 485.482 95.824C483.274 98.992 480.97 103.216 478.57 108.496C476.266 113.776 474.394 119.344 472.954 125.2C471.898 129.712 470.65 132.784 469.21 134.416C467.866 135.952 465.706 136.72 462.73 136.72Z" stroke="#F3DDB6"/>
<path d="M550.727 139.888C545.735 139.888 541.895 138.736 539.207 136.432C536.615 134.128 535.319 131.536 535.319 128.656C535.319 126.16 536.231 124 538.055 122.176C539.879 120.352 542.567 119.44 546.119 119.44C547.367 119.44 548.807 119.584 550.439 119.872C552.167 120.064 553.463 120.208 554.327 120.304C554.231 117.808 553.655 115.456 552.599 113.248C551.639 111.04 550.391 108.928 548.855 106.912C547.319 104.8 545.879 102.976 544.535 101.44C541.559 107.104 538.583 111.808 535.607 115.552C532.727 119.296 529.559 122.848 526.103 126.208C524.375 127.936 522.551 128.8 520.631 128.8C519.095 128.8 517.847 128.272 516.887 127.216C515.927 126.064 515.447 124.672 515.447 123.04C515.447 121.12 516.119 119.344 517.463 117.712L519.335 115.408C524.615 108.88 528.599 103.504 531.287 99.28C532.919 96.496 534.839 92.8 537.047 88.192C539.255 83.488 541.415 78.64 543.527 73.648C545.351 69.424 549.143 67.312 554.903 67.312C557.591 67.312 559.463 67.552 560.519 68.032C561.575 68.512 562.103 69.28 562.103 70.336C562.103 70.912 561.911 71.824 561.527 73.072C561.143 74.32 560.615 75.568 559.943 76.816C558.215 80.272 557.351 83.2 557.351 85.6C557.351 87.04 557.831 88.624 558.791 90.352C559.847 92.08 561.431 94.24 563.543 96.832C566.615 100.864 568.919 104.32 570.455 107.2C572.087 109.984 572.903 113.056 572.903 116.416C572.903 117.376 572.807 118.72 572.615 120.448C577.319 118.624 582.839 113.776 589.175 105.904C590.327 104.56 591.623 103.888 593.063 103.888C594.311 103.888 595.271 104.464 595.943 105.616C596.711 106.768 597.095 108.352 597.095 110.368C597.095 114.016 596.183 116.992 594.359 119.296C589.559 125.248 584.951 129.328 580.535 131.536C576.215 133.648 570.839 134.8 564.407 134.992C560.567 138.256 556.007 139.888 550.727 139.888Z" stroke="#F3DDB6"/>
<path d="M639.972 103.888C641.22 103.888 642.18 104.464 642.852 105.616C643.62 106.768 644.004 108.352 644.004 110.368C644.004 114.208 643.092 117.184 641.268 119.296C637.14 124.384 632.628 128.56 627.732 131.824C622.932 135.088 617.46 136.72 611.316 136.72C602.868 136.72 596.58 132.88 592.452 125.2C588.42 117.52 586.404 107.584 586.404 95.392C586.404 83.68 587.892 70.336 590.868 55.36C593.94 40.384 598.404 27.52 604.26 16.768C610.212 6.01598 617.268 0.639984 625.428 0.639984C630.036 0.639984 633.636 2.79999 636.228 7.11999C638.916 11.344 640.26 17.44 640.26 25.408C640.26 36.832 637.092 50.08 630.756 65.152C624.42 80.224 615.828 95.152 604.98 109.936C605.652 113.872 606.756 116.704 608.292 118.432C609.828 120.064 611.844 120.88 614.34 120.88C618.276 120.88 621.732 119.776 624.708 117.568C627.684 115.264 631.476 111.376 636.084 105.904C637.236 104.56 638.532 103.888 639.972 103.888ZM622.26 14.896C620.052 14.896 617.556 18.88 614.772 26.848C611.988 34.816 609.54 44.704 607.428 56.512C605.316 68.32 604.164 79.648 603.972 90.496C610.788 79.264 616.212 68.032 620.244 56.8C624.276 45.472 626.292 35.152 626.292 25.84C626.292 18.544 624.948 14.896 622.26 14.896Z" stroke="#F3DDB6"/>
<path d="M696.589 103.888C697.837 103.888 698.797 104.464 699.469 105.616C700.237 106.768 700.621 108.352 700.621 110.368C700.621 114.208 699.709 117.184 697.885 119.296C694.333 123.616 689.293 127.6 682.765 131.248C676.333 134.896 669.421 136.72 662.029 136.72C651.949 136.72 644.125 133.984 638.557 128.512C632.989 123.04 630.205 115.552 630.205 106.048C630.205 99.424 631.597 93.28 634.381 87.616C637.165 81.856 641.005 77.296 645.901 73.936C650.893 70.576 656.509 68.896 662.749 68.896C668.317 68.896 672.781 70.576 676.141 73.936C679.501 77.2 681.181 81.664 681.181 87.328C681.181 93.952 678.781 99.664 673.981 104.464C669.277 109.168 661.261 112.912 649.933 115.696C652.333 120.112 656.893 122.32 663.613 122.32C667.933 122.32 672.829 120.832 678.301 117.856C683.869 114.784 688.669 110.8 692.701 105.904C693.853 104.56 695.149 103.888 696.589 103.888ZM660.301 83.008C656.749 83.008 653.725 85.072 651.229 89.2C648.829 93.328 647.629 98.32 647.629 104.176V104.464C653.293 103.12 657.757 101.104 661.021 98.416C664.285 95.728 665.917 92.608 665.917 89.056C665.917 87.232 665.389 85.792 664.333 84.736C663.373 83.584 662.029 83.008 660.301 83.008Z" stroke="#F3DDB6"/>
<path d="M739.296 68.896C741.504 68.896 743.04 69.184 743.904 69.76C744.768 70.336 745.2 71.296 745.2 72.64C745.2 74.944 743.952 83.152 741.456 97.264C739.248 110.8 737.952 118.816 737.568 121.312C734.016 145.984 729.12 165.52 722.88 179.92C716.64 194.32 708.336 201.52 697.968 201.52C693.072 201.52 689.088 199.984 686.016 196.912C682.944 193.936 681.408 190 681.408 185.104C681.408 180.592 682.416 175.984 684.432 171.28C686.544 166.576 690.384 161.152 695.952 155.008C701.616 148.96 709.584 142 719.856 134.128L720.288 130.816C720.96 127.264 721.728 122.176 722.592 115.552C720.672 122.464 717.984 127.744 714.528 131.392C711.072 134.944 707.424 136.72 703.584 136.72C699.264 136.72 695.712 134.752 692.928 130.816C690.24 126.784 688.896 121.792 688.896 115.84C688.896 108.64 689.376 102.064 690.336 96.112C691.296 90.064 692.88 83.68 695.088 76.96C696.048 74.08 697.392 72.016 699.12 70.768C700.848 69.52 703.584 68.896 707.328 68.896C709.44 68.896 710.88 69.232 711.648 69.904C712.512 70.576 712.944 71.584 712.944 72.928C712.944 73.696 712.416 76.288 711.36 80.704C710.4 84.256 709.632 87.472 709.056 90.352C708.288 94.288 707.616 98.08 707.04 101.728C706.464 105.28 706.176 108.208 706.176 110.512C706.176 114.16 707.184 115.984 709.2 115.984C710.64 115.984 712.416 114.544 714.528 111.664C716.736 108.784 719.04 104.416 721.44 98.56C723.936 92.704 726.336 85.504 728.64 76.96C729.408 74.08 730.56 72.016 732.096 70.768C733.728 69.52 736.128 68.896 739.296 68.896ZM699.552 187.552C701.952 187.552 704.64 184.768 707.616 179.2C710.592 173.632 713.568 164.368 716.544 151.408C709.152 157.648 703.776 163.312 700.416 168.4C697.152 173.584 695.52 178.096 695.52 181.936C695.52 183.568 695.808 184.912 696.384 185.968C697.056 187.024 698.112 187.552 699.552 187.552Z" stroke="#F3DDB6"/>
</svg>
</div>
</div>
<div class="swiper-slide" id="about-me">
<h1>Hey folks</h1>
<p>I am a Software Engineer currently based in Mauritius. Haven't heard about Mauritius? It is a small island in the Indian ocean. I graduated with a first class in <span class="underline-styling">Software Engineering</span> at the University of Mauritius in 2020. Currently I'm learning React and other animation libraries which make websites more engaging. My day-to-day work is the development in the .NET stack but learning new things always help.</p>
<div id="about-me-grid">
<div id="code-spinner">
<img id="spinner" src="images/code-spinner.svg" alt="Love to code" />
</div>
<div id="characteristic">
<p>Easy to work with.</p>
<p>Love to help others.</p>
<p>Communicate as clearly as possible.</p>
<p>Love to listen to music while coding.</p>
</div>
</div>
</div>
<div class="swiper-slide" id="work-experience">
<h2>Work experience</h2>
<ul>
<li class="workplace">
<div class="swiper timelineSwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<p>Infomil <span class="timeline"> <img src="images/arrowHeart.svg" alt="timeline" />March 2021 - Present</span></p>
<div class="back-exp">
<h3>Software Engineer </h3> <span class="swiping-exp">Swipe from right to left.</span>
</div>
</div>
<div class="swiper-slide">
<ul>
<li class="exp-desc">Creation and customisation of 5+ custom controls which are used by end-users.</li>
<li class="exp-desc">Automated regression software to validate new releases of Chrome driver using .NETCore , Selenium and Specflow for a reduction of 50% in testing time which previously were done manually.</li>
<li class="exp-desc">Creation of new extensions for Visual Studio using VSIX, C# and VB.NET adopted by other teams which specialize in web development.</li>
<li class="exp-desc">Factorisation of existing codebase to meet new workflow being introduced by Visual Studio 2019.</li>
</ul>
</div>
</div>
</div>
</li>
<li class="workplace">
<div class="swiper timelineSwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<p>Spoon Consulting <span class="timeline"><img src="images/arrowHeart.svg" alt="timeline" />May 2020 - February 2021</span></p>
<div class="back-exp">
<h3>IT Consultant </h3><span class="swiping-exp">Swipe from right to left.</span>
</div>
</div>
<div class="swiper-slide">
<ul>
<li class="exp-desc">Development of extension using C# for reconciliation statement creation in Excel with data being obtained from Streamset and relational database.</li>
<li class="exp-desc">Creation of indexes, queries and plugins using Elasticsearch and Java for clients based on the requirements provided.</li>
<li class="exp-desc">Designing UI using React for a client in the telecommunication industry using Elasticsearch to query different deals based on the filters and search criteria.</li>
<li class="exp-desc">Natural language processing applications using Python to categorize documents based on a pre-defined criteria.</li>
</ul>
</div>
</div>
</div>
</li>
<li class="workplace">
<div class="swiper timelineSwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<p>Ministry of Industry <span class="timeline"><img src="images/arrowHeart.svg" alt="timeline" />May 2019 - August 2019</span></p>
<div class="back-exp">
<h3>Web Developer Intern </h3><span class="swiping-exp">Swipe from right to left.</span>
</div>
</div>
<div class="swiper-slide">
<ul>
<li class="exp-desc">Creation of the Assay Office website which focuses on gemstone authentication. The website was developed using Bootstrap, HTML,CSS, Javascript and PHP with Google Map API. See the website on the following link.</li>
<li class="exp-desc">Improvement of 2 internal websites to match updated data to allow consistency and correctness.</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="swiper-slide" id="skills">
<h1>Projects</h1>
<div id="all-projects">
<a href="https://github.com/hansleykowlessur/Codewars" target="_blank" onmouseover="showImg(1)" onmouseout="hideImg(1)">
<div class="project-title">
<p>Codewars</p>
<div class="project-arrow">
<img src="images/arrowHeart.svg" alt="Link to repo" />
</div>
</div>
<div class="project-description">
<p>
Javascript ♦ Python
</p>
</div>
</a>
<a href="https://p2oor.csb.app/" target="_blank" onmouseover="showImg(2)" onmouseout="hideImg(2)">
<div class="project-title">
<p>Music player</p>
<div class="project-arrow">
<img src="images/arrowHeart.svg" alt="Link to repo" />
</div>
</div>
<div class="project-description">
<p>
React ♦ Framer-motion
</p>
</div>
</a>
<a href="https://github.com/hansleykowlessur/Daily-UI" target="_blank" onmouseover="showImg(3)" onmouseout="hideImg(3)">
<div class="project-title">
<p>Daily UI - Day 1</p>
<div class="project-arrow">
<img src="images/arrowHeart.svg" alt="Link to repo" />
</div>
</div>
<div class="project-description">
<p>
HTML ♦ CSS
</p>
</div>
</a>
<a href="https://github.com/hansleykowlessur/Daily-UI" target="_blank" onmouseover="showImg(4)" onmouseout="hideImg(4)">
<div class="project-title">
<p>Daily UI - Day 2</p>
<div class="project-arrow">
<img src="images/arrowHeart.svg" alt="Link to repo" />
</div>
</div>
<div class="project-description">
<p>
HTML ♦ CSS
</p>
</div>
</a>
<a href="https://github.com/hansleykowlessur/Daily-UI" target="_blank" onmouseover="showImg(5)" onmouseout="hideImg(5)">
<div class="project-title">
<p>Daily UI - Day 3</p>
<div class="project-arrow">
<img src="images/arrowHeart.svg" alt="Link to repo" />
</div>
</div>
<div class="project-description">
<p>
HTML ♦ CSS
</p>
</div>
</a>
<a href="https://github.com/hansleykowlessur/weather_react" target="_blank" onmouseover="showImg(6)" onmouseout="hideImg(6)">
<div class="project-title">
<p>Weather App</p>
<div class="project-arrow">
<img src="images/arrowHeart.svg" alt="Link to repo" />
</div>
</div>
<div class="project-description">
<p>
Openweather API ♦ React ♦ Material-UI
</p>
</div>
</a>
<a href="https://github.com/hansleykowlessur/sentiment_analysis" target="_blank" onmouseover="showImg(7)" onmouseout="hideImg(7)">
<div class="project-title">
<p>Sentiment Analysis</p>
<div class="project-arrow">
<img src="images/arrowHeart.svg" alt="Link to repo" />
</div>
</div>
<div class="project-description">
<p>
Flask ♦ Python ♦ React ♦ Material-UI
</p>
</div>
</a>
<a href="https://github.com/hansleykowlessur/photo_gallery" target="_blank" onmouseover="showImg(8)" onmouseout="hideImg(8)">
<div class="project-title">
<p>Photo Gallery</p>
<div class="project-arrow">
<img src="images/arrowHeart.svg" alt="Link to repo" />
</div>
</div>
<div class="project-description">
<p>
Unsplash API ♦ React ♦ Material-UI
</p>
</div>
</a>
</div>
</div>
<div class="swiper-slide" id="badges">
<div id="badges-container">
<div id="languages-technologies">
<h1>Languages and technologies</h1>
<p>
C# ♦ .NET ♦ HTML & CSS ♦ SQL ♦ Elasticsearch ♦ React ♦ Javascript ♦ Python ♦ Tensorflow ♦ OpenCV ♦ NLP ♦ Matplotlib ♦ Agile methodology
</p>
</div>
<div class="badges-certificates">
<div id="all-badges">
<h2>Badges</h2>
<Ul>
<li>Collection of over 20 digital badges from IBM in Data Science and Machine learning on <a href="https://www.credly.com/users/hansley-kowlessur/badges" target="_blank" class="underline-styling">Credly</a></li>
<li>Certified Tensorflow developer certification on <a href="https://www.credential.net/9f6890b3-2faa-4205-b29a-dfc2de1a07c5" target="_blank" class="underline-styling">Tensorflow developer network</a></li>
</Ul>
</div>
<div id="all-certificates">
<h2>Certificates</h2>
<Ul>
<li>Coursera - Machine Learning - Stanford University</li>
<li>Coursera - Data Science Maths Skills - Stanford University</li>
<li>Edx - CS50 Introduction to Computer Science - Harvard University</li>
</Ul>
</div>
</div>
</div>
</div>
<div class="swiper-slide" id="contact-me">
<div class="contacting">
<div id="stopping-by">
<h1>Thank you for stopping by.</h1>
<div id="social-media">
<a href="https://www.linkedin.com/in/hansley-kowlessur-749685179/" class="underline-styling" target="_blank">
<p>Linkedin</p>
</a>
<a href="https://github.com/hansleykowlessur" class="underline-styling" target="_blank">
<p>GitHub</p>
</a>
</div>
</div>
<div id="contact-email">
<h2>Feel free to contact me by email</h2>
<a href="mailto:[email protected]" class="email-styling">[email protected]</a>
<P>Special thanks goes to : <a href="https://www.flaticon.com/authors/jessica-c-ribeiro" target="_blank" class="underline-styling contribution-arrows">Jéssica C Ribeiro</a> for providing the arrows from Flaticon</P>
</div>
</div>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
<div id="app"></div>
<script type="module" src="/main.js"></script>
<script type="module">
import { goToPageSwiper, hoverImg, easeoutImg } from './main.js';
// Expose functions from main.JS
window.navigateSwiper = goToPageSwiper;
window.showImg = hoverImg;
window.hideImg = easeoutImg;
</script>
</body>
</html>