+ 
+
+
+ 作品卡片占位示意一
+ +
+ 預留 GitHub 連結
+ 預留線上 Demo 連結
+
+
+
+
+
+
+
+ 個人品牌網站 · 前端工程師
++ 這裡是前端工程師個人網站的 Hero 主視覺占位區 +
++ 目前這一區只是占位內容，未來會放上一句話自我介紹、主要職稱（例如 Frontend Developer）、以及引導訪客瀏覽作品集或下載履歷的行動呼籲按鈕與文案。 +
+
+ 之後會用 Section SDD 的 Prompt 產生正式文案與版面，請將產生好的整個 <section> 區塊程式碼貼在下方兩個註解之間，完全取代現在這一區。
+
+ 開發者備註：之後會用 Section SDD 的 Prompt 產生新的 Hero section，請把新的 <section id="hero" ...>...</section>
+ 程式碼整段貼在 SECTION:HERO-START 與 SECTION:HERO-END 兩個註解中間，完全取代目前這一區。
+
+
+
+ 
+
+
+ + 圖片占位：目前示意為前端開發者在桌前撰寫程式碼的 Unsplash 照片，之後可依品牌風格替換為正式形象照。 +
+
+
+
+
+
+
+ 關於我（About 區占位內容）
++ 這裡目前是 About 區的占位內容，未來會介紹前端工程師的背景、工作經驗、個人特色與職涯重點等資訊，讓訪客快速理解網站主人的專業定位。 +
+
+
+
+ 之後會用 Section SDD 的 Prompt 產生更完整的 About 區版面與文案（例如時間軸、自傳式介紹、照片區等）。請將新的
+ <section id="about" ...>...</section> 程式碼整段貼在
+ SECTION:ABOUT-START 與 SECTION:ABOUT-END 註解之間，完全覆蓋現在這一區。
+
+ 開發時可以先把這裡視為「自我介紹插槽」，之後無論產出的版型是一欄或雙欄，只要維持同樣的錨點
+ id="about"，導覽列的「關於我」連結就會正常運作。
+
+ 開發者操作提示：
+ 之後會用 Section SDD 的 Prompt 產生新的 About section，請把新的 section 程式碼整段貼在 + SECTION:ABOUT-START 與 SECTION:ABOUT-END 兩個註解中間，完全取代現在這一區。 +
+
+ + 之後會用 Section SDD 的 Prompt 產生新的 About section，請把新的 section 程式碼整段貼在 + SECTION:ABOUT-START 與 SECTION:ABOUT-END 兩個註解中間，完全取代現在這一區。 +
+
+
+
+ 技能（Skills 區占位內容）
++ 這裡目前是 Skills 區的占位內容，未來會以清單或標籤方式呈現前端相關技能，例如 HTML、CSS、JavaScript、框架與工具鏈等，作為技術能力一覽。 +
+
+
+
+
+
+
+ 技術分類範例占位
+-
+
- + + 這裡預計列出核心技術技能（例如：前端框架、版型切版、RWD 策略等）。 + +
- + + 之後會用 Section SDD 的 Prompt 產生正式技能清單與顯示樣式。 + +
+
+ 工具與流程占位
+-
+
- + + 這裡可以預留版本控制、設計工具、測試與部署流程等相關技能說明。 + +
- + + 具體技能內容將由之後的 Section SDD Prompt 產生並取代整個區塊。 + +
+ 之後會用 Section SDD 的 Prompt 產生新的 Skills section。請將新的
+ <section id="skills" ...>...</section> 程式碼整段貼在
+ SECTION:SKILLS-START 與 SECTION:SKILLS-END 註解中間，完全取代目前這一區，保留
+ id="skills" 以維持導覽錨點。
+
+
+
+
+
+ 作品集（Projects 區占位內容）
++ 這裡目前是 Projects 區的占位內容，未來會展示實際專案卡片，例如個人 Side Project、公司產品頁、元件庫或開源貢獻，並連結到 Demo 或原始碼。 +
+
+
+
+
+
+
+
+ 作品卡片占位示意二
+ + +
+ 開發者操作提示：
+ 之後會用 Section SDD 的 Prompt 產生新的 Projects section，請把新的 section 程式碼整段貼在 + SECTION:PROJECTS-START 與 SECTION:PROJECTS-END + 註解中間，完全取代目前這一區，並保留
+ + 之後會用 Section SDD 的 Prompt 產生新的 Projects section，請把新的 section 程式碼整段貼在 + SECTION:PROJECTS-START 與 SECTION:PROJECTS-END + 註解中間，完全取代目前這一區，並保留
id="projects" 供導覽與錨點使用。
+
+
+
+
+
+
+
+
+
+ 聯絡我（Contact 區占位內容）
++ 這裡目前是 Contact 區的占位內容，未來會放上實際的聯絡方式與簡短邀請文字，鼓勵訪客透過 Email、社群或其他管道與前端工程師聯絡。 +
+-
+
- + Email： + hello@example.com + +
- + 手機： + +886 900 000 000 + +
- + GitHub： + + https://github.com/yourname + + +
- + LinkedIn： + + https://www.linkedin.com/in/yourname + + +
+ 聯絡方式目前以占位資訊呈現，之後可以依實際需求更換為正式信箱、表單連結或其他社群帳號。請在替換 Section 時一併更新這些連結與文字。 +
+
+
+
+ 開發者操作提示 · Contact Section Slot
+ 之後會用 Section SDD 的 Prompt 產生新的 Contact section，請把新的 +
+ 請務必保留
+ + 之後會用 Section SDD 的 Prompt 產生新的 Contact section，請把新的 +
<section id="contact" ...>...</section> 程式碼整段貼在
+ SECTION:CONTACT-START 與 SECTION:CONTACT-END
+ 兩個註解中間，完全取代現在這一區。+ 請務必保留
id="contact"，讓導覽列「聯絡我」的錨點連結（href="#contact"）能正常捲動到最終版本的聯絡區。
+ +
+ 
+