forked from Technigo/project-portfolio
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
547 lines (496 loc) · 60.6 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
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
<!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">
<!--
<meta property = "og:title" content="Yu-Miao-Portfolio"/>
<meta property = "og:description" content="the portfolio page of Yu Miao at Technigo"/>
<meta property = "og:image" content="https://placehold.co/400"/> -->
<!--OG tags for a webpade that has video-->
<!--
<meta property = "og:type" content="video"/>
<meta property = "og:video" content="https://put -your-vodeo-link-here.com"/>
<meta property = "og:video:type" content="video/mp4"/>
<meta property = "og:video:width" content="640"/>
<meta property = "og:video:height" content="360"/>
-->
<title>Yu-Miao-Portfolio</title>
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="https://fonts.google.com/specimen/EB+Garamond">
</head>
<body>
<!--Introduction section-->
<section class="introduction">
<div class="wraptop">
<div class="toplogo-Img">
<img src="./images/toplogo.png" alt="">
</div>
<div class="introbox">
<div class="intro-detail">
<img src="./images/yupic.png" alt="">
<div class="intro-detail-title">
<h3>Yu Miao</h3>
<h2>Frontend developer</h2>
<h4> + With ambitions as a full stack developer </h4>
</div>
</div>
<div class="summarybox">
<p>I am a junior front-end developer with
a strong focus on JavaScript, React, Redux, Node.js, HTML, and CSS.
Additionally, I have a basic understanding of Java and experience
learning with MySQL and SQL. Feel free to explore my portfolio and
witness how my skills have come to life in various projects. Let's
build the future together. </p>
</div>
<div class="top-media-links">
<ul>
<li><a href="https://www.linkedin.com/in/yu-miao-0bb3b091/" target="_blank"><img
src="./images/linkedIn.png" alt="">
</a>
</li>
<li><a href="https://github.com/Yu-Miao222" target="_blank"><img src="./images/github.png"
alt="">
</a>
</li>
<!-- <li><a href=""><img src="./images/ins.png" alt="">
</a>
</li> -->
</ul>
</div>
</div>
</div>
</section>
<!--Scroll section-->
<!-- <section class="scroll"> -->
<div class="scroll-icons">
<i><svg width="23" height="34" viewBox="0 0 23 34" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21 22.5L11.5 32M11.5 32L2 22.5M11.5 32L11.5 2" stroke="#0B24F5" stroke-width="3"
stroke-linecap="round" stroke-linejoin="round" />
</svg></i>
<span>Lets scroll</span>
<!-- <hr width="76px" color="#0B24F5" size="5px" /> -->
</div>
<!-- </section> -->
<!--Tech information section-->
<section class="tech" id="tech">
<h2>Tech</h2>
<div class="tech-text" id="tech-text">
<p>HTML, CSS, Flexbox, <span class="spanJs"> JavaScript,</span> ES6, JSX, <span class="spanRe">React,</span>
React Hooks, Redux, Node.js, Mongo DB, Web Accessibly,
API:s, mob-programming, <span class="spanPp">pair-programming,</span> Github.</p>
</div>
</section>
<!--Featured projects section-->
<section class="featured-projects">
<h2>Featured Projects</h2>
<!--project1-->
<div class="project">
<div class="projectImg">
<img src="./images/chatbotimg.png" alt="">
</div>
<div class="project-details">
<h2>Chatbot built in Javascript</h2>
<p>The chat bot app is a conversational AI-powered tool designed to enhance user experience by providing
instant, personalized, and automated responses to user inquiries.</p>
<div class="javascriptBtn">
<span>HTML5</span>
<span>CSS3</span>
<span>Javascript</span>
<span>Node</span>
</div>
<div class="BtnBox">
<button class="viewCodeBtn">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M10.6452 25.7684C10.6452 25.6363 10.5161 25.5042 10.3226 25.5042C10.129 25.5042 10 25.6363 10 25.7684C10 25.9006 10.129 26.0327 10.3226 25.9667C10.5161 25.9667 10.6452 25.9006 10.6452 25.7684ZM8.64516 25.4381C8.64516 25.5702 8.77419 25.7684 8.96774 25.7684C9.09677 25.8345 9.29032 25.7684 9.35484 25.6363C9.35484 25.5042 9.29032 25.372 9.09677 25.3059C8.90323 25.2399 8.70968 25.3059 8.64516 25.4381ZM11.5484 25.372C11.3548 25.372 11.2258 25.5042 11.2258 25.7024C11.2258 25.8345 11.4194 25.9006 11.6129 25.8345C11.8065 25.7684 11.9355 25.7024 11.871 25.5702C11.871 25.4381 11.6774 25.3059 11.5484 25.372ZM15.7419 0C6.83871 0 0 7.00373 0 16.1218C0 23.4559 4.45161 29.7328 10.9032 31.9793C11.7419 32.1115 12 31.5829 12 31.1864C12 30.7239 12 28.4774 12 27.0899C12 27.0899 7.48387 28.081 6.51613 25.1077C6.51613 25.1077 5.80645 23.1916 4.77419 22.7291C4.77419 22.7291 3.29032 21.6719 4.83871 21.6719C4.83871 21.6719 6.45161 21.8041 7.35484 23.3898C8.77419 25.9667 11.0968 25.2399 12.0645 24.7774C12.1935 23.7202 12.5806 22.9934 13.0968 22.5309C9.48387 22.1344 5.80645 21.6059 5.80645 15.2629C5.80645 13.4128 6.32258 12.5539 7.35484 11.3645C7.16129 10.902 6.64516 9.18414 7.54839 6.87159C8.83871 6.47515 12 8.65556 12 8.65556C13.2903 8.25912 14.6452 8.12697 16 8.12697C17.4194 8.12697 18.7742 8.25912 20.0645 8.65556C20.0645 8.65556 23.1613 6.40908 24.5161 6.87159C25.4194 9.18414 24.8387 10.902 24.7097 11.3645C25.7419 12.5539 26.3871 13.4128 26.3871 15.2629C26.3871 21.6059 22.5806 22.1344 18.9677 22.5309C19.5484 23.0595 20.0645 24.0506 20.0645 25.6363C20.0645 27.8167 20 30.5918 20 31.1204C20 31.5829 20.3226 32.1115 21.1613 31.9132C27.6129 29.7328 32 23.4559 32 16.1218C32 7.00373 24.7097 0 15.7419 0ZM6.25806 22.7952C6.12903 22.8612 6.19355 23.0595 6.25806 23.1916C6.3871 23.2577 6.51613 23.3237 6.64516 23.2577C6.70968 23.1916 6.70968 22.9934 6.58065 22.8612C6.45161 22.7952 6.32258 22.7291 6.25806 22.7952ZM5.54839 22.2666C5.48387 22.3987 5.54839 22.4648 5.67742 22.5309C5.80645 22.5969 5.93548 22.5969 6 22.4648C6 22.3987 5.93548 22.3327 5.80645 22.2666C5.67742 22.2005 5.6129 22.2005 5.54839 22.2666ZM7.6129 24.6452C7.54839 24.7113 7.54839 24.9095 7.74194 25.0416C7.87097 25.1738 8.06452 25.2399 8.12903 25.1077C8.19355 25.0416 8.19355 24.8434 8.06452 24.7113C7.93548 24.5791 7.74194 24.5131 7.6129 24.6452ZM6.90323 23.6541C6.77419 23.7202 6.77419 23.9184 6.90323 24.0506C7.03226 24.1827 7.16129 24.2488 7.29032 24.1827C7.35484 24.1166 7.35484 23.9184 7.29032 23.7863C7.16129 23.6541 7.03226 23.588 6.90323 23.6541Z"
fill="black" />
</svg>
<a href="https://github.com/Yu-Miao222/project-chatbot" target="_blank">View the code</a>
</button>
<button class="liveDemoBtn">
<svg width="31" height="31" viewBox="0 0 31 31" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M15.495 30.99C23.97 30.99 30.99 23.985 30.99 15.495C30.99 7.02 23.97 0 15.48 0C7.005 0 0 7.02 0 15.495C0 23.985 7.02 30.99 15.495 30.99ZM6.465 6.06C7.965 4.635 9.78 3.54 11.805 2.94C10.74 4.005 9.84 5.50501 9.165 7.335C8.115 7.005 7.21501 6.57 6.465 6.06ZM19.2001 2.955C21.21 3.555 23.025 4.635 24.51 6.06C23.775 6.58499 22.8751 7.005 21.825 7.35C21.15 5.50501 20.25 4.005 19.2001 2.955ZM16.545 3.435C17.79 4.035 18.93 5.655 19.74 7.86C18.75 8.03999 17.685 8.14501 16.545 8.19V3.435ZM11.25 7.86C12.075 5.655 13.2001 4.035 14.445 3.435V8.19C13.305 8.14501 12.24 8.03999 11.25 7.86ZM2.445 14.4451C2.65501 11.895 3.61501 9.54 5.085 7.605C6 8.27999 7.185 8.86501 8.565 9.3C8.17501 10.86 7.92 12.5999 7.845 14.4451H2.445ZM23.145 14.4451C23.07 12.5999 22.815 10.86 22.425 9.3C23.805 8.86501 24.99 8.295 25.89 7.605C27.375 9.54 28.335 11.895 28.545 14.4451H23.145ZM9.99 14.4451C10.065 12.81 10.29 11.25 10.635 9.83999C11.835 10.08 13.1099 10.23 14.445 10.29V14.4451H9.99ZM16.545 14.4451V10.29C17.88 10.23 19.155 10.08 20.355 9.83999C20.7 11.25 20.925 12.81 21 14.4451H16.545ZM2.445 16.545H7.845C7.92 18.42 8.17501 20.175 8.565 21.75C7.2 22.185 6.03 22.755 5.13 23.43C3.63 21.4799 2.65501 19.11 2.445 16.545ZM9.99 16.545H14.445V20.775C13.125 20.835 11.835 20.985 10.65 21.21C10.29 19.785 10.05 18.195 9.99 16.545ZM16.545 20.775V16.545H21C20.94 18.195 20.7 19.785 20.34 21.21C19.155 20.985 17.88 20.835 16.545 20.775ZM22.425 21.75C22.83 20.175 23.07 18.42 23.145 16.545H28.545C28.335 19.11 27.3601 21.4799 25.86 23.43C24.9601 22.755 23.79 22.185 22.425 21.75ZM16.545 22.875C17.6699 22.9199 18.735 23.025 19.71 23.205C18.9 25.365 17.775 26.97 16.545 27.555V22.875ZM11.28 23.205C12.255 23.025 13.32 22.9199 14.445 22.875V27.555C13.215 26.97 12.09 25.365 11.28 23.205ZM6.50999 24.975C7.245 24.465 8.145 24.0451 9.18 23.715C9.85501 25.515 10.74 26.985 11.775 28.035C9.795 27.435 7.995 26.3701 6.50999 24.975ZM21.81 23.715C22.845 24.0451 23.745 24.465 24.4801 24.975C22.995 26.3701 21.1949 27.435 19.215 28.035C20.25 26.985 21.135 25.515 21.81 23.715Z"
fill="black" />
</svg>
<a href="https://h-hotelchatbot.netlify.app/" target="_blank"> Live demo</a>
</button>
</div>
</div>
</div>
<!--project2-->
<div class="project">
<div class="projectImg">
<img src="./images/weatherapp.png" alt="">
</div>
<div class="project-details">
<h2>Weather app</h2>
<p>The weather app is designed to provide real-time weather information to users.
It allows users to quickly and easily check the current weather conditions,
as well as the weather forecast for the next few days, a project that focuses on learning how to fetch data from an API,
manipulate the DOM to display the information. <p>
<div class="javascriptBtn">
<span>HTML5</span>
<span>CSS3</span>
<span>Javascript</span>
<span>Node</span>
</div>
<div class="BtnBox">
<button class="viewCodeBtn">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M10.6452 25.7684C10.6452 25.6363 10.5161 25.5042 10.3226 25.5042C10.129 25.5042 10 25.6363 10 25.7684C10 25.9006 10.129 26.0327 10.3226 25.9667C10.5161 25.9667 10.6452 25.9006 10.6452 25.7684ZM8.64516 25.4381C8.64516 25.5702 8.77419 25.7684 8.96774 25.7684C9.09677 25.8345 9.29032 25.7684 9.35484 25.6363C9.35484 25.5042 9.29032 25.372 9.09677 25.3059C8.90323 25.2399 8.70968 25.3059 8.64516 25.4381ZM11.5484 25.372C11.3548 25.372 11.2258 25.5042 11.2258 25.7024C11.2258 25.8345 11.4194 25.9006 11.6129 25.8345C11.8065 25.7684 11.9355 25.7024 11.871 25.5702C11.871 25.4381 11.6774 25.3059 11.5484 25.372ZM15.7419 0C6.83871 0 0 7.00373 0 16.1218C0 23.4559 4.45161 29.7328 10.9032 31.9793C11.7419 32.1115 12 31.5829 12 31.1864C12 30.7239 12 28.4774 12 27.0899C12 27.0899 7.48387 28.081 6.51613 25.1077C6.51613 25.1077 5.80645 23.1916 4.77419 22.7291C4.77419 22.7291 3.29032 21.6719 4.83871 21.6719C4.83871 21.6719 6.45161 21.8041 7.35484 23.3898C8.77419 25.9667 11.0968 25.2399 12.0645 24.7774C12.1935 23.7202 12.5806 22.9934 13.0968 22.5309C9.48387 22.1344 5.80645 21.6059 5.80645 15.2629C5.80645 13.4128 6.32258 12.5539 7.35484 11.3645C7.16129 10.902 6.64516 9.18414 7.54839 6.87159C8.83871 6.47515 12 8.65556 12 8.65556C13.2903 8.25912 14.6452 8.12697 16 8.12697C17.4194 8.12697 18.7742 8.25912 20.0645 8.65556C20.0645 8.65556 23.1613 6.40908 24.5161 6.87159C25.4194 9.18414 24.8387 10.902 24.7097 11.3645C25.7419 12.5539 26.3871 13.4128 26.3871 15.2629C26.3871 21.6059 22.5806 22.1344 18.9677 22.5309C19.5484 23.0595 20.0645 24.0506 20.0645 25.6363C20.0645 27.8167 20 30.5918 20 31.1204C20 31.5829 20.3226 32.1115 21.1613 31.9132C27.6129 29.7328 32 23.4559 32 16.1218C32 7.00373 24.7097 0 15.7419 0ZM6.25806 22.7952C6.12903 22.8612 6.19355 23.0595 6.25806 23.1916C6.3871 23.2577 6.51613 23.3237 6.64516 23.2577C6.70968 23.1916 6.70968 22.9934 6.58065 22.8612C6.45161 22.7952 6.32258 22.7291 6.25806 22.7952ZM5.54839 22.2666C5.48387 22.3987 5.54839 22.4648 5.67742 22.5309C5.80645 22.5969 5.93548 22.5969 6 22.4648C6 22.3987 5.93548 22.3327 5.80645 22.2666C5.67742 22.2005 5.6129 22.2005 5.54839 22.2666ZM7.6129 24.6452C7.54839 24.7113 7.54839 24.9095 7.74194 25.0416C7.87097 25.1738 8.06452 25.2399 8.12903 25.1077C8.19355 25.0416 8.19355 24.8434 8.06452 24.7113C7.93548 24.5791 7.74194 24.5131 7.6129 24.6452ZM6.90323 23.6541C6.77419 23.7202 6.77419 23.9184 6.90323 24.0506C7.03226 24.1827 7.16129 24.2488 7.29032 24.1827C7.35484 24.1166 7.35484 23.9184 7.29032 23.7863C7.16129 23.6541 7.03226 23.588 6.90323 23.6541Z"
fill="black" />
</svg>
<a href="https://github.com/Yu-Miao222/project-weather-app" target="_blank">View the code</a>
</button>
<button class="liveDemoBtn">
<svg width="31" height="31" viewBox="0 0 31 31" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M15.495 30.99C23.97 30.99 30.99 23.985 30.99 15.495C30.99 7.02 23.97 0 15.48 0C7.005 0 0 7.02 0 15.495C0 23.985 7.02 30.99 15.495 30.99ZM6.465 6.06C7.965 4.635 9.78 3.54 11.805 2.94C10.74 4.005 9.84 5.50501 9.165 7.335C8.115 7.005 7.21501 6.57 6.465 6.06ZM19.2001 2.955C21.21 3.555 23.025 4.635 24.51 6.06C23.775 6.58499 22.8751 7.005 21.825 7.35C21.15 5.50501 20.25 4.005 19.2001 2.955ZM16.545 3.435C17.79 4.035 18.93 5.655 19.74 7.86C18.75 8.03999 17.685 8.14501 16.545 8.19V3.435ZM11.25 7.86C12.075 5.655 13.2001 4.035 14.445 3.435V8.19C13.305 8.14501 12.24 8.03999 11.25 7.86ZM2.445 14.4451C2.65501 11.895 3.61501 9.54 5.085 7.605C6 8.27999 7.185 8.86501 8.565 9.3C8.17501 10.86 7.92 12.5999 7.845 14.4451H2.445ZM23.145 14.4451C23.07 12.5999 22.815 10.86 22.425 9.3C23.805 8.86501 24.99 8.295 25.89 7.605C27.375 9.54 28.335 11.895 28.545 14.4451H23.145ZM9.99 14.4451C10.065 12.81 10.29 11.25 10.635 9.83999C11.835 10.08 13.1099 10.23 14.445 10.29V14.4451H9.99ZM16.545 14.4451V10.29C17.88 10.23 19.155 10.08 20.355 9.83999C20.7 11.25 20.925 12.81 21 14.4451H16.545ZM2.445 16.545H7.845C7.92 18.42 8.17501 20.175 8.565 21.75C7.2 22.185 6.03 22.755 5.13 23.43C3.63 21.4799 2.65501 19.11 2.445 16.545ZM9.99 16.545H14.445V20.775C13.125 20.835 11.835 20.985 10.65 21.21C10.29 19.785 10.05 18.195 9.99 16.545ZM16.545 20.775V16.545H21C20.94 18.195 20.7 19.785 20.34 21.21C19.155 20.985 17.88 20.835 16.545 20.775ZM22.425 21.75C22.83 20.175 23.07 18.42 23.145 16.545H28.545C28.335 19.11 27.3601 21.4799 25.86 23.43C24.9601 22.755 23.79 22.185 22.425 21.75ZM16.545 22.875C17.6699 22.9199 18.735 23.025 19.71 23.205C18.9 25.365 17.775 26.97 16.545 27.555V22.875ZM11.28 23.205C12.255 23.025 13.32 22.9199 14.445 22.875V27.555C13.215 26.97 12.09 25.365 11.28 23.205ZM6.50999 24.975C7.245 24.465 8.145 24.0451 9.18 23.715C9.85501 25.515 10.74 26.985 11.775 28.035C9.795 27.435 7.995 26.3701 6.50999 24.975ZM21.81 23.715C22.845 24.0451 23.745 24.465 24.4801 24.975C22.995 26.3701 21.1949 27.435 19.215 28.035C20.25 26.985 21.135 25.515 21.81 23.715Z"
fill="black" />
</svg>
<a href="https://weatherforecastbylt-ym.netlify.app/" target="_blank"> Live demo</a>
</button>
</div>
</div>
</div>
<!--project3-->
<div class="project">
<div class="projectImg">
<img src="./images/guesswho.png" alt="">
</div>
<div class="project-details">
<h2>Guess who the game</h2>
<p>The Guess Who game is a project that aims to create a fun and interactive digital version of the classic character guessing board game.
The game involves selecting a character from a list of options, and then attempting to guess the opponent's chosen character by asking
a series of yes-or-no questions.</p>
<div class="javascriptBtn">
<span>HTML5</span>
<span>CSS3</span>
<span>Javascript</span>
<span>Node</span>
</div>
<div class="BtnBox">
<button class="viewCodeBtn">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M10.6452 25.7684C10.6452 25.6363 10.5161 25.5042 10.3226 25.5042C10.129 25.5042 10 25.6363 10 25.7684C10 25.9006 10.129 26.0327 10.3226 25.9667C10.5161 25.9667 10.6452 25.9006 10.6452 25.7684ZM8.64516 25.4381C8.64516 25.5702 8.77419 25.7684 8.96774 25.7684C9.09677 25.8345 9.29032 25.7684 9.35484 25.6363C9.35484 25.5042 9.29032 25.372 9.09677 25.3059C8.90323 25.2399 8.70968 25.3059 8.64516 25.4381ZM11.5484 25.372C11.3548 25.372 11.2258 25.5042 11.2258 25.7024C11.2258 25.8345 11.4194 25.9006 11.6129 25.8345C11.8065 25.7684 11.9355 25.7024 11.871 25.5702C11.871 25.4381 11.6774 25.3059 11.5484 25.372ZM15.7419 0C6.83871 0 0 7.00373 0 16.1218C0 23.4559 4.45161 29.7328 10.9032 31.9793C11.7419 32.1115 12 31.5829 12 31.1864C12 30.7239 12 28.4774 12 27.0899C12 27.0899 7.48387 28.081 6.51613 25.1077C6.51613 25.1077 5.80645 23.1916 4.77419 22.7291C4.77419 22.7291 3.29032 21.6719 4.83871 21.6719C4.83871 21.6719 6.45161 21.8041 7.35484 23.3898C8.77419 25.9667 11.0968 25.2399 12.0645 24.7774C12.1935 23.7202 12.5806 22.9934 13.0968 22.5309C9.48387 22.1344 5.80645 21.6059 5.80645 15.2629C5.80645 13.4128 6.32258 12.5539 7.35484 11.3645C7.16129 10.902 6.64516 9.18414 7.54839 6.87159C8.83871 6.47515 12 8.65556 12 8.65556C13.2903 8.25912 14.6452 8.12697 16 8.12697C17.4194 8.12697 18.7742 8.25912 20.0645 8.65556C20.0645 8.65556 23.1613 6.40908 24.5161 6.87159C25.4194 9.18414 24.8387 10.902 24.7097 11.3645C25.7419 12.5539 26.3871 13.4128 26.3871 15.2629C26.3871 21.6059 22.5806 22.1344 18.9677 22.5309C19.5484 23.0595 20.0645 24.0506 20.0645 25.6363C20.0645 27.8167 20 30.5918 20 31.1204C20 31.5829 20.3226 32.1115 21.1613 31.9132C27.6129 29.7328 32 23.4559 32 16.1218C32 7.00373 24.7097 0 15.7419 0ZM6.25806 22.7952C6.12903 22.8612 6.19355 23.0595 6.25806 23.1916C6.3871 23.2577 6.51613 23.3237 6.64516 23.2577C6.70968 23.1916 6.70968 22.9934 6.58065 22.8612C6.45161 22.7952 6.32258 22.7291 6.25806 22.7952ZM5.54839 22.2666C5.48387 22.3987 5.54839 22.4648 5.67742 22.5309C5.80645 22.5969 5.93548 22.5969 6 22.4648C6 22.3987 5.93548 22.3327 5.80645 22.2666C5.67742 22.2005 5.6129 22.2005 5.54839 22.2666ZM7.6129 24.6452C7.54839 24.7113 7.54839 24.9095 7.74194 25.0416C7.87097 25.1738 8.06452 25.2399 8.12903 25.1077C8.19355 25.0416 8.19355 24.8434 8.06452 24.7113C7.93548 24.5791 7.74194 24.5131 7.6129 24.6452ZM6.90323 23.6541C6.77419 23.7202 6.77419 23.9184 6.90323 24.0506C7.03226 24.1827 7.16129 24.2488 7.29032 24.1827C7.35484 24.1166 7.35484 23.9184 7.29032 23.7863C7.16129 23.6541 7.03226 23.588 6.90323 23.6541Z"
fill="black" />
</svg>
<a href="https://github.com/Yu-Miao222/project-guess-who" target="_blank">View the code</a>
</button>
<button class="liveDemoBtn">
<svg width="31" height="31" viewBox="0 0 31 31" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M15.495 30.99C23.97 30.99 30.99 23.985 30.99 15.495C30.99 7.02 23.97 0 15.48 0C7.005 0 0 7.02 0 15.495C0 23.985 7.02 30.99 15.495 30.99ZM6.465 6.06C7.965 4.635 9.78 3.54 11.805 2.94C10.74 4.005 9.84 5.50501 9.165 7.335C8.115 7.005 7.21501 6.57 6.465 6.06ZM19.2001 2.955C21.21 3.555 23.025 4.635 24.51 6.06C23.775 6.58499 22.8751 7.005 21.825 7.35C21.15 5.50501 20.25 4.005 19.2001 2.955ZM16.545 3.435C17.79 4.035 18.93 5.655 19.74 7.86C18.75 8.03999 17.685 8.14501 16.545 8.19V3.435ZM11.25 7.86C12.075 5.655 13.2001 4.035 14.445 3.435V8.19C13.305 8.14501 12.24 8.03999 11.25 7.86ZM2.445 14.4451C2.65501 11.895 3.61501 9.54 5.085 7.605C6 8.27999 7.185 8.86501 8.565 9.3C8.17501 10.86 7.92 12.5999 7.845 14.4451H2.445ZM23.145 14.4451C23.07 12.5999 22.815 10.86 22.425 9.3C23.805 8.86501 24.99 8.295 25.89 7.605C27.375 9.54 28.335 11.895 28.545 14.4451H23.145ZM9.99 14.4451C10.065 12.81 10.29 11.25 10.635 9.83999C11.835 10.08 13.1099 10.23 14.445 10.29V14.4451H9.99ZM16.545 14.4451V10.29C17.88 10.23 19.155 10.08 20.355 9.83999C20.7 11.25 20.925 12.81 21 14.4451H16.545ZM2.445 16.545H7.845C7.92 18.42 8.17501 20.175 8.565 21.75C7.2 22.185 6.03 22.755 5.13 23.43C3.63 21.4799 2.65501 19.11 2.445 16.545ZM9.99 16.545H14.445V20.775C13.125 20.835 11.835 20.985 10.65 21.21C10.29 19.785 10.05 18.195 9.99 16.545ZM16.545 20.775V16.545H21C20.94 18.195 20.7 19.785 20.34 21.21C19.155 20.985 17.88 20.835 16.545 20.775ZM22.425 21.75C22.83 20.175 23.07 18.42 23.145 16.545H28.545C28.335 19.11 27.3601 21.4799 25.86 23.43C24.9601 22.755 23.79 22.185 22.425 21.75ZM16.545 22.875C17.6699 22.9199 18.735 23.025 19.71 23.205C18.9 25.365 17.775 26.97 16.545 27.555V22.875ZM11.28 23.205C12.255 23.025 13.32 22.9199 14.445 22.875V27.555C13.215 26.97 12.09 25.365 11.28 23.205ZM6.50999 24.975C7.245 24.465 8.145 24.0451 9.18 23.715C9.85501 25.515 10.74 26.985 11.775 28.035C9.795 27.435 7.995 26.3701 6.50999 24.975ZM21.81 23.715C22.845 24.0451 23.745 24.465 24.4801 24.975C22.995 26.3701 21.1949 27.435 19.215 28.035C20.25 26.985 21.135 25.515 21.81 23.715Z"
fill="black" />
</svg>
<a href="https://yu-miao-project-guess-who.netlify.app/" target="_blank"> Live demo</a>
</button>
</div>
</div>
</div>
<!--project4-->
<div class="project">
<div class="projectImg">
<img src="./images/musicrelease.png" alt="">
</div>
<div class="project-details">
<h2>Music Releases</h2>
<p>Music Releases is a project that provides users with information on various music releases,
including details such as release date, tracklist, and album art. The project also features a curated selection of playlists,
offering users a variety of options for discovering new music.</p>
<div class="javascriptBtn">
<span>HTML5</span>
<span>CSS3</span>
<span>React</span>
<span>Node</span>
</div>
<div class="BtnBox">
<button class="viewCodeBtn">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M10.6452 25.7684C10.6452 25.6363 10.5161 25.5042 10.3226 25.5042C10.129 25.5042 10 25.6363 10 25.7684C10 25.9006 10.129 26.0327 10.3226 25.9667C10.5161 25.9667 10.6452 25.9006 10.6452 25.7684ZM8.64516 25.4381C8.64516 25.5702 8.77419 25.7684 8.96774 25.7684C9.09677 25.8345 9.29032 25.7684 9.35484 25.6363C9.35484 25.5042 9.29032 25.372 9.09677 25.3059C8.90323 25.2399 8.70968 25.3059 8.64516 25.4381ZM11.5484 25.372C11.3548 25.372 11.2258 25.5042 11.2258 25.7024C11.2258 25.8345 11.4194 25.9006 11.6129 25.8345C11.8065 25.7684 11.9355 25.7024 11.871 25.5702C11.871 25.4381 11.6774 25.3059 11.5484 25.372ZM15.7419 0C6.83871 0 0 7.00373 0 16.1218C0 23.4559 4.45161 29.7328 10.9032 31.9793C11.7419 32.1115 12 31.5829 12 31.1864C12 30.7239 12 28.4774 12 27.0899C12 27.0899 7.48387 28.081 6.51613 25.1077C6.51613 25.1077 5.80645 23.1916 4.77419 22.7291C4.77419 22.7291 3.29032 21.6719 4.83871 21.6719C4.83871 21.6719 6.45161 21.8041 7.35484 23.3898C8.77419 25.9667 11.0968 25.2399 12.0645 24.7774C12.1935 23.7202 12.5806 22.9934 13.0968 22.5309C9.48387 22.1344 5.80645 21.6059 5.80645 15.2629C5.80645 13.4128 6.32258 12.5539 7.35484 11.3645C7.16129 10.902 6.64516 9.18414 7.54839 6.87159C8.83871 6.47515 12 8.65556 12 8.65556C13.2903 8.25912 14.6452 8.12697 16 8.12697C17.4194 8.12697 18.7742 8.25912 20.0645 8.65556C20.0645 8.65556 23.1613 6.40908 24.5161 6.87159C25.4194 9.18414 24.8387 10.902 24.7097 11.3645C25.7419 12.5539 26.3871 13.4128 26.3871 15.2629C26.3871 21.6059 22.5806 22.1344 18.9677 22.5309C19.5484 23.0595 20.0645 24.0506 20.0645 25.6363C20.0645 27.8167 20 30.5918 20 31.1204C20 31.5829 20.3226 32.1115 21.1613 31.9132C27.6129 29.7328 32 23.4559 32 16.1218C32 7.00373 24.7097 0 15.7419 0ZM6.25806 22.7952C6.12903 22.8612 6.19355 23.0595 6.25806 23.1916C6.3871 23.2577 6.51613 23.3237 6.64516 23.2577C6.70968 23.1916 6.70968 22.9934 6.58065 22.8612C6.45161 22.7952 6.32258 22.7291 6.25806 22.7952ZM5.54839 22.2666C5.48387 22.3987 5.54839 22.4648 5.67742 22.5309C5.80645 22.5969 5.93548 22.5969 6 22.4648C6 22.3987 5.93548 22.3327 5.80645 22.2666C5.67742 22.2005 5.6129 22.2005 5.54839 22.2666ZM7.6129 24.6452C7.54839 24.7113 7.54839 24.9095 7.74194 25.0416C7.87097 25.1738 8.06452 25.2399 8.12903 25.1077C8.19355 25.0416 8.19355 24.8434 8.06452 24.7113C7.93548 24.5791 7.74194 24.5131 7.6129 24.6452ZM6.90323 23.6541C6.77419 23.7202 6.77419 23.9184 6.90323 24.0506C7.03226 24.1827 7.16129 24.2488 7.29032 24.1827C7.35484 24.1166 7.35484 23.9184 7.29032 23.7863C7.16129 23.6541 7.03226 23.588 6.90323 23.6541Z"
fill="black" />
</svg>
<a href="https://github.com/Yu-Miao222/project-music-releases" target="_blank">View the code</a>
</button>
<button class="liveDemoBtn">
<svg width="31" height="31" viewBox="0 0 31 31" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M15.495 30.99C23.97 30.99 30.99 23.985 30.99 15.495C30.99 7.02 23.97 0 15.48 0C7.005 0 0 7.02 0 15.495C0 23.985 7.02 30.99 15.495 30.99ZM6.465 6.06C7.965 4.635 9.78 3.54 11.805 2.94C10.74 4.005 9.84 5.50501 9.165 7.335C8.115 7.005 7.21501 6.57 6.465 6.06ZM19.2001 2.955C21.21 3.555 23.025 4.635 24.51 6.06C23.775 6.58499 22.8751 7.005 21.825 7.35C21.15 5.50501 20.25 4.005 19.2001 2.955ZM16.545 3.435C17.79 4.035 18.93 5.655 19.74 7.86C18.75 8.03999 17.685 8.14501 16.545 8.19V3.435ZM11.25 7.86C12.075 5.655 13.2001 4.035 14.445 3.435V8.19C13.305 8.14501 12.24 8.03999 11.25 7.86ZM2.445 14.4451C2.65501 11.895 3.61501 9.54 5.085 7.605C6 8.27999 7.185 8.86501 8.565 9.3C8.17501 10.86 7.92 12.5999 7.845 14.4451H2.445ZM23.145 14.4451C23.07 12.5999 22.815 10.86 22.425 9.3C23.805 8.86501 24.99 8.295 25.89 7.605C27.375 9.54 28.335 11.895 28.545 14.4451H23.145ZM9.99 14.4451C10.065 12.81 10.29 11.25 10.635 9.83999C11.835 10.08 13.1099 10.23 14.445 10.29V14.4451H9.99ZM16.545 14.4451V10.29C17.88 10.23 19.155 10.08 20.355 9.83999C20.7 11.25 20.925 12.81 21 14.4451H16.545ZM2.445 16.545H7.845C7.92 18.42 8.17501 20.175 8.565 21.75C7.2 22.185 6.03 22.755 5.13 23.43C3.63 21.4799 2.65501 19.11 2.445 16.545ZM9.99 16.545H14.445V20.775C13.125 20.835 11.835 20.985 10.65 21.21C10.29 19.785 10.05 18.195 9.99 16.545ZM16.545 20.775V16.545H21C20.94 18.195 20.7 19.785 20.34 21.21C19.155 20.985 17.88 20.835 16.545 20.775ZM22.425 21.75C22.83 20.175 23.07 18.42 23.145 16.545H28.545C28.335 19.11 27.3601 21.4799 25.86 23.43C24.9601 22.755 23.79 22.185 22.425 21.75ZM16.545 22.875C17.6699 22.9199 18.735 23.025 19.71 23.205C18.9 25.365 17.775 26.97 16.545 27.555V22.875ZM11.28 23.205C12.255 23.025 13.32 22.9199 14.445 22.875V27.555C13.215 26.97 12.09 25.365 11.28 23.205ZM6.50999 24.975C7.245 24.465 8.145 24.0451 9.18 23.715C9.85501 25.515 10.74 26.985 11.775 28.035C9.795 27.435 7.995 26.3701 6.50999 24.975ZM21.81 23.715C22.845 24.0451 23.745 24.465 24.4801 24.975C22.995 26.3701 21.1949 27.435 19.215 28.035C20.25 26.985 21.135 25.515 21.81 23.715Z"
fill="black" />
</svg>
<a href="https://music-releases-yu-joanna.netlify.app/" target="_blank"> Live demo</a>
</button>
</div>
</div>
</div>
<!--project5-->
<div class="project">
<div class="projectImg">
<img src="./images/Survey.png" alt="">
</div>
<div class="project-details">
<h2>Survey</h2>
<p>The survey project provides users with a form to fill in information and offers several options
to choose from. Once users have completed the survey, the project summarizes all the information they have provided.</p>
<div class="javascriptBtn">
<span>HTML5</span>
<span>CSS3</span>
<span>React</span>
<span>Node</span>
</div>
<div class="BtnBox">
<button class="viewCodeBtn">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M10.6452 25.7684C10.6452 25.6363 10.5161 25.5042 10.3226 25.5042C10.129 25.5042 10 25.6363 10 25.7684C10 25.9006 10.129 26.0327 10.3226 25.9667C10.5161 25.9667 10.6452 25.9006 10.6452 25.7684ZM8.64516 25.4381C8.64516 25.5702 8.77419 25.7684 8.96774 25.7684C9.09677 25.8345 9.29032 25.7684 9.35484 25.6363C9.35484 25.5042 9.29032 25.372 9.09677 25.3059C8.90323 25.2399 8.70968 25.3059 8.64516 25.4381ZM11.5484 25.372C11.3548 25.372 11.2258 25.5042 11.2258 25.7024C11.2258 25.8345 11.4194 25.9006 11.6129 25.8345C11.8065 25.7684 11.9355 25.7024 11.871 25.5702C11.871 25.4381 11.6774 25.3059 11.5484 25.372ZM15.7419 0C6.83871 0 0 7.00373 0 16.1218C0 23.4559 4.45161 29.7328 10.9032 31.9793C11.7419 32.1115 12 31.5829 12 31.1864C12 30.7239 12 28.4774 12 27.0899C12 27.0899 7.48387 28.081 6.51613 25.1077C6.51613 25.1077 5.80645 23.1916 4.77419 22.7291C4.77419 22.7291 3.29032 21.6719 4.83871 21.6719C4.83871 21.6719 6.45161 21.8041 7.35484 23.3898C8.77419 25.9667 11.0968 25.2399 12.0645 24.7774C12.1935 23.7202 12.5806 22.9934 13.0968 22.5309C9.48387 22.1344 5.80645 21.6059 5.80645 15.2629C5.80645 13.4128 6.32258 12.5539 7.35484 11.3645C7.16129 10.902 6.64516 9.18414 7.54839 6.87159C8.83871 6.47515 12 8.65556 12 8.65556C13.2903 8.25912 14.6452 8.12697 16 8.12697C17.4194 8.12697 18.7742 8.25912 20.0645 8.65556C20.0645 8.65556 23.1613 6.40908 24.5161 6.87159C25.4194 9.18414 24.8387 10.902 24.7097 11.3645C25.7419 12.5539 26.3871 13.4128 26.3871 15.2629C26.3871 21.6059 22.5806 22.1344 18.9677 22.5309C19.5484 23.0595 20.0645 24.0506 20.0645 25.6363C20.0645 27.8167 20 30.5918 20 31.1204C20 31.5829 20.3226 32.1115 21.1613 31.9132C27.6129 29.7328 32 23.4559 32 16.1218C32 7.00373 24.7097 0 15.7419 0ZM6.25806 22.7952C6.12903 22.8612 6.19355 23.0595 6.25806 23.1916C6.3871 23.2577 6.51613 23.3237 6.64516 23.2577C6.70968 23.1916 6.70968 22.9934 6.58065 22.8612C6.45161 22.7952 6.32258 22.7291 6.25806 22.7952ZM5.54839 22.2666C5.48387 22.3987 5.54839 22.4648 5.67742 22.5309C5.80645 22.5969 5.93548 22.5969 6 22.4648C6 22.3987 5.93548 22.3327 5.80645 22.2666C5.67742 22.2005 5.6129 22.2005 5.54839 22.2666ZM7.6129 24.6452C7.54839 24.7113 7.54839 24.9095 7.74194 25.0416C7.87097 25.1738 8.06452 25.2399 8.12903 25.1077C8.19355 25.0416 8.19355 24.8434 8.06452 24.7113C7.93548 24.5791 7.74194 24.5131 7.6129 24.6452ZM6.90323 23.6541C6.77419 23.7202 6.77419 23.9184 6.90323 24.0506C7.03226 24.1827 7.16129 24.2488 7.29032 24.1827C7.35484 24.1166 7.35484 23.9184 7.29032 23.7863C7.16129 23.6541 7.03226 23.588 6.90323 23.6541Z"
fill="black" />
</svg>
<a href="https://github.com/Yu-Miao222/project-survey" target="_blank">View the code</a>
</button>
<button class="liveDemoBtn">
<svg width="31" height="31" viewBox="0 0 31 31" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M15.495 30.99C23.97 30.99 30.99 23.985 30.99 15.495C30.99 7.02 23.97 0 15.48 0C7.005 0 0 7.02 0 15.495C0 23.985 7.02 30.99 15.495 30.99ZM6.465 6.06C7.965 4.635 9.78 3.54 11.805 2.94C10.74 4.005 9.84 5.50501 9.165 7.335C8.115 7.005 7.21501 6.57 6.465 6.06ZM19.2001 2.955C21.21 3.555 23.025 4.635 24.51 6.06C23.775 6.58499 22.8751 7.005 21.825 7.35C21.15 5.50501 20.25 4.005 19.2001 2.955ZM16.545 3.435C17.79 4.035 18.93 5.655 19.74 7.86C18.75 8.03999 17.685 8.14501 16.545 8.19V3.435ZM11.25 7.86C12.075 5.655 13.2001 4.035 14.445 3.435V8.19C13.305 8.14501 12.24 8.03999 11.25 7.86ZM2.445 14.4451C2.65501 11.895 3.61501 9.54 5.085 7.605C6 8.27999 7.185 8.86501 8.565 9.3C8.17501 10.86 7.92 12.5999 7.845 14.4451H2.445ZM23.145 14.4451C23.07 12.5999 22.815 10.86 22.425 9.3C23.805 8.86501 24.99 8.295 25.89 7.605C27.375 9.54 28.335 11.895 28.545 14.4451H23.145ZM9.99 14.4451C10.065 12.81 10.29 11.25 10.635 9.83999C11.835 10.08 13.1099 10.23 14.445 10.29V14.4451H9.99ZM16.545 14.4451V10.29C17.88 10.23 19.155 10.08 20.355 9.83999C20.7 11.25 20.925 12.81 21 14.4451H16.545ZM2.445 16.545H7.845C7.92 18.42 8.17501 20.175 8.565 21.75C7.2 22.185 6.03 22.755 5.13 23.43C3.63 21.4799 2.65501 19.11 2.445 16.545ZM9.99 16.545H14.445V20.775C13.125 20.835 11.835 20.985 10.65 21.21C10.29 19.785 10.05 18.195 9.99 16.545ZM16.545 20.775V16.545H21C20.94 18.195 20.7 19.785 20.34 21.21C19.155 20.985 17.88 20.835 16.545 20.775ZM22.425 21.75C22.83 20.175 23.07 18.42 23.145 16.545H28.545C28.335 19.11 27.3601 21.4799 25.86 23.43C24.9601 22.755 23.79 22.185 22.425 21.75ZM16.545 22.875C17.6699 22.9199 18.735 23.025 19.71 23.205C18.9 25.365 17.775 26.97 16.545 27.555V22.875ZM11.28 23.205C12.255 23.025 13.32 22.9199 14.445 22.875V27.555C13.215 26.97 12.09 25.365 11.28 23.205ZM6.50999 24.975C7.245 24.465 8.145 24.0451 9.18 23.715C9.85501 25.515 10.74 26.985 11.775 28.035C9.795 27.435 7.995 26.3701 6.50999 24.975ZM21.81 23.715C22.845 24.0451 23.745 24.465 24.4801 24.975C22.995 26.3701 21.1949 27.435 19.215 28.035C20.25 26.985 21.135 25.515 21.81 23.715Z"
fill="black" />
</svg>
<a href="https://yumiaosurveyproject.netlify.app/?" target="_blank"> Live demo</a>
</button>
</div>
</div>
</div>
<!--project6-->
<div class="project">
<div class="projectImg">
<img src="./images/happyThoughts.png" alt="">
</div>
<div class="project-details">
<h2>Happy thoughts</h2>
<p>The Happy Thoughts project allows users to submit their thoughts using a form. Once a user submits a thought,
it appears on a list along with the time it was created, users can then heart-like the thoughts,
including those of other users.</p>
<div class="javascriptBtn">
<span>HTML5</span>
<span>CSS3</span>
<span>React</span>
<span>Node</span>
</div>
<div class="BtnBox">
<button class="viewCodeBtn">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M10.6452 25.7684C10.6452 25.6363 10.5161 25.5042 10.3226 25.5042C10.129 25.5042 10 25.6363 10 25.7684C10 25.9006 10.129 26.0327 10.3226 25.9667C10.5161 25.9667 10.6452 25.9006 10.6452 25.7684ZM8.64516 25.4381C8.64516 25.5702 8.77419 25.7684 8.96774 25.7684C9.09677 25.8345 9.29032 25.7684 9.35484 25.6363C9.35484 25.5042 9.29032 25.372 9.09677 25.3059C8.90323 25.2399 8.70968 25.3059 8.64516 25.4381ZM11.5484 25.372C11.3548 25.372 11.2258 25.5042 11.2258 25.7024C11.2258 25.8345 11.4194 25.9006 11.6129 25.8345C11.8065 25.7684 11.9355 25.7024 11.871 25.5702C11.871 25.4381 11.6774 25.3059 11.5484 25.372ZM15.7419 0C6.83871 0 0 7.00373 0 16.1218C0 23.4559 4.45161 29.7328 10.9032 31.9793C11.7419 32.1115 12 31.5829 12 31.1864C12 30.7239 12 28.4774 12 27.0899C12 27.0899 7.48387 28.081 6.51613 25.1077C6.51613 25.1077 5.80645 23.1916 4.77419 22.7291C4.77419 22.7291 3.29032 21.6719 4.83871 21.6719C4.83871 21.6719 6.45161 21.8041 7.35484 23.3898C8.77419 25.9667 11.0968 25.2399 12.0645 24.7774C12.1935 23.7202 12.5806 22.9934 13.0968 22.5309C9.48387 22.1344 5.80645 21.6059 5.80645 15.2629C5.80645 13.4128 6.32258 12.5539 7.35484 11.3645C7.16129 10.902 6.64516 9.18414 7.54839 6.87159C8.83871 6.47515 12 8.65556 12 8.65556C13.2903 8.25912 14.6452 8.12697 16 8.12697C17.4194 8.12697 18.7742 8.25912 20.0645 8.65556C20.0645 8.65556 23.1613 6.40908 24.5161 6.87159C25.4194 9.18414 24.8387 10.902 24.7097 11.3645C25.7419 12.5539 26.3871 13.4128 26.3871 15.2629C26.3871 21.6059 22.5806 22.1344 18.9677 22.5309C19.5484 23.0595 20.0645 24.0506 20.0645 25.6363C20.0645 27.8167 20 30.5918 20 31.1204C20 31.5829 20.3226 32.1115 21.1613 31.9132C27.6129 29.7328 32 23.4559 32 16.1218C32 7.00373 24.7097 0 15.7419 0ZM6.25806 22.7952C6.12903 22.8612 6.19355 23.0595 6.25806 23.1916C6.3871 23.2577 6.51613 23.3237 6.64516 23.2577C6.70968 23.1916 6.70968 22.9934 6.58065 22.8612C6.45161 22.7952 6.32258 22.7291 6.25806 22.7952ZM5.54839 22.2666C5.48387 22.3987 5.54839 22.4648 5.67742 22.5309C5.80645 22.5969 5.93548 22.5969 6 22.4648C6 22.3987 5.93548 22.3327 5.80645 22.2666C5.67742 22.2005 5.6129 22.2005 5.54839 22.2666ZM7.6129 24.6452C7.54839 24.7113 7.54839 24.9095 7.74194 25.0416C7.87097 25.1738 8.06452 25.2399 8.12903 25.1077C8.19355 25.0416 8.19355 24.8434 8.06452 24.7113C7.93548 24.5791 7.74194 24.5131 7.6129 24.6452ZM6.90323 23.6541C6.77419 23.7202 6.77419 23.9184 6.90323 24.0506C7.03226 24.1827 7.16129 24.2488 7.29032 24.1827C7.35484 24.1166 7.35484 23.9184 7.29032 23.7863C7.16129 23.6541 7.03226 23.588 6.90323 23.6541Z"
fill="black" />
</svg>
<a href="https://github.com/Yu-Miao222/project-happy-thoughts" target="_blank">View the code</a>
</button>
<button class="liveDemoBtn">
<svg width="31" height="31" viewBox="0 0 31 31" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M15.495 30.99C23.97 30.99 30.99 23.985 30.99 15.495C30.99 7.02 23.97 0 15.48 0C7.005 0 0 7.02 0 15.495C0 23.985 7.02 30.99 15.495 30.99ZM6.465 6.06C7.965 4.635 9.78 3.54 11.805 2.94C10.74 4.005 9.84 5.50501 9.165 7.335C8.115 7.005 7.21501 6.57 6.465 6.06ZM19.2001 2.955C21.21 3.555 23.025 4.635 24.51 6.06C23.775 6.58499 22.8751 7.005 21.825 7.35C21.15 5.50501 20.25 4.005 19.2001 2.955ZM16.545 3.435C17.79 4.035 18.93 5.655 19.74 7.86C18.75 8.03999 17.685 8.14501 16.545 8.19V3.435ZM11.25 7.86C12.075 5.655 13.2001 4.035 14.445 3.435V8.19C13.305 8.14501 12.24 8.03999 11.25 7.86ZM2.445 14.4451C2.65501 11.895 3.61501 9.54 5.085 7.605C6 8.27999 7.185 8.86501 8.565 9.3C8.17501 10.86 7.92 12.5999 7.845 14.4451H2.445ZM23.145 14.4451C23.07 12.5999 22.815 10.86 22.425 9.3C23.805 8.86501 24.99 8.295 25.89 7.605C27.375 9.54 28.335 11.895 28.545 14.4451H23.145ZM9.99 14.4451C10.065 12.81 10.29 11.25 10.635 9.83999C11.835 10.08 13.1099 10.23 14.445 10.29V14.4451H9.99ZM16.545 14.4451V10.29C17.88 10.23 19.155 10.08 20.355 9.83999C20.7 11.25 20.925 12.81 21 14.4451H16.545ZM2.445 16.545H7.845C7.92 18.42 8.17501 20.175 8.565 21.75C7.2 22.185 6.03 22.755 5.13 23.43C3.63 21.4799 2.65501 19.11 2.445 16.545ZM9.99 16.545H14.445V20.775C13.125 20.835 11.835 20.985 10.65 21.21C10.29 19.785 10.05 18.195 9.99 16.545ZM16.545 20.775V16.545H21C20.94 18.195 20.7 19.785 20.34 21.21C19.155 20.985 17.88 20.835 16.545 20.775ZM22.425 21.75C22.83 20.175 23.07 18.42 23.145 16.545H28.545C28.335 19.11 27.3601 21.4799 25.86 23.43C24.9601 22.755 23.79 22.185 22.425 21.75ZM16.545 22.875C17.6699 22.9199 18.735 23.025 19.71 23.205C18.9 25.365 17.775 26.97 16.545 27.555V22.875ZM11.28 23.205C12.255 23.025 13.32 22.9199 14.445 22.875V27.555C13.215 26.97 12.09 25.365 11.28 23.205ZM6.50999 24.975C7.245 24.465 8.145 24.0451 9.18 23.715C9.85501 25.515 10.74 26.985 11.775 28.035C9.795 27.435 7.995 26.3701 6.50999 24.975ZM21.81 23.715C22.845 24.0451 23.745 24.465 24.4801 24.975C22.995 26.3701 21.1949 27.435 19.215 28.035C20.25 26.985 21.135 25.515 21.81 23.715Z"
fill="black" />
</svg>
<a href="https://happy-thought-by-yumiao.netlify.app/" target="_blank"> Live demo</a>
</button>
</div>
</div>
</div>
<!--project7-->
<div class="project">
<div class="projectImg">
<img src="./images/move.png" alt="">
</div>
<div class="project-details">
<h2>Movies</h2>
<p>The Movies project showcases a selection of the latest movies and TV series, both popular and upcoming,
with data sourced directly from an API. Users can click on each title to explore additional details,
such as poster images, detailed ratings, and storyline.</p>
<div class="javascriptBtn">
<span>HTML5</span>
<span>CSS3</span>
<span>React</span>
<span>Node</span>
</div>
<div class="BtnBox">
<button class="viewCodeBtn">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M10.6452 25.7684C10.6452 25.6363 10.5161 25.5042 10.3226 25.5042C10.129 25.5042 10 25.6363 10 25.7684C10 25.9006 10.129 26.0327 10.3226 25.9667C10.5161 25.9667 10.6452 25.9006 10.6452 25.7684ZM8.64516 25.4381C8.64516 25.5702 8.77419 25.7684 8.96774 25.7684C9.09677 25.8345 9.29032 25.7684 9.35484 25.6363C9.35484 25.5042 9.29032 25.372 9.09677 25.3059C8.90323 25.2399 8.70968 25.3059 8.64516 25.4381ZM11.5484 25.372C11.3548 25.372 11.2258 25.5042 11.2258 25.7024C11.2258 25.8345 11.4194 25.9006 11.6129 25.8345C11.8065 25.7684 11.9355 25.7024 11.871 25.5702C11.871 25.4381 11.6774 25.3059 11.5484 25.372ZM15.7419 0C6.83871 0 0 7.00373 0 16.1218C0 23.4559 4.45161 29.7328 10.9032 31.9793C11.7419 32.1115 12 31.5829 12 31.1864C12 30.7239 12 28.4774 12 27.0899C12 27.0899 7.48387 28.081 6.51613 25.1077C6.51613 25.1077 5.80645 23.1916 4.77419 22.7291C4.77419 22.7291 3.29032 21.6719 4.83871 21.6719C4.83871 21.6719 6.45161 21.8041 7.35484 23.3898C8.77419 25.9667 11.0968 25.2399 12.0645 24.7774C12.1935 23.7202 12.5806 22.9934 13.0968 22.5309C9.48387 22.1344 5.80645 21.6059 5.80645 15.2629C5.80645 13.4128 6.32258 12.5539 7.35484 11.3645C7.16129 10.902 6.64516 9.18414 7.54839 6.87159C8.83871 6.47515 12 8.65556 12 8.65556C13.2903 8.25912 14.6452 8.12697 16 8.12697C17.4194 8.12697 18.7742 8.25912 20.0645 8.65556C20.0645 8.65556 23.1613 6.40908 24.5161 6.87159C25.4194 9.18414 24.8387 10.902 24.7097 11.3645C25.7419 12.5539 26.3871 13.4128 26.3871 15.2629C26.3871 21.6059 22.5806 22.1344 18.9677 22.5309C19.5484 23.0595 20.0645 24.0506 20.0645 25.6363C20.0645 27.8167 20 30.5918 20 31.1204C20 31.5829 20.3226 32.1115 21.1613 31.9132C27.6129 29.7328 32 23.4559 32 16.1218C32 7.00373 24.7097 0 15.7419 0ZM6.25806 22.7952C6.12903 22.8612 6.19355 23.0595 6.25806 23.1916C6.3871 23.2577 6.51613 23.3237 6.64516 23.2577C6.70968 23.1916 6.70968 22.9934 6.58065 22.8612C6.45161 22.7952 6.32258 22.7291 6.25806 22.7952ZM5.54839 22.2666C5.48387 22.3987 5.54839 22.4648 5.67742 22.5309C5.80645 22.5969 5.93548 22.5969 6 22.4648C6 22.3987 5.93548 22.3327 5.80645 22.2666C5.67742 22.2005 5.6129 22.2005 5.54839 22.2666ZM7.6129 24.6452C7.54839 24.7113 7.54839 24.9095 7.74194 25.0416C7.87097 25.1738 8.06452 25.2399 8.12903 25.1077C8.19355 25.0416 8.19355 24.8434 8.06452 24.7113C7.93548 24.5791 7.74194 24.5131 7.6129 24.6452ZM6.90323 23.6541C6.77419 23.7202 6.77419 23.9184 6.90323 24.0506C7.03226 24.1827 7.16129 24.2488 7.29032 24.1827C7.35484 24.1166 7.35484 23.9184 7.29032 23.7863C7.16129 23.6541 7.03226 23.588 6.90323 23.6541Z"
fill="black" />
</svg>
<a href="https://github.com/Yu-Miao222/project-movies" target="_blank">View the code</a>
</button>
<button class="liveDemoBtn">
<svg width="31" height="31" viewBox="0 0 31 31" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M15.495 30.99C23.97 30.99 30.99 23.985 30.99 15.495C30.99 7.02 23.97 0 15.48 0C7.005 0 0 7.02 0 15.495C0 23.985 7.02 30.99 15.495 30.99ZM6.465 6.06C7.965 4.635 9.78 3.54 11.805 2.94C10.74 4.005 9.84 5.50501 9.165 7.335C8.115 7.005 7.21501 6.57 6.465 6.06ZM19.2001 2.955C21.21 3.555 23.025 4.635 24.51 6.06C23.775 6.58499 22.8751 7.005 21.825 7.35C21.15 5.50501 20.25 4.005 19.2001 2.955ZM16.545 3.435C17.79 4.035 18.93 5.655 19.74 7.86C18.75 8.03999 17.685 8.14501 16.545 8.19V3.435ZM11.25 7.86C12.075 5.655 13.2001 4.035 14.445 3.435V8.19C13.305 8.14501 12.24 8.03999 11.25 7.86ZM2.445 14.4451C2.65501 11.895 3.61501 9.54 5.085 7.605C6 8.27999 7.185 8.86501 8.565 9.3C8.17501 10.86 7.92 12.5999 7.845 14.4451H2.445ZM23.145 14.4451C23.07 12.5999 22.815 10.86 22.425 9.3C23.805 8.86501 24.99 8.295 25.89 7.605C27.375 9.54 28.335 11.895 28.545 14.4451H23.145ZM9.99 14.4451C10.065 12.81 10.29 11.25 10.635 9.83999C11.835 10.08 13.1099 10.23 14.445 10.29V14.4451H9.99ZM16.545 14.4451V10.29C17.88 10.23 19.155 10.08 20.355 9.83999C20.7 11.25 20.925 12.81 21 14.4451H16.545ZM2.445 16.545H7.845C7.92 18.42 8.17501 20.175 8.565 21.75C7.2 22.185 6.03 22.755 5.13 23.43C3.63 21.4799 2.65501 19.11 2.445 16.545ZM9.99 16.545H14.445V20.775C13.125 20.835 11.835 20.985 10.65 21.21C10.29 19.785 10.05 18.195 9.99 16.545ZM16.545 20.775V16.545H21C20.94 18.195 20.7 19.785 20.34 21.21C19.155 20.985 17.88 20.835 16.545 20.775ZM22.425 21.75C22.83 20.175 23.07 18.42 23.145 16.545H28.545C28.335 19.11 27.3601 21.4799 25.86 23.43C24.9601 22.755 23.79 22.185 22.425 21.75ZM16.545 22.875C17.6699 22.9199 18.735 23.025 19.71 23.205C18.9 25.365 17.775 26.97 16.545 27.555V22.875ZM11.28 23.205C12.255 23.025 13.32 22.9199 14.445 22.875V27.555C13.215 26.97 12.09 25.365 11.28 23.205ZM6.50999 24.975C7.245 24.465 8.145 24.0451 9.18 23.715C9.85501 25.515 10.74 26.985 11.775 28.035C9.795 27.435 7.995 26.3701 6.50999 24.975ZM21.81 23.715C22.845 24.0451 23.745 24.465 24.4801 24.975C22.995 26.3701 21.1949 27.435 19.215 28.035C20.25 26.985 21.135 25.515 21.81 23.715Z"
fill="black" />
</svg>
<a href="https://yourmoviesiteby-ym.netlify.app/" target="_blank"> Live demo</a>
</button>
</div>
</div>
</div>
<!--project8-->
<div class="project">
<div class="projectImg">
<img src="./images/todo.png" alt="">
</div>
<div class="project-details">
<h2>Todo app</h2>
<p>A To-Do List project allows users to create and manage tasks by adding them to a list.
Users can specify the status of each task as "To-Do," "In Progress," or "Complete,"
with the total number of tasks for each status displayed on the screen.</p>
<div class="javascriptBtn">
<span>HTML5</span>
<span>CSS3</span>
<span>React</span>
<span>Node</span>
</div>
<div class="BtnBox">
<button class="viewCodeBtn">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M10.6452 25.7684C10.6452 25.6363 10.5161 25.5042 10.3226 25.5042C10.129 25.5042 10 25.6363 10 25.7684C10 25.9006 10.129 26.0327 10.3226 25.9667C10.5161 25.9667 10.6452 25.9006 10.6452 25.7684ZM8.64516 25.4381C8.64516 25.5702 8.77419 25.7684 8.96774 25.7684C9.09677 25.8345 9.29032 25.7684 9.35484 25.6363C9.35484 25.5042 9.29032 25.372 9.09677 25.3059C8.90323 25.2399 8.70968 25.3059 8.64516 25.4381ZM11.5484 25.372C11.3548 25.372 11.2258 25.5042 11.2258 25.7024C11.2258 25.8345 11.4194 25.9006 11.6129 25.8345C11.8065 25.7684 11.9355 25.7024 11.871 25.5702C11.871 25.4381 11.6774 25.3059 11.5484 25.372ZM15.7419 0C6.83871 0 0 7.00373 0 16.1218C0 23.4559 4.45161 29.7328 10.9032 31.9793C11.7419 32.1115 12 31.5829 12 31.1864C12 30.7239 12 28.4774 12 27.0899C12 27.0899 7.48387 28.081 6.51613 25.1077C6.51613 25.1077 5.80645 23.1916 4.77419 22.7291C4.77419 22.7291 3.29032 21.6719 4.83871 21.6719C4.83871 21.6719 6.45161 21.8041 7.35484 23.3898C8.77419 25.9667 11.0968 25.2399 12.0645 24.7774C12.1935 23.7202 12.5806 22.9934 13.0968 22.5309C9.48387 22.1344 5.80645 21.6059 5.80645 15.2629C5.80645 13.4128 6.32258 12.5539 7.35484 11.3645C7.16129 10.902 6.64516 9.18414 7.54839 6.87159C8.83871 6.47515 12 8.65556 12 8.65556C13.2903 8.25912 14.6452 8.12697 16 8.12697C17.4194 8.12697 18.7742 8.25912 20.0645 8.65556C20.0645 8.65556 23.1613 6.40908 24.5161 6.87159C25.4194 9.18414 24.8387 10.902 24.7097 11.3645C25.7419 12.5539 26.3871 13.4128 26.3871 15.2629C26.3871 21.6059 22.5806 22.1344 18.9677 22.5309C19.5484 23.0595 20.0645 24.0506 20.0645 25.6363C20.0645 27.8167 20 30.5918 20 31.1204C20 31.5829 20.3226 32.1115 21.1613 31.9132C27.6129 29.7328 32 23.4559 32 16.1218C32 7.00373 24.7097 0 15.7419 0ZM6.25806 22.7952C6.12903 22.8612 6.19355 23.0595 6.25806 23.1916C6.3871 23.2577 6.51613 23.3237 6.64516 23.2577C6.70968 23.1916 6.70968 22.9934 6.58065 22.8612C6.45161 22.7952 6.32258 22.7291 6.25806 22.7952ZM5.54839 22.2666C5.48387 22.3987 5.54839 22.4648 5.67742 22.5309C5.80645 22.5969 5.93548 22.5969 6 22.4648C6 22.3987 5.93548 22.3327 5.80645 22.2666C5.67742 22.2005 5.6129 22.2005 5.54839 22.2666ZM7.6129 24.6452C7.54839 24.7113 7.54839 24.9095 7.74194 25.0416C7.87097 25.1738 8.06452 25.2399 8.12903 25.1077C8.19355 25.0416 8.19355 24.8434 8.06452 24.7113C7.93548 24.5791 7.74194 24.5131 7.6129 24.6452ZM6.90323 23.6541C6.77419 23.7202 6.77419 23.9184 6.90323 24.0506C7.03226 24.1827 7.16129 24.2488 7.29032 24.1827C7.35484 24.1166 7.35484 23.9184 7.29032 23.7863C7.16129 23.6541 7.03226 23.588 6.90323 23.6541Z"
fill="black" />
</svg>
<a href="https://github.com/Yu-Miao222/project-todos" target="_blank">View the code</a>
</button>
<button class="liveDemoBtn">
<svg width="31" height="31" viewBox="0 0 31 31" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M15.495 30.99C23.97 30.99 30.99 23.985 30.99 15.495C30.99 7.02 23.97 0 15.48 0C7.005 0 0 7.02 0 15.495C0 23.985 7.02 30.99 15.495 30.99ZM6.465 6.06C7.965 4.635 9.78 3.54 11.805 2.94C10.74 4.005 9.84 5.50501 9.165 7.335C8.115 7.005 7.21501 6.57 6.465 6.06ZM19.2001 2.955C21.21 3.555 23.025 4.635 24.51 6.06C23.775 6.58499 22.8751 7.005 21.825 7.35C21.15 5.50501 20.25 4.005 19.2001 2.955ZM16.545 3.435C17.79 4.035 18.93 5.655 19.74 7.86C18.75 8.03999 17.685 8.14501 16.545 8.19V3.435ZM11.25 7.86C12.075 5.655 13.2001 4.035 14.445 3.435V8.19C13.305 8.14501 12.24 8.03999 11.25 7.86ZM2.445 14.4451C2.65501 11.895 3.61501 9.54 5.085 7.605C6 8.27999 7.185 8.86501 8.565 9.3C8.17501 10.86 7.92 12.5999 7.845 14.4451H2.445ZM23.145 14.4451C23.07 12.5999 22.815 10.86 22.425 9.3C23.805 8.86501 24.99 8.295 25.89 7.605C27.375 9.54 28.335 11.895 28.545 14.4451H23.145ZM9.99 14.4451C10.065 12.81 10.29 11.25 10.635 9.83999C11.835 10.08 13.1099 10.23 14.445 10.29V14.4451H9.99ZM16.545 14.4451V10.29C17.88 10.23 19.155 10.08 20.355 9.83999C20.7 11.25 20.925 12.81 21 14.4451H16.545ZM2.445 16.545H7.845C7.92 18.42 8.17501 20.175 8.565 21.75C7.2 22.185 6.03 22.755 5.13 23.43C3.63 21.4799 2.65501 19.11 2.445 16.545ZM9.99 16.545H14.445V20.775C13.125 20.835 11.835 20.985 10.65 21.21C10.29 19.785 10.05 18.195 9.99 16.545ZM16.545 20.775V16.545H21C20.94 18.195 20.7 19.785 20.34 21.21C19.155 20.985 17.88 20.835 16.545 20.775ZM22.425 21.75C22.83 20.175 23.07 18.42 23.145 16.545H28.545C28.335 19.11 27.3601 21.4799 25.86 23.43C24.9601 22.755 23.79 22.185 22.425 21.75ZM16.545 22.875C17.6699 22.9199 18.735 23.025 19.71 23.205C18.9 25.365 17.775 26.97 16.545 27.555V22.875ZM11.28 23.205C12.255 23.025 13.32 22.9199 14.445 22.875V27.555C13.215 26.97 12.09 25.365 11.28 23.205ZM6.50999 24.975C7.245 24.465 8.145 24.0451 9.18 23.715C9.85501 25.515 10.74 26.985 11.775 28.035C9.795 27.435 7.995 26.3701 6.50999 24.975ZM21.81 23.715C22.845 24.0451 23.745 24.465 24.4801 24.975C22.995 26.3701 21.1949 27.435 19.215 28.035C20.25 26.985 21.135 25.515 21.81 23.715Z"
fill="black" />
</svg>
<a href="https://todo-app-madebyyu.netlify.app/" target="_blank"> Live demo</a>
</button>
</div>
</div>
</div>
</section>
<!--My words section-->
<section class="myWordSection">
<h2>My words</h2>
<div class="wrapMyWords">
<!--my words1-->
<div class="myWords">
<div class="mywordsImgDiv">
<img src="./images/mywords(2).png" alt="">
</div>
<h4>May 2023</h4>
<h2>Embracing Challenges: The Benefits of Leaving Your Comfort Zone</h2>
<p>Why did I decide to step out of my comfort zone? Fourteen years ago,
I faced a huge challenge when I decided to move from China to Sweden.
Adapting to a new culture, language, and way of life was difficult,
and I encountered many obstacles...
</p>
<button>
<svg width="20" height="26" viewBox="0 0 20 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M0 22.0609C0 24.655 1.29446 26 3.7901 26H16.2099C18.7056 26 20 24.655 20 22.0609V3.93902C20 1.35704 18.7056 0 16.2099 0H3.7901C1.29446 0 0 1.35704 0 3.93902V22.0609ZM2.28572 21.9168V4.08314C2.28572 2.96628 2.84549 2.35381 3.97669 2.35381H16.0117C17.1428 2.35381 17.7144 2.96628 17.7144 4.08314V21.9168C17.7144 23.0337 17.1428 23.6462 16.0117 23.6462H3.97669C2.84549 23.6462 2.28572 23.0337 2.28572 21.9168ZM5.73762 7.2896H14.274C14.6939 7.2896 15.0204 6.95334 15.0204 6.52101C15.0204 6.10069 14.6939 5.77643 14.274 5.77643H5.73762C5.30613 5.77643 4.9796 6.10069 4.9796 6.52101C4.9796 6.95334 5.30613 7.2896 5.73762 7.2896ZM5.73762 11.3968H14.274C14.6939 11.3968 15.0204 11.0605 15.0204 10.6282C15.0204 10.2078 14.6939 9.88358 14.274 9.88358H5.73762C5.30613 9.88358 4.9796 10.2078 4.9796 10.6282C4.9796 11.0605 5.30613 11.3968 5.73762 11.3968ZM5.73762 15.5039H9.86586C10.2857 15.5039 10.6006 15.1797 10.6006 14.7593C10.6006 14.327 10.2857 13.9787 9.86586 13.9787H5.73762C5.30613 13.9787 4.9796 14.327 4.9796 14.7593C4.9796 15.1797 5.30613 15.5039 5.73762 15.5039Z"
fill="#333333" />
</svg>
<a href="https://medium.com/@yu_miao/embracing-challenges-the-benefits-of-leaving-your-comfort-zone-1324483a5672" target="_blank">Read article</a>
</button>
</div>
<!--my words2-->
<div class="myWords">
<div class="mywordsImgDiv">
<img src="./images/mywords (3).png" alt="">
</div>
<h4>May 2023</h4>
<h2>Overcoming Coding Anxiety: Embracing the Journey to Code Mastery</h2>
<p>Embarking on the journey into coding as a junior developer often comes with
feelings of apprehension, self-doubt, and frustration. In this context,
I’ve gathered some essential tips that have helped me embark on the
path of coding mastery.</p>
<button>
<svg width="20" height="26" viewBox="0 0 20 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M0 22.0609C0 24.655 1.29446 26 3.7901 26H16.2099C18.7056 26 20 24.655 20 22.0609V3.93902C20 1.35704 18.7056 0 16.2099 0H3.7901C1.29446 0 0 1.35704 0 3.93902V22.0609ZM2.28572 21.9168V4.08314C2.28572 2.96628 2.84549 2.35381 3.97669 2.35381H16.0117C17.1428 2.35381 17.7144 2.96628 17.7144 4.08314V21.9168C17.7144 23.0337 17.1428 23.6462 16.0117 23.6462H3.97669C2.84549 23.6462 2.28572 23.0337 2.28572 21.9168ZM5.73762 7.2896H14.274C14.6939 7.2896 15.0204 6.95334 15.0204 6.52101C15.0204 6.10069 14.6939 5.77643 14.274 5.77643H5.73762C5.30613 5.77643 4.9796 6.10069 4.9796 6.52101C4.9796 6.95334 5.30613 7.2896 5.73762 7.2896ZM5.73762 11.3968H14.274C14.6939 11.3968 15.0204 11.0605 15.0204 10.6282C15.0204 10.2078 14.6939 9.88358 14.274 9.88358H5.73762C5.30613 9.88358 4.9796 10.2078 4.9796 10.6282C4.9796 11.0605 5.30613 11.3968 5.73762 11.3968ZM5.73762 15.5039H9.86586C10.2857 15.5039 10.6006 15.1797 10.6006 14.7593C10.6006 14.327 10.2857 13.9787 9.86586 13.9787H5.73762C5.30613 13.9787 4.9796 14.327 4.9796 14.7593C4.9796 15.1797 5.30613 15.5039 5.73762 15.5039Z"
fill="#333333" />
</svg>
<a href="https://medium.com/@yu_miao/overcoming-coding-anxiety-embracing-the-journey-to-code-mastery-4cdf89a73d09" target="_blank">Read article</a>
</button>
</div>
</div>
</section>
<!--Skills section-->
<section class="skills">
<h2>Skills</h2>
<div class="my-skills">
<div class="code-skill-box">
<h5><span style="background-color: #EB5577;">Code</span></h5>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Javascrip ES6</li>
</ul>
</div>
<div class="upcomming-skill-box">
<h5><span style="background-color:#6DB486;">More</span></h5>
<ul>
<li>React</li>
<li>Redux</li>
<li>Node.js</li>
<li>MongoDB</li>
</ul>
</div>
<div class="tool-skill-box">
<h5><span style="background-color: #2483E0;">Toolbox</span></h5>
<ul>
<li>Figma</li>
<li>Slack</li>
<li>VS Code</li>
<li>GitHub</li>
</ul>
</div>
<div class="other-skill-box">
<h5><span style="background-color: #0B24F5;">Others</span></h5>
<ul>
<li>Java</li>
<li>SQL</li>
<li>MySql</li>
</ul>
</div>
</div>
</section>
<!--Time to talk section-->
<section class="time-to-talk">
<h1>Time to talk</h1>
<div class="intro-detail">
<div class="bottomImg">
<img src="./images/yupic.png" alt="">
</div>
<div class="intro-detail-title">
<h3>Yu Miao</h3>
<h2>Frontend developer</h2>
<h4> + International trading, logistics background </h4>
</div>
</div>
<div class="contactInfo">
<h3>[email protected]</h3>
</div>
<div class="bottom-media-links">
<ul>
<li><a href="https://www.linkedin.com/in/yu-miao-0bb3b091/" target="_blank"><img
src="./images/linkedIn.png" alt="">
</a>
</li>
<li><a href="https://github.com/Yu-Miao222" target="_blank"><img src="./images/github.png" alt="">
</a>
</li>
<!-- <li><a href=""><img src="./images/ins.png" alt="">
</a>
</li> -->
</ul>
</div>
</section>
</body>
</html>