作品精選
作品精選
作品精選
客戶案件進度追蹤系統 —— 內部工具
客戶案件進度追蹤系統 —— 內部工具
客戶案件進度追蹤系統 —— 內部工具
問題:接案初期發現「網站做到哪了」是最高頻的客戶問題，每次手動回覆既耗時又容易漏。
解法:自建 PIN 碼驗證的進度查看系統。收訂金後給客戶四位數 PIN，對應六個里程碑的時間軸——製作框架、設計製作、等待回饋、修改調整、等待尾款、完成上線——每個階段對應不同 CSS 動畫狀態。我透過後台即時更新進度，客戶端不需要登入任何帳號。
技術:Vibe coding 快速實作，Netlify 部署，Supabase 管理案件資料與 PIN 驗證。
問題:接案初期發現「網站做到哪了」是最高頻的客戶問題，每次手動回覆既耗時又容易漏。
解法:自建 PIN 碼驗證的進度查看系統。收訂金後給客戶四位數 PIN，對應六個里程碑的時間軸——製作框架、設計製作、等待回饋、修改調整、等待尾款、完成上線——每個階段對應不同 CSS 動畫狀態。我透過後台即時更新進度，客戶端不需要登入任何帳號。
技術:Vibe coding 快速實作，Netlify 部署，Supabase 管理案件資料與 PIN 驗證。
問題:接案初期發現「網站做到哪了」是最高頻的客戶問題，每次手動回覆既耗時又容易漏。
解法:自建 PIN 碼驗證的進度查看系統。收訂金後給客戶四位數 PIN，對應六個里程碑的時間軸——製作框架、設計製作、等待回饋、修改調整、等待尾款、完成上線——每個階段對應不同 CSS 動畫狀態。我透過後台即時更新進度，客戶端不需要登入任何帳號。
技術:Vibe coding 快速實作，Netlify 部署，Supabase 管理案件資料與 PIN 驗證。
Catalyst · Sound of Taipei 音樂人專輯頁面 (手機）
Catalyst · Sound of Taipei 音樂人專輯頁面 (手機）
Catalyst · Sound of Taipei 音樂人專輯頁面 (手機）
背景 為 Catalyst 活動製作的 QR code 掃入頁面，展示音樂人陳敬軒的專輯《時差，永不晚安》，聽眾掃碼後直接在手機上瀏覽曲目與留言。
問題 客戶希望滑到特定區域自動播放背景音樂，但 iOS Safari 禁止未經手勢觸發的音頻播放。同時希望聽眾能在頁面留下聆聽感受，需要一個即時留言的機制。
解法 首頁設計點擊進入的動作，tap 瞬間執行 audio.play()（音量為 0）保留 gesture call stack，之後 IntersectionObserver 只控制音量淡入，完整繞過 iOS 限制。留言板串接 Supabase，不設刪除功能，讓每則留言成為永久紀錄。
技術 Framer · Supabase · ffmpeg
背景 為 Catalyst 活動製作的 QR code 掃入頁面，展示音樂人陳敬軒的專輯《時差，永不晚安》，聽眾掃碼後直接在手機上瀏覽曲目與留言。
問題 客戶希望滑到特定區域自動播放背景音樂，但 iOS Safari 禁止未經手勢觸發的音頻播放。同時希望聽眾能在頁面留下聆聽感受，需要一個即時留言的機制。
解法 首頁設計點擊進入的動作，tap 瞬間執行 audio.play()（音量為 0）保留 gesture call stack，之後 IntersectionObserver 只控制音量淡入，完整繞過 iOS 限制。留言板串接 Supabase，不設刪除功能，讓每則留言成為永久紀錄。
技術 Framer · Supabase · ffmpeg
背景 為 Catalyst 活動製作的 QR code 掃入頁面，展示音樂人陳敬軒的專輯《時差，永不晚安》，聽眾掃碼後直接在手機上瀏覽曲目與留言。
問題 客戶希望滑到特定區域自動播放背景音樂，但 iOS Safari 禁止未經手勢觸發的音頻播放。同時希望聽眾能在頁面留下聆聽感受，需要一個即時留言的機制。
解法 首頁設計點擊進入的動作，tap 瞬間執行 audio.play()（音量為 0）保留 gesture call stack，之後 IntersectionObserver 只控制音量淡入，完整繞過 iOS 限制。留言板串接 Supabase，不設刪除功能，讓每則留言成為永久紀錄。
技術 Framer · Supabase · ffmpeg
Aurora Botanicals 品牌概念設計 · Spec Work
Aurora Botanicals 品牌概念設計 · Spec Work
Aurora Botanicals 品牌概念設計 · Spec Work
背景 以高端植萃保養品為假想客戶，練習從品牌定位到視覺落地的完整設計流程。參考 Aesop、Tatcha 等品牌的設計語言，建立一套有完整性的視覺系統。
設計重點 以自然、克制的色調（米白 × 深橄欖綠）搭配中英雙語排版，呈現「純淨」的品牌個性。產品卡片、hero 區塊、品牌 about 區塊風格統一，模擬完整電商網站的視覺體驗。
技術 Framer
背景 以高端植萃保養品為假想客戶，練習從品牌定位到視覺落地的完整設計流程。參考 Aesop、Tatcha 等品牌的設計語言，建立一套有完整性的視覺系統。
設計重點 以自然、克制的色調（米白 × 深橄欖綠）搭配中英雙語排版，呈現「純淨」的品牌個性。產品卡片、hero 區塊、品牌 about 區塊風格統一，模擬完整電商網站的視覺體驗。
技術 Framer
背景 以高端植萃保養品為假想客戶，練習從品牌定位到視覺落地的完整設計流程。參考 Aesop、Tatcha 等品牌的設計語言，建立一套有完整性的視覺系統。
設計重點 以自然、克制的色調（米白 × 深橄欖綠）搭配中英雙語排版，呈現「純淨」的品牌個性。產品卡片、hero 區塊、品牌 about 區塊風格統一，模擬完整電商網站的視覺體驗。
技術 Framer
Angelo Hu · 英文作品集網站 個人品牌網站
Angelo Hu · 英文作品集網站 個人品牌網站
Angelo Hu · 英文作品集網站 個人品牌網站
背景 這是我第一個正式上線的個人網站，也是我踏入 Framer 接案的起點。當時的目標很明確：以極簡現代的視覺風格，向國際客戶介紹自己，因此選擇全英文呈現，並刻意保持版面乾淨、不過度裝飾。
設計重點 極簡不代表沒有思考。導航、字體層級、CTA 位置，每個細節都以「讓訪客最快理解我能做什麼」為標準。浮動幾何形狀的背景設計，是在克制與個性之間找到的平衡點。
技術 Framer
背景 這是我第一個正式上線的個人網站，也是我踏入 Framer 接案的起點。當時的目標很明確：以極簡現代的視覺風格，向國際客戶介紹自己，因此選擇全英文呈現，並刻意保持版面乾淨、不過度裝飾。
設計重點 極簡不代表沒有思考。導航、字體層級、CTA 位置，每個細節都以「讓訪客最快理解我能做什麼」為標準。浮動幾何形狀的背景設計，是在克制與個性之間找到的平衡點。
技術 Framer
背景 這是我第一個正式上線的個人網站，也是我踏入 Framer 接案的起點。當時的目標很明確：以極簡現代的視覺風格，向國際客戶介紹自己，因此選擇全英文呈現，並刻意保持版面乾淨、不過度裝飾。
設計重點 極簡不代表沒有思考。導航、字體層級、CTA 位置，每個細節都以「讓訪客最快理解我能做什麼」為標準。浮動幾何形狀的背景設計，是在克制與個性之間找到的平衡點。
技術 Framer
© 2026 Angelo Hu. All rights reserved.
© 2026 Angelo Hu. All rights reserved.
© 2026 Angelo Hu. All rights reserved.