510208.github.io

我的個人網站，展示我的專案作品集、技能和友好連結。

🌟 功能特色

• 響應式設計 - 完美適配桌面、平板和手機
• 暗色模式支援 - 自動適應系統主題偏好
• 動態專案展示 - 自動從 GitHub API 獲取專案資訊
• 流暢動畫效果 - 使用 Lenis 和 TypeIt 提供優雅的使用者體驗
• 粒子背景特效 - 使用 @tsparticles 創造視覺吸引力
• SEO 優化 - 完整的 meta 標籤和 sitemap

🚀 快速開始

# 克隆專案
git clone https://github.com/510208/510208.github.io.git
cd 510208.github.io

# 安裝依賴
npm install

# 設置環境變數
cp .env.example .env
# 編輯 .env 文件，填入您的 GitHub Token

# 啟動開發服務器
npm run dev

🛠️ 技術棧

• React 19.1.0 + TypeScript - 現代化前端開發
• Vite 7.0.5 - 快速構建工具
• Tailwind CSS 4.1.11 - 實用優先的 CSS 框架
• Radix UI - 無樣式、可訪問的 UI 組件
• Three.js - 3D 圖形渲染
• @tsparticles - 粒子系統

📝 可用腳本

npm run dev          # 開發模式
npm run build        # 構建專案
npm run preview      # 預覽構建結果
npm run lint         # 代碼檢查

📁 文檔

詳細的文檔和設置指南請查看：

• 完整文檔 - 詳細的專案說明
• 設置指南 - GitHub Token 設置和環境配置

🎨 專案結構

510208.github.io/
├── docs/                      # 文檔資料夾
├── public/                    # 靜態資源
├── scripts/                   # 構建腳本
├── src/                       # 源代碼
│   ├── components/            # React 組件
│   ├── pages/                 # 頁面組件
│   └── ...
├── .env.example              # 環境變數範本
└── package.json              # 專案配置

🚀 部署

專案已配置為自動部署到 GitHub Pages。推送到 main 分支即可自動構建和部署。

📄 授權條款

本專案採用 MIT 授權條款。

📧 聯絡方式

• GitHub: @510208
• 網站: https://510208.github.io

---

用 ❤️ 與 React 製作

🫡 鳴謝

我重寫自己個人網站的願望可以成真，都歸功於偉大的開放原始碼社群。以下是這個網站所使用到的框架與設計參考，謹以此文件代表我最誠摯的敬意與謝意。

框架與 Library

非常感謝這些開發者願意無償分享他們的辛勤成果，讓我們能夠在此基礎上進行創新和改進。

• Node.js
• TailwindCSS
• Vite
• Yarn
• React Router
• FontSource
• Framer Motion
• GraphQL
• Lenis
• LDRS
• tsparticles
• Lucide Icons
• Octokit
• skin3d & three.js
• shadcn/ui
• ESLint
• Visual Studio Code
• Prettier
• GitHub Actions

設計靈感

欣賞他人的成果，才能造就我自己的版本

• Nelson Lai
• Zhenyuan
• SamHacker Blog
• 木白
• Figma 上的設計