{"id":27096318,"url":"https://github.com/ncchen99/about-me","last_synced_at":"2026-04-11T22:03:32.658Z","repository":{"id":282479932,"uuid":"948714959","full_name":"ncchen99/About-Me","owner":"ncchen99","description":"🥰 念誠的個人網頁","archived":false,"fork":false,"pushed_at":"2025-03-14T22:16:24.000Z","size":1,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-14T22:28:44.141Z","etag":null,"topics":["love","react-three","vite"],"latest_commit_sha":null,"homepage":"https://ncchen.pages.dev","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ncchen99.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-03-14T20:34:10.000Z","updated_at":"2025-03-14T22:16:28.000Z","dependencies_parsed_at":"2025-03-14T22:39:00.008Z","dependency_job_id":null,"html_url":"https://github.com/ncchen99/About-Me","commit_stats":null,"previous_names":["ncchen99/about-me"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ncchen99%2FAbout-Me","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ncchen99%2FAbout-Me/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ncchen99%2FAbout-Me/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ncchen99%2FAbout-Me/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ncchen99","download_url":"https://codeload.github.com/ncchen99/About-Me/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247463803,"owners_count":20942940,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["love","react-three","vite"],"created_at":"2025-04-06T09:38:53.819Z","updated_at":"2026-04-11T22:03:27.617Z","avatar_url":"https://github.com/ncchen99.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🔥 念誠ㄉ個人網頁\n\n這是一個使用React、Three.js和Tailwind CSS構建的3D場景展示網頁，主要展示一個苔蘚木頭模型，並具有豐富的互動效果和音效。\n\n## 功能\n\n- 使用Three.js渲染高質量的3D場景\n- 使用React作為前端框架\n- 使用Tailwind CSS進行樣式設計\n- 支持模型紋理和光照\n- 互動式場景控制（旋轉、縮放等）\n- 螢火蟲粒子系統\n- 背景音樂和互動音效\n- 響應式設計，支持移動設備\n- 視差滾動首頁\n\n## 特色\n\n- 首頁使用視差滾動效果，滑鼠移動時背景圖層會產生互動效果\n- 3D 場景頁面展示苔蘚木頭模型，具有真實的材質和光照效果\n- 互動式螢火蟲粒子系統，點擊時會產生特殊效果\n- 使用中文陳雨露演字體（ChenYuluoyan）\n- 字體子集化處理，減少載入資源大小\n- 優化的移動設備體驗\n- 漸進式音頻加載和播放\n\n## 目錄結構\n\n```\n├── public/                  # 靜態文件\n│   ├── images/              # 背景圖片（天空、山脈、地面）\n│   ├── audio/               # 音頻文件\n│   └── font/                # 字體文件\n│       └── subset/          # 子集化後的字體\n├── assets/                  # 3D模型和紋理\n│   └── mossy-log/           # 苔蘚木頭模型資源\n│       ├── source/          # 模型文件\n│       └── textures/        # 紋理文件\n├── src/                     # 源代碼\n│   ├── components/          # React組件\n│   │   ├── MossyLogScene.js # 3D場景渲染組件\n│   │   ├── AudioManager.js  # 音頻管理組件\n│   │   ├── ParallaxHome.js  # 視差滾動首頁組件\n│   │   └── Loader.js        # 加載動畫組件\n│   ├── styles/              # CSS樣式\n│   ├── App.js               # 主應用組件\n│   └── index.js             # 入口文件\n├── tailwind.config.js       # Tailwind配置\n├── postcss.config.js        # PostCSS配置\n└── package.json             # 依賴項配置\n```\n\n## 安裝\n\n1. 確保已安裝Node.js (v14或更高版本)\n2. 克隆本倉庫\n3. 安裝依賴：\n\n```bash\nnpm install\n```\n\n4. 生成字體子集（可選，但建議執行以減少字體檔案大小）：\n\n```bash\nnpm run subset-font\n```\n\n## 運行\n\n```bash\nnpm start\n```\n\n應用將在[http://localhost:3000](http://localhost:3000)啟動\n\n## 控制\n\n### 桌面版\n- 左鍵拖動：旋轉場景\n- 鼠標滾輪：縮放場景\n- 右鍵拖動：平移場景\n- 點擊木頭/花朵/苔蘚：觸發音效\n- 點擊發光粒子：互動效果\n\n### 移動版\n- 單指拖動：旋轉場景\n- 雙指縮放：縮放場景\n- 點擊木頭/花朵/苔蘚：觸發音效\n- 點擊發光粒子：互動效果\n\n## 技術細節\n\n- React 18\n- Three.js\n- React Three Fiber (Three.js的React渲染器)\n- React Three Drei (Three.js的實用React組件)\n- Tailwind CSS\n- Web Audio API\n\n### 視差滾動\n\n首頁的視差效果是通過追蹤滑鼠移動位置，根據不同圖層的深度設定不同的移動速度來實現的。圖層從後到前為：\n\n- 天空 (sky.png) - 最遠，移動最少\n- 山脈 (mount.png) - 中間層，移動適中\n- 地面 (ground.png) - 最近，移動最多\n\n### 音頻系統\n\n- 背景音樂在用戶首次互動後開始播放\n- 漸進式音量控制，避免突然的聲音\n- 支持靜音/取消靜音功能\n- 互動音效（點擊木頭、花朵等）\n\n### 螢火蟲粒子系統\n\n- 動態生成的粒子效果\n- 真實的物理運動模擬\n- 點擊互動效果\n- 優化的性能表現\n\n### 字體子集化\n\n為了優化網頁載入速度，我們使用 Fontmin 處理中文字體，僅保留網頁中使用到的字符。這個過程會：\n\n1. 掃描所有 JavaScript 和 HTML 文件中的中文字符\n2. 生成僅包含這些字符的字體子集\n3. 轉換為 WOFF2 格式，進一步減少檔案大小\n\n## 注意事項\n\n- 字體子集化需要有 Node.js 環境\n- 開發過程中添加新的中文文字後，需要重新運行字體子集化腳本\n- 音頻播放需要用戶互動（瀏覽器政策）\n- 建議使用現代瀏覽器以獲得最佳體驗 ","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fncchen99%2Fabout-me","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fncchen99%2Fabout-me","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fncchen99%2Fabout-me/lists"}