-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
403 lines (397 loc) · 37.7 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
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Betina Zhou">
<meta name="description" content="Betina Zhou's Front-End Dev Portfolio presenting the range
of skills and technologies used for different projects.">
<link rel="stylesheet" href="dist/style.css">
<link rel="icon" type="image/x-icon" href="dist/favicon.ico">
<title>Betina Zhou - Front-End Development Portfolio</title>
</head>
<body class="body">
<nav class="nav">
<a href="/">
<svg class="nav__logo" viewbox="0 0 99 54" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M38.3327 9.99954C39.4198 11.7482 40.167 13.2649 40.2318 15.3726C40.2898 17.2624 40.1381 19.1957 39.9168 21.0708C39.6056 23.7086 39.1797 26.7382 38.1905 29.196" stroke="url(#paint0_linear)" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M28.2073 21.2543C31.2626 16.0738 34.6822 11.8671 40.1692 9.31628C41.5244 8.68631 47.3684 6.14309 48.0833 8.96515C48.7413 11.5624 45.632 13.9615 43.9719 15.2636C43.2666 15.8168 42.5845 16.3951 41.8989 16.9734C41.5282 17.2861 42.6459 16.352 43.049 16.0851C45.2657 14.618 49.2243 12.9742 51.3331 15.4736C53.7769 18.37 52.884 22.9389 50.814 25.7384C47.9086 29.6678 43.4542 31.321 38.9018 29.742C35.455 28.5465 32.3156 26.6898 28.7791 25.7049C26.2017 24.987 23.612 24.6696 20.9696 24.4125" stroke="url(#paint1_linear)" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M52.2215 24.7084C53.2236 24.3187 53.3623 24.3489 54.2806 23.564C54.8335 23.0914 56.7004 21.5162 56.5972 20.5609C56.5848 20.4458 56.3845 20.4331 56.2747 20.4581C55.8891 20.546 55.0719 21.1125 54.8136 21.3395C53.9249 22.1202 53.2141 23.1528 52.854 24.3009C52.2454 26.2415 53.0297 28.4855 55.3905 27.9441C57.7323 27.407 59.4056 25.2036 60.7869 23.3577" stroke="url(#paint2_linear)" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M60.6925 23.2629C62.5875 19.7742 64.007 16.0658 64.4547 12.0633C64.4791 11.846 64.7525 9.46762 64.3608 9.41984C64.1213 9.39063 63.6902 9.96833 63.5915 10.0902C63.0781 10.7243 62.6975 11.4405 62.3783 12.1949C60.7169 16.1215 59.7229 21.0088 60.1678 25.306C60.5799 29.2872 64.785 27.8137 66.9793 26.3544" stroke="url(#paint3_linear)" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M49.7159 18.0204C49.2502 18.9878 48.7909 19.8036 47.6776 20.0284C47.2052 20.1237 46.1099 20.1369 45.9709 19.4517C45.7911 18.566 46.9798 17.7877 47.5741 17.4597C48.7141 16.8304 50.0544 16.5081 51.3457 16.5185C54.928 16.5474 58.4568 18.0768 61.9145 18.8654C64.9786 19.5642 67.7704 19.5118 70.7086 18.4397" stroke="url(#paint4_linear)" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M67.7059 24.7141C68.1557 25.3873 68.6583 26.5549 67.435 26.7542C66.4585 26.9132 65.5543 26.1815 66.0064 25.1665C66.4696 24.1262 67.5299 23.711 68.4549 23.2229C69.5427 22.6488 70.6323 22.0227 71.4974 21.1175C71.7774 20.8245 72.4778 19.8598 72.1378 20.0754C71.4534 20.5094 71.1797 22.129 71.0622 22.8502C70.8988 23.8536 70.7902 24.9589 70.8407 25.9774C70.8609 26.3835 70.9095 26.9387 71.3721 27.0747C71.8769 27.2231 72.2429 26.8283 72.6731 26.6698" stroke="url(#paint5_linear)" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M72.0879 16.7915C71.5753 17.3197 70.9518 18.1093 71.7283 18.7793C72.3055 19.2773 73.1001 18.8094 73.5161 18.3419C73.8822 17.9305 74.2043 17.1839 73.7348 16.7077C73.2238 16.1894 72.5536 16.5968 71.9935 16.6967" stroke="url(#paint6_linear)" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M73.8039 27.6159C73.764 26.2851 73.7049 24.9555 73.8336 23.6273C73.9301 22.632 74.0965 21.4895 74.8984 20.8153C76.1044 19.8012 76.7894 21.3219 77.0985 22.3404C77.4043 23.3483 77.5891 24.3574 77.6018 25.4108C77.6059 25.7571 77.7291 26.1642 77.4262 26.3247" stroke="url(#paint7_linear)" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M77.3824 22.6783C78.059 22.1773 80.8867 20.0557 81.6363 21.3368C82.364 22.5803 81.6859 24.1264 81.0456 25.2202C80.7342 25.7521 80.3995 26.3014 79.9128 26.6841C79.7596 26.8045 79.1819 26.931 79.3712 26.8932C79.8681 26.794 80.49 27.0742 80.9855 27.1137C81.7889 27.1778 82.3349 26.9888 83.0268 26.6413" stroke="url(#paint8_linear)" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M87.9984 21.2069C86.0208 19.0725 82.779 21.8356 83.0299 24.3165C83.1457 25.462 83.8792 26.4995 85.1149 26.1896C86.652 25.8041 87.2315 24.2849 87.4377 22.8452C87.4763 22.5759 87.4213 21.9888 87.5435 21.7296C87.6177 21.5721 87.6127 22.0725 87.6378 22.2456C87.7364 22.9252 87.8451 23.5918 88.097 24.2342C88.5514 25.3929 90.5106 27.6891 91.6002 25.9623" stroke="url(#paint9_linear)" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M21.2482 24.3132C19.9647 24.4786 17.8119 25.1191 17.786 26.8502C17.76 28.5891 20.183 28.2207 21.1033 27.77" stroke="url(#paint10_linear)" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M38.3793 29.3857C36.4882 30.7629 34.9912 32.2102 33.6064 34.1192C32.3801 35.8097 31.0904 37.36 29.5791 38.7904C28.508 39.8041 27.3409 40.8558 25.9623 41.4038C25.5278 41.5765 24.8483 41.7799 24.4287 41.4329C23.8408 40.9468 24.2593 39.9867 24.5503 39.48C26.7733 35.6101 31.9532 36.7034 35.2814 38.0873C37.127 38.8547 38.9358 39.8409 40.9533 40.0292C43.3069 40.2488 45.2889 39.3855 47.3491 38.3953" stroke="url(#paint11_linear)" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M42.6371 26.6472C43.8422 28.7617 45.1208 30.926 45.8262 33.2844C46.1928 34.5099 46.406 35.841 46.546 37.1147C46.6621 38.1715 46.696 39.2406 46.7916 40.3002C46.8703 41.1734 46.7329 39.605 46.7306 39.5438C46.6662 37.8061 46.8076 35.9506 47.4972 34.3413C47.9524 33.2791 49.475 31.5353 49.8315 33.6734C50.0928 35.2405 49.5231 37.1229 51.0364 38.2017C51.6858 38.6647 52.5356 38.811 53.3013 38.6597C54.2052 38.481 54.6283 37.9093 55.3595 37.4352" stroke="url(#paint12_linear)" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M56.7975 32.9072C56.0922 34.1802 54.8411 36.3262 56.5666 37.4047C57.794 38.1719 59.4295 37.316 59.9813 36.084C60.4478 35.0426 60.36 33.4846 59.5613 32.618C58.8102 31.8031 57.7208 31.9954 56.7894 32.2355" stroke="url(#paint13_linear)" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M60.2576 33.6333C61.1734 33.1105 62.9363 32.2844 62.2329 34.1427C61.9118 34.9911 61.0589 36.7833 62.456 37.1792C63.8055 37.5617 64.4713 36.0604 64.6891 34.9876C64.8088 34.3978 65.1018 32.6151 64.9993 33.2084C64.7923 34.4069 64.5921 35.9803 64.8657 37.1769C64.9191 37.4107 64.8879 37.3909 64.7782 37.2259" stroke="url(#paint14_linear)" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M47.1614 38.3017C48.9815 37.967 50.7109 37.2589 52.5123 36.819C54.5084 36.3315 56.4235 36.162 58.4766 36.3634C60.4785 36.5597 62.3913 37.2237 64.3579 37.6149C67.7548 38.2907 70.8958 37.6927 74.1945 36.8248" stroke="url(#paint15_linear)" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9.12985 20.1482C9.9355 19.8156 11.5917 19.1539 10.0903 18.3296C8.74347 17.5902 7.0855 17.7665 5.80189 18.5532C4.60618 19.2861 2.98899 20.7726 3.49954 22.3924C4.13772 24.4171 6.86642 25.1186 8.47415 26.0049C11.3351 27.582 12.2963 31.8761 10.0264 34.478C7.61315 37.2442 3.28682 35.8988 0.934142 33.8691" stroke="#94EBCD" stroke-opacity="0.18" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M3.82928 14.3096C4.53515 15.6765 4.70855 17.0014 4.77618 18.4989C4.83935 19.8976 5.02466 21.2445 5.28384 22.6218C5.50117 23.7766 5.7947 24.9142 5.9471 26.0795C6.09979 27.2471 6.25702 28.4127 6.42762 29.5783C6.73451 31.6751 6.94894 33.8058 7.04703 35.9197C7.09775 37.0126 7.14016 38.1422 6.95592 39.2252" stroke="#94EBCD" stroke-opacity="0.18" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M6.81372 14.2737C7.23628 17.0282 7.34001 19.8593 7.54242 22.65C7.72073 25.1085 8.15962 27.438 8.72065 29.7974C9.1851 31.7506 9.59057 33.7044 9.80907 35.728C9.93317 36.8772 9.98367 38.0371 10.0983 39.1874" stroke="#94EBCD" stroke-opacity="0.18" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M91.0308 5.39079C91.6294 4.04089 92.4032 2.3691 94.1044 3.28505C95.1094 3.82612 95.2505 4.92268 95.1215 5.98141C94.6891 9.52994 93.2532 12.7561 92.3627 16.1665C91.7018 18.6978 91.0121 23.4378 93.8969 24.807C94.5909 25.1364 96.9141 24.9308 96.1703 25.1103C94.0503 25.6219 94.3181 28.9284 94.453 30.5375C94.7567 34.1621 96.1813 37.5113 96.57 41.1011C96.8953 44.1053 95.9186 47.5441 93.8029 49.7294C93.0265 50.5313 91.0567 52.0771 89.9107 51.8557" stroke="#94EBCD" stroke-opacity="0.18" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M17.4748 6.50631C16.8439 5.1712 16.0302 3.5185 14.3515 4.47511C13.3598 5.04021 13.2452 6.13984 13.3996 7.19516C13.9171 10.7323 15.4303 13.923 16.4025 17.311C17.1242 19.8256 17.9276 24.5476 15.0766 25.9859C14.3907 26.3319 12.0632 26.1822 12.8111 26.3437C14.9428 26.8042 14.7547 30.1162 14.6586 31.728C14.4421 35.359 13.0985 38.7414 12.7963 42.3396C12.5433 45.3506 13.6024 48.765 15.7701 50.8988C16.5655 51.6818 18.572 53.1798 19.7123 52.9308" stroke="#94EBCD" stroke-opacity="0.18" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8.55432 3.88757C9.25673 5.41471 9.95915 6.94184 10.6616 8.46898" stroke="#94EBCD" stroke-opacity="0.18" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M96.196 0.529999C97.0129 2.11379 97.757 3.73672 98.1213 5.49749" stroke="#94EBCD" stroke-opacity="0.18" stroke-linecap="round" stroke-linejoin="round"/>
<defs>
<linearGradient id="paint0_linear" x1="39.0655" y1="9.99073" x2="39.2964" y2="29.1827" gradientunits="userSpaceOnUse">
<stop stop-color="#95FFEC"/>
<stop offset="1" stop-color="#559DE0" stop-opacity="0.32"/>
</linearGradient>
<linearGradient id="paint1_linear" x1="36.716" y1="7.77165" x2="36.9882" y2="30.4002" gradientunits="userSpaceOnUse">
<stop stop-color="#95FFEC"/>
<stop offset="1" stop-color="#559DE0" stop-opacity="0.32"/>
</linearGradient>
<linearGradient id="paint2_linear" x1="56.4611" y1="20.4463" x2="56.552" y2="28.0041" gradientunits="userSpaceOnUse">
<stop stop-color="#95FFEC"/>
<stop offset="1" stop-color="#559DE0" stop-opacity="0.32"/>
</linearGradient>
<linearGradient id="paint3_linear" x1="63.3352" y1="9.43088" x2="63.5569" y2="27.864" gradientunits="userSpaceOnUse">
<stop stop-color="#95FFEC"/>
<stop offset="1" stop-color="#559DE0" stop-opacity="0.32"/>
</linearGradient>
<linearGradient id="paint4_linear" x1="58.3014" y1="16.4333" x2="58.3436" y2="19.9414" gradientunits="userSpaceOnUse">
<stop stop-color="#95FFEC"/>
<stop offset="1" stop-color="#559DE0" stop-opacity="0.32"/>
</linearGradient>
<linearGradient id="paint5_linear" x1="69.2065" y1="20.0804" x2="69.2913" y2="27.1352" gradientunits="userSpaceOnUse">
<stop stop-color="#95FFEC"/>
<stop offset="1" stop-color="#559DE0" stop-opacity="0.32"/>
</linearGradient>
<linearGradient id="paint6_linear" x1="72.651" y1="16.4556" x2="72.6814" y2="18.9883" gradientunits="userSpaceOnUse">
<stop stop-color="#95FFEC"/>
<stop offset="1" stop-color="#559DE0" stop-opacity="0.32"/>
</linearGradient>
<linearGradient id="paint7_linear" x1="75.629" y1="20.4811" x2="75.7146" y2="27.5929" gradientunits="userSpaceOnUse">
<stop stop-color="#95FFEC"/>
<stop offset="1" stop-color="#559DE0" stop-opacity="0.32"/>
</linearGradient>
<linearGradient id="paint8_linear" x1="80.1598" y1="20.9399" x2="80.2344" y2="27.139" gradientunits="userSpaceOnUse">
<stop stop-color="#95FFEC"/>
<stop offset="1" stop-color="#559DE0" stop-opacity="0.32"/>
</linearGradient>
<linearGradient id="paint9_linear" x1="87.2531" y1="20.4323" x2="87.3276" y2="26.6239" gradientunits="userSpaceOnUse">
<stop stop-color="#95FFEC"/>
<stop offset="1" stop-color="#559DE0" stop-opacity="0.32"/>
</linearGradient>
<linearGradient id="paint10_linear" x1="19.5018" y1="24.3342" x2="19.5476" y2="28.143" gradientunits="userSpaceOnUse">
<stop stop-color="#95FFEC"/>
<stop offset="1" stop-color="#559DE0" stop-opacity="0.32"/>
</linearGradient>
<linearGradient id="paint11_linear" x1="35.6184" y1="29.4189" x2="35.7636" y2="41.4932" gradientunits="userSpaceOnUse">
<stop stop-color="#95FFEC"/>
<stop offset="1" stop-color="#559DE0" stop-opacity="0.32"/>
</linearGradient>
<linearGradient id="paint12_linear" x1="48.9325" y1="26.5715" x2="49.1005" y2="40.5366" gradientunits="userSpaceOnUse">
<stop stop-color="#95FFEC"/>
<stop offset="1" stop-color="#559DE0" stop-opacity="0.32"/>
</linearGradient>
<linearGradient id="paint13_linear" x1="57.9413" y1="32.0296" x2="58.0094" y2="37.691" gradientunits="userSpaceOnUse">
<stop stop-color="#95FFEC"/>
<stop offset="1" stop-color="#559DE0" stop-opacity="0.32"/>
</linearGradient>
<linearGradient id="paint14_linear" x1="62.6346" y1="32.9828" x2="62.6874" y2="37.3775" gradientunits="userSpaceOnUse">
<stop stop-color="#95FFEC"/>
<stop offset="1" stop-color="#559DE0" stop-opacity="0.32"/>
</linearGradient>
<linearGradient id="paint15_linear" x1="60.6619" y1="36.2326" x2="60.6849" y2="38.139" gradientunits="userSpaceOnUse">
<stop stop-color="#95FFEC"/>
<stop offset="1" stop-color="#559DE0" stop-opacity="0.32"/>
</linearGradient>
</defs>
</svg>
</a>
<span id="mobileMenuBtn" class="nav__hamb-menu">≡</span>
<span id="mobileMenuCloseBtn" class="nav__hamb-menu nav__hamb-menu--close">✕</span>
<div class="nav__mobile">
<ul class="nav__mobile-list txt__nav">
<li class="nav__mobile-list--link">
<a id="aboutMob" class="about txt__nav-link" href="#">à propos</a>
</li>
<li class="nav__mobile-list--link">
<a id="projectsMob" class="projects txt__nav-link" href="#">projets</a>
</li>
<li class="nav__mobile-list--link">
<a id="contactMob" class="contact txt__nav-link" href="#">contact</a>
</li>
</ul>
</div>
<ul class="nav__list txt__nav">
<li class="nav__list--link">
<a href="#" class="about txt__nav-link">à propos</a>
</li>
<li class="nav__list--link">
<a href="#" class="projects txt__nav-link">projets</a>
</li>
<li class="nav__list--link">
<a href="#" class="contact txt__nav-link">contact</a>
</li>
</ul>
</nav>
<header class="header showPage">
<div>
<h1 class="txt__header">
<span>Portefolio d'une élève en BTS SIO</span>
<span>option: solutions logicielles et applications métiers.</span>
<span>Apprentie au ST(SI)2 au sein de la</br>
Direction générale de la Gendarmerie nationale</span>
<span>Service des technologies et des systèmes
d'information de la Sécurité intérieure</span>
</h1>
<!--<button>Les projets Pro</button>-->
</div>
<div class="header__img">
<img src="./dist/header.svg"/>
</div>
</header>
<section class="section__about-me hidePage">
<h2 class="txt__section--heading txt--fixed">{ Betina Zhou }</h2>
<div class="about-me--wrapper">
<img class="img__about-me" src="./src/client/views/media/png/profile.png">
<article>
<h3>Motivation</h3>
<p class="txt__section--p">Je m'appelle Betina et je suis en première année du BTS
SIO SLAM à l'ENSITECH. Le choix de cette formation est une réalisation de mon rêve de
pouvoir me former dans la domaine de l'informatique. Notamment en developpement des
applications, qui correspond à mes besoins de créer, mais aussi de resoudre des
problèmes qui viennent en cours de ce processus. L'apprentissage qui vient avec me donne
une énorme plaisir - les téchnologies évoluent rapidement donc l'ennui n'a pas de place.
Ceci est un aspect très important pour moi.
</p>
<h3>Apprentissage</h3>
<p class="txt__section--p">
Depuis début septembre 2021 je suis accueillie en apprentissage au sein de la Direction
Générale de la Gendarmerie Nationale. Mon travail
</p>
<h3>La suite</h3>
</article>
</div>
</section>
<section class="section__projects hidePage"><h2 class="txt__section--heading">
<span>{</span>
Projects
<span>}</span></h2><div class="projects__wrapper">
<div class="project">
<h3 class="txt__about-me--large">Web Tool - SimCredit</h3>
<p class="txt__section--p-middle">
<strong>09/2020 - 01/2021</strong>
</p>
<div class="project__link--wrapper">
<a class="txt__project-link" target="_blank" href="https://www.simcredit.fr/">live
preview</a>
<a class="txt__project-link" href="#">code not available</a>
</div>
<p class="txt__section--p-middle">Technologies & Tools:
<strong>HTML, SCSS, JavaScript, Chart.js, npm, Figma</strong>
</p>
<p class="txt__section--p-middle">Communication with REST API, bar chart.</p>
<img class="project__img" src="./src/client/views/media/png/simCredit.png">
</div>
<svg class="project__seperator" width="80" height="40" viewbox="0 0 80 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M61.7093 0.0650367C61.2202 0.0283118 60.7312 0.011087 60.3624 0.014987C60.214 0.00247449 44.6858 -1.13974 38.4686 19.3244C33.0343 37.2127 20.4452 36.4189 19.7795 36.3688C19.531 36.3688 19.2811 36.3633 19.031 36.3516C10.1545 35.9579 3.19979 28.6829 3.19979 19.7891C3.19979 10.6469 10.6372 3.2086 19.7795 3.2086C25.4467 3.2086 30.6639 6.05852 33.7358 10.8328L36.4265 9.10149C32.764 3.40782 26.5405 0.00848684 19.7796 0.00848684C8.87347 0.00881184 0 8.88228 0 19.7893C0 30.3994 8.29692 39.0792 18.8875 39.5486C19.1828 39.5619 19.4782 39.5667 19.6375 39.5626C19.6531 39.5642 19.8406 39.5782 20.1687 39.5782C22.9609 39.5782 35.9671 38.5657 41.5312 20.254C46.9656 2.36425 59.5578 3.16342 60.2203 3.20876C60.6407 3.20876 61.0595 3.22517 61.4719 3.25556C70.0672 3.89614 76.8 11.1579 76.8 19.7891C76.8 28.9314 69.3626 36.3688 60.2203 36.3688C54.5532 36.3688 49.3376 33.5189 46.2657 28.7446L43.575 30.4759C47.2374 36.1696 53.4594 39.5689 60.2203 39.5689C71.1265 39.5689 80 30.6955 80 19.7893C80 9.49247 71.9655 0.828461 61.7093 0.0650367Z" fill="#559DE0" fill-opacity="0.57"/>
</svg>
<div class="project">
<h3 class="txt__about-me--large">
Web App - Books On The Shelf</h3>
<p class="txt__section--p-middle">
<strong>01/2021 - ongoing</strong>
</p>
<div class="project__link--wrapper">
<a class="txt__project-link" target="_blank" href="https://books-on-the-shelf.herokuapp.com/">live
preview</a>
<a class="txt__project-link" href="https://github.com/zh-betina/booksOnTheShelfFrontend">code</a>
</div>
<p class="txt__section--p-middle">Technologies & Tools:
<strong>SCSS, React.js, react-router-dom, hooks, npm,
React Testing Library, SonarCloud</strong>
</p>
<p class="txt__section--p-middle">Communication with the back-end via REST API.
</p>
<img class="project__img" src="./src/client/views/media/png/bots.png">
</div>
<svg class="project__seperator" width="80" height="40" viewbox="0 0 80 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M61.7093 0.0650367C61.2202 0.0283118 60.7312 0.011087 60.3624 0.014987C60.214 0.00247449 44.6858 -1.13974 38.4686 19.3244C33.0343 37.2127 20.4452 36.4189 19.7795 36.3688C19.531 36.3688 19.2811 36.3633 19.031 36.3516C10.1545 35.9579 3.19979 28.6829 3.19979 19.7891C3.19979 10.6469 10.6372 3.2086 19.7795 3.2086C25.4467 3.2086 30.6639 6.05852 33.7358 10.8328L36.4265 9.10149C32.764 3.40782 26.5405 0.00848684 19.7796 0.00848684C8.87347 0.00881184 0 8.88228 0 19.7893C0 30.3994 8.29692 39.0792 18.8875 39.5486C19.1828 39.5619 19.4782 39.5667 19.6375 39.5626C19.6531 39.5642 19.8406 39.5782 20.1687 39.5782C22.9609 39.5782 35.9671 38.5657 41.5312 20.254C46.9656 2.36425 59.5578 3.16342 60.2203 3.20876C60.6407 3.20876 61.0595 3.22517 61.4719 3.25556C70.0672 3.89614 76.8 11.1579 76.8 19.7891C76.8 28.9314 69.3626 36.3688 60.2203 36.3688C54.5532 36.3688 49.3376 33.5189 46.2657 28.7446L43.575 30.4759C47.2374 36.1696 53.4594 39.5689 60.2203 39.5689C71.1265 39.5689 80 30.6955 80 19.7893C80 9.49247 71.9655 0.828461 61.7093 0.0650367Z" fill="#559DE0" fill-opacity="0.57"/>
</svg>
<div class="project">
<h3 class="txt__about-me--large">
Web App - Health-O-Meter</h3>
<p class="txt__section--p-middle">
<strong>09/2020 - ongoing</strong>
</p>
<div class="project__link--wrapper">
<a class="txt__project-link" target="_blank" href="http://healthometer.herokuapp.com/">live
preview</a>
<a class="txt__project-link" href="http://healthometer.herokuapp.com/">code</a>
</div>
<p class="txt__section--p-middle">Technologies & Tools:
<strong>SCSS, React.js, Material UI, react-router-dom,
hooks, npm, SonarCloud, JIRA</strong>
</p>
<p class="txt__section--p-middle">Group project. Team of Java back-end developers, UX/UI designers and a
front-end role.
</p>
<p class="txt__section--p-middle">Project functionalities still to be specified by UX/UI team.</p>
<img class="project__img" src="./src/client/views/media/png/hom.png">
</div>
<svg class="project__seperator" width="80" height="40" viewbox="0 0 80 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M61.7093 0.0650367C61.2202 0.0283118 60.7312 0.011087 60.3624 0.014987C60.214 0.00247449 44.6858 -1.13974 38.4686 19.3244C33.0343 37.2127 20.4452 36.4189 19.7795 36.3688C19.531 36.3688 19.2811 36.3633 19.031 36.3516C10.1545 35.9579 3.19979 28.6829 3.19979 19.7891C3.19979 10.6469 10.6372 3.2086 19.7795 3.2086C25.4467 3.2086 30.6639 6.05852 33.7358 10.8328L36.4265 9.10149C32.764 3.40782 26.5405 0.00848684 19.7796 0.00848684C8.87347 0.00881184 0 8.88228 0 19.7893C0 30.3994 8.29692 39.0792 18.8875 39.5486C19.1828 39.5619 19.4782 39.5667 19.6375 39.5626C19.6531 39.5642 19.8406 39.5782 20.1687 39.5782C22.9609 39.5782 35.9671 38.5657 41.5312 20.254C46.9656 2.36425 59.5578 3.16342 60.2203 3.20876C60.6407 3.20876 61.0595 3.22517 61.4719 3.25556C70.0672 3.89614 76.8 11.1579 76.8 19.7891C76.8 28.9314 69.3626 36.3688 60.2203 36.3688C54.5532 36.3688 49.3376 33.5189 46.2657 28.7446L43.575 30.4759C47.2374 36.1696 53.4594 39.5689 60.2203 39.5689C71.1265 39.5689 80 30.6955 80 19.7893C80 9.49247 71.9655 0.828461 61.7093 0.0650367Z" fill="#559DE0" fill-opacity="0.57"/>
</svg>
<div class="project">
<h3 class="txt__about-me--large">Web App - Bills Tasker</h3>
<p class="txt__section--p-middle">
<strong>02/2021</strong>
</p>
<div class="project__link--wrapper">
<a class="txt__project-link" target="_blank" href="https://bills-tasker.herokuapp.com/">live
preview</a>
<a class="txt__project-link" href="https://github.com/zh-betina/bills-tasker">code</a>
</div>
<p class="txt__section--p-middle">Technologies & Tools: React.js, CSS, ES6+, npm, Heroku</p>
<p class="txt__section--p-middle">Demo of basic routing using react-router-dom.</p>
<img class="project__img" src="./src/client/views/media/png/billsTasker.png">
</div>
<svg class="project__seperator" width="80" height="40" viewbox="0 0 80 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M61.7093 0.0650367C61.2202 0.0283118 60.7312 0.011087 60.3624 0.014987C60.214 0.00247449 44.6858 -1.13974 38.4686 19.3244C33.0343 37.2127 20.4452 36.4189 19.7795 36.3688C19.531 36.3688 19.2811 36.3633 19.031 36.3516C10.1545 35.9579 3.19979 28.6829 3.19979 19.7891C3.19979 10.6469 10.6372 3.2086 19.7795 3.2086C25.4467 3.2086 30.6639 6.05852 33.7358 10.8328L36.4265 9.10149C32.764 3.40782 26.5405 0.00848684 19.7796 0.00848684C8.87347 0.00881184 0 8.88228 0 19.7893C0 30.3994 8.29692 39.0792 18.8875 39.5486C19.1828 39.5619 19.4782 39.5667 19.6375 39.5626C19.6531 39.5642 19.8406 39.5782 20.1687 39.5782C22.9609 39.5782 35.9671 38.5657 41.5312 20.254C46.9656 2.36425 59.5578 3.16342 60.2203 3.20876C60.6407 3.20876 61.0595 3.22517 61.4719 3.25556C70.0672 3.89614 76.8 11.1579 76.8 19.7891C76.8 28.9314 69.3626 36.3688 60.2203 36.3688C54.5532 36.3688 49.3376 33.5189 46.2657 28.7446L43.575 30.4759C47.2374 36.1696 53.4594 39.5689 60.2203 39.5689C71.1265 39.5689 80 30.6955 80 19.7893C80 9.49247 71.9655 0.828461 61.7093 0.0650367Z" fill="#559DE0" fill-opacity="0.57"/>
</svg>
<div class="project">
<h3 class="txt__about-me--large">Web tool - Keep App Clone</h3>
<p class="txt__section--p-middle">
<strong>07/2020</strong>
</p>
<div class="project__link--wrapper">
<a class="txt__project-link" target="_blank" href="https://zh-betina.github.io/keep-app-clone/">live
preview</a>
<a class="txt__project-link" target="_blank" href="https://github.com/zh-betina/keep-app-clone">code</a>
</div>
<p class="txt__section--p-middle">Technologies & Tools:
<strong>HTML, SCSS, JavaScript, webpack, npm scripts</strong>
</p>
<p class="txt__section--p-middle">Characters limit per note. Grid or column preview of entries. On/off visibility for the sidebar.
</p>
<img class="project__img" src="./src/client/views/media/png/keepApp.png">
</div>
<svg class="project__seperator" width="80" height="40" viewbox="0 0 80 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M61.7093 0.0650367C61.2202 0.0283118 60.7312 0.011087 60.3624 0.014987C60.214 0.00247449 44.6858 -1.13974 38.4686 19.3244C33.0343 37.2127 20.4452 36.4189 19.7795 36.3688C19.531 36.3688 19.2811 36.3633 19.031 36.3516C10.1545 35.9579 3.19979 28.6829 3.19979 19.7891C3.19979 10.6469 10.6372 3.2086 19.7795 3.2086C25.4467 3.2086 30.6639 6.05852 33.7358 10.8328L36.4265 9.10149C32.764 3.40782 26.5405 0.00848684 19.7796 0.00848684C8.87347 0.00881184 0 8.88228 0 19.7893C0 30.3994 8.29692 39.0792 18.8875 39.5486C19.1828 39.5619 19.4782 39.5667 19.6375 39.5626C19.6531 39.5642 19.8406 39.5782 20.1687 39.5782C22.9609 39.5782 35.9671 38.5657 41.5312 20.254C46.9656 2.36425 59.5578 3.16342 60.2203 3.20876C60.6407 3.20876 61.0595 3.22517 61.4719 3.25556C70.0672 3.89614 76.8 11.1579 76.8 19.7891C76.8 28.9314 69.3626 36.3688 60.2203 36.3688C54.5532 36.3688 49.3376 33.5189 46.2657 28.7446L43.575 30.4759C47.2374 36.1696 53.4594 39.5689 60.2203 39.5689C71.1265 39.5689 80 30.6955 80 19.7893C80 9.49247 71.9655 0.828461 61.7093 0.0650367Z" fill="#559DE0" fill-opacity="0.57"/>
</svg>
<div class="project">
<h3 class="txt__about-me--large">Landing Page - Your Next Holidays</h3>
<p class="txt__section--p-middle">
<strong>06/2020</strong>
</p>
<div class="project__link--wrapper">
<a class="txt__project-link" target="_blank" href="https://zh-betina.github.io/Landing-page-ZJ/">live
preview</a>
<a class="txt__project-link" target="_blank" href="https://github.com/zh-betina/Landing-page-ZJ">code</a>
</div>
<p class="txt__section--p-middle">Technologies:
<strong>HTML, SCSS</strong>
</p>
<p class="txt__section--p-middle">Responsive. Animated on-hover buttons. Menu for smaller screens
without
JavaScript. First attempt to apply BEM methodology.</p>
<img class="project__img" src="./src/client/views/media/png/yourHolidays.png">
</div>
<svg class="project__seperator" width="80" height="40" viewbox="0 0 80 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M61.7093 0.0650367C61.2202 0.0283118 60.7312 0.011087 60.3624 0.014987C60.214 0.00247449 44.6858 -1.13974 38.4686 19.3244C33.0343 37.2127 20.4452 36.4189 19.7795 36.3688C19.531 36.3688 19.2811 36.3633 19.031 36.3516C10.1545 35.9579 3.19979 28.6829 3.19979 19.7891C3.19979 10.6469 10.6372 3.2086 19.7795 3.2086C25.4467 3.2086 30.6639 6.05852 33.7358 10.8328L36.4265 9.10149C32.764 3.40782 26.5405 0.00848684 19.7796 0.00848684C8.87347 0.00881184 0 8.88228 0 19.7893C0 30.3994 8.29692 39.0792 18.8875 39.5486C19.1828 39.5619 19.4782 39.5667 19.6375 39.5626C19.6531 39.5642 19.8406 39.5782 20.1687 39.5782C22.9609 39.5782 35.9671 38.5657 41.5312 20.254C46.9656 2.36425 59.5578 3.16342 60.2203 3.20876C60.6407 3.20876 61.0595 3.22517 61.4719 3.25556C70.0672 3.89614 76.8 11.1579 76.8 19.7891C76.8 28.9314 69.3626 36.3688 60.2203 36.3688C54.5532 36.3688 49.3376 33.5189 46.2657 28.7446L43.575 30.4759C47.2374 36.1696 53.4594 39.5689 60.2203 39.5689C71.1265 39.5689 80 30.6955 80 19.7893C80 9.49247 71.9655 0.828461 61.7093 0.0650367Z" fill="#559DE0" fill-opacity="0.57"/>
</svg>
<div class="project">
<h3 class="txt__about-me--large">Landing Page - Beauty Workshops</h3>
<p class="txt__section--p-middle">
<strong>04/2020</strong>
</p>
<div class="project__link--wrapper">
<a class="txt__project-link" target="_blank" href="https://zh-betina.github.io/UDACITY---Landing-Page/">live
preview</a>
<a class="txt__project-link" target="_blank" href="https://github.com/zh-betina/UDACITY---Landing-Page">code</a>
</div>
<p class="txt__section--p-middle">Technologies:
<strong>HTML, CSS, JavaScript</strong>
</p>
<p class="txt__section--p-middle">Responsive. Grid and Flex for layout. Dynamic navigation bar content.
Scroll-to-the-top button.</p>
<img class="project__img" src="./src/client/views/media/png/beautyWorkshops.png">
</div>
<svg class="project__seperator" width="80" height="40" viewbox="0 0 80 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M61.7093 0.0650367C61.2202 0.0283118 60.7312 0.011087 60.3624 0.014987C60.214 0.00247449 44.6858 -1.13974 38.4686 19.3244C33.0343 37.2127 20.4452 36.4189 19.7795 36.3688C19.531 36.3688 19.2811 36.3633 19.031 36.3516C10.1545 35.9579 3.19979 28.6829 3.19979 19.7891C3.19979 10.6469 10.6372 3.2086 19.7795 3.2086C25.4467 3.2086 30.6639 6.05852 33.7358 10.8328L36.4265 9.10149C32.764 3.40782 26.5405 0.00848684 19.7796 0.00848684C8.87347 0.00881184 0 8.88228 0 19.7893C0 30.3994 8.29692 39.0792 18.8875 39.5486C19.1828 39.5619 19.4782 39.5667 19.6375 39.5626C19.6531 39.5642 19.8406 39.5782 20.1687 39.5782C22.9609 39.5782 35.9671 38.5657 41.5312 20.254C46.9656 2.36425 59.5578 3.16342 60.2203 3.20876C60.6407 3.20876 61.0595 3.22517 61.4719 3.25556C70.0672 3.89614 76.8 11.1579 76.8 19.7891C76.8 28.9314 69.3626 36.3688 60.2203 36.3688C54.5532 36.3688 49.3376 33.5189 46.2657 28.7446L43.575 30.4759C47.2374 36.1696 53.4594 39.5689 60.2203 39.5689C71.1265 39.5689 80 30.6955 80 19.7893C80 9.49247 71.9655 0.828461 61.7093 0.0650367Z" fill="#559DE0" fill-opacity="0.57"/>
</svg>
<div class="project">
<h3 class="txt__about-me--large">Personal Blog Demo</h3>
<p class="txt__section--p-middle">
<strong>03/2020</strong>
</p>
<div class="project__link--wrapper">
<a class="txt__project-link" target="_blank" href="https://zh-betina.github.io/UDACITY---Personal-Blog/">live
preview</a>
<a class="txt__project-link" target="_blank" href="https://github.com/zh-betina/UDACITY---Personal-Blog">code</a>
</div>
<p class="txt__section--p-middle">Technologies:
<strong>HTML, CSS</strong>
</p>
<p class="txt__section--p-middle">Responsive. Grid and Flex for layout.</p>
<img class="project__img" src="./src/client/views/media/png/blog.png">
</div>
<svg class="project__seperator" width="80" height="40" viewbox="0 0 80 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M61.7093 0.0650367C61.2202 0.0283118 60.7312 0.011087 60.3624 0.014987C60.214 0.00247449 44.6858 -1.13974 38.4686 19.3244C33.0343 37.2127 20.4452 36.4189 19.7795 36.3688C19.531 36.3688 19.2811 36.3633 19.031 36.3516C10.1545 35.9579 3.19979 28.6829 3.19979 19.7891C3.19979 10.6469 10.6372 3.2086 19.7795 3.2086C25.4467 3.2086 30.6639 6.05852 33.7358 10.8328L36.4265 9.10149C32.764 3.40782 26.5405 0.00848684 19.7796 0.00848684C8.87347 0.00881184 0 8.88228 0 19.7893C0 30.3994 8.29692 39.0792 18.8875 39.5486C19.1828 39.5619 19.4782 39.5667 19.6375 39.5626C19.6531 39.5642 19.8406 39.5782 20.1687 39.5782C22.9609 39.5782 35.9671 38.5657 41.5312 20.254C46.9656 2.36425 59.5578 3.16342 60.2203 3.20876C60.6407 3.20876 61.0595 3.22517 61.4719 3.25556C70.0672 3.89614 76.8 11.1579 76.8 19.7891C76.8 28.9314 69.3626 36.3688 60.2203 36.3688C54.5532 36.3688 49.3376 33.5189 46.2657 28.7446L43.575 30.4759C47.2374 36.1696 53.4594 39.5689 60.2203 39.5689C71.1265 39.5689 80 30.6955 80 19.7893C80 9.49247 71.9655 0.828461 61.7093 0.0650367Z" fill="#559DE0" fill-opacity="0.57"/>
</svg>
<div class="project">
<h3 class="txt__about-me--large">Open Source - Hactoberfest 2020</h3>
<div class="project__link--wrapper">
<a class="txt__project-link" target="_blank" href="https://hacktoberfest.digitalocean.com/">official
website</a>
<a class="txt__project-link" target="_blank" href="https://github.com/deckgo/deckdeckgo/">deckdeckgo
project</a>
</div>
<p class="txt__section--p-middle">Very first time open-source participation</p>
<p class="txt__section--p-middle">Minor changes to DeckDeckGo .css file. Up-to-now still following the
project
and participating</p>
<img class="project__img" src="./src/client/views/media/png/hacktoberFest.png">
</div>
<svg class="project__seperator" width="80" height="40" viewbox="0 0 80 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M61.7093 0.0650367C61.2202 0.0283118 60.7312 0.011087 60.3624 0.014987C60.214 0.00247449 44.6858 -1.13974 38.4686 19.3244C33.0343 37.2127 20.4452 36.4189 19.7795 36.3688C19.531 36.3688 19.2811 36.3633 19.031 36.3516C10.1545 35.9579 3.19979 28.6829 3.19979 19.7891C3.19979 10.6469 10.6372 3.2086 19.7795 3.2086C25.4467 3.2086 30.6639 6.05852 33.7358 10.8328L36.4265 9.10149C32.764 3.40782 26.5405 0.00848684 19.7796 0.00848684C8.87347 0.00881184 0 8.88228 0 19.7893C0 30.3994 8.29692 39.0792 18.8875 39.5486C19.1828 39.5619 19.4782 39.5667 19.6375 39.5626C19.6531 39.5642 19.8406 39.5782 20.1687 39.5782C22.9609 39.5782 35.9671 38.5657 41.5312 20.254C46.9656 2.36425 59.5578 3.16342 60.2203 3.20876C60.6407 3.20876 61.0595 3.22517 61.4719 3.25556C70.0672 3.89614 76.8 11.1579 76.8 19.7891C76.8 28.9314 69.3626 36.3688 60.2203 36.3688C54.5532 36.3688 49.3376 33.5189 46.2657 28.7446L43.575 30.4759C47.2374 36.1696 53.4594 39.5689 60.2203 39.5689C71.1265 39.5689 80 30.6955 80 19.7893C80 9.49247 71.9655 0.828461 61.7093 0.0650367Z" fill="#559DE0" fill-opacity="0.57"/>
</svg>
<div class="project">
<h3 class="txt__about-me--large">...there is more!</h3>
<div class="project__link--wrapper">
<a class="txt__project-link" target="_blank" href="https://github.com/zh-betina/">my github</a>
</div>
<p class="txt__section--p-middle">I haven't included all projects I've been working on.</p>
<p class="txt__section--p-middle">Some of them are still under development. However, don't hesitate to
have a
look on my GH!</p>
<img class="project__img" src="./src/client/views/media/png/github.png">
</div></div></section><section class="section__contact hidePage"><h2 class="txt__section--heading">
<span>{</span>
Contact
<span>}</span></h2><div class="line-wrapper__contact">
<a href="tel:+33781577303">
<svg class="icon__tel icon__contact" width="128" height="128" viewbox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<path d="M124.382 93.9391L106.519 76.0763C100.139 69.6968 89.2942 72.2488 86.7424 80.542C84.8285 86.2839 78.4489 89.4737 72.7073 88.1975C59.9482 85.0077 42.7234 68.4208 39.5336 55.0238C37.6197 49.2819 41.4474 42.9023 47.189 40.9887C55.4825 38.4369 58.0343 27.5916 51.6547 21.2121L33.792 3.34927C28.6883 -1.11642 21.0328 -1.11642 16.5671 3.34927L4.44596 15.4704C-7.67521 28.2296 5.72188 62.0413 35.7058 92.0252C65.6898 122.009 99.5015 136.044 112.261 123.285L124.382 111.164C128.848 106.06 128.848 98.4048 124.382 93.9391Z"/>
</g>
<defs>
<clipPath id="clip0">
<rect width="128" height="128" fill="white"/>
</clipPath>
</defs>
</svg>
</a>
<a href="https://www.linkedin.com/in/betina-zh/" target="_blank">
<svg class="icon__linkedin icon__contact" fill="#000000" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 50 50" width="150px" height="150px">
<path d="M41,4H9C6.24,4,4,6.24,4,9v32c0,2.76,2.24,5,5,5h32c2.76,0,5-2.24,5-5V9C46,6.24,43.76,4,41,4z M17,20v19h-6V20H17z M11,14.47c0-1.4,1.2-2.47,3-2.47s2.93,1.07,3,2.47c0,1.4-1.12,2.53-3,2.53C12.2,17,11,15.87,11,14.47z M39,39h-6c0,0,0-9.26,0-10 c0-2-1-4-3.5-4.04h-0.08C27,24.96,26,27.02,26,29c0,0.91,0,10,0,10h-6V20h6v2.56c0,0,1.93-2.56,5.81-2.56 c3.97,0,7.19,2.73,7.19,8.26V39z"/>
</svg>
</a>
<a href="https://github.com/zh-betina" target="_blank">
<svg class="icon__github icon__contact" fill="#000000" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="120px" height="120px">
<path d="M15,3C8.373,3,3,8.373,3,15c0,5.623,3.872,10.328,9.092,11.63C12.036,26.468,12,26.28,12,26.047v-2.051 c-0.487,0-1.303,0-1.508,0c-0.821,0-1.551-0.353-1.905-1.009c-0.393-0.729-0.461-1.844-1.435-2.526 c-0.289-0.227-0.069-0.486,0.264-0.451c0.615,0.174,1.125,0.596,1.605,1.222c0.478,0.627,0.703,0.769,1.596,0.769 c0.433,0,1.081-0.025,1.691-0.121c0.328-0.833,0.895-1.6,1.588-1.962c-3.996-0.411-5.903-2.399-5.903-5.098 c0-1.162,0.495-2.286,1.336-3.233C9.053,10.647,8.706,8.73,9.435,8c1.798,0,2.885,1.166,3.146,1.481C13.477,9.174,14.461,9,15.495,9 c1.036,0,2.024,0.174,2.922,0.483C18.675,9.17,19.763,8,21.565,8c0.732,0.731,0.381,2.656,0.102,3.594 c0.836,0.945,1.328,2.066,1.328,3.226c0,2.697-1.904,4.684-5.894,5.097C18.199,20.49,19,22.1,19,23.313v2.734 c0,0.104-0.023,0.179-0.035,0.268C23.641,24.676,27,20.236,27,15C27,8.373,21.627,3,15,3z"/>
</svg>
</a>
<a href="mailto:zhou.betina@gmail.com">
<svg class="icon__mail icon__contact" fill="#000000" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 128 128" width="128px" height="128px">
<path d="M112.6,19H15.4C10.2,19,6,23.2,6,28.4c0,2.6,1.1,5.1,2.9,6.8L55,79c2.5,2.4,5.7,3.6,9,3.6s6.4-1.2,9-3.6l43-40.9v56.7 c0,3.4-2.8,6.2-6.2,6.2H18.2c-3.4,0-6.2-2.8-6.2-6.2V58c0-1.7-1.3-3-3-3s-3,1.3-3,3v36.8c0,6.7,5.5,12.2,12.2,12.2h91.7 c6.7,0,12.2-5.5,12.2-12.2V28c0-0.1,0-0.3,0-0.4C121.5,22.8,117.5,19,112.6,19z M114.9,30.9L68.8,74.7c-2.7,2.6-6.9,2.6-9.6,0 L13.1,30.9c-0.7-0.6-1.1-1.5-1.1-2.5c0-1.9,1.5-3.4,3.4-3.4h97.2c1.9,0,3.4,1.5,3.4,3.4C116,29.3,115.6,30.2,114.9,30.9z"/>
</svg>
</a></div><p class="txt--tiny">Created & Coded by Betina Zhou - 2021</p></section><script type="module" src="./src/client/js/main.js"></script></body></html>