Finrod Chen
  • 作品
  • 文章
  • 關於
  • 好物
來信聊聊
Finrod Chen

白天在生醫產業做細胞治療,晚上寫 side project。這裡收網站、雲端、3D 列印、Arduino,以及一些工作上的紀錄。

網站

  • 作品
  • 文章
  • 關於
  • 好物

其它

  • GitHub
  • LinkedIn
  • 舊部落格
  • [email protected]
© 2026 Finrod Chen
  • GitHub
  • LinkedIn
  1. 作品
  2. Web
  3. Fins Portfolio

Fins Portfolio

這個作品集本體:自製模板與部署流程。

進行中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 上去就上線,不需要碰框架設定。

基本資料

年份
2026
角色
Design + Build
狀態
進行中
分類
Web

技術

  • Vite
  • React
  • TypeScript
  • Arc
  • CSS Modules