今日目標

• 調整專案結構（Core / Shared / Feature Modules）
• 小幅優化（Lazy Loading、SEO meta tag、切分元件）
• 實際部署到 GitHub Pages 或 Vercel
• 正式宣告 Angular 版完成，為下一階段 React 養成鋪路 🚀

1. 專案結構整理

一開始所有元件都堆在 app/ 下，這對學習可以，但要當成作品展示，就要更有架構：

src/app/
├─ core/               # 全域只出現一次的元件/服務（header、footer、auth.service…）
│  ├─ header/
│  ├─ footer/
│  ├─ auth.service.ts
│
├─ shared/             # 共用元件、pipe、directive
│  ├─ pipes/
│  ├─ directives/
│  └─ ui/              # 共用 UI（button, card, modal）
│
├─ features/           # 各功能區域模組
│  ├─ about/
│  ├─ skills/
│  ├─ projects/
│  └─ contact/
│
├─ services/           # domain 資料服務（projects-data, skills-data）
├─ models/             # 型別定義
└─ app-routing.module.ts

這樣結構清楚：core 只初始化一次、shared 重用、features 獨立模組化。

2. 小幅優化

(1) Lazy Loading

Projects 模組、Contact 模組改成 Lazy：

const routes: Routes = [
  { path: '', redirectTo: 'projects', pathMatch: 'full' },
  { path: 'projects', loadChildren: () => import('./features/projects/projects.module').then(m => m.ProjectsModule) },
  { path: 'contact', loadChildren: () => import('./features/contact/contact.module').then(m => m.ContactModule) },
  { path: '**', redirectTo: 'projects' }
];

👉 好處：首頁載入快，只有進到相應頁才載入模組。

(2) SEO 與 Meta

在 app.component.ts 或 Router 事件中動態更新：

import { Meta, Title } from '@angular/platform-browser';

constructor(private meta: Meta, private title: Title) {}

ngOnInit() {
  this.title.setTitle('Chiayu · 前端工程師履歷網站');
  this.meta.addTags([
    { name: 'description', content: 'Chiayu 的作品集與履歷網站，展示 Angular、React、Vue 技能' },
    { property: 'og:title', content: 'Chiayu · 前端工程師履歷網站' },
    { property: 'og:type', content: 'website' }
  ]);
}

(3) 切小元件

例如 Skills 清單可以再拆成：

• skill-filter.component.ts
• skill-list.component.ts

好處：單一職責，易測試、好維護。

3. 部署

(A) GitHub Pages

1. 在 angular.json 設定 baseHref：

   "baseHref": "/resume-site/"
   
   

   （假設 repo 名叫 resume-site）

2. Build：

   ng build --configuration production --base-href "/resume-site/"
   
   

3. 安裝 gh-pages 工具（或直接用 GitHub Actions）：

   npx angular-cli-ghpages --dir=dist/resume-site
   
   

4. 網址會是：

   https://<username>.github.io/resume-site/

(B) Vercel（更簡單，推薦）

1. ng build --configuration production

2. 把 dist/resume-site/ 上傳到 Vercel（可用 GitHub 連動）

3. 自動分配網址，例如：

   https://resume-site.vercel.app

4. 成果檢查清單 ✅

• 首頁有 Header、Hero、自我介紹、Skills、Projects、Contact、Footer
• Skills 支援篩選 + 搜尋（debounce）
• Projects 支援詳情頁（Routing + Resolver）
• Contact 表單具備 Reactive Forms 驗證
• 主題切換與狀態管理（Service + BehaviorSubject）
• API 資料串接（用 HttpClient 載 JSON）
• 全站有 Loading 狀態
• 專案架構整理成 Core / Shared / Features
• 成功部署到雲端，可以直接在履歷裡放網址 🎉

小心踩雷

1. GitHub Pages Base Href 沒設 → 網站空白
   • ✅ ng build --base-href "/repo-name/"
2. Vercel 預設 framework 設錯 → 部署失敗
   • ✅ 選 Angular 或直接給 dist/resume-site
3. 沒有 production build → 檔案過大、效能差
   • ✅ ng build --configuration production
4. SEO 忘了 meta → Google 搜尋不到正確摘要
   • ✅ 在 AppComponent 加上 Meta 與 Title

下一步（Day 21 預告）

從明天開始 🚀 我們要正式進入 React 實戰養成 (Day 21–27)：

• 初始化 React 專案（Vite + TypeScript）
• 認識 JSX 與 Function Component
• 使用 State 與 Props 管理資料
• React Router 建立多頁結構
• 表單驗證（React Hook Form）
• 串接 API（fetch/axios）
• 最後完成 React 版履歷網站