個人作品集網站
用 Next.js 16 + React 19 從零打造的作品集網站，JSON 資料驅動架構，所有內容與展示層完全分離。
使用的技術
🤔 為什麼要自己寫作品集網站？
市面上作品集模板很多，但大多千篇一律 — 換個顏色、塞點內容就跟別人長得一樣。 我想做一個真正屬於自己的網站：從架構到每一個 CSS 動畫都自己決定。
更重要的是，作品集本身就是一個作品。它不只是展示專案的櫥窗，更是我對前端技術理解程度的直接證明。
🏗️ 架構設計：JSON 資料驅動
整個網站最核心的設計決策：資料與展示完全分離。
所有內容（關於我、專案、經歷、教育、技能、證照）都存放在 content/ 資料夾的 JSON 檔案裡。 頁面元件只負責讀取 JSON 然後渲染 — 改內容不需要碰任何代碼。
content/ ├── about.json # 個人資料、社群連結 ├── projects.json # 所有專案（含分類、技術標籤） ├── experience.json # 工作經歷 ├── education.json # 學歷 ├── skills.json # 技能分類 └── certifications.json # 證照
這個架構帶來的好處非常明顯：
- ✓新增專案：編輯 JSON → 完事。不需要建新頁面或改路由。
- ✓改履歷：修改對應 JSON 欄位，網站即時更新。
- ✓多語言友好：未來只要加一組翻譯 JSON 就能支援英文版。
- ✓版本控制：JSON 是純文字，git diff 一目了然。
📂 專案分類系統
專案數量變多後，扁平列表已經不夠用。我設計了一個分類系統，每個專案帶有 category 標籤， 前端按分類渲染成獨立區塊，每個分類有各自的圖示、配色和漸層風格：
這樣訪客可以快速找到感興趣的領域，不會被一堆專案淹沒。
🎨 視覺設計心得
💣 踩過的坑
⚡ 技術棧為什麼這樣選
App Router 的 RSC（React Server Components）讓整個首頁可以在伺服器端渲染，零客戶端 JS。 讀 JSON 檔案這種 IO 操作直接在 Server Component 裡用 fs.readFileSync，簡單粗暴又高效。
Utility-first 的開發方式讓我可以在 TSX 裡直接寫樣式，不需要額外的 CSS 檔案。 v4 的 CSS-first 配置讓自定義 theme 變得更直覺。
JSON 資料有明確的 interface 定義（Project、About、Experience...）， 改 JSON 結構時 TypeScript 會立刻提醒哪些元件需要同步更新。重構時的安全網。
🗂️ 完整目錄結構
app/
├── layout.tsx # 全域佈局（Header + Footer + 字型）
├── page.tsx # 首頁（組裝所有 Section 元件）
├── globals.css # 全域樣式、動畫、noise 紋理
└── projects/
├── vm-lobster/page.tsx # 各專案詳情頁
├── exam-generator/page.tsx
├── tailscale-exit-node/page.tsx
└── ...
components/
├── layout/ # Header, Footer
├── sections/ # Hero, Projects, Experience, Education, Skills
└── ui/ # Button, Section（通用容器）
content/ # ← 所有資料在這裡
├── about.json
├── projects.json
├── experience.json
├── education.json
├── skills.json
└── certifications.json
lib/
└── data.ts # JSON 讀取函數 + TypeScript 型別定義🚀 部署流程：從本機到公網
網站開發完成後，要讓外面能訪問，需要三層配置：
npm run build 編譯後，以 npm start（Node.js 伺服器模式）在局域網主機上啟動，默認監聽 localhost:3000。:3000。這樣外部流量才能穿過 NAT 到達 Next.js 伺服器。self.hachimi.qzz.io）指向內網的 Next.js 服務。同時啟用 SSL（Let's Encrypt 自動證書），讓網站走 HTTPS。