# 個人介紹

以 QuickUI 0.6.2 製作的個人作品集頁：首頁打字效果標題與漂浮漸層圓，作品集依 ?type= 篩選並可複製連結分享。

## 概要

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

## 即時預覽

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

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

## 頁面區塊

| 區塊 | 說明 |
|---|---|
| 導覽列 | 標題取自 {{ nav.title }}（目前頁名），以 :for 渲染 Home / Portfolio 頁籤按鈕、GitHub / LinkedIn 連結與行動版選單鈕。 |
| 行動版選單 | ul#mobile-tab 含相同頁籤（錨點綁定 e.href）與社群連結，以 show class 顯示。 |
| 首頁（:if="isHome"） | 「Hello / I'm 打字文字」標題與閃爍假游標、介紹文字、Code / GitHub 按鈕、以 :path="image/home.svg" 內嵌 SVG 與 image/temp1.png。 |
| 作品集（:else） | 分類頁籤（ALL / LAPTOP / LANDSCAPE / CITY，由範例資料產生）與 lazyload 圖片格線，每格附開啟／分享操作。 |

## 互動行為

- new QUI({ id: 'body', data, event, when })，page / type 取自網址參數（?page=portfolio&amp;type=...）。
- event.page 不重新載入即切換 isHome 與頁籤 class，並重新啟動打字效果。
- event.dynamicInput：以 setInterval 每 8 秒刪除並重打 #typing-area，輪播 iOS工程師／網站工程師／程式設計師／Pardn Chiu。
- event.expand：800px 以下第一次點擊展開分類列，第二次點擊才導向 data-href。
- event.copy：以 QuickUI 的 String.$copy 複製圖片網址，顯示「已複製」500ms。
- event.show 對 #mobile-tab 加上 show。

## 相依資源

| 名稱 | 版本 | 來源 |
|---|---|---|
| QuickUI | 0.6.2 | https://cdn.jsdelivr.net/npm/@pardnchiu/quickui@0.6.2/dist/QuickUI.js |
| Font Awesome Free | 6.5.2 | https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/css/all.min.css |
| Google Analytics gtag | - | https://www.googletagmanager.com/gtag/js?id=G-L5VYEZPVXX |
| Noto Sans TC (font-family only, not loaded by the page) | - | sass/index.scss font-family declaration |

## 樣式

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

index.scss 含 reset、導覽列、行動版選單與動態漸層圓；_home 為主視覺與打字游標；_portfolio 為分類列與格線；_about 樣式 div.about，HTML 未使用。

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

## 使用技巧

- QuickUI 模板語法：{{ }}、:for、:if / :else、:class、:href、:data-*、:lazyload、:path（內嵌 SVG）、@click。
- inline &lt;style&gt; 主題變數：--clr-txt、--clr-grad-start / -end、--clr-main、--clr-bg、--grid-interval、--grid-radius、--grid-radio。
- 以 ::before / ::after 搭配 aspect-ratio 與無限 keyframes 製作漂浮漸層圓；backdrop-filter 模糊面板。
- Sass @for 產生 [data-target="N"] &gt; li 選取頁籤規則；格線寬度以 calc() 搭配 var(--grid-interval)。
- 行動優先斷點 480 / 640 / 800 / 960 / 1024 / 1440px。

## 外部資源

- `https://fakeimg.pl/1024/282828/eae0d0/?text=sample`
- `https://pardn.io/image/head.png`
- https://pardn.io/web-template/image/20230320.jpg (og:image; canonical also points to /target/20230320)
- image/home.svg, image/temp1.png (relative, included in folder)

## 相關頁面

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