# 個人資訊

左側固定圖示側欄的個人履歷作品集單頁，含技能條、經歷時間軸、可篩選橫向作品輪播、價目與聯絡表單。

## 概要

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

## 即時預覽

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

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

## 頁面區塊

| 區塊 | 說明 |
|---|---|
| 左側欄導覽 | #nav 含 Logo P、7 個圖示分頁（#tab-left，依 sel 高亮）與版權；行動版由 #nav-button 開關。 |
| 開場 | 頭像、姓名、職稱、GitHub/LinkedIn 圖示、Contact 按鈕與動態 Scroll Down 滑鼠提示，背景為 image/section-0.svg。 |
| 關於我 | 照片、自介文字、4 條百分比技能條（span[percent]）與 4 個數據項目。 |
| 服務 | 3 張卡：iOS、前端、後端開發。 |
| 經歷 | 兩欄時間軸：學歷與工作經歷（UMD你的博客、JOBALL找專家、Pardn Ltd）。 |
| 作品集 | ALL / Web / iOS 篩選分頁與 #body-portfolio 橫向欄式格狀，附前後按鈕；項目由 JS 產生。 |
| 價目 | 3 張價目卡（30k / 120k / 30k）與 Contact 按鈕。 |
| 客戶評價 | #body-client 橫向滑動 2 張評價卡，附前後按鈕。 |
| 聯絡 | 姓名、Email、主旨、訊息表單與 Send Message 連結（無送出邏輯）。 |

## 互動行為

- js/index.js：#nav-button 切換 #nav 的 .show 並在 fa-bars 與 fa-chevron-left 間換圖示。
- 作品集：以 "a"._({...},["img"._(src)])._open(href) 產生 20 個隨機 tag-key 1|2 的項目；點分頁設定 #body-portfolio[tag-filter] 並重置 scrollLeft，由 CSS 顯示對應項目。
- 前後按鈕以 scrollLeft = 頁數 * clientWidth + 間距 翻頁 #body-portfolio 與 #body-client（PDRenderKit 全域 vw &lt;= 414 時 16px，否則 24px）。
- 點側欄分頁將 document.body.scrollTop 設為前面 #body 子區塊高度總和；body scroll 監聽依位置設定 #tab-left sel=0..6（scroll-spy，偏移 vh/3）。
- index.html 引入 js/index.js 兩次，且檔內作品集前後按鈕也綁定兩次，導致事件處理與產生的項目重複。

## 相依資源

| 名稱 | 版本 | 來源 |
|---|---|---|
| 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) | - | 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`, `_section-0.scss`, `_section-1.scss`, `_section-2.scss`, `_section-3.scss`, `_section-4.scss`, `_section-5.scss`, `_section-6.scss`, `_section-7.scss` |

index.scss：reset、body 捲動容器（&gt;=800px 左側留 8rem 給側欄）、linear-move keyframes；partials 對應 8 個區塊與 _nav（固定側欄、依 sel 高亮圖示）。_section-0 使用 ../image/section-0.svg 與 mouse-animate；_section-1 以 @for 1..100 依 [percent] 產生技能條寬度；_section-4 以 @for 產生 [tag-filter]/[tag-key] 篩選規則。色票變數（brand/fine/info/error/hint 各 9 階）位於 index.html inline &lt;style&gt;。

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

## 使用技巧

- SCSS @for 迴圈產生屬性選擇器（[percent="n"]::after 寬度、[tag-filter="n"] [tag-key="n"]）。
- 以 content: attr(percent) "%" 顯示 HTML 屬性值。
- 以 flex-flow: column wrap 搭配 calc() 高度與 overflow hidden 做橫向分頁畫廊，藉 scrollLeft 翻頁。
- 以 max-width/opacity 過渡切換顯示實現篩選，而非 display。
- 五組 9 階 CSS 變數色票；斷點 414/480/640/800/1024px。

## 外部資源

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

## 相關頁面

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