關於我頁面

灰階開發者作品集，整頁由 PDRenderKit 1.5.2 依 PDConfig 以 JS 產生，含 scroll-spy 導覽、分頁與作品篩選。

概要

項目	內容
製作日期	2023-06-13
分類	個人頁範例
HTML 檔案	`index.html`
原始碼	target/20230613

即時預覽

在新分頁開啟範例

頁面區塊

區塊	說明
導覽列（#nav）	標題取自 PDConfig.nav.title，#nav-list 七個項目依 index 高亮，漢堡按鈕 #button-tab；捲動後加上 .min。
主視覺	社群圖示欄、姓名、副標、描述、Contact 按鈕、Scroll Down 提示，以及以 border-radius keyframes 變形的旋轉頭像框。
關於我	圖片、3 個數據項目、介紹段落與 Contact 按鈕。
技能	前端與後端兩欄，各列 4 項技術與年資。
服務	3 張卡（iOS、前端、後端）與 View More 按鈕（無行為）。
經歷	#tab-experience 透過父層 section 的 show 屬性切換學歷與工作時間軸（初始 show=1）。
作品集	#tab-portfolio（All / Lorem1 / Lorem2）與 #body-portfolio 20 張佔位圖，依 tag-filter / tag-key 篩選。
聯絡我	Email 與 LinkedIn 卡片（Open 按鈕無行為）與三欄訊息表單，標籤文字由 CSS attr() 讀取 label[key]。
頁尾	品牌、GitHub / LinkedIn / Mail 圖示連結與版權。
回到頂部按鈕	固定的 #button-scrollTop，捲過主視覺後顯示。

互動行為

js/index.js 以 document.body.child([...]) 搭配 PDRenderKit 元素工廠建構整頁（"tag#id".(attrs, children)、"i.fa-x".()、array.$(map)、string._fa、._open(href)、._go(href)）。
內容字串來自 index.html 內宣告的 const PDConfig（nav、header、icon）。
點導覽項目關閉行動選單並將 body.scrollTop 跳到前面區塊高度總和；#button-tab 切換 #nav-list.show。
body scroll 監聽：以 $$_class(scrollTop > 0) 切換 #nav.min、設定 #nav-list[index]（scroll-spy，偏移 vh/3）並顯示／隱藏 #button-scrollTop。
經歷分頁點擊設定父層 show=i；作品分頁點擊設定 #tab-portfolio[index] 與 #body-portfolio[tag-filter]。

相依資源

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

樣式

項目	內容
SCSS 入口	`sass/index.scss`
輸出 CSS	`css/index.css`
Partials	`_nav.scss`, `_footer.scss`, `_header.scss`, `_about.scss`, `_skills.scss`, `_services.scss`, `_experiences.scss`, `_portfolios.scss`, `_contact.scss`

index.scss：reset、body 捲動容器、固定 #button-scrollTop；partials 對應各產生的區塊。_nav 處理 .min 縮小、行動版 .show 與 [index] 高亮；_header 含 mouse-animation 與 head-animation（變形 border-radius 頭像框）；_experiences 依 [show] 切換清單；_portfolios 使用 [index] 與 [tag-filter]/[tag-key]；_contact 以 attr(key) 顯示標籤。灰階 --col-brand-1..9 與 --width-max 1280px 位於 inline <style>。

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

使用技巧

設定驅動渲染：內容放在全域 PDConfig，標記完全由 JS 產生（body 只有設定 script）。
以屬性狀態 CSS（[index]、[show]、[tag-filter] + [tag-key]）由 JS 切換，取代 class 操作。
變形頭像：旋轉容器上以 keyframes 變化 border-radius，內部圖片反向旋轉。
以 content: attr(key) 產生表單標籤；斷點 480/640/800/960/1024px。

外部資源

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