專案簡介
一個現代化的個人網站，展示我的技術能力和專案作品。
技術棧
- 前端框架: Next.js 14
- UI 庫: React 18
- 樣式: Tailwind CSS
- 3D 動畫: Three.js
- 動畫庫: Framer Motion
- 部署: Vercel
主要功能
🎨 3D 動畫效果和互動設計
- 使用 Three.js 創建沉浸式的 3D 背景
- Framer Motion 提供流暢的頁面轉場動畫
- 互動式游標跟隨效果
📱 完全響應式設計
- 移動優先的設計理念
- 在所有設備上提供優秀的用戶體驗
- 自適應布局和組件
⚡ 優化的效能和 SEO
- Next.js 靜態生成提供極快載入速度
- 優化的圖片和資源載入
- 完整的 SEO meta 標籤
🌙 暗色主題設計
- 現代化的暗色主題
- 舒適的視覺體驗
- 符合當前設計趨勢
技術亮點
- 組件化架構: 使用 React 組件化思想，提高代碼復用性
- TypeScript 支持: 全面的類型安全保障
- 現代化工具鏈: 使用最新的前端開發工具
- 性能優化: 代碼分割、懶加載等性能優化技術
項目連結
- 線上展示: https://doeshing.site
- GitHub 倉庫: https://github.com/KoukeNeko/doeshing-site-next-js-js-version
學習收穫
通過這個項目，我深入學習了：
- Next.js 的 SSG (靜態站點生成) 技術
- Three.js 3D 圖形編程
- 現代 CSS 動畫技術
- 性能優化最佳實踐
- 用戶體驗設計原則