個人頁面

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

概要

項目	內容
製作日期	2023-06-07
分類	個人頁範例
HTML 檔案	`index.html`
原始碼	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 <style>。

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)