-
Notifications
You must be signed in to change notification settings - Fork 0
/
portfolio.html
431 lines (382 loc) · 23.3 KB
/
portfolio.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
<!DOCTYPE html>
<html lang="TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-title" content="SIYU">
<meta name="application-name" content="SIYU">
<meta name="msapplication-TileColor" content="#131417">
<meta name="theme-color" content="#131417">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SIYU</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<!-- Button -->
<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style3.css">
<!-- 霓虹燈字體 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=League+Script&display=swap" rel="stylesheet">
<!--chinese font-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@400;600&display=swap" rel="stylesheet">
<!--footer font-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=La+Belle+Aurore&display=swap" rel="stylesheet">
<style>
body,
h1,
h2 {
font-family: 'Noto Serif TC', serif;
font-weight: 600;
}
h3 {
font-family: 'Noto Serif TC', serif;
font-weight: 600;
}
h4,
h5,
h6 {
font-family: 'Noto Serif TC', serif;
font-weight: 400;
}
.w3-bar-block .w3-bar-item {
padding: 20px
}
</style>
</head>
<body>
<div class="header">
<div class="logo">
<a href="index.html">
<img src="images/love.png" alt="#top">
</a>
</div>
<div class="menu">
<a href="portfolio.html">Portfolio</a>
<a href="contact.html">Contact</a>
</div>
<div class="linkedin">
<a href="http://www.linkedin.com/in/siyu-chen-s0129">
<img src="images/linkedin.png" alt="Linkedin Profile">
</a>
</div>
</div>
<br>
<br>
<br>
<div class="untree_co-section untree_co-section-4 pb-0" id="portfolio-section">
<div class="container">
<div class="portfolio-single-wrap unslate_co--section" id="portfolio-single-section">
<div class="portfolio-single-inner">
<br>
<br>
<h2 class="heading-portfolio-single-h2 text-black">CAN-舒緩情緒的好夥伴</h2>
<p class="award">第27屆全國大專校校院資訊應用組 佳作</p>
<div class="row mb-5 align-items-stretch">
<div class="col-lg-6 mb-5 mb-lg-0">
<img src="images/portfolio/CAN.png" alt="Image" class="img-fluid">
</div>
<div class="col-lg-6 pl-lg-5">
<div class="row mb-3">
<div class="col-sm-6 col-md-6 col-lg-6 mb-4">
<div class="detail-v1">
<span class="detail-label">Project Date</span>
<span class="detail-val">November 5th, 2022</span>
</div>
</div>
<div class="col-sm-6 col-md-6 col-lg-6 mb-4">
<div class="detail-v1">
<span class="detail-label">Role</span>
<span class="detail-val"><a href="#">Group Leader</a>, <a href="#">App
Design</a></span>
</div>
</div>
<div class="col-sm-6 col-md-6 col-lg-6 mb-4">
<div class="detail-v1">
<span class="detail-label">Certificate</span>
<span class="detail-val">
<p>International ICT Innovative Services Awards 2022(Innoserve Awards) <br>
</p><a
href="https://global.turingcerts.com/co/cert?hash=b6fe676871502301e210ceff05cf3f264e390623da253eacc142be099af7ce13">
2022第27屆大專校院資訊應用服務創新競賽-獎狀</a>
</span>
</div>
</div>
<div class="col-sm-6 col-md-6 col-lg-6 mb-4">
<div class="detail-v1">
<span class="detail-label">Video</span>
<span class="detail-val"><a href="https://youtu.be/Cp3dnN9dZpU">CAN
舒緩情緒的好夥伴 Demo</a></span>
</div>
</div>
</div>
<p>將音樂治療的理論應用於觀眾的聆聽體驗。利用Librosa 套件進行Music Extraction，並以KNN分析過的資料集當作情緒基準，經過PCA降維後，以Kmeans
Clustering的方法去分類不同情緒的歌曲。歌詞情緒分析經由fine-tuning
BERT的模型，進行情緒標定分析。整合旋律與歌詞情緒分析，利用人工智慧，將音樂與情緒做更深層連結的應用程式。</p>
<p>Building an application cooperating with the topics of music therapy and emotion.
<br>
-We facilitate the user experience of services for 89% of listeners on online streaming
platforms by connecting music with people's emotions.
<br>
-Applying skills such as fine-tuning BERT model, Beautifulsoup, Librosa, PCA, K-means
Clustering, and front-end development.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="untree_co-section untree_co-section-4 pb-0" id="portfolio-section">
<div class="container">
<div class="portfolio-single-wrap unslate_co--section" id="portfolio-single-section">
<div class="portfolio-single-inner">
<div class="row justify-content-between mb-5">
<div class="col-lg-12 mb-5 mb-lg-0">
<div class="row">
<div class="col-lg-6">
<img src="images/portfolio/2.jpg" alt="Image" class="img-fluid">
</div>
<div class="col-lg-6">
<img src="images/portfolio/3.jpg" alt="Image" class="img-fluid">
</div>
</div>
</div>
<div class="col-12 my-5">
<div class="row">
<h2 class="heading-portfolio-single-h2 text-black">2022 Power桃園黑客松</h2>
<div class="col-sm-6 col-md-6 col-lg-3">
<div class="detail-v1">
<span class="detail-label">Project Date</span>
<span class="detail-val">October 12th, 2022</span>
</div>
<br>
<div class="detail-v1">
<span class="detail-label">Certificate</span>
<span class="detail-val">2022 Power Taoyuan Hackathon 1st Award <br> 2022
Power桃園黑客松 第一名</span>
</div>
</div>
<div class="col-sm-6 col-md-6 col-lg-3">
<div class="detail-v1">
<span class="detail-label">Role</span>
<span class="detail-val">Open Data Analyst</span>
</div>
</div>
<div class="col-sm-6 col-md-6 col-lg-3">
<br>
<p>利用政府資料開發平台提供所提供的桃園市不動產買賣實價登錄與公告地價進行分析與比較。透過POWER BI
將清理過的資料進行分析，以簡單的圖表方式去呈現，民眾更可以藉著互動式儀表板的篩選位置，去察看細部的資料。將複雜又繁瑣的表格，盡可能提高易讀性，獲得第一名的成績與獎金5萬元。
</p>
<p>
I conducted an analysis and comparison of real estate transactions and
public land prices in Taoyuan City using data provided by the government
data platform. We then utilized POWER BI to process and visualize the
cleaned data through simple charts. This interactive dashboard allows the
public to filter and explore detailed information easily. Our goal was to
enhance readability, and I achieved first place in the competition, earning
a prize of $50,000.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="untree_co-section untree_co-section-4 pb-0" id="portfolio-section">
<div class="container">
<div class="portfolio-single-wrap unslate_co--section" id="portfolio-single-section">
<div class="portfolio-single-inner">
<br>
<br>
<h2 class="heading-portfolio-single-h2 text-black">第25屆TDK全國大專校院創思設計與製作競賽 飛行組</h2>
<p class="award"></p>
<div class="row mb-5 align-items-stretch">
<div class="col-lg-6 mb-5 mb-lg-0">
<img src="images/portfolio/TDK.jpg" alt="Image" class="img-fluid" style="width: 80%; height: 100%;">
</div>
<div class="col-lg-6 pl-lg-5">
<div class="row mb-3">
<div class="col-sm-6 col-md-6 col-lg-6 mb-4">
<div class="detail-v1">
<span class="detail-label">Project Date</span>
<br>
<span class="detail-val">December , 2020</span>
</div>
</div>
<div class="col-sm-6 col-md-6 col-lg-6 mb-4">
<div class="detail-v1">
<span class="detail-label">Role</span>
<span class="detail-val">
<p>Group Member, Designer, Presenter</p>
</a>
</span>
</div>
</div>
<div class="col-sm-6 col-md-6 col-lg-6 mb-4">
<div class="detail-v1">
<span class="detail-label">Certificate</span>
<span class="detail-val">
<p>
2021 Taiwan TDK Robocon Excellent Award </p>
</span>
</div>
</div>
<div class="col-sm-6 col-md-6 col-lg-6 mb-4">
<div class="detail-v1">
<span class="detail-label">Video</span>
<span class="detail-val"><a
href="https://youtu.be/jY1YGge81Es">第25屆TDK全國大專校院創思設計與製作競賽
飛行組</a></span>
</div>
</div>
</div>
<p>與台大機械系同學合作，運用自己所學的語言以及程式能力，一起從零到有，製作出兩組無人機，參加2021年全國大專校院創思設計與製作競賽。
其中一組獲得當屆全國第一名的佳績，兩組成員共享20萬元獎金。</p>
<p>
Collaborating with a fellow student from the National Taiwan University's Department
of Mechanical Engineering, I leveraged my programming skills and expertise in the
field to build two unmanned aerial vehicles (UAVs) from scratch. These UAVs were
created for participation in the 2021 National College Innovation Design and
Production Competition.
One of the UAVs in our collaboration achieved a remarkable milestone by securing the
first place nationwide during that competition. As a result, both team members
shared a substantial cash prize of $200,000.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="w3-row-padding w3-padding-16 w3-center" id="gradient">
<div class="w3-quarter">
<img src="images/Adobe/Gradient/230425_漸變_作品集_1.jpg" alt="Design Portfolio" style="width:100%">
<h3>Design Portfolio</h3>
<p>Good vibes only.</p>
</div>
<div class="w3-quarter">
<img src="images/Adobe/Gradient/230425_漸變_作品集_2.jpg" alt="Gradual Change" style="width:100%">
<h3>Gradual Change</h3>
</div>
<div class="w3-quarter">
<img src="images/Adobe/Gradient/230425_漸變_作品集_3.jpg" alt="Gradient" style="width:100%">
<h3>Gradient</h3>
<p>“A gradual change or process occurs in small stages over a long period of time, rather than
suddenly.”</p>
</div>
<div class="w3-quarter">
<img src="images/Adobe/Gradient/230425_漸變_作品集_4.jpg" alt="Round Design" style="width:100%">
<h3>Round Design</h3>
<p>Gradient color changes.</p>
</div>
</div>
<div class="portfolio_title">
<h2>Illustrator Design</h2>
</div>
<div class="container container1">
<div class="item">
<a href="https://drive.google.com/file/d/1PaYtAKft5o40ZS3C-6PzPl5Ezt-zBgFh/view?usp=sharing"><img
src="images/Adobe/Shape/230418_旋轉漸層_作品集1_工作區域 1.jpg" alt="Day By Day"
style="width:100%"></a>
<h3>Day By Day</h3>
<p>“Shoot for the moon. Even if you miss, you’ll land among the stars.” – Les Brown</p>
<p>「瞄準月亮，即便你沒達到，你將置身星星之中。」— 萊斯‧布朗</p>
</div>
<div class="item">
<img src="images/Adobe/Shape/230418_旋轉漸層_作品集2-02.jpg" alt="Rotate" style="width:100%">
<h3>Rotate</h3>
<p>“I always felt through writing that I wanted to rotate the world slightly.” - Carl Honoré
</p>
</div>
<div class="item">
<img src="images/Adobe/Shape/230418_旋轉漸層_作品集3-03.jpg" alt="Rotate II" style="width:100%">
<h3>Rotate II</h3>
<p>“There is geometry in the humming of the strings, there is music in the spacing of the spheres.”
- Pythagoras</p>
<p>「琴弦的嗡嗡聲中蘊含著幾何，天體的空間中蘊含著音樂。」— 畢達哥拉斯</p>
</div>
<div class="item">
<img src="images/Adobe/Shape/230418_旋轉漸層_作品集4-04.jpg" alt="Revolution" style="width:100%">
<h3>Revolution</h3>
<p>
“I shall now recall to mind that the motion of the heavenly bodies is circular, since the motion
appropriate to a sphere is rotation in a circle.” - Nicolaus Copernicus
</p>
</div>
</div>
<div class="w3-row-padding w3-padding-16 w3-center" id="wand">
<div class="w3-quarter">
<img src="images/Adobe/wand/230504_文字_作品集01_工作區域 1.jpg" alt="Peace" style="width:100%">
<h3>平安</h3>
<p>城南花已開，願君安常在。</p>
</div>
<div class="w3-quarter">
<img src="images/Adobe/wand/230504_文字_作品集02-03.jpg" alt="Shanghai" style="width:100%">
<h3>百年上海</h3>
</div>
<div class="w3-quarter">
<img src="images/Adobe/wand/230504_文字_作品集03-04.jpg" alt="Manhattan" style="width:100%">
<h3> 紐約 New York</h3>
<p>Manhattan</p>
</div>
<div class="w3-quarter">
<img src="images/Adobe/wand/Atonement_工作區域 1.png" alt="Atonement" style="width:100%">
<h3>贖罪 Atonement</h3>
<p>
“How Old Do You Have To Be To Know The Difference Between Right And Wrong?”
</p>
</div>
</div>
<div class="container container2">
<div class="item">
<a href="https://drive.google.com/file/d/1PaYtAKft5o40ZS3C-6PzPl5Ezt-zBgFh/view?usp=sharing"><img
src="images/Adobe/筆刷/230420_筆刷_作品集.jpg" alt="Helen Keller" style="width:100%"></a>
<h3>Helen Keller</h3>
<p>“Life is either a daring adventure or nothing.” – Helen Keller</p>
</div>
<div class="item">
<img src="images/Adobe/筆刷/230420_遮色片_作品集.jpg" alt="Summer Beach Time" style="width:100%">
<h3>Summer Beach Time</h3>
<p>“I left my heart at the beach.” </p>
</div>
<div class="item">
<img src="images/Adobe/筆刷/Cat_Cream.gif" alt="Cat Cream" style="width:100%">
<h3>Cat Cream</h3>
<p>“The cat on the top makes every thing better.” </p>
</div>
<div class="item">
<img src="images/Adobe/筆刷/CIS.jpg" alt="CIS" style="width:100%">
<h3>大黑松小倆口</h3>
<p>在設計中，融合傳統與現代的元素，以突顯品牌的特色和價值。利用品牌故事中的牛軋糖作為設計的主要元素，加入傳統窗花的紋樣並沿用舊有商標的字體，還有松樹枝葉的元素，用復古俏皮的牌擺去呈現新穎的品牌印象，使商標更富有生氣和吸引力。
</p>
</div>
</div>
<br>
<br>
<br>
<br>
<div class="footer">
<div class="sitemap">
Life isn't about waiting for the storm to pass. It's about learning to dance in the rain.
</div>
</div>
<a href="#top" class="btn-top">
<span></span>
</a>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script src="common.js"></script>
</body>
</html>