+ +
+
+
+

個人網站主視覺區

+

這裡是網站的 Hero 區（全站唯一 h1）

+

此區是占位內容：未來將放入一句話自我介紹、核心職稱（例如 Frontend Developer / UI 工程師），並搭配明顯的行動呼籲按鈕（例如「瀏覽作品集」或「下載履歷」）。

+

開發者提示：之後會用 Section SDD 的 Prompt 產生正式文案與版面，請將新的 <section id="hero">…</section> 程式碼整段貼在 SECTION:HERO-START / SECTION:HERO-END 註解之間，完全取代現在這一區。

+
+ 瀏覽作品集 + 下載履歷（寄信索取） +
+
+ +
+ 在筆電前撰寫程式碼的前端開發者 +
+
+
+ + + +
+
+

關於我（之後會用 Section SDD 替換）

+

這裡目前是 About 區的占位內容。未來會以 Section SDD 產生正式的個人簡介、履歷重點與價值主張。

+

請將新的 <section id="about">…</section> 程式碼整段貼在 SECTION:ABOUT-START / SECTION:ABOUT-END 註解之間，完全取代現在這一區。

+
+
+ 工作桌與筆電的情境照 +
+
+
+

可在此處展示一段更長的自我敘述、職涯里程碑或專業興趣，後續將用正式內容覆蓋。

+
+ 前端工程 + RWD + 可用性 + 效能優化 +
+
+
+
+
+
+ + + +
+
+

技能（之後會用 Section SDD 替換）

+

這裡目前是 Skills 區的占位內容。將來會以條列或圖文卡片呈現核心技能、工具與熟悉框架。

+

請把新的 <section id="skills">…</section> 程式碼整段貼在 SECTION:SKILLS-START / SECTION:SKILLS-END 之間。

+ +
+
語義化 HTML、無障礙（a11y）基礎
+
CSS 架構、Mobile-first RWD
+
版面切版、元件化思維
+
設計稿轉前端畫面
+
效能與可維護性
+
團隊協作、文件撰寫
+
+
+
+ + + +
+
+

作品集（之後會用 Section SDD 替換）

+

這裡目前是 Projects 區的占位內容。未來將以卡片列出代表性作品、重點亮點與連結。

+

請把新的 <section id="projects">…</section> 程式碼整段貼在 SECTION:PROJECTS-START / SECTION:PROJECTS-END 之間。

+ +
+
+ 程式碼與開發環境的螢幕畫面 +
+
+
+ 占位作品 A +
RWD / 表單與版面切版
+
+
+ GitHub +
+
+
+
+ +
+ 行動裝置上展示網站介面的照片 +
+
+
+ 占位作品 B +
Landing Page / 像素對齊
+
+
+ GitHub +
+
+
+
+
+
+
+ + + +
+
+

聯絡我（之後會用 Section SDD 替換）

+

這裡目前是 Contact 區的占位內容。未來會放表單或社群連結，提供清楚的聯繫方式。

+

請把新的 <section id="contact">…</section> 程式碼整段貼在 SECTION:CONTACT-START / SECTION:CONTACT-END 之間。

+ + +
+
+ +