-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
387 lines (354 loc) · 22.7 KB
/
Copy pathindex.html
File metadata and controls
387 lines (354 loc) · 22.7 KB
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
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hsin-Yu (Ericsson) Lin | M.D. & MS CS</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;700;900&display=swap');
:root {
--bg: #070b16;
--bg-soft: #0f162b;
--text: #e8edff;
--muted: #9aa7c8;
--line: rgba(255, 255, 255, 0.09);
--aqua: #56f4d8;
--blue: #63a4ff;
--amber: #ffce62;
}
* { box-sizing: border-box; }
body {
font-family: 'Space Grotesk', 'Noto Sans TC', sans-serif;
color: var(--text);
background:
radial-gradient(1200px 480px at 12% -8%, rgba(86, 244, 216, 0.22), transparent 58%),
radial-gradient(900px 420px at 92% 8%, rgba(99, 164, 255, 0.2), transparent 62%),
linear-gradient(150deg, #050914 0%, #070d1d 48%, #0b1228 100%);
scroll-behavior: smooth;
min-height: 100vh;
}
.mesh::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
background-size: 34px 34px;
mask-image: radial-gradient(circle at center, black 42%, transparent 86%);
z-index: -1;
}
.glass {
background: linear-gradient(165deg, rgba(21, 31, 56, 0.82) 0%, rgba(16, 24, 46, 0.7) 100%);
border: 1px solid var(--line);
box-shadow: 0 12px 38px rgba(4, 7, 20, 0.42);
backdrop-filter: blur(10px);
}
.headline {
font-family: 'Noto Sans TC', sans-serif;
font-weight: 900;
letter-spacing: -0.02em;
}
.text-gradient {
background: linear-gradient(100deg, var(--aqua) 0%, #8ac8ff 45%, var(--amber) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.chip {
background: rgba(86, 244, 216, 0.11);
color: #9ef8e9;
border: 1px solid rgba(86, 244, 216, 0.3);
text-transform: uppercase;
font-size: 11px;
padding: 3px 9px;
border-radius: 999px;
font-weight: 600;
letter-spacing: 0.04em;
}
.metric {
border: 1px solid rgba(138, 200, 255, 0.25);
background: rgba(17, 28, 53, 0.56);
}
.project-card {
transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
}
.project-card:hover {
transform: translateY(-5px);
border-color: rgba(86, 244, 216, 0.65);
box-shadow: 0 20px 40px rgba(8, 14, 32, 0.42);
}
.fade-up {
animation: fadeUp 0.7s ease both;
}
.fade-up:nth-child(2) { animation-delay: 0.08s; }
.fade-up:nth-child(3) { animation-delay: 0.16s; }
.fade-up:nth-child(4) { animation-delay: 0.24s; }
@keyframes fadeUp {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
.kpi-number {
font-size: clamp(1.5rem, 2.6vw, 2.1rem);
font-weight: 700;
line-height: 1;
}
</style>
</head>
<body class="mesh">
<nav class="fixed w-full z-50 glass py-4 px-5 md:px-8 flex justify-between items-center">
<div class="font-bold text-xl tracking-tight uppercase">Ericsson<span class="text-cyan-300">.Lin</span></div>
<div class="hidden lg:flex space-x-7 text-sm font-medium">
<a href="#about" class="hover:text-cyan-300 transition">About</a>
<a href="#value" class="hover:text-cyan-300 transition">Value</a>
<a href="#experience" class="hover:text-cyan-300 transition">Experience</a>
<a href="#projects" class="hover:text-cyan-300 transition">Projects</a>
<a href="#metrics" class="hover:text-cyan-300 transition">Results</a>
<a href="#skills" class="hover:text-cyan-300 transition">Skills</a>
<a href="#contact" class="text-cyan-300 border border-cyan-300/50 px-4 py-1 rounded-full hover:bg-cyan-300/10 transition">Contact</a>
</div>
<div class="lg:hidden flex items-center gap-3 text-xs text-slate-300">
<a href="#projects" class="hover:text-cyan-300 transition">Projects</a>
<a href="#metrics" class="hover:text-cyan-300 transition">Results</a>
<a href="#contact" class="hover:text-cyan-300 transition">Contact</a>
</div>
</nav>
<section id="about" class="pt-32 pb-10 px-6 max-w-6xl mx-auto">
<div class="mb-6 inline-flex items-center px-3 py-1 rounded-full glass border border-cyan-500/30 text-xs font-bold text-cyan-300 uppercase tracking-widest">
<span class="flex h-2 w-2 rounded-full bg-cyan-300 mr-2 animate-pulse"></span>
Open to AI/ML Intern & Full-time Roles (2026+)
</div>
<div class="grid lg:grid-cols-12 gap-6 items-stretch">
<div class="lg:col-span-8 glass rounded-3xl p-7 md:p-10 fade-up">
<h1 class="headline text-4xl md:text-6xl mb-5 leading-tight">
Hsin-Yu Lin<br>
<span class="text-gradient">Ericsson</span>
</h1>
<p class="text-lg md:text-xl text-slate-300 max-w-3xl leading-relaxed mb-6">
M.D. + M.S. CS candidate at NTU. 我專注在醫療 AI、LLM 評估與 robust ML 系統，能把研究原型落地成可評估、可迭代、可部署的產品流程。
</p>
<div class="flex flex-wrap gap-2 mb-8">
<span class="chip">Medical AI</span>
<span class="chip">LLM Evaluation</span>
<span class="chip">RAG Systems</span>
<span class="chip">Computer Vision</span>
<span class="chip">Data Engineering</span>
</div>
<div class="flex flex-wrap gap-3">
<a href="mailto:ericsson.lahm@gmail.com" class="bg-cyan-300 text-slate-950 font-bold py-3 px-6 rounded-xl hover:bg-cyan-200 transition-all flex items-center">
<i class="fas fa-paper-plane mr-2"></i> Talk with me
</a>
<a href="CV.pdf" download class="glass border border-white/15 font-bold py-3 px-6 rounded-xl hover:bg-white/5 transition-all flex items-center">
<i class="fas fa-file-download mr-2"></i> Download CV
</a>
</div>
</div>
<div class="lg:col-span-4 grid gap-4 fade-up">
<div class="metric rounded-2xl p-5">
<p class="text-xs uppercase tracking-widest text-slate-400">Current Position</p>
<p class="mt-2 text-lg font-semibold">Data Dev Intern, LINE Taiwan</p>
<p class="text-sm text-slate-400 mt-1">LLM prototype, RAG pipeline, recommender workflow</p>
</div>
<div class="metric rounded-2xl p-5">
<p class="text-xs uppercase tracking-widest text-slate-400">Education</p>
<p class="mt-2 text-lg font-semibold">NTU M.S. CS (2025-2027)</p>
<p class="text-sm text-slate-400 mt-1">Top 1% entrance, GPA 4.26/4.3</p>
</div>
<div class="metric rounded-2xl p-5">
<p class="text-xs uppercase tracking-widest text-slate-400">Links</p>
<div class="flex items-center gap-3 mt-3 text-lg">
<a href="https://github.com/ericsson0408" target="_blank" class="hover:text-cyan-300 transition"><i class="fab fa-github"></i></a>
<a href="https://linkedin.com/in/hsin-yu-ericsson-lin-481075373" target="_blank" class="hover:text-cyan-300 transition"><i class="fab fa-linkedin"></i></a>
<a href="mailto:ericsson.lahm@gmail.com" class="hover:text-cyan-300 transition"><i class="fas fa-envelope"></i></a>
</div>
</div>
</div>
</div>
</section>
<section id="value" class="py-14 px-6 max-w-6xl mx-auto">
<h2 class="headline text-3xl md:text-4xl mb-8">What I Bring to a Team</h2>
<div class="grid md:grid-cols-3 gap-5">
<div class="glass rounded-2xl p-6 fade-up">
<i class="fas fa-stethoscope text-2xl text-cyan-300 mb-4"></i>
<h3 class="text-xl font-bold mb-2">Domain + Model Bridge</h3>
<p class="text-slate-300 text-sm leading-relaxed">從醫療知識到模型設計與誤差分析都能對齊，降低產品與研究之間的翻譯成本。</p>
</div>
<div class="glass rounded-2xl p-6 fade-up">
<i class="fas fa-diagram-project text-2xl text-blue-300 mb-4"></i>
<h3 class="text-xl font-bold mb-2">End-to-End Ownership</h3>
<p class="text-slate-300 text-sm leading-relaxed">可獨立完成資料處理、模型訓練、指標設計、可視化報告與實驗迭代。</p>
</div>
<div class="glass rounded-2xl p-6 fade-up">
<i class="fas fa-shield-heart text-2xl text-amber-300 mb-4"></i>
<h3 class="text-xl font-bold mb-2">Robustness Mindset</h3>
<p class="text-slate-300 text-sm leading-relaxed">重視可靠性與失敗模式分析，針對攻擊、漂移、AP failure 等情境建立壓力測試流程。</p>
</div>
</div>
</section>
<section id="experience" class="py-20 px-6 max-w-5xl mx-auto">
<h2 class="headline text-3xl md:text-4xl mb-10">Experience</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-10">
<div>
<h3 class="text-2xl font-bold mb-8 flex items-center"><i class="fas fa-graduation-cap mr-3 text-cyan-300"></i> Education</h3>
<div class="space-y-8 border-l-2 border-gray-800 ml-3 pl-8">
<div class="relative">
<div class="absolute -left-[41px] top-1 w-4 h-4 bg-cyan-300 rounded-full border-4 border-[#0b0f1a]"></div>
<h3 class="font-bold text-lg">National Taiwan University</h3>
<p class="text-cyan-300 text-sm font-medium">M.S. in Computer Science | 2025 - 2027</p>
<p class="text-slate-400 text-sm mt-1">AI, machine learning systems, and robust model evaluation.</p>
<p class="text-gray-500 text-xs mt-2">GPA: 4.26/4.3 (Top 1% entrance exam)</p>
</div>
<div class="relative">
<div class="absolute -left-[41px] top-1 w-4 h-4 bg-gray-600 rounded-full border-4 border-[#0b0f1a]"></div>
<h3 class="font-bold text-lg text-gray-300">National Cheng Kung University</h3>
<p class="text-gray-400 text-sm">Doctor of Medicine (M.D.) | 2019 - 2025</p>
<p class="text-gray-500 text-xs mt-2">MOHW physician license. Clinical reasoning + technical execution.</p>
</div>
</div>
</div>
<div>
<h3 class="text-2xl font-bold mb-8 flex items-center"><i class="fas fa-briefcase mr-3 text-blue-300"></i> Industry</h3>
<div class="glass rounded-2xl p-6 border-l-4 border-blue-400 mb-5">
<div class="flex justify-between items-start mb-4">
<div>
<h3 class="font-bold text-xl">LINE Taiwan</h3>
<p class="text-blue-300">Data Dev Intern (TECH FRESH)</p>
</div>
<span class="text-xs bg-blue-500/20 text-blue-300 px-2 py-1 rounded">2026 - Present</span>
</div>
<ul class="text-sm text-slate-300 space-y-2 list-disc list-inside">
<li>Developed LLM-powered prototypes and RAG workflows for product ideation.</li>
<li>Built vector retrieval and indexing evaluation pipeline for response quality checks.</li>
<li>Explored agent-based multimodal recommendation strategies.</li>
</ul>
</div>
<div class="glass rounded-2xl p-6 border-l-4 border-emerald-400">
<h4 class="font-bold text-lg mb-2">Research Direction</h4>
<p class="text-sm text-slate-300">Medical imaging, robust localization, and LLM-as-a-judge attack/defense evaluation.</p>
</div>
</div>
</div>
</section>
<section id="projects" class="py-20 px-6 max-w-6xl mx-auto">
<h2 class="headline text-3xl md:text-4xl mb-12 text-center">Selected Projects</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="glass p-6 rounded-2xl project-card flex flex-col">
<i class="fas fa-brain text-cyan-300 mb-4 text-2xl"></i>
<h3 class="font-bold text-xl mb-2">RADAR</h3>
<p class="text-slate-300 text-sm mb-4 leading-relaxed">Retrieval-Augmented Detector with Adversarial Refinement。整合文本檢索、判別模型與對抗策略，用於提升報告合規檢測的魯棒性。</p>
<div class="grid grid-cols-3 gap-3 mb-5">
<div class="metric rounded-lg p-3"><p class="text-xs text-slate-400">Val AUC</p><p class="kpi-number">86.98%</p></div>
<div class="metric rounded-lg p-3"><p class="text-xs text-slate-400">Best Exp</p><p class="kpi-number">v117</p></div>
<div class="metric rounded-lg p-3"><p class="text-xs text-slate-400">Focus</p><p class="kpi-number">RAG</p></div>
</div>
<div class="mt-auto flex flex-wrap gap-2 text-xs">
<span class="chip">PyTorch</span><span class="chip">DeBERTa</span><span class="chip">Qwen</span><span class="chip">Prompt Defense</span>
</div>
</div>
<div class="glass p-6 rounded-2xl project-card flex flex-col">
<i class="fas fa-x-ray text-indigo-300 mb-4 text-2xl"></i>
<h3 class="font-bold text-xl mb-2">C-Spine X-ray Segmentation + Classification</h3>
<p class="text-slate-300 text-sm mb-4 leading-relaxed">建立頸椎影像兩階段流程：U-Net 系列做 segmentation，再由分類模型進行病灶辨識，並使用 threshold tuning 提升召回。</p>
<div class="grid grid-cols-3 gap-3 mb-5">
<div class="metric rounded-lg p-3"><p class="text-xs text-slate-400">Box IoU</p><p class="kpi-number">0.910</p></div>
<div class="metric rounded-lg p-3"><p class="text-xs text-slate-400">Mask Dice</p><p class="kpi-number">0.805</p></div>
<div class="metric rounded-lg p-3"><p class="text-xs text-slate-400">Best AUC</p><p class="kpi-number">88.31%</p></div>
</div>
<div class="mt-auto flex flex-wrap gap-2 text-xs">
<span class="chip">U-Net / U-Net++</span><span class="chip">ViT / SAM</span><span class="chip">Grad-CAM</span><span class="chip">Threshold Tuning</span>
</div>
</div>
<div class="glass p-6 rounded-2xl project-card flex flex-col">
<i class="fas fa-satellite text-emerald-300 mb-4 text-2xl"></i>
<h3 class="font-bold text-xl mb-2">Indoor Localization</h3>
<p class="text-slate-300 text-sm mb-4 leading-relaxed">分析 WKNN / PF 與 AP failure、time-of-day drift、combined stress 條件下的誤差 CDF，建立定位系統韌性評估流程。</p>
<div class="grid grid-cols-3 gap-3 mb-5">
<div class="metric rounded-lg p-3"><p class="text-xs text-slate-400">Stress Test</p><p class="kpi-number">5+</p></div>
<div class="metric rounded-lg p-3"><p class="text-xs text-slate-400">Signals</p><p class="kpi-number">WiFi/BLE</p></div>
<div class="metric rounded-lg p-3"><p class="text-xs text-slate-400">Method</p><p class="kpi-number">CDF</p></div>
</div>
<div class="mt-auto flex flex-wrap gap-2 text-xs">
<span class="chip">WKNN</span><span class="chip">Particle Filter</span><span class="chip">Time Drift</span><span class="chip">AP Failure</span>
</div>
</div>
<div class="glass p-6 rounded-2xl project-card flex flex-col">
<i class="fas fa-shield-alt text-amber-300 mb-4 text-2xl"></i>
<h3 class="font-bold text-xl mb-2">LLM-as-a-Judge Attack / Defense Evaluation</h3>
<p class="text-slate-300 text-sm mb-4 leading-relaxed">比較 prompt attack 策略與 defense 組合（sanitize / voting / ensemble），用 task vulnerability 與 flip rate 衡量安全性。</p>
<div class="grid grid-cols-3 gap-3 mb-5">
<div class="metric rounded-lg p-3"><p class="text-xs text-slate-400">Best Uplift</p><p class="kpi-number">+1.08</p></div>
<div class="metric rounded-lg p-3"><p class="text-xs text-slate-400">Flip Rate</p><p class="kpi-number">0-3.8%</p></div>
<div class="metric rounded-lg p-3"><p class="text-xs text-slate-400">Tasks</p><p class="kpi-number">8</p></div>
</div>
<div class="mt-auto flex flex-wrap gap-2 text-xs">
<span class="chip">Prompt Attack</span><span class="chip">Defense Ensemble</span><span class="chip">Evaluation Protocol</span>
</div>
</div>
</div>
</section>
<section id="metrics" class="py-20 px-6 max-w-6xl mx-auto">
<h2 class="headline text-3xl md:text-4xl mb-10">Quantified Results</h2>
<div class="grid md:grid-cols-2 xl:grid-cols-4 gap-4 mb-8">
<div class="glass rounded-2xl p-5 fade-up">
<p class="text-xs uppercase tracking-wider text-slate-400 mb-2">Medical Segmentation</p>
<p class="kpi-number text-gradient">IoU 0.910</p>
<p class="text-sm text-slate-300 mt-2">U-Net box IoU mean from validation distribution.</p>
</div>
<div class="glass rounded-2xl p-5 fade-up">
<p class="text-xs uppercase tracking-wider text-slate-400 mb-2">Mask Quality</p>
<p class="kpi-number text-gradient">Dice 0.805</p>
<p class="text-sm text-slate-300 mt-2">Mask dice distribution mean after training.</p>
</div>
<div class="glass rounded-2xl p-5 fade-up">
<p class="text-xs uppercase tracking-wider text-slate-400 mb-2">Classification</p>
<p class="kpi-number text-gradient">Acc 90.8%</p>
<p class="text-sm text-slate-300 mt-2">Best validation epoch performance in c-spine classifier.</p>
</div>
<div class="glass rounded-2xl p-5 fade-up">
<p class="text-xs uppercase tracking-wider text-slate-400 mb-2">Threshold Tuning</p>
<p class="kpi-number text-gradient">F1 0.981</p>
<p class="text-sm text-slate-300 mt-2">At threshold 0.480 with recall 1.000 and precision 0.963.</p>
</div>
</div>
<div class="glass rounded-2xl p-6">
<h3 class="text-xl font-semibold mb-4">What these metrics mean for hiring teams</h3>
<ul class="text-sm text-slate-300 space-y-2 list-disc list-inside leading-relaxed">
<li>I do not only train models; I build measurable evaluation pipelines and compare ablations clearly.</li>
<li>I can communicate with both engineering teams and domain stakeholders using interpretable metrics.</li>
<li>I focus on reliability: I always include failure analysis, threshold analysis, and stress conditions.</li>
</ul>
</div>
</section>
<section id="skills" class="py-20 px-6 max-w-6xl mx-auto">
<h2 class="headline text-3xl md:text-4xl mb-10">Tech Stack</h2>
<div class="grid md:grid-cols-3 gap-5">
<div class="glass rounded-2xl p-6">
<h3 class="font-semibold text-lg mb-4"><i class="fas fa-code mr-2 text-cyan-300"></i>Programming</h3>
<p class="text-slate-300 text-sm">Python, C++, SQL, Bash, Git, Linux</p>
</div>
<div class="glass rounded-2xl p-6">
<h3 class="font-semibold text-lg mb-4"><i class="fas fa-microchip mr-2 text-blue-300"></i>ML / DL</h3>
<p class="text-slate-300 text-sm">PyTorch, scikit-learn, U-Net family, SAM, transformers, XGBoost</p>
</div>
<div class="glass rounded-2xl p-6">
<h3 class="font-semibold text-lg mb-4"><i class="fas fa-database mr-2 text-amber-300"></i>Data & Infra</h3>
<p class="text-slate-300 text-sm">RAG pipeline, vector retrieval, experiment tracking, result visualization</p>
</div>
</div>
</section>
<section id="contact" class="py-20 px-6 max-w-6xl mx-auto">
<div class="glass rounded-3xl p-8 md:p-10 text-center">
<h2 class="headline text-3xl md:text-5xl mb-4">Let's Build Useful AI Together</h2>
<p class="text-slate-300 text-lg max-w-3xl mx-auto mb-8">I am actively looking for opportunities in AI/ML engineering, medical AI, and LLM applications. If your team cares about real-world impact and rigorous evaluation, I would love to connect.</p>
<div class="flex flex-wrap justify-center gap-3">
<a href="mailto:ericsson.lahm@gmail.com" class="bg-cyan-300 text-slate-950 font-bold py-3 px-6 rounded-xl hover:bg-cyan-200 transition-all">Email Me</a>
<a href="https://github.com/ericsson0408" target="_blank" class="border border-white/20 py-3 px-6 rounded-xl hover:bg-white/5 transition-all">GitHub</a>
<a href="https://linkedin.com/in/hsin-yu-ericsson-lin-481075373" target="_blank" class="border border-white/20 py-3 px-6 rounded-xl hover:bg-white/5 transition-all">LinkedIn</a>
</div>
</div>
</section>
<footer class="py-12 border-t border-gray-900 text-center text-gray-500 text-xs">
<p>© 2026 Hsin-Yu Lin | M.D. (MOHW License) | M.S. CS @ NTU | TOEFL 102 | JLPT N2</p>
</footer>
</body>
</html>