建置 Netflix 的 UI 設計與付費流程，透過 firebase 與 Stripe.js，完成信箱登入、簡易會員資料庫及信用卡付費訂閱的流程，整體採 Next.js + Typescript 搭建，並使用了 Tailwind CSS 與 Material UI Component 完成介面設計。

Live Demo Account: [email protected] / Password: 123456789

 

經歷過隕石亂流的飛行家，阿德瓦。某一天，他持續著日常的飛行練習，突然！他發現了一座，看起來很好玩、很有趣的島嶼，似乎藏著很多神秘的寶物，於是他決定下降停留於這座島嶼上，一⋯⋯探⋯⋯究⋯⋯竟⋯⋯

公司內部春酒活動開發，是一款百人連線解謎遊戲，採用 Nuxt.js 與 Canvas 達成前端畫面顯示，後端採用 Node.js 搭配 Socket.io 達成多人連線功能，資料庫採用 MongoDB 實踐分數紀錄

崇尚自由的飛行探險家「阿德瓦」，執行飛行訓練是日常的課表，同時也是訓練飛行技巧的好機會，這次卻不小心偏離的航道，亂入有隕石亂飛的領域，必須獲得電池來提升飛機的能量，來保持飛行的動力，現在就放下手邊的事情，來幫助「阿德瓦」飛回原本的航道吧！

此遊戲採用 Three.js 製作，並使用 Node.js + MongoDB 做排行榜的紀錄，辦了一場公司內部的飛行競賽 ✈️

今夏怎樣最好玩？就來金虎聖水樂園玩！⁣從刺激龍舟船，到浪漫遊園煙火⁣，快快入園！讓你這夏真的好好玩⁣！

詹家龍導演耗時 5 年、花費數百萬，用鏡頭紀錄台灣最常見、卻也最不凡的紫色身影──紫斑蝶，為台灣留下珍貴的生態側寫。紀錄片現正集資中，需要有你的支持，才能順利完成後製、發行，讓守護這塊土地的心意，紮根在更多台灣人心中。

台北市政府文化局於 2022 年推出的問答式遊戲，網站採用 Nuxt.js 建置，搭配 Tailwind CSS 做畫面編排，後續為了修正題庫的方便，搭配 Google Excel + Apps Script 做簡易小型的資料庫。

為慶祝刀劍神域 10 周年與劇場版上映所建立的網站，使用 Nuxt.js 建置，UI 方面與設計師採用 Figma 協作，並搭配 Three.js + 滑鼠事件，做出可互動的背景粒子效果。且製作「信仰值大考驗」的問答型遊戲，來測驗你是否真的夠瞭解刀劍神域。

要吃得營養，不需捨棄用餐儀式感；主食、醬料、還有湯品，一桌擺滿，營養也滿滿！那就是桂冠健力餐，此網站採用 Nuxt.js + GSAP 來製作，並且搭配 Windi CSS 做畫面的編排，且搭配 Nuxt.js 的 Store 來做資料儲存的應用。

魏蔓和豆漿爸來到「烹然心動的櫻花廚房」的宣傳網站，此網站有較為特殊的需求，為「限定橫式」觀賞，採用 Webpack + GSAP + Swiper 完成網站需求，且將嵌入的 Youtube progress bar 樣式做客製化圖示。

此網站需使用者執行「創造儀式」，隨機產生喜歡的字詞，再透過臉書分享至社群，使用 Webpack + GSAP 來製作，因部署的過程較為繁瑣，也將隨機產生字詞的資料庫，透過 Google Excel + Google Apps Script 來達成。

希望能集結眾人之力，補足漸漸不敷使用的空間、設備、師資。採用 Webpack 打包並搭配 GSAP 做動畫效果的的集資網站。設計師希望能單純，不用過多特效、動態來呈現網站，因此只在局部的元素上做效果，其餘保持原本的清淨，達成可讀性高，又符合該集資網站主題的調性。

將親手淨灘後的海廢，變成陪伴大家日常的藍白拖，全球第一雙在地全循環海廢拖鞋的集資網站，使用 Webpack + GSAP 建置，並與設計師採用 Zeplin 協作。

華語第一部嘻哈傳記電影，為一個活在 23 歲卻在 25 歲成名的饒舌先鋒所做的集資網站。在首屏的部分使用了 Parallax + 滑鼠位移來達到互動效果，並使用了 GSAP 製作大部分動態，在網頁中使用了 PIXI.js 製作了開頭 Dissolve 與背景 Noise 的效果。

一頁式集資網站，採用 Webpack + GSAP 建置，UI 部分與設計師採用 Sketch + Zeplin 協作。
去網站

一頁式課程宣傳網站，使用 Webpack + GSAP 所建置完成，與設計師使用 Zeplin 線上協作，並與後端工程師串接課程意願的表單驗證。

一頁式課程宣傳網站，使用 Webpack + GSAP 所建置完成，與設計師使用 Zeplin 線上協作，並與後端工程師串接課程意願的表單驗證。

一頁式課程宣傳網站，使用 Webpack + GSAP 所建置完成，與設計師使用 Zeplin 線上協作，並與後端工程師串接課程意願的表單驗證。

此專案是協助 BOSCH 電子鎖在台灣代理的官方網站，專案中與一位 UI/UX 設計師採用 Figma 線上協作，使用 Nuxt.js + CSS + GSAP 完成許多互動元素。

Quickly Check 是一款在相同中找不同的休閒遊戲，玩家需在關卡中找出與眾不同的角度圖形，並隨著關卡難度提升、時間的流逝，持續維持的專注力，這艱難的任務，你可以達成嗎 ?

Quick check is a casual game that need to find different symbol in the game, then as the difficulty of the level increases, the time passes, and the inability to concentrate. Can you achieve this difficult task?

此電商網站使用 Vue.js 框架打造，並搭配 Vue router 及 Vuex 做路由與資料的管理，有完整的「商品展示」、「購物車功能」、「下單流程」、「結帳資訊」功能，並且在後台使用 Vue Bootstrap 來實現 UI 效果

「互動天氣網」使用了 SVG 動畫建構的網站，讓使用者參訪時，看天氣也是個心情愉快的行為，用些較為生動的效果與使用者互動，提升了獲得好心情的機會，也透過部屬在 Heroku 的 Node.js 伺服器，獲得中央氣象局給的一周即時資訊，讓你出門不用在忘記帶傘，而煩惱是否要再 去 7-11 買一把雨傘了。

這是一款結合虛擬實境的解謎遊戲，在遊戲中玩家扮演因收到精神打擊而昏迷，進入內心世界的女主角瓦奧菈。瓦奧菈進入內心世界後擁有能把精神附著在物品上的能力，透過物體上眼睛看到的角度來觀察事物。受打擊的瓦奧拉失去了記憶，在內心世界中摸索，找回屬於自己的記憶。

Interior Design Rendering 使用 3D mxa + Vray 製作，其中有許些作品是私底下練習增進自己的作品，另一部分是與室內設計公司協同製作 3D 渲染圖。