01・社群官網・3D 捲動敘事
匹克球社群官網
一支程式即時繪製的 3D 球拍串起整頁：往下捲，球拍拆成五層結構，再帶到活動與服務。
- Three.js 即時 3D 球拍與球
- 捲動驅動的分幕敘事
- 手機版重新編排每一幕
自有社群網站
網頁設計與開發・一人工作室
幫小店與個人品牌，做會動、手機也好用的網站。
AI 研究所背景的網頁設計與開發者。做過社群官網、計畫介紹網站與品牌提案站，從需求、設計到上線一手包辦，每一版都附電腦與手機的示範影片。
6
做過的網站作品
社群官網、計畫介紹網站、提案站…
形象網站作品集活動報名頁舊站改版手機優先動態設計上線交接
網站作品
做過的網站，直接在手機上看。
往下捲，每個作品會停進手機，自己慢慢捲過它的手機版。品牌名稱與人物照片都先遮掉了。
這些是自有、提案或內部專案，不是付費客戶案例。
第 1 / 6 個
社群官網・3D 捲動敘事
匹克球社群官網
一支程式即時繪製的 3D 球拍串起整頁：往下捲，球拍拆成五層結構，再帶到活動與服務。
左右滑也可以換作品
社群官網・3D 捲動敘事
匹克球社群官網
一支程式即時繪製的 3D 球拍串起整頁：往下捲，球拍拆成五層結構，再帶到活動與服務。
計畫介紹・2.5D 插畫首屏
營隊介紹網站
首屏是 Blender 算圖的分層場景，往下捲時天空、城市、前景用不同速度移動，再帶出整段行程。
品牌社群提案・一頁式
新創社群提案站
把一個校友新創社群的起點、交流方式與服務規劃，整理成一頁可以拿去討論的提案。
敘事型回顧頁
課程回顧子站
把一門七週海外課程的行程與成果發表，整理成可以一路往下讀的回顧頁。
計畫官網・深色細線插畫
地方共創計畫官網
深色版面加上會回應游標的細線圖形，把兩條培育路線分層說清楚；籌備中的狀態也寫得很清楚。
品牌視覺・動態標誌
社群品牌 Logo 動態
把標誌做成 3×3 的方塊，翻轉、組合後以等角視角旋轉；可以用在影片開頭和社群頭像。
作品細節
每個作品做了什麼。畫面都是重新擷取的，品牌字已模糊、人物照片已換成占位圖。
02・計畫介紹・2.5D 插畫首屏
營隊介紹網站
首屏是 Blender 算圖的分層場景，往下捲時天空、城市、前景用不同速度移動，再帶出整段行程。
- Blender 程式建模的原創場景
- 六層視差與場景切換
- 逐日行程與家長常見問題
私有審閱中的計畫網站（只放沒有人物的場景與版面）
03・品牌社群提案・一頁式
新創社群提案站
把一個校友新創社群的起點、交流方式與服務規劃，整理成一頁可以拿去討論的提案。
- 大字標題與照片敘事
- 六種交流與服務規劃
- 段落導覽與回頂端
提案網站（不代表已成交或被正式採用；照片已遮）
04・敘事型回顧頁
課程回顧子站
把一門七週海外課程的行程與成果發表，整理成可以一路往下讀的回顧頁。
- 疊放照片卡片的首屏
- 七週行程時間軸
- 成果發表重點整理
提案網站的子頁（只放沒有人物與姓名的段落）
05・計畫官網・深色細線插畫
地方共創計畫官網
深色版面加上會回應游標的細線圖形，把兩條培育路線分層說清楚；籌備中的狀態也寫得很清楚。
- 開源細線圖形元件（MIT 授權）
- 中英雙語段落
- 路線時間軸
籌備中計畫的官網（只放首屏與版面；團隊與姓名不放）
06・品牌視覺・動態標誌
社群品牌 Logo 動態
把標誌做成 3×3 的方塊，翻轉、組合後以等角視角旋轉；可以用在影片開頭和社群頭像。
- 3×3 方塊翻轉動畫
- 淺色與深色兩種版本
- 影片與 GIF 輸出
自有品牌視覺探索（只放抽象旋轉段）
也做 App 與互動工具，私訊可聊。
草圖 → 成品
先對齊方向，再把細節做滿。
拖動中間的把手，看同一個首頁從線框草圖變成完成的樣子。
示範烘焙
每週六早上出爐
週末限定
酸種麵包
長時間低溫發酵，外脆內軟。週三前預購，週六到店取。
預購本週原味酸種
核桃葡萄
芝麻黑糖
示範樣本：本站自繪的麵包店首頁，不是客戶案例。
點陣
一點一點，把網站做好。
滑鼠或手指移過去，點會鼓起來。
做法
四步，從私訊到上線。
- 01
聊需求
用 Threads 私訊告訴我你的店或品牌、想放的內容，還有喜歡的參考網站。
- 02
設計稿
先做首屏和手機版的設計，你確認方向之後才開始寫程式。
- 03
開發與檢查
電腦、手機多種螢幕寬度逐一檢查，每一版都附示範影片給你看。
- 04
上線與交接
網域和主機用你自己的帳號，交接之後所有內容都在你手上。
服務
可以幫你做的網站
- 01
形象／品牌網站
一頁式介紹、營業資訊、菜單或商品。
- 02
作品集網站
攝影、設計、接案者的作品展示。
- 03
活動與報名頁
活動介紹、時程，導到你的報名表。
- 04
舊站改版
手機版重新整理，加上合適的動態效果。
費用依需求報價，修改輪數會先寫清楚。
關於
AI 研究所背景的網頁設計與開發者
做過社群官網、計畫介紹網站與品牌提案站。習慣先把需求與參考拆清楚，再用可以驗證的方式交付：每一版都有電腦與手機的示範影片、自動檢查紀錄。
洽詢
Threads 私訊洽詢
在這個 Threads 帳號直接私訊就可以，附上這三件事會更快：
- 你的店或品牌在做什麼
- 想要哪一種網站（或想改哪裡）
- 喜歡的參考網站（可選）
目前只透過 Threads 私訊接洽。