---
# System prepended metadata

title: 【Phase 2】依照 Section SDD 更新單一區塊

---

# 【Phase 2】依照 Section SDD 更新單一區塊
（若有 Phase 1：單一 index.html＋HTML/CSS 插槽＋嚴禁 JS＋CSS 不用 #id，則繼續沿用）

你現在是一位「前端工程師＋教練」。

請依照下方《Section 更新規格書 v1.0》，
根據開發者在 [A] 填寫的內容，更新指定的 Section，最後產出一份「更新後完整的 index.html」。


## [A] Section SDD 區塊規格文件（只改這裡）


[A1] 本次要修改的 Section 名稱（擇一填入）：
About

[A2] 本次的 Section SDD 內容（請貼上完整 SDD）：

[Section SDD 開始]
我想做一個「關於我」區塊

內容是：
- 上面一個標題，文字是「關於我」。
- 兩小段文字：
  - 第一段：我現在在做什麼（例如：前端工程師 / 教學 / 接案）和主要技能。
  - 第二段：一點點背景與我做事的風格（例如：重視溝通、喜歡教學、喜歡把東西講清楚）。
- 一個重點列表（約 3 點），列出我的強項或可以幫上的忙。

版面希望：
- 手機版：文字在上，下面放一張示意照片。
- 平板以上：左邊是文字，右邊是照片，兩欄排版。

照片用 Unsplash，找「寫程式的工程師」這種感覺

最後加兩個按鈕（就好）：
- 「查看作品集」連到 #projects
- 「聯絡我」連到 #contact

[Section SDD 結束]

[A3] 目前的 index.html 內容（請貼上 Phase 1 產出的完整檔案）：

[index.html 開始]
（在這裡貼上目前完整的 index.html）
[index.html 結束]


━━━━━━━━━━━━━━━━━━
# Section 更新規格書 v1.0
（Section Update Spec）

一、前置條件與全域規則

1. index.html 來源  
   - 檔案為單一 `index.html`。  
   - `<head>` 內只有一個 `<style>`，所有 CSS 皆寫在其中。  

2. HTML 結構與插槽註解  
   - HTML 內包含以下 SECTION 註解插槽，名稱固定：  
     - `SECTION:HERO-START / SECTION:HERO-END`  
     - `SECTION:ABOUT-START / SECTION:ABOUT-END`  
     - `SECTION:SKILLS-START / SECTION:SKILLS-END`  
     - `SECTION:PROJECTS-START / SECTION:PROJECTS-END`  
     - `SECTION:CONTACT-START / SECTION:CONTACT-END`  

3. CSS 結構與插槽註解  
   - CSS 內包含以下 Slot 區塊註解，名稱固定：  
     - `CSS:BASE`  
     - `CSS:HERO`  
     - `CSS:ABOUT`  
     - `CSS:SKILLS`  
     - `CSS:PROJECTS`  
     - `CSS:CONTACT`  
     - `CSS:RWD`  

4. 全域風格與限制（沿用 Phase 1 規格）  
   - 禁止使用任何 JavaScript：  
     - 不得出現 `<script>`、`onclick`、`addEventListener` 等。  
   - CSS 禁用 ID 選擇器：  
     - 不得出現任何 `#something` 的 CSS 選擇器。  
   - 圖片來源：  
     - `<img>` 的 `src` 皆為 Unsplash 相關 URL，且具備合理且非空的 `alt` 屬性。  
   - 標題層級：  
     - 全站僅有一個 `<h1>`，位於 Hero 區。  
   - RWD 策略：  
     - 採用手機優先（mobile-first），在 320px / 768px / 1440px 寬度下不應產生水平捲動（依 CSS 設計推估）。


二、更新目標

1. 依據 [A1] 指定的 Section 名稱（Hero / About / Skills / Projects / Contact），
2. 使用 [A2] 提供的 Section SDD（單一區塊規格），
3. 在不破壞「前置條件與全域規則」的前提下，只更新該 Section 的：
   - 對應 HTML 區段（SECTION 插槽中的 `<section>...</section>`）
   - 對應 CSS Slot（以及必要時在 CSS:RWD 中新增/調整對應樣式）。


三、可修改範圍

1. HTML：只修改對應 SECTION 插槽內的 `<section>...</section>`

- 若 [A1] = `Hero`：  
  - 修改範圍：  
    - `<!-- SECTION:HERO-START -->`  
    - `<!-- SECTION:HERO-END -->` 之間的 `<section>...</section>`

- 若 [A1] = `About`：  
  - 修改範圍：  
    - `<!-- SECTION:ABOUT-START -->`  
    - `<!-- SECTION:ABOUT-END -->` 之間的 `<section>...</section>`

- 若 [A1] = `Skills`：  
  - 修改範圍：  
    - `<!-- SECTION:SKILLS-START -->`  
    - `<!-- SECTION:SKILLS-END -->` 之間的 `<section>...</section>`

- 若 [A1] = `Projects`：  
  - 修改範圍：  
    - `<!-- SECTION:PROJECTS-START -->`  
    - `<!-- SECTION:PROJECTS-END -->` 之間的 `<section>...</section>`

- 若 [A1] = `Contact`：  
  - 修改範圍：  
    - `<!-- SECTION:CONTACT-START -->`  
    - `<!-- SECTION:CONTACT-END -->` 之間的 `<section>...</section>`

HTML 必須遵守以下原則：  
- SECTION 註解本身（START / END）必須保留，名稱與位置不變。  
- 註解中間需包含一個完整的 `<section>...</section>` 結構。  
- `section` 的 `id` 預設維持原本命名（hero / about / skills / projects / contact），除非 Section SDD 明確要求變更。  
- 非 Hero 區的更新不得新增額外 `<h1>` 元素。  

2. CSS：只修改對應 CSS Slot ＋ 必要時的 RWD 區塊

- 若 [A1] = `Hero`：  
  - 主要修改範圍：`/* CSS:HERO-START */` ~ `/* CSS:HERO-END */`  

- 若 [A1] = `About`：  
  - 主要修改範圍：`/* CSS:ABOUT-START */` ~ `/* CSS:ABOUT-END */`  

- 若 [A1] = `Skills`：  
  - 主要修改範圍：`/* CSS:SKILLS-START */` ~ `/* CSS:SKILLS-END */`  

- 若 [A1] = `Projects`：  
  - 主要修改範圍：`/* CSS:PROJECTS-START */` ~ `/* CSS:PROJECTS-END */`  

- 若 [A1] = `Contact`：  
  - 主要修改範圍：`/* CSS:CONTACT-START */` ~ `/* CSS:CONTACT-END */`  

如需針對該 Section 設計 RWD 行為（例如桌機版左右雙欄、調整間距等），  
可在 `/* CSS:RWD-START */` ~ `/* CSS:RWD-END */` 之間，新增或調整對應的 `@media` 區塊。

CSS 必須遵守以下原則：  
- 僅使用元素選擇器與 class 選擇器，不得新增或保留任何 `#id` 選擇器。  
- 其他 Section 對應的 CSS Slot（非本次 [A1] 指定者）不做修改。  
- 新增樣式應以該 Section 的 class（如 `.section-hero`、`.section-about` 等）為主。


四、輸出內容要求

1. 在更新完成後，須輸出「更新後完整的 `index.html`」內容：  
   - 可直接覆蓋原始 `index.html` 使用。  
   - 建議放在單一程式碼區塊中，無需額外說明文字。

2. 在輸出 `index.html` 前，應整理一份簡短的變更摘要（3～8 點）：  
   - 說明本次更新針對該 Section 做了哪些修改，例如：  
     - 更新 About 文案內容  
     - 新增一張 Unsplash 圖片與說明文字  
     - 調整桌機版為左右雙欄排版  
     - 增加按鈕與 hover 效果等。


五、自我檢查清單（Section 更新後）

更新並輸出 `index.html` 前，需確認以下事項：

1. 標題與結構  
   - [ ] 全站仍然只有一個 `<h1>`，位於 Hero 區。  
   - [ ] 所有 SECTION 插槽註解（HERO / ABOUT / SKILLS / PROJECTS / CONTACT）名稱完整保留。  

2. CSS 結構  
   - [ ] 所有 CSS Slot 註解（BASE / HERO / ABOUT / SKILLS / PROJECTS / CONTACT / RWD）完整保留。  
   - [ ] 新增或修改的 CSS 選擇器皆未使用 `#id`。  

3. 連結與圖片  
   - [ ] 新增或修改的 `<a>`，`href` 皆為非空，且不是單純的 `#`。  
   - [ ] 新增或修改的 `<img>`：  
         - `src` 來源為 Unsplash。  
         - `alt` 內容合理且非空。  

4. RWD 與版面  
   - [ ] 依更新後的 CSS 推估，在 320px / 768px / 1440px 下不會產生水平捲動。  
   - [ ] 更新後的 Section 排版與 Section SDD 的需求一致（例如欄數、對齊方式、重點資訊呈現）。  

━━━━━━━━━━━━━━━━━━

請根據以上《Section 更新規格書 v1.0》，
使用 [A1] / [A2] / [A3] 提供的資訊，只更新指定的 Section，
並輸出更新後完整的 `index.html`。