CODE & CANVAS
專案一覽Project Overview
個人作品集
以宇宙為核心概念的個人作品集展示網站
UI/UXVibecodingWeb
CLOTHO 劇本編輯器
一個專為劇本而生的無限畫布文字編輯器
UI/UXFigmaVibecodingAPP
FAMILIAR 桌面互動程式
輕量級桌面寵物應用，具備報時與代辦事項功能的溫馨陪伴
UI/UXVibecodingApp
環境資訊中心 兒童版網站
將重要的知識轉換成兒童與教學友善的專用網站
UI/UXFigma
兒童版網站 - 趣味防災背包遊戲
一款專為兒童製作的防災背包網頁小遊戲！
VibecodingWebgame
動態桌面待辦APP
可愛動畫結合實用功能的桌面待辦管理應用
VibecodingApp
Per ardua ad astra - 以宇宙為主題的作品展示網站
專案概念設定
📦專案簡介
Figma沉浸式宇宙主題作品集網站，透過互動式太陽系導航與精緻動畫系統，打造獨特的個人品牌以及多樣化作品的展示體驗。
UI/UX 設計理念
沉浸感與直覺性並重
- ①太陽系導航系統，五大星球代表不同作品領域
- ②雙系統響應式架構，桌面懸浮互動 vs 行動觸控完美適配
- ③流暢的 GSAP 動畫，提供不同星球與作品獨特的互動模式
- ④完善且美觀的宇宙主題設計語言，碳黑色與大地色系透出穩重溫和的氛圍
- ⑤固定式互動貓咪導航 (CatInteractive)，提供頁面專屬 FAQ 互動與聯絡功能
核心特色
創新導航系統
- ①五大星球主題頁面，涵蓋品牌設計、角色動態、敘事設計、介面實作與個人簡介
- ②互動式漢堡選單，開啟星環如同於星域中航行
Jupiter - 品牌與溝通
- ①使用動態組件，透過清晰的分格展示不同的設計主題與作品 (DesignCollection)
- ②動靜態品牌文字展示系統 (BrandTextAnimated / BrandTextStatic)
- ③節氣輪播組件，精緻展示季節主題設計 (SolarTermCarousel)
- ④賀卡拼貼藝廊，多張作品自動化動態排列 (GreetingCardCollage)
- ⑤專案設計作品集，支援無縫點擊的作品詳情浮層 (WorkDetailOverlay)
- ⑥可翻轉卡片組件，正反面資訊互動展示 (FlippableCard)
Neptune - 角色與動態
- ①互動式黑膠唱片播放器，唱片與指針三層結構，模擬真實黑膠唱片機體驗
- ②多模式動畫系統，結合移動、旋轉視角與光碟唱片設計豐富視覺層次
- ③GSAP 精密時間軸控制，確保畫面元素與狀態同步播放
- ④循環圖片畫廊 (StillGallery)，流暢的自適應滾動以展示靜態作品
Saturn - 敘事與設計
- ①完整的書本內容，模擬真實繪本的翻頁互動體驗(BookCarousel)
- ②具備操作手感的手風琴拉頁書動態互動 (DreamAccordion)
- ③特殊的劇本呈現形式，如遊戲般的對話介面進行角色對話切換 (ScriptPresenter)
Uranus - 介面與實作
- ①仿網頁視窗風格的個人專案詳情展示系統，具備完整的理念、技術介紹與使用情境模擬
- ②多媒體展示支援：混合支援靜態圖與 MP4 影片無縫播放
- ③動態縮圖列：嚴格管理的固定欄位網格與流暢的水平觸控滾動支援
- ④透過 CSS 與資料結合的高維護性技術與元件作品集展示 (ProjectGalleryOverlay)
- ⑤自適應標籤與視覺卡片：提供懸浮反饋並具備響應式排版
Venus - 關於我
- ①個人簡介 Hero 區塊，提供優雅的入站視覺印象 (AboutHero)
- ②經驗與經歷時間軸系統，清晰呈現職涯與學習路徑 (AboutExperience)
- ③捲軸視差滾動 (Parallax Scrolling) 帶來獨特觀者互動手感
- ④直覺簡易的聯絡捷徑整合，提供 Mailto 行動呼籲 (AboutContact)
核心技術架構
前端框架與渲染
- ①Next.js 16.0.8 + React 19.2.1 - App Router 架構與進階 RSC 支援
- ②Turbopack - 極速開發建置與 HMR 熱更新
- ③TypeScript 5.x - 完整強型別安全與開發體驗保障
3D 與動畫系統
- ①Three.js 0.180 + React Three Fiber 9.3 - 聲明式 3D 場景渲染
- ②@react-three/drei 10.7 - 高階 3D 輔助組件庫（Stars，Sparkles，OrbitControls 等）
- ③GSAP 3.13 - 專業級動畫時間軸管理與精準屬性控制
- ④@use-gesture/react 10.3 - 高度自訂化的觸控與手勢識別系統
樣式與設計系統
- ①Tailwind CSS v4 + @tailwindcss/postcss - 現代化設計 Token 驅動的樣式系統
- ②styled-jsx 5.1 - 動態組件級 CSS 原生封裝
- ③clsx + tailwind-merge - 智慧化動態 className 合併工具
- ④CSS Custom Properties - 流暢響應式機制，大量應用 clamp() 等數學函數
狀態管理與優化
- ①Zustand 5.0 - 輕量、高效能的模組化全域狀態管理
- ②React Hooks - useState，useRef，useEffect 精準控制響應與生命週期
- ③響應式檢測系統 - 基於能力檢測式的新型媒體查詢 (@media (hover: hover) and (pointer: fine))
圖片優化流程
- ①Sharp 0.34 - 伺服器端高效能圖片處理引擎
- ②next-optimized-images 2.6 - 自動化構建期圖片優化
- ③WebP 格式轉換與強制作廢快取 (-v2.webp) 最佳化載入速度
- ④Next.js Image 組件 - 智慧延遲載入 (Lazy Loading) 與 CLS 預防
工具鏈與開發體驗
- ①ESLint 9 + eslint-config-next - 嚴格程式碼品質與依賴檢查
- ②大規模模組化架構 - pages/shared/features 等職責與層級清晰劃分
- ③集中式資料管理 - 全惑星內容與文案設定統一抽離維護於 src/data/
響應式策略
精準裝置適配
- ①雙軌道中心點系統 - 桌面彈性寬度 vs 行動端 100% 視圖佔比控制
- ②能力檢測適配 - 根據使用者設備是否具備游標 (pointer: fine) 提供「點擊」或「懸浮」不同層級的回饋
- ③行動端網頁特化佈局 - 如 Neptune 採 20% 標題 + 20% 浮層 + 60% 唱片區的精密比例分配
- ④流暢比例縮放系統 - clamp() 函數實現無斷點的文字與間距平滑響應
- ⑤橫向提示鎖定 (Landscape Prompt) - 對手機/平板橫排狀態提供自動禁止轉向提示，維持最佳垂直瀏覽體驗
頁面架構
五大主題星球頁面
- ①太陽系首頁（/）- 3D 太陽系導航中心
- ②Jupiter 木星（/jupiter）- 品牌設計與溝通作品
- ③Neptune 海王星（/neptune）- 角色設計與動態作品
- ④Saturn 土星（/saturn）- 敘事設計與劇本創作
- ⑤Uranus 天王星（/uranus）- 介面設計與技術專案實作
- ⑥Venus 金星（/venus）- 個人簡介與聯絡資訊 (代碼實作於 about 路由模組)
組件分層架構
- ①src/components/pages/ - 限特定頁面 (Planets) 使用的核心業務組件
- ②src/components/shared/ - 跨頁面共用的基礎 UI 元件 (Buttons, Modals, Typography)
- ③src/components/features/ - 具備獨立功能邏輯的區塊 (如 CatInteractive 等)
- ④src/data/ - 集中式設定與靜態內容匯出檔
- ⑤src/utils/ - 全域輔助函數與工具庫
- ⑥src/hooks/ - 自訂 React Hooks (如 useParallax, useViewport)
