Playground / 2026
Personal Portfolio Website
整合靜態前端展示與本機編輯工具的個人數位作品集。使用 GSAP 處理動效、Lenis 處理捲動，並以本機編輯工具維護網站內容。
Contribution
規劃內容結構與本機管理流程，並將規格拆解為工程任務，透過 ChatGPT 與 Codex 協作進行程式碼撰寫、除錯、測試與版本維護。
01/ PROCESS OVERVIEW
將個人網站定位為持續迭代的數位產品。
從內容架構、UI/UX、Motion 至 AI 協作開發，依序完成規格定義、介面設計、功能實作與上線驗證，建立模組化且便於長期維護的工作流程。
網站規劃與實作流程
02/ TOOL & FLOW
建立本機專用內容編輯器，作為頁面版型、內容配置與網站全域設定的操作介面。
以 Task Log 記錄需求、修改範圍與驗證結果，供版本調整時查閱。
本機編輯工具與開發文件管理
03/ CONTENT DESIGN
建立網站頁面與專案敘事方式
針對不同類型的專案內容建立模組化排版規範，梳理資訊層級與閱讀動線，依案例背景、工作內容與展示素材安排資訊層級及閱讀順序。
04/ CONTENT EDITOR
建立本機內容編輯器以維護 Markdown 文章與 JSON 專案資料。
整合 Motion 面板，獨立調校 Entrance、Scroll 與轉場動效參數，透過 Motion 面板調整進場、捲動與轉場參數，並在前端預覽。
內容管理與動效調校
05/ EDGE CASES & DELIVERY
補足錯誤頁與例外情境
規劃 404 錯誤頁與內容缺失等邊界情境，維持路徑異常時的介面視覺語言與導覽引導。
依桌面與行動裝置尺寸調整版面，進行靜態建置與發布前檢查。