# 個人頁面

紫色系開發者個人作品集單頁（PARDN CHIU），含主視覺、自我介紹、服務、JS 產生的作品格、客戶評價與訂閱區。

## 概要

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

## 即時預覽

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

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

## 頁面區塊

| 區塊 | 說明 |
|---|---|
| 固定導覽列 | 品牌 Pardn Ltd，六個項目（HOME 標 .sel）與漢堡按鈕；未綁定行為。 |
| 頂部主視覺 | 「I AM PARDN CHIU / SENIOR FULL-STACK DEVELOPER」標題、GitHub 與 CONTACT 按鈕，旁為 image/header.png。 |
| 自我介紹（num=0） | image/section-0.jpg 搭配位移陰影、自我介紹文字與 LinkedIn 按鈕。 |
| 服務項目（num=1） | 4 張卡：iOS、前端、後端、全端開發，附 Font Awesome 圖示。 |
| 作品集（num=2） | ALL / WEB / IOS 篩選分頁（靜態）、由 inline script 填入 20 張佔位圖的 #portfolio 格、靜態分頁點。 |
| 客戶評價（num=3） | 4 張客戶卡片（頭像與評語）與靜態分頁點。 |
| 訂閱區（num=4） | 漸層區塊，含 Email 輸入與 Subscribe 按鈕（無處理邏輯）。 |
| 頁尾 | 版權與 Mail / GitHub / LinkedIn 圖示。 |

## 互動行為

- inline script 於 DOMContentLoaded 呼叫 PDRenderKit _LazyListener()，以 "a"._(["img"._({src})]) 建立 20 個作品項目放入 DocumentFragment，再以 portfolio._child() 插入。

## 相依資源

| 名稱 | 版本 | 來源 |
|---|---|---|
| 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 |
| Noto Sans TC (font-family only, not loaded by the page) | - | none |

## 樣式

| 項目 | 內容 |
|---|---|
| SCSS 入口 | `sass/index.scss` |
| 輸出 CSS | `css/index.css` |

單檔 SCSS（無 partial）：reset、含 .sel 底線的固定導覽、header 毛玻璃卡、[num="0"]..[num="4"] 各區塊、頁尾，以及讓按鈕與卡片漸層背景移動的 linear-move keyframes。HSL 品牌色階變數（色相 271）與 --width-max 1280px 定義於 index.html inline &lt;style&gt;。

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

## 使用技巧

- 以 CSS 變數定義 HSL 七階色階（色相 271）。
- 動態漸層：linear-gradient 搭配 @keyframes linear-move 移動 background-position。
- PDRenderKit 元素工廠 "tag"._(children|attrs) 與 element._child() 建 DOM；_LazyListener() 延遲載入圖片。
- 斷點 640/644/800/1024px；backdrop-filter 模糊；位移 box-shadow 裝飾。

## 外部資源

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

## 相關頁面

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