作品集網站 — 維護技能
這是 Mitchell Palmer 的個人作品集：以 Next.js 16（App Router）重建的前 Webflow 網站。所有內容以純 TypeScript/JSON/MDX 檔案形式存在於 src/content/ 目錄下，而非使用 CMS。在進行任何變更前，請先閱讀此說明，以遵循現有約定，避免引入新的模式。
心智模型
src/content/ → 資料（要說什麼——幾乎所有編輯都在這裡）
src/app/ → 頁面（路由——一個資料夾對應一個 URL，遵循 App Router 慣例）
src/components/ → UI 元件（可複用——Header、Footer、ProjectCard、PhotoGallery、MDX 嵌入元件）
public/images/ → 靜態資源，按類別組織（site/、projects/、projects/hero/、photography/、icons/）
如果任務是「新增/編輯內容」（專案、工作經歷、自傳內容、照片），幾乎一定只會動到 src/content/。純內容變更時請勿觸碰 src/app/ 或 src/components/。
內容檔案參考
| 檔案 | 控制項目 |
|---|---|
src/content/site.ts | 姓名、標語、電子郵件、導覽連結、社交連結 |
src/content/about.ts | 自傳段落、「旅程」故事、使命宣言、狀態 |
src/content/experience.ts | 工作經歷（experience[]）、學歷、技能列表、服務卡片 |
src/content/photography.json | { src, season, location, type } 陣列——/photography 頁面的篩選按鈕會根據此處出現的值自動生成 |
src/content/projects.ts | 僅邏輯（讀取 projects/ 下的 .mdx 檔案）——除非要變更載入/排序方式，否則勿編輯 |
src/content/projects/*.mdx | 每個專案一個檔案。前置資料 + Markdown/MDX 主體。檔名即為 URL 的 slug。 |
專案 MDX 前置資料格式
---
title: "專案標題"
description: "1-2 句話，顯示於卡片與詳細頁頂部。"
image: "/images/projects/thumbnail.jpg"
heroImage: "/images/projects/hero/banner.jpg" # 可選，若無則使用 `image`
featured: true # 顯示於首頁
link: { label: "GitHub 儲存庫", href: "https://..." }
skills: ["技能一", "技能二"]
tools: ["Python", "PostgreSQL"]
# 或者，對於使用多種技術的專案，可使用 techGroups 取代 skills/tools：
techGroups:
Languages & Libraries: ["Python", "pandas"]
Statistical Methods: ["CUSUM", "Z-Score Analysis"]
---
注意：ProjectCard.tsx 顯示 project.tools ?? project.skills（如果兩者都存在，優先使用 tools）。在顯示上，techGroups 與 skills/tools 互斥——詳細頁面的側邊欄只會顯示其中一組，不會同時顯示。
在專案主體內可使用兩個自訂 MDX 元件：
<DashboardEmbed src="https://your-app.streamlit.app/" title="我的儀表板" />
<PdfEmbed src="/path/to/summary.pdf" />
樣式約定
- Tailwind v4，CSS 變數定義在
src/app/globals.css的:root中（例如--color-brand: #486161）。請在此處修改調色盤，不要在元件中硬編碼 hex 值。 - 兩種字型：
--font-serif（Merriweather，標題）和--font-sans（Inter Tight，內文）——兩者均透過next/font/google在layout.tsx中載入。在建構時需要網路連線——在離線或沙盒環境中會失敗。 .container-page工具類別用於在各頁面中維持一致的最大寬度與內距。
請勿觸碰
node_modules/——已被 gitignore，透過npm install重新產生。永遠不要重新加入 git。- 儲存庫根目錄下的
AGENTS.md——由next dev自動重新產生，向 AI 代理說明此 Next.js 版本的特定慣例。請勿手動編輯；它會被覆寫。 - 儲存庫根目錄下的
CLAUDE.md——目前僅包含@AGENTS.md（一個匯入）。若要新增持久性自訂指令，請建立新檔案並單獨參照它，不要覆寫 AGENTS.md 的匯入。 next-env.d.ts——自動產生，已被 gitignore。
常見任務快速參考
新增專案 → 縮圖放入 public/images/projects/（可選的英雄橫幅）→ 在 src/content/projects/ 中建立新的 .mdx 檔案 → 完成，無需路由程式碼。
新增照片 → 檔案放入 public/images/photography/ → 在 photography.json 中加入對應項目。
編輯自傳/使命 → src/content/about.ts，純字串編輯。
新增工作經歷 → src/content/experience.ts，將新項目附加到 experience[] 陣列開頭（依陣列順序渲染，因此最新的項目在前）。
變更導覽/社交連結 → src/content/site.ts。
建構與驗證
npm install # 拉取更動 package.json 的異動後執行
npm run dev # 本機開發伺服器，熱重載
npm run build # 生產建構——在推送結構性變更前請執行此命令
npm run lint # eslint 檢查
npm run build 在沒有網路連線時會失敗（Google Fonts 獲取）——這在完全離線環境中是預期行為，並非程式碼錯誤。