← BACK TO HOME

SHIPPED / FRONTEND

OpenHCI 2026 官方網站

(AI)dentity — 設計跟程式講同一個故事

OpenHCI 2026 官方網站 專案畫面

設計團隊用故障與像素講「(AI)dentity」的故事，我的工作是讓程式碼把這個故事說完。依 Figma 從零開發、GitHub Organization 多人 PR 協作，已上線於 2026.openhci.com——好的活動官網不是設計稿的影印機。

ROLE

前端工程：UI 元件開發、設計系統維護、主導互動動畫

STACK

Next.js 15 · React 19 · Tailwind v4 · Framer Motion

已上線 · 2026.openhci.com · 多人 PR 協作

HIGHLIGHTS

  1. 把 use-scramble 二次封裝成 ScrollScramble／LoopingShockScramble 設計系統元件，IntersectionObserver 進場才觸發、once 播完即 unobserve
  2. 像素風 GlobalLoader 雙條件 gating：最短展示 2.5s＋document.fonts.ready，避免 FOUT 也保住儀式感
  3. Next.js 15 SSG（output: export）→ GitHub Pages＋Cloudflare DNS，零伺服器維運

LIVE SITE ↗