這是我 幫家人 做的 Dinotaeng 圖鑑——不是商業專案，而是把家裡的周邊收藏整理成一個「打開就能慢慢看」的小站。定位很單純：純粹觀賞，順便帶一點收集進度與抽選的趣味。
線上瀏覽
歡迎直接點進去逛系列、看大圖；沒有帳號、沒有後台，就是為了讓家人（與之後的自己）開開心心翻圖鑑。
為什麼這樣設計？
收藏愈積愈多時，照片容易散在相簿與資料夾裡，想拿出來「一起看」反而麻煩。所以我把規則定成：
public/Dinotaeng/系列名稱/*.jpg→ 自動成一個系列- 建置前跑腳本掃檔，產出
catalog.json - 「已收集」狀態存在瀏覽器
localStorage（可選玩，不是硬性流程）
沒有後端、沒有會員系統——資料夾結構就是資料來源。加新品只要補圖、再建置一次，畫面上就會多出來。
技術棧
| 項目 | 選擇 |
|---|---|
| 框架 | Vue 3 + TypeScript |
| 建置 | Vite（dev／build 會先跑 catalog 腳本） |
| 路由 | 無（單頁＋ Modal） |
| 狀態 | provide/inject（刻意保持依賴極輕） |
| 部署 | Netlify |
主畫面包含：標題與統計、系列進度環、搜尋／篩選、系列卡片牆、大圖預覽、右下角「抽選」。
想保留的感覺
- 好看優先：暖米色調、卡片回饋，讓「翻圖鑑」本身就是享受。
- 操作不麻煩：點卡片可標記收集；放大與收集分開，減少誤觸。
- 進度可視化：系列完成度一眼看懂。
- 抽選儀式感：輪播定格，像多了一點開箱樂趣。
實作收穫
有時寫程式不是為了交付客戶，而是為了家人願意多看兩眼。對這種「觀賞型」小站來說，資料入口要直覺：會用資料夾整理照片，就能維護網站。
結語
工程師的價值，也可以是把家裡的小收藏，變成一個打得開、逛得開心的地方。若你也喜歡 Dinotaeng，歡迎來逛逛這本線上圖鑑：Dinotaeng 圖鑑。