專案概述：敏捷驅動的 AI 協作
這不只是一個作品集網站，這是一場「元專案 (Meta-Project)」實驗。我在 Next.js 15 架構下，利用 Scrum 實踐，協同 AI (Windsurf) 進行高效開發。
在這個歷程中，我扮演了雙重角色：
- 產品負責人：定義個人品牌網站的形象與定位，分析使用者需求。
- 專案實作者：將複雜的技術痛點轉化為精確的提示詞工程，與 AI 協作，在 4 個 Sprint 內，從零到有完成品牌網站布署。
← 返回專案列表
透過 Vibe Coding 打造個人作品集網站
專案深度紀實
執行過程：敏捷開發與 AI 協作
我不僅是在編寫程式碼，更是在實踐一套高品質的「範疇基準」建立流程。透過精確的 Sprint 計劃與速度管理，我將抽象的品牌需求轉化為具體的技術交付物：
- Sprint 1 奠定架構地基：核心目標在於建構穩固的系統底層。關鍵交付物包含 Sanity CMS 的雙語資料建模，以及 Next.js 15 的基礎路由配置，確保後續開發的擴展性。
- Sprint 2 UX 與感官工程：將重點轉向使用者體驗與介面重構。成功交付具備高適應性的響應式 WorkGrid，並實作能動態對齊的 Portable Text 渲染引擎，優化深層內容的閱讀體驗。
- Sprint 3 全球化擴展基準：為確保系統具備國際化擴展實力，執行了 i18n [lang] 路由重構，並建立了精確的多語系 Proxy 攔截機制，達成無縫的語系切換體驗。
- Sprint 4 執行品質監控： 將最終交付物轉化為「防範未來風險」的數位資產。完成 GA4 數據串接與 GSC 網域驗證，並實作動態 Sitemap 自動化生成系統，打造出靈活具備韌性的品牌樞紐。
技術決策：品質與體驗的攻防戰
身為專案管理者，每一項技術選擇都是「效能」與「擴充性」之間的權衡，以下列舉三項重大決策：
- 路徑式語系策略 (i18n)：我選擇使用 Path-based 路由 (
/[lang]) 而非簡單的狀態切換。雖然這增加了 Middleware 的邏輯複雜度，但確保了中英文版具備獨立的 SEO 權重。 - SEO 去中心化管理：我不把 SEO 寫死在代碼中，而是透過 Sanity CMS 建立動態
generateMetadata函式。實現「營運靈活性」：我可以根據最新的趨勢隨時更新關鍵字，而無需修改任何程式碼。 - 數據驅動的監控管制：配置
sitemap.ts與 Google Search Console 不只是為了技術達標，更是為了建立回饋機制。透過 GA4 即時數據，我能精準分析訪客對網站中哪一部分內容更感興趣。
實戰紀錄：Vibe Coding 實況
本專案重新定義了我對開發的理解。透過 「意圖驅動」，我指導 AI 處理大量繁瑣的代碼，將自己的心力集中在系統架構與邏輯流向。
無論是處理 Middleware 的路由干擾，還是自動化 XML 生成，開發時我的角色更像 「指揮家」，而非單純的工程師。
最終成果：靈活的網站架構
最終交付的不是一個靜態網頁，而是一個具備高度彈性的網站架構：
- 靈活調適：串接Sanity CMS，隨時從後台更新內容。
- Lighthouse 效能檢測：全項目 90+（效能、SEO、無障礙）。
- 國際化實踐：一鍵雙語切換。
- 自動化監控：具備 GA4 與 GSC 自動索引的SEO監控系統。
我透過敏捷實踐，建構了一個可以隨時應對市場變化的個人品牌網站。