-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
536 lines (513 loc) · 31.1 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
<!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">
<link rel="apple-touch-icon" sizes="180x180" href="./favicon_io/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="./favicon_io/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./favicon_io/favicon-16x16.png">
<link rel="manifest" href="./favicon_io/site.webmanifest">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>Danilo Portfolio</title>
</head>
<body>
<nav>
<div class="nav-badge">
<p>Danilo</p>
</div>
<div class="nav-links" id="navLinks">
<i class="fa-solid fa-xmark" id="hideIcon" onclick="hideMenu()"></i>
<div>
<a href="#Home" id="homePageLang">首頁</a>
<a href="#Skill" id="skillLang">技術</a>
<a href="#Project" id="portfolioLang">作品集</a>
<a href="#Others" id="otherLang">其他</a>
<a href="#contact" id="contactLang">聯繫我</a>
<a id="changeLan" style="cursor: pointer; color:rgb(104, 104, 104)">lan: 中文</a>
</div>
</div>
<i class="fa-solid fa-bars" id="showIcon" onclick="showMenu()"></i>
</nav>
<!-- header -->
<section class="header" id="Home">
<div class="header-text-box">
<p>Hi There, my name is </p>
<p><span>Danilo</span></p>
<p>I am a Web Developer</p>
<p>
<span style="font-weight: 100; font-size: 1.5em; color:#FDA" id="introTitle"> 我目前在Cienet擔任前端工程師 ...
</span> <br>
<span id="introContent"> 2023年起在Cienet擔任前端工程師，參與之業務包含既有網頁系統的維護以及網頁功能的開發與測試。熟悉的基礎技術包含HTML, CSS, JS,
TS，其中Frame work主要使用Angular以及React，CSS框架則以BootStrap為主。<br>
近期因應嵌入式AI的發展與趨勢，亦研究VSCode Extension的開發，並應用協助團隊操作自動化流程之業務，故熟悉VSCode API, VSCode Extension
Development之技術，並足以依相關需求獨立開發VSCode擴展應用程式。<br><br>
在擔任軟體工程師以前，曾任職於AECOM都市設計師，並於第二年起擔任Key
Designer。工作的內容主要帶領團隊成員共同執行專案，管理專案進度執行以及業主(/客戶)的溝通協調，確保項目進度穩定執行。<br>
綜上工作經歷，使我熟悉與他人共同工作，與團隊共同為目標一起精進技術與前進。 </span>
</p>
</div>
</section>
<!-- skill -->
<section class="skill" id="Skill">
<h1 class="title" id="skillLang1">技術</h1>
<p class="sub-title">The Skills I Utilise</p>
<div class="skill-box">
<div class="text-box">
<p id="frontEndRelatedLan">前端相關技術</p>
<ul>
<li><i class="fa-brands fa-html5"></i>HTML5</li>
<li><i class="fa-brands fa-css3-alt"></i>CSS3</li>
<li><i class="fa-brands fa-js"></i>JavaScript</li>
<li><i class="fa-brands fa-bootstrap"></i>Bootstrap</li>
<li><i class="fa-brands fa-react"></i>React.js</li>
<li><i class="fa-brands fa-react"></i>Angular</li>
</ul>
<div class="education"></div>
<p id="backEndRelatedLan">後端相關技術</p>
<ul>
<li><i class="fa-brands fa-node-js"></i>Node.js</li>
<li><i class="fa-solid fa-wrench"></i>Express</li>
<li><i class="fa-solid fa-wrench"></i>EJS</li>
<li><i class="fa-solid fa-wrench"></i>MongoDB</li>
<li><i class="fa-solid fa-wrench"></i>Mongoose</li>
<li><i class="fa-solid fa-wrench"></i>Mongo Atlas</li>
</ul>
</div>
<div class="text-box">
<p id="otherSkillLan">其他技術</p>
<ul>
<li><img src="./material/adobe_icon-01.svg" class="icon-ai">Illustrator</li>
<li><img src="./material/adobe_icon-02.svg" class="icon-ai">PhotoShop</li>
<li><img src="./material/adobe_icon-05.svg" class="icon-ai">InDesign</li>
<li><img src="./material/adobe_icon-04.svg" class="icon-ai">After Effect</li>
<li><img src="./material/adobe_icon-03.svg" class="icon-ai">Premiere</li>
<li><img src="./material/autoCad.svg" class="icon-ai" width="32" height="32">AutoCAD</li>
<li><i class="fa-solid fa-wrench"></i>QGIS/ArcGIS</li>
<li><i class="fa-solid fa-wrench"></i>SketchUp</li>
<li><i class="fa-solid fa-wrench"></i>Lumion</li>
<li><i class="fa-solid fa-wrench"></i>MicroSoft Office</li>
</ul>
</div>
<div class="text-box">
<p id="lanSkillLan">語言能力</p>
<ul>
<li id="chineseLan">中文</li>
<li id="englishLan">英文</li>
</ul>
<div class="education"></div>
<p id="eduLan">學歷</p>
<ul>
<li id="masterLan">2020 城市設計碩士, 紐卡斯爾大學, 英國</li>
<li id="bachelorLan">2017 都市計劃學系學士, 國立成功⼤學, 臺灣</li>
</ul>
</div>
</div>
</section>
<!-- project -->
<section class="project" id="Project">
<h1 class="title" id="portfolioLang1">作品集</h1>
<p class="sub-title">My Personal Projects</p>
<div class="project-row">
<div class="text-col">
<p class="project-name">Project : danilo-shop</p>
<p><b id="pjIntroLan">專案介紹 : </b></p>
<p id="pjIntroContentLan"> danilo-shop
是以ReactJs + GoogleFireBase製作的Single web app 網購平台Demo，用戶在web
app上可以註冊或登入帳號，將不同類別的產品放置購物車，然後進行結帳。設計此網站的動機是為了實踐對於ReactJS熟悉度並架設相對功能複雜的網站應用程式的能力。
</p>
<p><b id="pjLinkLan">專案連結 : </b></p>
<a class="link github" href="https://github.com/danilo-hung/danilo-shop" target="_blank"><i
class="fa-brands fa-github"></i></a>
<a class="link google" href="https://crwn-clothing-db-62b2f.firebaseapp.com/" target="_blank"><i
class="fa-solid fa-fire"></i></a>
<a class="link netlify" href="https://danilo-shopoo.netlify.app/" target="_blank"><b
id="link-word">Netlify</b></a>
<p><b id="pjToolsLan">專案涉及工具 : </b></p>
<p>JSX, SCSS, ReactJS, Redux, GoogleFireBase </p>
<div>
<p> <b id="pjMethodLan">專案工作方法 : </b> </p>
<ul>
<li id="pjMethodLi1Lan">透過react-router建構web app url route關係，並透過import "Outlet" 將nav bar 固定於網頁置頂
</li>
<li id="pjMethodLi2Lan">以noSQL系統的Google FireBase做為網頁數據庫，應用該數據庫製作網站的登入及註冊系統 (包含Google登入系統)</li>
<li id="pjMethodLi3Lan">專案前期以Context, 後期改以Redux建立全域性資料(包含用戶, 商品以及購物車產品資料), 避免prop drilling的問題
</li>
<li id="pjMethodLi4Lan">以Nested Route 建立不同類型商品的網頁 (ex: shop/hats, shop/jackets ...)</li>
<li id="pjMethodLi5Lan">透過styled component建立CSSinJS，將過程中的scss style改成styled jsx，避免style重複的課題
</li>
</ul>
</div>
</div>
<div class="img-col">
<div id="carouselDaniloShop" class="carousel slide" data-bs-ride="true">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselDaniloShop" data-bs-slide-to="0" class="active"
aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselDaniloShop" data-bs-slide-to="1"
aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselDaniloShop" data-bs-slide-to="2"
aria-label="Slide 3"></button>
<button type="button" data-bs-target="#carouselDaniloShop" data-bs-slide-to="3"
aria-label="Slide 4"></button>
<button type="button" data-bs-target="#carouselDaniloShop" data-bs-slide-to="4"
aria-label="Slide 5"></button>
<button type="button" data-bs-target="#carouselDaniloShop" data-bs-slide-to="5"
aria-label="Slide 6"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="./material/daniloShop_1.png" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="./material/daniloShop_2.png" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="./material/daniloShop_3.png" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="./material/daniloShop_4.png" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="./material/daniloShop_5.png" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="./material/daniloShop_6.png" class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselDaniloShop"
data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselDaniloShop"
data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
<div class="project-row">
<div class="text-col">
<p class="project-name">Project : Camp.Info</p>
<p><b id="pjIntroLan1">專案介紹 : </b></p>
<p id="pjIntroContentLan1"> Camp.Info
是一個用戶可以瀏覽台灣各地露營地的網站，透過註冊一個新的帳戶，用戶可以創建、評論露營地的資訊與體驗心得，並且可以修改該用戶創建的露營地資訊。設計此網站的動機是為了實踐透過Node.js來架設完善功能的能力。
</p>
<p><b id="pjLinkLan1">專案連結 : </b></p>
<a class="link github" href="https://github.com/danilo-hung/2022_CampInfo" target="_blank"><i
class="fa-brands fa-github"></i></a>
<a class="link render" href="https://danilo-yelp-camp.onrender.com/" target="_blank"><b
id="link-word">Render</b></a>
<p><b id="pjToolsLan1">專案涉及工具 : </b></p>
<p>HTML5/EJS, JavaScript, CSS-3, Bootstrap(5.2.3), Nodejs, Express, MongoDB, Joi,
MongoAltas, MapBox, Cloudinary, PassPortJs </p>
<div>
<p> <b id="pjMethodLan1">專案工作方法 : </b> </p>
<ul>
<li id="pjMethodLi1Lan1">以fullCRUD建立網頁系統, 建構網頁新增, 瀏覽, 編輯和刪除露營區的功能</li>
<li id="pjMethodLi2Lan1">以noSQL系統的MongoDB做為網頁數據庫，透過一對多關係模式將Campgrounds, User,
Review三種collections的數據進行連結</li>
<li id="pjMethodLi3Lan1">以PassportJS工具建立網頁的用戶註冊/登入的驗證系統，並將用戶密碼透過該工具導入的Hash Function與
Salting提供用戶密碼基礎的保護措施</li>
<li id="pjMethodLi4Lan1">透過Cloudinary提供用戶新增露營區相片的雲端儲存</li>
<li id="pjMethodLi5Lan1">透過MapBox提供用戶瀏覽露營區位置時更佳的空間視覺化體驗</li>
</ul>
</div>
</div>
<div class="img-col">
<div id="carouselCampInfo" class="carousel slide" data-bs-ride="true">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselCampInfo" data-bs-slide-to="0" class="active"
aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselCampInfo" data-bs-slide-to="1"
aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselCampInfo" data-bs-slide-to="2"
aria-label="Slide 3"></button>
<button type="button" data-bs-target="#carouselCampInfo" data-bs-slide-to="3"
aria-label="Slide 4"></button>
<button type="button" data-bs-target="#carouselCampInfo" data-bs-slide-to="4"
aria-label="Slide 5"></button>
<button type="button" data-bs-target="#carouselCampInfo" data-bs-slide-to="5"
aria-label="Slide 6"></button>
<button type="button" data-bs-target="#carouselCampInfo" data-bs-slide-to="6"
aria-label="Slide 7"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="./material/campInfo_1.png" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="./material/campInfo_2.png" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="./material/campInfo_3.png" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="./material/campInfo_4.png" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="./material/campInfo_5.png" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="./material/campInfo_6.png" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="./material/campInfo_7.png" class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselCampInfo"
data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselCampInfo"
data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
<div class="gizmo-container">
<div class="gizmo-row">
<p class="gizmo-name">Gizmo : Kittens Rolodex</p>
<div class="img-col">
<img src="./material/kittensRolodex.png" alt="">
<div class="text-col">
<div class="button">
<p>
Detail
</p>
</div>
<div class="link-container">
<a class="link github" href="https://github.com/danilo-hung/kittens-rolodex"
target="_blank"><i class="fa-brands fa-github"></i></a>
<a class="link" href="https://danilo-hung.github.io/kittens-rolodex/" target="_blank"><i
class="fa-solid fa-desktop"></i></a>
</div>
<p class="intro" id="gizmo1Intro"> 該裝置模擬公司成員介紹清單 : 可透過搜尋功能過濾成員，並顯示詳細的成員資訊。網頁同時以ReactJS
Class以及Functional
(Hook)邏輯編程；風格以手刻CSS進行animate的渲染。
</p>
</div>
</div>
</div>
<div class="gizmo-row">
<p class="gizmo-name">Gizmo : Quote Generator</p>
<div class="img-col">
<img src="./material/quoteGenerator.png" alt="">
<div class="text-col">
<div class="button">
<p>
Detail
</p>
</div>
<div class="link-container">
<a class="link github" href="https://github.com/danilo-hung/2022_QuoteGenerator"
target="_blank"><i class="fa-brands fa-github"></i></a>
<a class="link" href="https://danilo-hung.github.io/2022_QuoteGenerator/" target="_blank"><i
class="fa-solid fa-desktop"></i></a>
</div>
<p class="intro" id="gizmo2Intro"> 透過async fetch reqest 從 web
API中抓取隨機的名言與其作者資訊。並從Tweet及Meta的開發者平台中擷取相關指令製作可將名言即時分享到動態中的DOM練習項目。
</p>
</div>
</div>
</div>
<div class="gizmo-row">
<p class="gizmo-name">Gizmo : Score Keeper</p>
<div class="img-col">
<img src="./material/pinpongScoreKeeper.png" alt="">
<div class="text-col">
<div class="button">
<p>
Detail
</p>
</div>
<div class="link-container">
<a class="link github" href="https://github.com/danilo-hung/pingPongScoreKeeper"
target="_blank"><i class="fa-brands fa-github"></i></a>
<a class="link" href="https://danilo-hung.github.io/pingPongScoreKeeper/" target="_blank"><i
class="fa-solid fa-desktop"></i></a>
</div>
<p class="intro" id="gizmo3Intro">
該裝置提供用戶計算桌球比賽的比分。透過設定比賽總分，當其中一方玩家達到分數時，顯示勝利玩家。網頁以Bootstrap框架設計網頁的風格，並以該框架的flex
box進行切版，是一個結合styling跟JS DOM的練習項目。
</p>
</div>
</div>
</div>
<div class="gizmo-row">
<p class="gizmo-name">Gizmo : Infinite Scroll</p>
<div class="img-col">
<img src="./material/InfiniteScroll.png" alt="">
<div class="text-col">
<div class="button">
<p>
Detail
</p>
</div>
<div class="link-container">
<a class="link github" href="https://github.com/danilo-hung/2022_InfiniteScroll"
target="_blank"><i class="fa-brands fa-github"></i></a>
<a class="link" href="https://danilo-hung.github.io/2022_InfiniteScroll/" target="_blank"><i
class="fa-solid fa-desktop"></i></a>
</div>
<p class="intro" id="gizmo4Intro"> Infinite Scroll 是利用unsplash api
隨機生成圖片，並使其在網頁上進行無限的loading，是一個結合styling跟JS
DOM的練習項目。
</p>
</div>
</div>
<p class="quote">free api key : f0iNOGLQjywiYCGHug9ETqTC9ZvHJ5109IIfsf7g2Lc</p>
</div>
<div class="gizmo-row">
<p class="gizmo-name">Gizmo : Auth exercise</p>
<div class="img-col">
<img src="./material/authExercise.png" alt="">
<div class="text-col">
<div class="button">
<p>
Detail
</p>
</div>
<div class="link-container">
<a class="link github" href="https://github.com/danilo-hung/firebase-auth"
target="_blank"><i class="fa-brands fa-github"></i></a>
<a class="link" href="https://danilo-hung.github.io/firebase-auth/" target="_blank"><i
class="fa-solid fa-desktop"></i></a>
</div>
<p class="intro" id="gizmo5Intro"> Auth Exercise 是利用Google FireBase中的auth跟firestore
SDK透過ReactJS搭建的用戶的註冊與登入系統，用戶除了email註冊外，也可透過google與facebook的第三方帳戶登入系統。
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Other Experience -->
<section class="others" id="Others">
<h1 class="title" id="otherLang1">其他</h1>
<p class="sub-title">More about me</p>
<div class="others-box">
<div class="text-box work-experiences">
<p class="others-title" id="workExpLan">工作經歷</p>
<p class="others-subtitle" id="workExpSubLan">我是一名IDE擴展和前端開發人員</p>
<div class="content-container">
<ul>
<li>2023.Apr-Now <br> <span id="workExp1">Cienet，前端開發工程師</span> </li>
</ul>
</div>
<div class="break-line"></div>
<p class="others-subtitle" id="workExpSub2Lan">我曾是城市設計師</p>
<div class="content-container">
<ul>
<li>2020.Aug-2022.Aug <br> <span id="work2Exp1">AECOM，城市設計師 II</span> </li>
<li>2017.Jul-Aug <br> <span id="work2Exp2">國泰人壽不動產投資部，不動產實習生</span></li>
<li>2016.Jul <br> <span id="work2Exp3">FAP+DA，都市計畫實習生</span></li>
</ul>
</div>
</div>
<div class="text-box work-experiences">
<p class="others-title" id="otherPjTitleLan">參與過的專案</p>
<p class="others-subtitle" id="otherPjSubLan1">作為一名IDE Extension開發與前端工程師</p>
<div class="content-container">
<ul>
<li> 2023 <br>
<span id="otherPjLan">
與<span style="color: rgb(255, 150, 80);">Google</span>團隊合作，不斷提高其產品的品質
</span>
</li>
<li> 2023 <br>
<span id="otherPj2Lan">
依據團隊與客戶需求，於前期獨立開發<span style="color: rgb(255, 150, 80);">VSCode Extension</span>，達成<span
style="color: rgb(255, 150, 80);">嵌入式擴展app</span>的<span
style="color: rgb(255, 150, 80);">自動化測試系統</span>
</span>
</li>
</ul>
</div>
<div class="break-line"></div>
<p class="others-subtitle" id="otherPjSubLan">當我是一名城市設計師的時候</p>
<div class="content-container">
<ul>
<li>Assiststant Urban Designer, 2022 <br> NEOM Regional Plan, <span
style="color: rgb(255, 150, 80);">Saudi Arabia</span></li>
<li>Key Design, 2021<br> North Coast & Guanyinshan National Scenic Area Development Master Plan,
<span style="color:rgb(255, 150, 80);">Taiwan</span>
</li>
<li> Urban Designer, 2022 <br> International Tendering For Phase I Urban Design Of Shenzhen,
<span style="color: rgb(255, 150, 80);">China</span>
</li>
<li>Assiststant Urban Designer, 2021 <br> Chenggong Water Area Recreation Master Plan, <span
style="color: rgb(255, 150, 80);">Taiwan</span></li>
<li> Key Design, 2021 <br> Takoham Local Development and Regional Comprehensive Plan, <span
style="color: rgb(255, 150, 80);">Taiwan</span></li>
</ul>
</div>
</div>
<div class="text-box work-experiences">
<p class="others-title" id="otherExpTitleLan">其他經歷</p>
<p class="others-subtitle" id="otherExpSubLan">更多關於我</p>
<div class="content-container">
<ul>
<li> 2021 <br> <span id="otherExp1Lan">第九屆台灣景觀大獎 佳作獎 : 大嵙崁計畫</span> </li>
<li> 2017 <br> <span id="otherExp2Lan">ATCC全國大專院生商業個案大賽 企業第三名 : ROOT</span> </li>
<li> 2017.Oct <br> <span id="otherExp3Lan"> 台灣設計展-南風館策展助理</span></li>
<li>2016-2017 <br> <span id="otherExp4Lan">TEDxTainan 設計部</span></li>
<li>2016-2017 <br><span id="otherExp5Lan">成大學生會 公關部副部長</span></li>
<li>2015.Oct <br> <span id="otherExp6Lan">臺南海安商圈微電影競賽銅獎</span></li>
<li>2015.Oct<br> <span id="otherExp7Lan">2015成大都計人生職涯博覽會 公關</span></li>
<li>2014.Jul <br><span id="otherExp8Lan">美國遊學與打工 (聖地牙哥與紐約)</span></li>
</ul>
</div>
</div>
</div>
</section>
<!-- contat -->
<footer class="contact" id="contact">
<h1 class="title" id="contactLang1">聯繫我</h1>
<div class="text-col">
<div>
<p> <b> <span id="contact1Lang">您好</span></b><br>
<span id="contact2Lang">謝謝您造訪我的個人網站。</span><br>
<span id="contact3Lang">如果您正在尋找前端工程師夥伴，</span>
<span id="contact4Lang">請不吝與我聯繫洽談更多的細節，</span> <br>
<span id="contact5Lang">祝您有個愉快的一天！</span>
</p>
</div>
<div class="link-c">
<p class="link-box">
<a class="link facebook" href="https://www.facebook.com/naths.HLH" target="_blank"><i
class="fa-brands fa-facebook"></i></a>
<a class="link instagram" href="https://www.instagram.com/danilo_hlh/" target="_blank"><i
class="fa-brands fa-instagram"></i></a>
<a class="link cakeresume" href="https://www.cakeresume.com/me/danilo-hung" target="_blank"><i
class="fa-solid fa-c"></i></a>
<a class="link linkedin" href="https://www.linkedin.com/in/danilo-1231/" target="_blank"><i
class="fa-brands fa-linkedin"></i></a>
<a class="link github" href="https://github.com/danilo-hung" target="_blank"><i
class="fa-brands fa-github"></i></a>
</p>
</div>
<div>
<p id="contactLang2"> <b>我的電子信箱</b></p>
<p>danilohung2022@gmail.com </p>
<p> andyloveyoutoo2019@gmail.com
</p>
</div>
</div>
</footer>
<!-- script -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
crossorigin="anonymous"></script>
<script src="script.js"></script>
<script src="lan.js"></script>
</body>
</html>