Projects

使用最新 Next.js 16 與 Appwrite BaaS 服務打造的全功能雲端硬碟。具備檔案上傳、分類管理、OTP 登入驗證與全局搜尋功能。使用 Shadcn UI 與 Tailwind CSS 建構現代化儀表板。

串接 TMDB API 與 Appwrite 資料庫的電影資訊網站。特色包含即時搜尋優化 (Debounce)、動態路由導航以及「熱門搜尋趨勢」統計功能。

完整的線上課程系統。後端使用 Express 與 MongoDB 設計複雜的資料關聯 (Schema Relations)，實作 JWT 身份驗證與角色權限控制 (RBAC)，區分講師與學生權限。

串接 Pexels 官方 API 的高畫質圖片搜尋引擎。練習了 React Hooks (useState, useEffect) 的狀態管理與 Async/Await 非同步資料串接技巧。

支援多人協作的便利貼應用。使用 Passport.js 實作 Google 第三方登入，並透過 Mongoose Population 處理使用者與群組間的資料關聯。

將抽象的演算法具象化。使用 HTML5 Canvas API 與 JavaScript Class 完整實作 ACO 演算法，即時模擬螞蟻尋找最佳路徑的過程，並提供參數控制面板。

經典的打磚塊遊戲復刻。深入練習了 JavaScript 的遊戲迴圈 (Game Loop)、座標計算與事件監聽機制。

使用原生 JavaScript 實作的經典遊戲。包含碰撞偵測邏輯，並使用 LocalStorage 紀錄玩家最高分。

大學生成績計算工具。實作了動態表單增刪功能，並內建 Merge Sort 演算法提供成績排序功能。開場動畫使用 GSAP 製作。

大三時期的作品。練習了 SCSS 變數管理、打字機特效與漢堡選單的實作。背景氣泡動畫使用純 CSS Keyframes 完成。

練習 CSS 佈局與 RWD 的作品。使用 position: sticky 實作導覽列，並透過 JavaScript SetInterval 實現背景輪播。

早期的靜態網頁練習作品。使用 Google Charts 繪製數據圖表，並引入 canvas-nest.js 製作背景特效。