# 個人簡介 230512

完全由 PDRenderKit 依 PDConfig 物件渲染的個人履歷單頁：打字效果首頁、關於我（簡介／技能）、作品集網格。

## 概要

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

## 即時預覽

<iframe src="/target/20230512/" title="個人簡介 230512" loading="lazy" style="width:100%;height:640px;border:1px solid #e5e7eb;border-radius:8px"></iframe>

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

## 頁面區塊

| 區塊 | 說明 |
|---|---|
| 行動版導覽 | nav 內 #show-nav 按鈕切換 body.show 以顯示左側欄 |
| 左側欄（section.left-bar） | 固定側欄：頭像、姓名、Facebook/Instagram/GitHub/LinkedIn、Home / About Me / Portfolio 分頁按鈕、版權頁尾 |
| 首頁（section.home） | 全高背景照片（本地 image/cgfaces_*.jpg），問候語、循環 PDConfig.home.line2.list 的打字標題與簡介 |
| 關於我（section.about） | 「關於我」標題、頭像＋資料列（年紀、學歷、信箱、手機、網站、GitHub）、四格成就、依年資的「技能」長條、「專案」與「報價」時間軸 |
| 作品集（section.portfolio） | 由 PDConfig.portfolio 產生的 20 張示意卡片網格（圖片＋標題） |

## 互動行為

- index.html inline &lt;script&gt; 定義全域 PDConfig（home / about / portfolio 資料）；body 為空，js/index.js 以 PDRenderKit 元素建構器（"tag.class"._([...])、_click、_go、_open）建出整個 DOM
- 以 ?page=home|about|portfolio 分頁：setHome / setAbout / setPortfolio 透過 $url.__query().__history() 更新網址、移動 .sel 並以 __child 替換 section.right-body 內容
- 載入時 "button.sel".$.click() 渲染與網址參數對應的頁面
- js/index.js setHome → updateTitle：每 8 秒以 setInterval/setTimeout 在 #typing-area 打字／刪字循環
- #show-nav 切換 body.show，在窄螢幕開關側欄

## 相依資源

| 名稱 | 版本 | 來源 |
|---|---|---|
| Font Awesome Free | 6.5.2 | https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/css/all.min.css |
| PDRenderKit | 1.0.0 | https://cdn.jsdelivr.net/npm/pdrenderkit@1.0.0/dist/PDRenderKit.js |
| Google Analytics (gtag.js) | G-L5VYEZPVXX | https://www.googletagmanager.com/gtag/js?id=G-L5VYEZPVXX |
| Page stylesheet (compiled SCSS) | - | ./css/index.css |
| Page script | - | ./js/index.js |
| Home background photo | - | ./image/cgfaces_e5d2485f-d7b9-45ba-a525-e45a237fe958.jpg (via css/index.css url(../image/...)) |
| Noto Sans TC (font-family only, no webfont loaded) | - | not loaded; falls back to sans-serif unless installed locally |

## 樣式

| 項目 | 內容 |
|---|---|
| SCSS 入口 | `sass/index.scss` |
| 輸出 CSS | `css/index.css` |
| Partials | `_left-bar.scss`, `_home.scss`, `_about.scss` |

index.scss 含重設、:root 變數（--tab-width 0/240/360px、--head-width 於 800/1024px）與作品集網格（--album-row-width 1/2/3 欄）；_left-bar 為固定側欄，_home 為含 ::before 遮罩的背景首頁，_about 為簡介、成就格、技能長條（[year=N] 迴圈）與時間軸。

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

## 使用技巧

- 資料驅動 SPA：內容放在設定物件，DOM 全由 JS 建立，&lt;body&gt; 無標記
- 以 query string 搭配 history 更新做分頁，不需多個 HTML
- 在 media query（800px / 1024px）內重定義 CSS 變數調整側欄與頭像尺寸
- 技能長條以 SCSS 迴圈產生 [year=N] 屬性選擇器，content: attr(skill) / attr(year) "年"
- 固定側欄，響應式斷點 414/640/800/1024/1280/1440px

## 外部資源

- https://pardn.io/image/head.png (favicon)
- https://pardn.io/web-template/image/20230512.jpg (og:image / twitter:image)
- https://pardn.io/web-template/target/20230512 (canonical / og:url)
- https://fakeimg.pl/1024/282828/eae0d0/?text=sample (placeholder images)
- ../image/cgfaces_e5d2485f-d7b9-45ba-a525-e45a237fe958.jpg (relative from css/, resolves inside the folder)

## 相關頁面

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