WORKS
作品集
13 件自主開發的前端作品，集中在 2026 年 7 月完成。多數是 Three.js 3D 產品頁，用程序化幾何而非外部模型；少數是框架實作。
這裡每一件都是自主練習，不是接案或職務成果。品牌多為虛構；少數以真實對象為題的，皆標明非官方。真實業界專案列在 履歷。原始碼目前皆未公開；每件作品皆已部署，點進內頁可開啟實際網站。
自主練習 末日戰術 RPG 概念宣傳站
WebGL 粒子核心 × 滾動鏡頭敘事
作為最後的調律者，喚醒以殘存晶片為心的矽魂。滾動驅動的 WebGL 粒子晶片核心，加一整套自成 canon 的世界觀。
- Three.js 0.160
- WebGL 粒子著色器
- ES Module + importmap
- Scroll-driven 動效
自主練習 Meridian Roasters 咖啡莊園飛行
滾動驅動的影片鏡頭飛行引擎
從山坡莊園一路飛到吧檯的一杯咖啡。滾動不再翻頁，而是推著鏡頭穿越五段實拍場景 — 零依賴的 vanilla JS 影片 scrub 引擎。
- Vanilla JS（零依賴）
- Video scrub
- IntersectionObserver
- rVFC 逐幀同步
自主練習 岫 XIU
香氣擴香石產品頁
用程序化幾何長出一顆礦物擴香石，滾動驅動鏡頭穿過三種材質切換與粒子煙霧。
- Three.js r128
- UnrealBloomPass
- EffectComposer
- Vanilla JS
自主練習 AirPods Pro 概念頁
聲音，從此有了深度
零 3D 檔案，用幾何基元拼出一支會隨滾動旋轉的耳機，重現旗艦產品頁的鏡頭語言。
非官方概念作品，與 Apple Inc. 無關。所有內容為個人技術練習。
- Three.js 0.160 (ESM)
- GSAP
- ScrollTrigger
- Lenis
自主練習 Fable 5 — Twenty Sites
二十個產品展示站的結構實驗
二十個自成一格的產品站，探索五種結構原型與多種呈現模式的組合，一次做完。
- GSAP
- Lenis
- Three.js
- Vanilla JS
自主練習 士林夜市五大名物
程序化 3D 滾動導覽
五種夜市小吃，五個獨立的 Three.js 場景，全部用幾何體長出來，沒有一張貼圖。
- Three.js (ESM)
- RoomEnvironment
- Selective Bloom
- Clearcoat
自主練習 AERO
設計師單椅品牌頁
雙軸材質配置器：框架與布料兩個維度即時交叉切換，榫卯結構在 3D 裡拆給你看。
- Three.js r128
- Vanilla JS
自主練習 IGNIS MK-I
旗艦電吉他單頁
單一 HTML 檔，WebGL 立體背景加互動熱點，把一把手工電吉他的規格說成故事。
- Three.js r128
- Vanilla JS
- OpenSpec
自主練習 拾霧珈琲 SHIWU
單品咖啡豆產品頁
衣索比亞耶加雪菲 G1。把海拔、日曬工序、烘焙度這些數字，做成滾動時展開的產地敘事。
- Three.js r128
- Vanilla JS
自主練習 Noir Ambre
精品香水 scroll storytelling
安靜奢華路線的香調敘事頁，滾動即是嗅覺的時間軸：前調、中調、後調。
- Three.js r128
- GSAP
- ScrollTrigger
- Lenis
自主練習 CHRONOS
高級製錶概念頁
Haute Horlogerie 的機芯敘事，用 Three.js ESM 把看不見的複雜功能攤在檯面上。
- Three.js 0.160 (ESM)
- Vanilla JS
自主練習 客家電視台首頁重製
公共頻道影音平台概念設計
把一個 Figma Make 匯出的原型，重寫成有主張的編輯風影音首頁。這批作品裡唯一的框架實作。
非官方概念重製，與客家電視台無關。內容與圖片皆為示意，僅供設計與前端技術展示。
- React 18
- Vite 6
- Tailwind v4
- TypeScript
自主練習 NICE KICKS — VOLT RUNNER
限量球鞋發售頁
純屬虛構的球鞋品牌限量發售頁。程序化 3D 鞋體、配色即時切換、候補名單流程，附 Playwright E2E。
- Three.js 0.160 (ESM)
- Vanilla JS
- Playwright