-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
2375 lines (2340 loc) · 163 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
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!doctype html>
<html lang="zh-Hant-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="Description" CONTENT="關於呂亮進">
<!-- Facebook Opengraph -->
<meta property="og:url" content="https://lianglu.uk/" />
<meta property="og:type" content="website" />
<meta property="og:title" content="關於呂亮進" />
<meta property="og:description" content="一位多領域背景的產品創造者." />
<meta property="og:image" content="/assets/imgs/index/myHead.webp" />
<meta property="og:image:alt" content="關於呂亮進" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="386px" />
<meta property="og:image:height" content="386px" />
<!-- End Facebook Opengraph -->
<title>呂亮進｜一位多領域背景的產品創造者</title>
<link rel="Shortcut Icon" type="image/x-icon" href="/assets/favicon.png" />
<!--Start Load CSS-->
<link rel="stylesheet" href="/assets/stylesheets/myself.css">
<link rel="stylesheet" href="/assets/stylesheets/all.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<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+Sans+TC:wght@100;400;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Emoji&display=swap" rel="stylesheet">
<!-- Google Font - Nav Logo-->
<link href="https://fonts.googleapis.com/css2?family=Playwrite+HR+Lijeva&display=swap" rel="stylesheet">
<!--GA Ana-->
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-165132NHTH"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-165132NHTH');
</script>
<!-- Add: Vue.js Suppot-->
<script type="importmap">
{"imports": {
"vue": "/assets/script/vue.esm-browser.js"
}}
</script>
<script>
// 定義作品集資料格式
const set_type = [
{
id: "pin",
title: "⭐ 精選專案",
html_icon: "<i class='bi bi-star-fill pe-2'></i>精選專案"
},
{
id: "analysis",
title: "📊 數據/文本分析",
html_icon: "<i class='bi bi-bar-chart-fill pe-2'></i>數據／文本分析"
},
{
id: "dev",
title: "💻 程式開發",
html_icon: "<i class='bi-terminal-fill pe-2'></i>程式開發"
},
{
id: "design",
title: "🎨 設計",
html_icon: "<i class='bi bi-vector-pen pe-2'></i>設計"
},
{
id: "plan",
title: "🖊️ 企劃",
html_icon: "<i class='bi-file-earmark-medical-fill pe-2'></i>企劃"
},
{
id: "other",
title: "🗃️ 其他",
html_icon: "<i class='bi bi-three-dots pe-2'></i>其他"
}
]
const set_projects = [
{
name: "Trello 知識小幫手 2.0",
cover: "/assets/imgs/trelloFinder/cover.png",
beforeLoadingCover: "/assets/imgs/trelloFinder/coverLoading.jpg",
link: "/projects/trelloFinder.html",
tags: ["# 文本探勘", "# 文本搜尋算法", "# 大型語言模型", "# 向量資料管理", "# APIs 設計", "# 佇列系統"],
description: "[作品＆論文] 在 Trello 平台結合大型語言模型協助學生進行自主學習資源搜索與互動。",
projectType: ["pin", "dev", "analysis"]
},
{
name: "Chenmko 全端網頁開發內容",
cover: "/assets/imgs/chenmko/cover.png",
beforeLoadingCover: "/assets/imgs/chenmko/coverLoading.jpg",
link: "/projects/chenmko.html",
tags: ["# 網站架設", "# 資料庫設計", "# 前端開發", "# 後端開發"],
description: "CHENMKO 企業委託專案，根據客戶提供的設計圖和需求，為企業提供一個完整的官網和後台系統管理產品。",
projectType: ["pin", "dev"]
},
{
name: "Songla 音樂智慧創作小幫手",
cover: "/assets/imgs/songla/cover.png",
beforeLoadingCover: "/assets/imgs/songla/coverLoading.jpg",
link: "/projects/songlaMusicCreater.html",
tags: ["# 介面設計", "# 產品規劃", "# UX優化"],
description: "哼唱即可作曲，讓創作音樂不再是遙不可及的夢想。",
projectType: ["pin", "design"]
},
{
name: "MindReader",
cover: "/assets/imgs/mindReader/cover.png",
beforeLoadingCover: "/assets/imgs/mindReader/coverLoading.jpg",
link: "/projects/mindReader.html",
tags: ["# 產品規劃", "# 介面設計", "# 機器學習", "# APIs 設計", "# 文本分析"],
description: "Mind Reader 與你心譯相通，精準的表達出文字中所包含的情感和意思，減少生活上的誤會。",
projectType: ["pin", "dev", "design", "analysis"]
},
{
name: "華新雲會議管理系統",
cover: "/assets/imgs/hsCloudMeetingManage/cover.png",
beforeLoadingCover: "/assets/imgs/hsCloudMeetingManage/coverLoading.jpg",
link: "/projects/hsCloudMeetingManage.html",
tags: ["# 介面設計", "# 產品規劃", "# 前端開發", "# 後端開發"],
description: "大學系統分析專案，利用 mongodb 與 jisti 提供使用者線上開會與開會管理的解決方案，除了基本網頁通知，也串接了信箱系統，以確保用戶信息不漏接。",
projectType: ["pin", "dev", "design"]
},
{
name: "華新 VMI 庫存管理遊戲",
cover: "/assets/imgs/hsVmi/cover.png",
beforeLoadingCover: "/assets/imgs/hsVmi/coverLoading.jpg",
link: "/projects/hsVmi.html",
tags: ["# 程式開發", "# 前端開發", "# 後端開發"],
description: "大學系統分析專案，利用歷史資訊來推算庫存，並依照使用者操作來預估未來的成本，以此進行員工銷售策畫訓練。",
projectType: ["pin", "dev"]
},
{
name: "Pincake AI 履歷",
cover: "/assets/imgs/pincakeAi/cover.png",
beforeLoadingCover: "/assets/imgs/pincakeAi/coverLoading.jpg",
link: "/projects/pincakeAi.html",
tags: ["# 介面設計", "# 產品規劃", "# 行銷策劃"],
description: "Pincake 針對求職新鮮人的產品。主要產品為 AI 求職助手平台,根據求職者提供的公司職缺與工作描述等內容為用戶提供求職整合服務。",
projectType: ["design", "plan"]
},
{
name: "食材外送專家 - Foodome",
cover: "/assets/imgs/foodome/cover.png",
beforeLoadingCover: "/assets/imgs/foodome/coverLoading.jpg",
link: "/projects/foodome.html",
tags: ["# 介面設計", "# 商業企劃書製作"],
description: "本產品提供客戶食譜教學的服務，並且以銷售食材為主要的收入來源。",
projectType: ["design", "plan"]
},
{
name: "MeowLu Stock - 股票試算小工具",
cover: "/assets/imgs/meowluStockCalc/cover.png",
beforeLoadingCover: "/assets/imgs/meowluStockCalc/coverLoading.jpg",
link: "/projects/meowluStockCalc.html",
tags: ["# 介面設計", "# 產品規劃", "# 程式開發"],
description: "提供股票交易款計算小工具，也能依據設定漲跌幅度來計算期望股價。適合作為新手小白的工具。",
projectType: ["pin", "dev"]
},
{
name: "No Drink No Drunk",
cover: "/assets/imgs/noDrinkNoDrunk/cover.png",
beforeLoadingCover: "/assets/imgs/noDrinkNoDrunk/coverLoading.jpg",
link: "/projects/noDrinkNoDrunk.html",
tags: ["# 程式開發"],
description: "大學開發專案，純 HTML5 & CSS3 製作酒類銷售網頁。",
projectType: ["dev"]
},
{
name: "一日情人後端",
cover: "/assets/imgs/oneDayLover/cover.png",
beforeLoadingCover: "/assets/imgs/oneDayLover/coverLoading.jpg",
link: "/projects/oneDayLover.html",
tags: ["# 程式開發"],
description: "大學開發專案，利用 JSP 製作商城後端（純資料庫交互，無金流，具備後台）。",
projectType: ["dev"]
},
{
name: "2020年台灣各行業別員工薪資統計分析",
cover: "/assets/imgs/jobAnalytics2020/cover.png",
beforeLoadingCover: "/assets/imgs/jobAnalytics2020/coverLoading.jpg",
link: "/projects/jobAnalytics2020.html",
tags: ["# 資料清理", "# 資料視覺化", "# 簡報設計"],
description: "利用政府公開資訊分析職場，提供學子未來工作的預期薪資的參考資訊。",
projectType: ["analysis"]
},
{
name: "數位海洋知識專案",
cover: "/assets/imgs/digitalOcean/cover.png",
beforeLoadingCover: "/assets/imgs/digitalOcean/coverLoading.jpg",
link: "/projects/digitalOcean.html",
tags: ["# 數位內容"],
description: "我的個人知識庫",
projectType: ["other"]
},
{
name: "自架站科技／遊戲Blog－Techjoy",
cover: "/assets/imgs/wpWeb/cover.png",
beforeLoadingCover: "/assets/imgs/wpWeb/coverLoading.jpg",
link: "/projects/wpWeb.html",
tags: ["# 數位內容", "# 網站架設"],
description: "約高中時期創立2個網站，分別為「Tecjoy 樂享科技」，「mcblog」，分享產品體驗與推廣 Minecraft 遊戲創作。",
projectType: ["other"]
},
{
name: "TechLife 讓科技充滿生活",
cover: "/assets/imgs/techlife/cover.png",
beforeLoadingCover: "/assets/imgs/techlife/coverLoading.jpg",
link: "/projects/techlife.html",
tags: ["# PowerPoint 設計", "# 教案設計"],
description: "適逢網際網路活躍發展的世代，我們認為擁有基本的資訊素養是非常重要的，除了瞭解資訊相關知識以外，學會使用資訊科技亦是如今不可或缺的能力。而年紀尚幼的孩子們可塑性強、學習力高，非常適合慢慢地開始接觸資訊這個領域，提早學習一定能夠替未來發展創造出更多的機會。",
projectType: ["pin", "plan", "other"]
}
]
</script>
</head>
<body>
<style>
:root {
--themeColor: #7c6e69;
--secondColor: #49413d;
}
body {
background-color: #E8E1E5 !important;
}
.bg-my-projects {
background-color: #ececec !important;
}
.navlogofont {
font-family: "Playwrite HR Lijeva", cursive;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
}
</style>
<!--Nav Style-->
<style>
.nav .nav-item .nav-link {
color: gray;
font-size: calc(1.275rem);
-webkit-appearance: none;
}
.nav .nav-item .nav-link:hover {
color: var(--themeColor);
border-width: 6px;
border-bottom: var(--themeColor);
border-bottom-style: solid;
}
.nav .nav-item .active {
font-weight: bolder;
border-width: 6px;
border-bottom: black;
border-bottom-style: solid;
text-decoration: none;
color: #141929;
font-size: calc(1.275rem + 0.3vw);
letter-spacing: 0.05em;
-webkit-appearance: none;
}
.grayBlockHover {
text-decoration: none;
color: #1f1f1f;
}
.grayBlockHover:hover {
text-decoration: none;
color: #1f1f1f;
background-color: #f0f0f0;
}
.btn-myprimary {
background-color: var(--themeColor);
color: #ffffff;
}
.btn-myprimary:hover {
background-color: var(--secondColor);
color: #ffffff;
}
.btn-outline-myprimary {
border-color: var(--themeColor);
color: var(--themeColor);
}
.btn-outline-myprimary:hover {
border-color: var(--secondColor);
background-color: var(--themeColor);
color: #ffffff;
}
.bg-mytheme {
color: var(--secondColor);
position: relative;
letter-spacing: 0.02rem;
z-index: 10;
}
.bg-mytheme::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--themeColor);
opacity: 0.2;
z-index: -1;
}
.color-mytheme {
color: var(--themeColor);
}
</style>
<nav class="navbar navbar-expand-lg navbar-light shadow p-3 fixed-top" id="nav">
<div class="container-fluid">
<a class="navbar-brand d-flex align-items-center flex-wrap text-white" href="#topCover">
<img src="/assets/file/iconDesignFile/logo.svg" class="me-3" alt="Icon of Logo" width="24px"
height="24px">
呂亮進・<span class="navlogofont" style="font-size: 1rem;">Liang Chin Lu</span>
</a>
<button class="navbar-toggler border-0 text-white" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarContentLinks" aria-controls="navbarContentLinks" aria-expanded="false"
aria-label="Toggle navigation">
<i class="bi bi-list-nested"></i>
</button>
<div class="collapse navbar-collapse" id="navbarContentLinks">
<hr class="d-block d-lg-none bg-light" style="opacity: 0.2;">
<ul class="navbar-nav me-auto mb-lg-0 d-flex col-12 justify-content-end">
<li class="nav-item rounded-pill text-center">
<a class="nav-link" href="#myProjects">我的作品</a>
</li>
<li class="nav-item rounded-pill text-center">
<a class="nav-link" href="/awards">我的獎項</a>
</li>
<li class="nav-div rounded-pill">
<a class="nav-link text-white-50 d-none d-md-block">｜</a>
<hr class="d-block d-md-none">
</li>
<li class="nav-item rounded-pill text-center">
<a class="nav-link" target="_blank" href="mailto:liangchinlu@gmail.com">Email</a>
</li>
<li class="nav-item rounded-pill text-center">
<a class="nav-link" target="_blank" href="https://www.facebook.com/tony13382/">Facebook</a>
</li>
<li class="nav-item rounded-pill text-center">
<a class="nav-link" target="_blank"
href="https://www.linkedin.com/in/liang-chin-lu/">LinkedIn</a>
</li>
</ul>
</div>
</div>
</nav>
<a class="fixed-bottom text-decoration-none" onclick="toTop()" id="toTopBtn"
style="display:none; z-index: 1000; right:16px; bottom:40px; left: auto;">
<div class="rounded-circle d-inline-flex shadow-lg p-2 rounded toTopBtn">
<div class="fs-4 d-flex align-items-center flex-wrap justify-content-center text-white"
style="width: 48px; height: 48px;">
<i class="bi bi-chevron-up text-decoration-none d-flex"></i>
</div>
</div>
</a>
<script src="/assets/script/scroll.js"></script>
<div style="
padding: 80px 0px;
background: linear-gradient(0deg, rgba(49, 40, 38, 0.89), rgba(45, 38, 30, 0.95)), url(assets/imgs/index/homeCover.jpg);
background-size: cover;
min-height: 90vh;
align-items: center;
display: grid;" id="topCover">
<div class="text-white" style="padding: 5rem 2rem;">
<div class="container">
<div class="row">
<div class="col-12 d-grid gap-4">
<h1 style="letter-spacing: 0.4em; line-height: 150%; color: #FFFFFF;" class="">
具多領域能力的網頁全端工程師
</h1>
<div class="card rounded-basic animate__animated animate__fadeInUp"
style="background-color: #fcefeab9;">
<div class="row card-body">
<div class="col-auto">
<div class="d-inline-flex justify-content-center align-items-center fs-4"
style="width: 48px; height: 48px; border-radius: 1.0rem; background-color: var(--secondColor);">
<i class="bi bi-phone"></i>
</div>
</div>
<div class="col text-black ps-1">
<p class="fw-bold mb-0">設計</p>
<p class="mt-1 mb-0" style="letter-spacing: 0.1rem;">
熟悉用戶體驗設計，並具有大量資料視覺化設計經驗，能夠提供有效的方案解決需求。
</p>
</div>
</div>
</div>
<div class="card rounded-basic animate__animated animate__fadeInUp"
style="background-color: #fcefeab9;">
<div class="row card-body">
<div class="col-auto">
<div class="d-inline-flex justify-content-center align-items-center fs-4"
style="width: 48px; height: 48px; border-radius: 1.0rem; background-color: var(--secondColor);">
<i class="bi bi-code-slash"></i>
</div>
</div>
<div class="col text-black ps-1">
<p class="fw-bold mb-0">開發</p>
<p class="mt-1 mb-0" style="letter-spacing: 0.1rem;">
專精於網頁領域全端開發，具有多項專案開發經驗，能建立完整架構的前後端網頁。
</p>
</div>
</div>
</div>
<div class="card rounded-basic animate__animated animate__fadeInUp"
style="background-color: #fcefeab9;">
<div class="row card-body">
<div class="col-auto">
<div class="d-inline-flex justify-content-center align-items-center fs-4"
style="width: 48px; height: 48px; border-radius: 1.0rem; background-color: var(--secondColor);">
<i class="bi bi-database"></i>
</div>
</div>
<div class="col text-black ps-1">
<p class="fw-bold mb-0">數據分析</p>
<p class="mt-1 mb-0" style="letter-spacing: 0.1rem;">
具有大量數據處理以及分析經驗，擅長結合資訊設計並進行分析，讓數據帶來價值。
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container" style="margin-top: -160px;">
<div class="row position-relative d-flex align-items-start">
<div class="col-lg-3 col-12 pb-4 sticky-lg-top " style="padding-top: 92px; z-index: 999;">
<div class="card shadow rounded-basic">
<div class="card-body p-4">
<div class="col-12">
<div class="d-flex justify-content-center">
<img src="/assets/imgs/index/myHead.webp" alt="my personal picture" width="120px"
class="bordre-1 rounded-circle">
</div>
<h2 class="fs-4 text-SkyHeavyBlue text-center mt-2">
呂亮進
</h2>
<p class="text-center text-black-50">後端開發／AI 工程師</p>
</div>
<div class="d-grid gap-2">
<a target="_blank" type="button" class="btn btn-myprimary rounded-pill"
href="/assets/file/rv/RV(Data_Science).pdf">
我的履歷
</a>
<a type="button" class="btn btn-outline-myprimary rounded-pill" data-bs-toggle="modal"
data-bs-target="#shareModel" data-bs-toggle="popover" data-bs-trigger="hover focus"
data-bs-content="QR Code" data-bs-placement="bottom">聯絡我
</a>
</div>
</div>
</div>
</div>
<div class="col-lg-9 col-12 pb-4">
<div style="height: 92px;" class="d-none d-lg-block"></div>
<!--自介-->
<div class="card shadow rounded-basic border-0">
<img src="/assets/imgs/index/profile_cover.jpg" class="card-img-top" alt="header image.">
<div class="p-2">
<div class="card-body lh-lg" id="about">
<div class="row">
<div class="col-12">
<p class="card-text pb-2 px-2">
我是一位對<span
class="halfHightLightBg">產品開發充滿熱情</span>且擁有設計開發與行銷經驗的專業人士。我享受挑戰和開發新產品的過程，擁有將商業設計與開發相結合的能力，並具備參與多項專案的經驗。
</p>
<p class="card-text pb-2 px-2">
我喜歡不斷挑戰自己並參與新產品的開發。從商業設計到開發的一條龍產品規劃經驗讓我能夠全方位地理解並滿足用戶需求。我注重細節，能夠平衡創新和實用性，並致力於創造出優質的產品。我具有良好的問題解決能力和分析能力，在高壓環境下能夠保持冷靜並迅速找到解決方案。
</p>
</div>
</div>
</div>
</div>
</div>
<!-- 工作優勢 -->
<div class="card shadow mt-4 border-0 rounded-basic">
<div class="card-body pb-0 lh-lg" id="about">
<div class="col-12">
<h3 class="pt-2 fw-bold" style="letter-spacing: 4px;">與我合作的<span
style="color: #ea81b0;">優勢</span></h3>
</div>
</div>
<div class="card-body px-0 py-0 pb-3 mx-3 lh-lg">
<div class="d-grid gap-3 pt-2">
<div class="card rounded-basic border-0" style="background-color: #f8eff6ca;">
<div class="row card-body">
<div class="col-auto">
<div class="d-inline-flex justify-content-center align-items-center fs-4 text-white"
style="width: 52px; height: 52px; border-radius: 1rem; background-color: #755e70;">
<i class="bi bi-card-checklist"></i>
</div>
</div>
<div class="col ps-1 text-black">
<p class="fw-bold mb-0">全方位產品開發能力</p>
<p class="mt-1 mb-0" style="letter-spacing: 0.1rem;">
具備<span
class="halfHightLightBg">商業設計到開發的一條龍產品規劃</span>經驗，能夠全面理解並滿足用戶需求。我注重於需求整合打造優質的產品。
</p>
</div>
</div>
</div>
<div class="card rounded-basic border-0" style="background-color: #f8eff6ca;">
<div class="row card-body">
<div class="col-auto">
<div class="col-auto">
<div class="d-inline-flex justify-content-center align-items-center fs-4 text-white"
style="width: 52px; height: 52px; border-radius: 1rem; background-color: #755e70;">
<i class="bi bi-patch-question"></i>
</div>
</div>
</div>
<div class="col ps-1 text-black">
<p class="fw-bold mb-0">強大的問題解決能力</p>
<p class="mt-1 mb-0" style="letter-spacing: 0.1rem;">
具備優秀的問題分析和實作能力。在高壓環境下，我能夠透過<span
class="halfHightLightBg">以終為始與資源盤點</span>迅速找到解決方案並且在挑戰過程中不斷成長。
</p>
</div>
</div>
</div>
<div class="card rounded-basic border-0" style="background-color: #f8eff6ca;">
<div class="row card-body">
<div class="col-auto">
<div class="col-auto">
<div class="d-inline-flex justify-content-center align-items-center fs-4 text-white"
style="width: 52px; height: 52px; border-radius: 1rem; background-color: #755e70;">
<i class="bi bi-person-lines-fill"></i>
</div>
</div>
</div>
<div class="col ps-1 text-black">
<p class="fw-bold mb-0">多元技能背景</p>
<p class="mt-1 mb-0" style="letter-spacing: 0.1rem;">
擁有資訊管理和學習科學與科技研究所的學位，<span
class="halfHightLightBg">多元的校園經驗與創業經歷</span>相結合使我能夠結合技術和理解使用者需求來開發產品。精通多種程式語言，能夠進行<span
class="halfHightLightBg">全端開發</span>並擁有<span
class="halfHightLightBg">介面設計和資料視覺化</span>的專業技能。
</p>
</div>
</div>
</div>
<div class="card rounded-basic border-0" style="background-color: #f8eff6ca;">
<div class="row card-body">
<div class="col-auto">
<div class="col-auto">
<div class="d-inline-flex justify-content-center align-items-center fs-4 text-white"
style="width: 52px; height: 52px; border-radius: 1rem; background-color: #755e70;">
<i class="bi bi-briefcase"></i>
</div>
</div>
</div>
<div class="col ps-1 text-black">
<p class="fw-bold mb-0">豐富合作經驗</p>
<p class="mt-1 mb-0" style="letter-spacing: 0.1rem;">
具備良好的團隊合作能力，能夠有效溝通和協調。<span
class="halfHightLightBg">多次擔任管理職與協調者角色</span>，善於與團隊成員合作，共同努力實現目標。我相信良好的團隊合作能讓計畫走得更長遠。
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 工作經歷 -->
<div class="card shadow mt-4 rounded-basic">
<div class="card-body lh-lg" id="about">
<div class="row">
<div class="col-12 pb-3">
<h3 class="pt-2 fw-bold" style="letter-spacing: 4px;">工作<span
style="color: #ea81b0;">經歷</span></h3>
</div>
<div class="col-12 d-grid gap-3 bordre-1">
<div class="card pb-2 rounded-inline-basic">
<div class="card-body pb-1">
<div class="d-flex align-items-center flex-wrap">
<p class="mb-0 flex-fill fs-5 fw-bold">AI 工程師</p>
<p class="mb-0 opacity-50 ">八月 2024 ～ Present</p>
</div>
<div class="">
<div class="d-flex align-items-center flex-wrap">
<p class="mb-0 me-2">Solwen AI（偉利科技子公司）</p>
</div>
</div>
<div class="">
<hr style="opacity: 0.1;">
<ul class="ps-4 mb-0">
<li>基於 FastAPI 框架規劃建構與開發<span class="halfHightLightBg">開發企業 AI
知識庫問答系統</span>，深度與 AI 工程師合作，將 LangChain 生成文本工作流整合進系統。</li>
<li>開發語言模型<span
class="halfHightLightBg">英語口說學習系統</span>，提供語音即時對話，口說評估報表生成與輸出功能。
</li>
</ul>
</div>
<hr style="opacity: 0.1;">
<div>
<span
class="badge rounded-pill bg-mytheme text-dark p-2 mt-1 me-1 overflow-hidden">#
LLM 應用</span>
<span
class="badge rounded-pill bg-mytheme text-dark p-2 mt-1 me-1 overflow-hidden">#
API 建立（FastAPI）</span>
<span
class="badge rounded-pill bg-mytheme text-dark p-2 mt-1 me-1 overflow-hidden">#
後端開發</span>
<span
class="badge rounded-pill bg-mytheme text-dark p-2 mt-1 me-1 overflow-hidden">#
ORM</span>
<span
class="badge rounded-pill bg-mytheme text-dark p-2 mt-1 me-1 overflow-hidden">#
PGVector</span>
</div>
</div>
</div>
<div class="card pb-2 rounded-inline-basic">
<div class="card-body pb-1">
<div class="d-flex align-items-center flex-wrap">
<p class="mb-0 flex-fill fs-5 fw-bold">系統設計與開發</p>
<p class="mb-0 opacity-50 ">七月 2023 ～ 七月 2024</p>
</div>
<div class="">
<div class="d-flex align-items-center flex-wrap">
<p class="mb-0 me-2">國立清華大學（國科會）</p>
<a href="projects/trelloFinder.html"
class="btn btn-outline-myprimary px-2 py-1 my-1 me-2 rounded-pill"
style="font-size: 0.75rem;">
Trello 知識小幫手 2.0
</a>
</div>
</div>
<div data-bs-toggle="collapse" data-bs-target="#collapseJobNthuResearch"
aria-expanded="false" aria-controls="collapseJobNthuResearch">
<hr style="opacity: 0.1;">
<ul class="ps-4 mb-0">
<li>使用了SBERT（Sentence-BERT）模型進行文本向量化。結合 Milvus 向量資料庫。在確保資料搜索準確性的情形下<span
class="halfHightLightBg">減少資源推薦運算時間（1 分鐘 → 3 秒）</span>。</li>
<li>使用 Flask 模組建立 WebAPIs，將系統與 Trello Webhook 進行結合，重構流程大幅減少整體系統獲取資料速度
<span class="halfHightLightBg">1分鐘→ 50毫秒</span>。
</li>
</ul>
<div class="collapse" id="collapseJobNthuResearch">
<hr style="opacity: 0.1;">
<p class="m-0">
<b>模糊文本搜尋算法</b>
</p>
<ul class="ps-4">
<li>使用 Sentence-BERT (SBERT) 技術進行文本向量化方面具有豐富經驗。透過 SBERT
技術，我能夠將文本轉換為密集的向量表示，進而實現更精確的相似性計算和文本匹配。</li>
<li>在多個專案中負責維運 Milvus 向量資料庫。我能夠靈活地配置、調整和優化
Milvus，以確保系統在處理大規模向量資料時的穩定性和高效性。</li>
<li>善於將自然語言處理 (NLP) 技術與搜尋算法相結合，以提供更精確和全面的搜索結果，從而提高系統的用戶體驗。</li>
</ul>
<p class="m-0">
<b>Flask API 製作</b>
</p>
<ul class="ps-4">
<li>設計和實現了基於 Flask 框架的 API，為計劃案發系統提供了穩定且靈活的後端服務。</li>
<li>透過遵循最佳實踐和優化代碼結構，我確保 API 的可擴展性和易於維護。</li>
<li>撰寫原子測試與技術相關文件，確保系統可以妥善的交接。</li>
</ul>
</div>
</div>
<hr style="opacity: 0.1;">
<div>
<span
class="badge rounded-pill bg-mytheme text-dark p-2 mt-1 me-1 overflow-hidden">#
LLM 應用</span>
<span
class="badge rounded-pill bg-mytheme text-dark p-2 mt-1 me-1 overflow-hidden">#
文本探勘</span>
<span
class="badge rounded-pill bg-mytheme text-dark p-2 mt-1 me-1 overflow-hidden">#
資訊佇列系統</span>
<span
class="badge rounded-pill bg-mytheme text-dark p-2 mt-1 me-1 overflow-hidden">#
Webhook 串接</span>
<span
class="badge rounded-pill bg-mytheme text-dark p-2 mt-1 me-1 overflow-hidden">#
API 建立</span>
</div>
</div>
</div>
<div class="card pb-2 rounded-inline-basic">
<div class="card-body pb-1">
<div data-bs-toggle="collapse" data-bs-target="#collapseJobNthuIR"
aria-expanded="false" aria-controls="collapseJobNthuIR">
<div class="d-flex align-items-center flex-wrap">
<p class="mb-0 flex-fill fs-5 fw-bold">研究實習生</p>
<p class="mb-0 opacity-50 ">九月 2022 ～ 一月 2023</p>
</div>
<p class="text-start mb-0 fs-6">清華大學校務研究中心</p>
<hr style="opacity: 0.1;">
<ul class="ps-4 mb-0">
<li>利用 Gephi、Excel、Python 處理<span class="halfHightLightBg">約 3000
筆</span>資料建立課程圖譜，找出不同課程與系所的連結程度。</li>
<li>使用 SBERT 模型進行文本向量化分析校園內不同領域的課程相似度，整理並利用校園課綱資料進行<span
class="halfHightLightBg">分群分析</span>。</li>
</ul>
<div class="collapse" id="collapseJobNthuIR">
<hr style="opacity: 0.1;">
<p class="m-0"><b>
非結構化文本分析
</b></p>
<ul class="ps-4">
<li>在校務研究中心運用先進的文本處理技術，從各種校園相關資料源中擷取、清理和整理大量的文本資料，確保資料品質以及適合後續的分析。
</li>
<li>處理文本資料時，我使用了SBERT（Sentence-BERT）模型來進行文本向量化。這有助於將課程資訊轉換為數值表示，使其更易於進行相關的量化分析。
</li>
<li>利用我對文本分析技術的熟悉，我能夠分析和評估校園內不同領域的能力表現，幫助決策者了解哪些領域能力優勢以及可能需要進一步發展的領域。
</li>
<li>維運 Milvus 向量資料庫。確保資料搜索準確性和高效查詢。</li>
</ul>
</div>
</div>
<hr style="opacity: 0.1;">
<div>
<span
class="badge rounded-pill bg-mytheme text-dark p-2 mt-1 me-1 overflow-hidden">#
資料搜集／前處理</span>
<span
class="badge rounded-pill bg-mytheme text-dark p-2 mt-1 me-1 overflow-hidden">#
文字探勘</span>
<span
class="badge rounded-pill bg-mytheme text-dark p-2 mt-1 me-1 overflow-hidden">#
文本分析</span>
</div>
</div>
</div>
<div class="card pb-2 rounded-inline-basic">
<div class="card-body pb-1">
<div data-bs-toggle="collapse" data-bs-target="#collapseJobTiic"
aria-expanded="false" aria-controls="collapseJobTiic">
<div class="d-flex align-items-center flex-wrap">
<p class="mb-0 flex-fill fs-5 fw-bold">行銷部組長／行銷部 CRM 組幹部</p>
<p class="mb-0 opacity-50 ">三月 2023 ～ 二月 2024</p>
</div>
<p class="text-start mb-0 fs-6">TIIC 台灣實習影響力社群（TYCIA 臺灣青年職涯創新協會）</p>
<hr style="opacity: 0.1;">
<ul class="ps-4 mb-0">
<li>建立團隊社群策略，帶領 3 位夥伴執行企劃，<span class="halfHightLightBg">吸引 280
人加入社群</span>。</li>
<li><span class="halfHightLightBg">管理 13 位學員</span>的培訓進度，帶領學員進行內部培訓。
</li>
</ul>
<div class="collapse" id="collapseJobTiic">
<hr style="opacity: 0.1;">
<p class="m-0">
<b>組長職務 - 團隊與行銷策略管理</b>
</p>
<ul class="ps-4">
<li>建立團隊社群策略，帶領 3 位夥伴執行企劃，<span class="halfHightLightBg">吸引 280
人加入社群</span>。</li>
<li><span class="halfHightLightBg">管理 13 位學員</span>的培訓進度，帶領學員進行內部培訓。
</li>
</ul>
<div class="px-2">
<div class="row">
<div class="col-12 col-md-6 p-2 mx-auto">
<img src="/assets/imgs/index/jobs/tiic3.webp"
alt="TIIC Discord"
class="img-fluid rounded-inline-basic">
</div>
<div class="col-12 col-md-6 p-2 mx-auto">
<img src="/assets/imgs/index/jobs/tiic4.webp"
alt="TIIC Discord"
class="img-fluid rounded-inline-basic">
</div>
</div>
</div>
<p class="m-0"><b>DC 社群管理與用戶體驗優化</b></p>
<ul class="ps-4">
<li>深入了解 Discord 社群成員的需求、偏好和痛點，並從中收集寶貴的反饋。</li>
<li>分析前代 Discord 用戶旅程，並從中分析出可以優化的部分並執行。</li>
<li>與不同部門和團隊的協作，針對內部部門需求訂做 Discord 功能</li>
<li>擔任 Discord 社群管理者，負責招募、培訓和指導社群志願者，確保社群運營順利且高效。</li>
</ul>
<p class="m-0"><b>提升用戶留存</b></p>
<ul class="ps-4">
<li>開發並執行社群策略，包括吸引新用戶、留住現有用戶和促進用戶參與。</li>
<li>制定並實施用戶激勵計劃，以增加用戶參與度和忠誠度。</li>
</ul>
<div class="px-2">
<div class="row">
<div class="col-12 col-md-6 p-2">
<img src="/assets/imgs/index/jobs/tiic1.webp"
alt="TIIC Discord"
class="img-fluid rounded-inline-basic">
</div>
<div class="col-12 col-md-6 p-2">
<img src="/assets/imgs/index/jobs/tiic2.webp"
alt="TIIC Discord"
class="img-fluid rounded-inline-basic">
</div>
</div>
</div>
</div>
</div>
<hr style="opacity: 0.1;">
<div>
<span
class="badge rounded-pill bg-mytheme text-dark p-2 mt-1 me-1 overflow-hidden">#
領導</span>
<span
class="badge rounded-pill bg-mytheme text-dark p-2 mt-1 me-1 overflow-hidden">#
行銷規劃</span>
</div>
</div>
</div>
<div class="card pb-2 rounded-inline-basic">
<div class="card-body pb-1">
<div>
<div class="d-flex align-items-center flex-wrap">
<p class="mb-0 flex-fill fs-5 fw-bold">產品設計師／技術總管</p>
<p class="mb-0 opacity-50 ">ㄧ月 2022 ～ 九月 2023</p>
</div>
<div class="">
<div class="d-flex align-items-center flex-wrap">
<p class="mb-0 me-2">即時行樂有限公司（新創）</p>
<a href="projects/songlaMusicCreater.html"
class="btn btn-outline-myprimary px-2 py-1 my-1 me-2 rounded-pill"
style="font-size: 0.75rem;">
Songla 音樂智慧創作小幫手
</a>
</div>
</div>
<div data-bs-toggle="collapse" data-bs-target="#collapseJobSongla"
aria-expanded="false" aria-controls="collapseJobSongla">
<hr style="opacity: 0.1;">
<ul class="ps-4 mb-0">
<li>設計提案簡報協助企業向政府與投資者精準傳達企業資訊，最終團隊<span
class="halfHightLightBg">通過教育部青年署 U-start 創新創業第一階段計畫</span>。
</li>
<li>利用資訊設計能力設計 UI，透過訪談 5名用戶需求於 Figma 進行產品設計，<span
class="halfHightLightBg">建立企業原子設計系統設計並完成初步的產品 MVP</span>。
</li>
</ul>
<div class="collapse" id="collapseJobSongla">
<hr style="opacity: 0.1;">
<p class="m-0"><b>軟體介面設計</b></p>
<ul class="ps-4">
<li>使用 Figma
這一優秀的設計工具來創建高品質、交互式的軟體原型。這使得整個設計過程更具有靈活性，能夠輕鬆地與團隊進行協作和討論，同時也能更好地呈現我對產品界面的想法。
</li>
<li>我深度參與制定商業目標以及軟體功能需求。這讓我能夠將設計融合進整個產品生態系統中，確保用戶體驗與公司的整體戰略目標保持一致。
</li>
<li>我非常重視使用者的反饋，並將其視為優化產品的關鍵因素。通過與用戶進行緊密的合作、測試和反思，我能夠設計出更符合他們期望和需求的界面，從而提高產品的可用性和滿意度。
</li>
</ul>
<p class="m-0"><b>軟體規劃、設計、開發</b></p>
<ul class="ps-4">
<li>建立企業形象網頁。我使用了現代化的設計風格、符合最佳用戶體驗的介面設計和直觀的導航結構，以確保網站能夠有效地展示公司的核心價值和產品特色。
</li>
<li>深入研究音樂理論和人工智能相關技術，協助設計了一個優秀的音樂生成系統。這個系統能夠根據用戶哼唱的旋律，自動生成與之匹配的音樂內容
</li>
</ul>
<p class="m-0"><b>簡報設計</b></p>
<ul class="ps-4">
<li>我深信言簡意賅的原則。我會針對聽眾選擇最重要的資料和信息，以清晰簡明的方式呈現，避免信息過於冗長或混淆。</li>
<li>我精通使用各種視覺化工具和技巧，將不同資料轉化為生動有趣且易於理解的圖表和圖形。這有助於觀眾迅速抓住重要信息，從而更好地理解我所呈現的內容。
</li>
<li>為了確保簡報的一致性和專業性，我替公司設計視覺識別指南，使用統一的字體、色彩和排版風格。這有助於確保我所設計的每一份簡報都代表著公司的形象和價值觀。
</li>
</ul>
</div>
</div>
</div>
<hr style="opacity: 0.1;">
<div>
<span
class="badge rounded-pill bg-mytheme text-dark p-2 mt-1 me-1 overflow-hidden">#
資訊設計</span>
<span
class="badge rounded-pill bg-mytheme text-dark p-2 mt-1 me-1 overflow-hidden">#
提案</span>
<span
class="badge rounded-pill bg-mytheme text-dark p-2 mt-1 me-1 overflow-hidden">#
UI 設計</span>
<span
class="badge rounded-pill bg-mytheme text-dark p-2 mt-1 me-1 overflow-hidden">#
系統規劃</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--學歷-->
<div class="card shadow mt-4 rounded-basic">
<div class="card-body lh-lg" id="about">
<div class="row">
<div class="col-12">
<h3 class="pt-2 fw-bold" style="letter-spacing: 4px;">學歷</h3>
</div>
</div>
<div class="row d-grid gap-3 mt-3">
<div class="col-12">
<div class="card rounded-inline-basic">
<div class="card-body">
<div class="row">
<div class="col">
<b>國立清華大學</b>
<p class="mb-0">學習科學與科技研究所</p>
</div>
<div class="col-auto">
<p class="mb-0 opacity-50">2022/07～2024/07</p>
</div>
</div>
<div class="row">
<div class="col">
<hr class="my-2" style="opacity:10%;">
<p class="mb-0">論文：</p>
<ol class="mb-0" style="padding-left: 22px;">
<li>在自主學習環境比較不同提示策略對大型語言模型回應的影響</li>
<li>使用自然語言技術建構自主學習資源推薦系統</li>
</ol>
<hr class="my-2" style="opacity:10%;">
<div class="d-flex flex-wrap align-items-center mt-3">
<p class="mb-0 me-2">相關專案：</p>
<a href="projects/trelloFinder.html"
class="btn btn-outline-myprimary px-2 py-1 my-1 me-2 rounded-pill"
style="font-size: 0.75rem;">
Trello 知識小幫手 2.0
</a>
</div>
</div>
</div>
</div>
<div class="card-footer bg-white">
<p class="mt-1 mb-0">
<span
class="badge rounded-pill bg-mytheme text-dark p-2 mt-1 me-1 overflow-hidden">#
教育</span>
<span
class="badge rounded-pill bg-mytheme text-dark p-2 mt-1 me-1 overflow-hidden">#
科技</span>
<span
class="badge rounded-pill bg-mytheme text-dark p-2 mt-1 me-1 overflow-hidden">#
自然語言分析</span>
</p>
</div>
</div>
</div>
<div class="col-12">
<div class="card rounded-inline-basic">
<div class="card-body">
<div class="row">
<div class="col">
<b>中原大學</b>
<p class="mb-0">資訊管理系</p>
</div>
<div class="col-auto">
<p class="mb-0 opacity-50">2019/07～2022/07</p>
</div>
</div>
<div class="row">
<div class="col">
<hr class="my-2" style="opacity:10%;">
<div class="d-flex flex-wrap align-items-center mt-3">
<p class="mb-0 me-2">相關專案：</p>
<a href="projects/mindReader.html"
class="btn btn-outline-myprimary px-2 py-1 my-1 me-2 rounded-pill"
style="font-size: 0.75rem;">
MindReader 與你心譯相通
</a>
<a href="projects/hsCloudMeetingManage.html"
class="btn btn-outline-myprimary px-2 py-1 my-1 me-2 rounded-pill"
style="font-size: 0.75rem;">
華新雲會議管理系統
</a>
<a href="projects/hsVmi.html"
class="btn btn-outline-myprimary px-2 py-1 my-1 me-2 rounded-pill"
style="font-size: 0.75rem;">