# 個人簡介 230616

灰階履歷作品集，左側固定分頁欄，以 QuickUI 0.6.2 模板組合 view/*.html，含分頁式履歷與價目。

## 概要

| 項目 | 內容 |
|---|---|
| 製作日期 | 2023-06-16 |
| 分類 | 個人頁範例 |
| HTML 檔案 | `index.html`, `view/left-tab.html`, `view/home.html`, `view/features.html`, `view/portfolio.html`, `view/resume.html`, `view/pricing.html`, `view/contact.html` |
| 原始碼 | [target/20230616](https://github.com/pardnio/demo-web/tree/main/target/20230616) |

## 即時預覽

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

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

## 頁面區塊

| 區塊 | 說明 |
|---|---|
| 左側分頁欄（view/left-tab.html） | 頭像、#body-tab 六個項目依 [index] 高亮，以及 FIND WITH ME 社群連結。 |
| 首頁（view/home.html） | 頭像、「Hi, I'm Pardn Chiu」、職稱、GITHUB 與 CONTACT ME 按鈕，動態漸層背景。 |
| 服務（view/features.html） | What I Do：iOS、前端、後端 3 張卡。 |
| 作品集（view/portfolio.html） | ALL / WEB / iOS 標籤與依 data.albums 以 :for 渲染的 20 張作品卡，圖片延遲載入並附說明。 |
| 履歷（view/resume.html） | EXPERIENCE / SKILLS 分頁：學歷與工作時間軸，或依 span[year] 決定長度的前後端技能條。 |
| 價目（view/pricing.html） | iOS APP / Front-end / Back-end 分頁，各顯示一張方案卡（120k / 30k / 30k）與 10 項清單。 |
| 聯絡（view/contact.html） | 個人卡（Mail 與 LinkedIn 連結）與五欄表單（姓名、電話、Email、主旨、訊息，無處理邏輯）。 |
| 頁尾 | #body 內的版權文字。 |

## 互動行為

- inline script 建立 new QUI({id: "page", data: {albums}, when: {rendered}})；QuickUI 載入各 &lt;temp :path&gt; 片段並渲染 :for / {{ }} / :lazyload 綁定。
- rendered hook：點擊 #body-resume 與 #body-pricing 分頁設定容器 filter-index，CSS 顯示對應 [filter-key]。#body-portfolio 的迴圈為空，作品集分頁無作用。
- offsetY(i) 加總 #body 子區塊高度；點 #body-tab 項目設定 document.body.scrollTop，body scroll 監聽設定 #body-tab[index] 0..6（scroll-spy，偏移 vh/3）。

## 相依資源

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

## 樣式

| 項目 | 內容 |
|---|---|
| SCSS 入口 | `sass/index.scss` |
| 輸出 CSS | `css/index.css` |
| Partials | `_left-tab.scss`, `_home.scss`, `_features.scss`, `_portfolio.scss`, `_resume.scss`, `_pricing.scss`, `_contact.scss`, `animation/_bg-move.scss` |

index.scss：reset、body 捲動容器、480px/800px 時為左側欄留位；每個 view 一個 partial。_left-tab：固定欄、@for [index] 高亮；_portfolio/_resume/_pricing：@for 0..9 產生 [filter-index]/[filter-key] 分頁規則；_resume：時間軸與 @for [year] 技能條、attr(year)"年"；_pricing/_contact：&gt;=1024px 使用 position: sticky；animation/_bg-move：漸層 background-position keyframes。--gradient-col 與灰階變數位於 inline &lt;style&gt;。

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

## 使用技巧

- QuickUI 模板語法：&lt;temp :path&gt; 引入、:for="item in albums"、:filter-key / :href 屬性綁定、:lazyload、{{ item.name }} 插值。
- 以 SCSS @for 產生的 [filter-index="n"] [filter-key="n"] 選擇器做屬性驅動分頁篩選。
- 共用 bg-move keyframes 的多色動態漸層；position: sticky 側欄；content: attr(year)。
- 語意化標記：article、time[datetime]、figure/figcaption；斷點 480/640/800/1024/1280px。

## 外部資源

- https://fakeimg.pl/1024/282828/eae0d0/?text=sample (avatars, album and contact images)
- https://pardn.io/image/head.png (favicon)
- https://pardn.io/web-template/image/20230616.jpg (og/twitter image)

## 相關頁面

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