這個作品集本體:自製模板與部署流程。
進行中Web2026
Fins Portfolio2026
以 Vite + React 打造的作品集框架,介面建立在 Arc 元件庫上,響應式排版、淺色為主並支援深色模式,後續所有作品都會放上來。設計目標是在桌機與行動裝置上都能有乾淨、可閱讀的呈現。
這個作品集本身也算一個 side project:每次要介紹自己的東西就要重新整理一次,索性寫成可重複使用的模板。
技術選擇刻意走輕:Vite 開 dev server 不到一秒、HMR 反應即時,改字看效果不用等。版面用 CSS Modules,顏色與尺寸全部走 Arc 的語意 token,換色或調字距一處改全站生效。
- 響應式優先:桌機 1440 寬展開雙欄 grid,手機 390 寬自動堆疊成單欄
- 克制的版面:細 hairline、同心圓角、規格表風格的資料列
- 無障礙:focus ring 顯眼、跳轉 anchor 預留 scroll-margin
目前這份模板用在自己這個作品集,之後若有人想 fork,README 寫好 build / deploy / 加新作品的流程:從 `projects.ts` 加一筆,push 上去就上線,不需要碰框架設定。