# 關於我頁面

灰階開發者作品集，整頁由 PDRenderKit 1.5.2 依 PDConfig 以 JS 產生，含 scroll-spy 導覽、分頁與作品篩選。

## 概要

| 項目 | 內容 |
|---|---|
| 製作日期 | 2023-06-13 |
| 分類 | 個人頁範例 |
| HTML 檔案 | `index.html` |
| 原始碼 | [target/20230613](https://github.com/pardnio/demo-web/tree/main/target/20230613) |

## 即時預覽

<iframe src="/target/20230613/" title="關於我頁面" loading="lazy" style="width:100%;height:640px;border:1px solid #e5e7eb;border-radius:8px"></iframe>

[在新分頁開啟範例](/target/20230613/)

## 頁面區塊

| 區塊 | 說明 |
|---|---|
| 導覽列（#nav） | 標題取自 PDConfig.nav.title，#nav-list 七個項目依 index 高亮，漢堡按鈕 #button-tab；捲動後加上 .min。 |
| 主視覺 | 社群圖示欄、姓名、副標、描述、Contact 按鈕、Scroll Down 提示，以及以 border-radius keyframes 變形的旋轉頭像框。 |
| 關於我 | 圖片、3 個數據項目、介紹段落與 Contact 按鈕。 |
| 技能 | 前端與後端兩欄，各列 4 項技術與年資。 |
| 服務 | 3 張卡（iOS、前端、後端）與 View More 按鈕（無行為）。 |
| 經歷 | #tab-experience 透過父層 section 的 show 屬性切換學歷與工作時間軸（初始 show=1）。 |
| 作品集 | #tab-portfolio（All / Lorem1 / Lorem2）與 #body-portfolio 20 張佔位圖，依 tag-filter / tag-key 篩選。 |
| 聯絡我 | Email 與 LinkedIn 卡片（Open 按鈕無行為）與三欄訊息表單，標籤文字由 CSS attr() 讀取 label[key]。 |
| 頁尾 | 品牌、GitHub / LinkedIn / Mail 圖示連結與版權。 |
| 回到頂部按鈕 | 固定的 #button-scrollTop，捲過主視覺後顯示。 |

## 互動行為

- js/index.js 以 document.body._child([...]) 搭配 PDRenderKit 元素工廠建構整頁（"tag#id"._(attrs, children)、"i.fa-x"._()、array._$(map)、string._fa、._open(href)、._go(href)）。
- 內容字串來自 index.html 內宣告的 const PDConfig（nav、header、icon）。
- 點導覽項目關閉行動選單並將 body.scrollTop 跳到前面區塊高度總和；#button-tab 切換 #nav-list.show。
- body scroll 監聽：以 $$_class(scrollTop &gt; 0) 切換 #nav.min、設定 #nav-list[index]（scroll-spy，偏移 vh/3）並顯示／隱藏 #button-scrollTop。
- 經歷分頁點擊設定父層 show=i；作品分頁點擊設定 #tab-portfolio[index] 與 #body-portfolio[tag-filter]。

## 相依資源

| 名稱 | 版本 | 來源 |
|---|---|---|
| Font Awesome Free | 6.5.2 | https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/css/all.min.css |
| PDRenderKit | 1.5.2 | https://cdn.jsdelivr.net/npm/pdrenderkit@1.5.2/dist/PDRenderKit.js |
| Google Analytics (gtag.js) | - | https://www.googletagmanager.com/gtag/js?id=G-L5VYEZPVXX |
| js/index.js | - | ./js/index.js |

## 樣式

| 項目 | 內容 |
|---|---|
| SCSS 入口 | `sass/index.scss` |
| 輸出 CSS | `css/index.css` |
| Partials | `_nav.scss`, `_footer.scss`, `_header.scss`, `_about.scss`, `_skills.scss`, `_services.scss`, `_experiences.scss`, `_portfolios.scss`, `_contact.scss` |

index.scss：reset、body 捲動容器、固定 #button-scrollTop；partials 對應各產生的區塊。_nav 處理 .min 縮小、行動版 .show 與 [index] 高亮；_header 含 mouse-animation 與 head-animation（變形 border-radius 頭像框）；_experiences 依 [show] 切換清單；_portfolios 使用 [index] 與 [tag-filter]/[tag-key]；_contact 以 attr(key) 顯示標籤。灰階 --col-brand-1..9 與 --width-max 1280px 位於 inline &lt;style&gt;。

```bash
cd target/20230613
npx sass sass/index.scss css/index.css --no-source-map || exit 1
```

## 使用技巧

- 設定驅動渲染：內容放在全域 PDConfig，標記完全由 JS 產生（body 只有設定 script）。
- 以屬性狀態 CSS（[index]、[show]、[tag-filter] + [tag-key]）由 JS 切換，取代 class 操作。
- 變形頭像：旋轉容器上以 keyframes 變化 border-radius，內部圖片反向旋轉。
- 以 content: attr(key) 產生表單標籤；斷點 480/640/800/960/1024px。

## 外部資源

- https://fakeimg.pl/1024/282828/eae0d0/?text=sample (avatar, about image, portfolio placeholders)
- https://pardn.io/image/head.png (favicon)
- https://pardn.io/web-template/image/20230613.jpg (og/twitter image)

## 相關頁面

- [專案結構](/zh/project-structure)
- [樣式工作流程](/zh/styling-workflow)
- [框架使用](/zh/frameworks)