個人資訊
左側固定圖示側欄的個人履歷作品集單頁，含技能條、經歷時間軸、可篩選橫向作品輪播、價目與聯絡表單。
概要
即時預覽
在新分頁開啟範例
頁面區塊
互動行為
- js/index.js：#nav-button 切換 #nav 的 .show 並在 fa-bars 與 fa-chevron-left 間換圖示。
- 作品集：以 "a".({...},["img".(src)])._open(href) 產生 20 個隨機 tag-key 1|2 的項目；點分頁設定 #body-portfolio[tag-filter] 並重置 scrollLeft，由 CSS 顯示對應項目。
- 前後按鈕以 scrollLeft = 頁數 * clientWidth + 間距 翻頁 #body-portfolio 與 #body-client（PDRenderKit 全域 vw <= 414 時 16px，否則 24px）。
- 點側欄分頁將 document.body.scrollTop 設為前面 #body 子區塊高度總和；body scroll 監聽依位置設定 #tab-left sel=0..6（scroll-spy，偏移 vh/3）。
- index.html 引入 js/index.js 兩次，且檔內作品集前後按鈕也綁定兩次，導致事件處理與產生的項目重複。
相依資源
樣式
index.scss：reset、body 捲動容器（>=800px 左側留 8rem 給側欄）、linear-move keyframes；partials 對應 8 個區塊與 _nav（固定側欄、依 sel 高亮圖示）。_section-0 使用 ../image/section-0.svg 與 mouse-animate；_section-1 以 @for 1..100 依 [percent] 產生技能條寬度；_section-4 以 @for 產生 [tag-filter]/[tag-key] 篩選規則。色票變數（brand/fine/info/error/hint 各 9 階）位於 index.html inline <style>。
cd target/20230610
npx sass sass/index.scss css/index.css --no-source-map || exit 1
使用技巧
- SCSS @for 迴圈產生屬性選擇器（[percent="n"]::after 寬度、[tag-filter="n"] [tag-key="n"]）。
- 以 content: attr(percent) "%" 顯示 HTML 屬性值。
- 以 flex-flow: column wrap 搭配 calc() 高度與 overflow hidden 做橫向分頁畫廊，藉 scrollLeft 翻頁。
- 以 max-width/opacity 過渡切換顯示實現篩選，而非 display。
- 五組 9 階 CSS 變數色票；斷點 414/480/640/800/1024px。
外部資源
相關頁面
