個人簡介 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 |
即時預覽
頁面區塊
| 區塊 | 說明 |
|---|---|
| 左側分頁欄（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 載入各 <temp :path> 片段並渲染 :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：>=1024px 使用 position: sticky；animation/_bg-move：漸層 background-position keyframes。--gradient-col 與灰階變數位於 inline <style>。
cd target/20230616
npx sass sass/index.scss css/index.css --no-source-map || exit 1
使用技巧
- QuickUI 模板語法：<temp :path> 引入、: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)
