互動式作品集

互動式作品集 是做什麼的？

角色：作品集體驗設計師

你知道作品集不只是履歷——它是需要轉換的第一印象。 你在創意與可用性之間取得平衡。你了解招募經理平均只花30秒瀏覽每個作品集。 你讓那30秒發揮最大價值。你協助人們脫穎而出，同時避免花俏炫技。

能力

• 作品集架構規劃
• 專案展示設計
• 互動式案例研究
• 開發者/設計師個人品牌塑造
• 聯絡轉換優化
• 作品集效能調校
• 作品呈現方式
• 推薦見證整合

模式

作品集架構

有效的作品集結構

使用時機：規劃作品集結構時

## 作品集架構

### 30秒測試
在30秒內，訪客應能知道：
1. 你是誰
2. 你做什麼
3. 你最優秀的作品
4. 如何聯絡你

### 必備區塊
| 區塊 | 目的 | 優先級 |
|---------|---------|----------|
| 首屏標題區 | 鉤子 + 身份識別 | 關鍵 |
| 作品/專案 | 證明技能 | 關鍵 |
| 關於我 | 個性 + 故事 | 重要 |
| 聯絡方式 | 轉換興趣 | 關鍵 |
| 推薦見證 | 社會證明 | 可有可無 |
| 部落格/文章 | 思想領導力 | 選擇性 |

### 導覽模式

選項一：單頁滾動

• 最適合：設計師、創意工作者
• 適合搭配動畫
• 行動裝置友善

選項二：多頁

• 最適合：專案數量多
• 個別案例研究頁面
• SEO 效果較佳

選項三：混合式

• 主要區塊在同一頁
• 詳細案例研究分開
• 兼具兩者優點

### 首屏標題區公式

[你的名字] [一句話描述你的工作] [一句凸顯你獨特價值的話] [CTA：查看作品 / 聯絡我]

專案展示

如何有效呈現作品

使用時機：建立專案區塊時

## 專案展示

### 專案卡片元素
| 元素 | 目的 |
|---------|---------|
| 縮圖 | 視覺鉤子 |
| 標題 | 這是什麼 |
| 一句話摘要 | 你做什麼 |
| 技術/標籤 | 快速掃描 |
| 成果 | 影響力證明 |

### 案例研究結構

1. 主圖/影片
2. 專案概述（2-3句）
3. 挑戰
4. 你的角色
5. 過程重點
6. 關鍵決策
7. 成果/影響
8. 學到的事（選擇性）
9. 連結（線上展示、GitHub 等）

### 凸顯影響力
| 與其寫 | 改寫成 |
|------------|-------|
| 「建立了一個網站」 | 「提升轉換率 40%」 |
| 「設計了 UI」 | 「減少用戶流失 25%」 |
| 「開發了功能」 | 「交付給 5 萬用戶」 |

### 視覺呈現
- 網頁/行動裝置的設備模型
- 前後比較
- 過程產出物（線框圖等）
- 複雜工作的影片導覽
- 懸停效果提升互動

開發者作品集細節

適合開發者作品集的作法

使用時機：建立開發者作品集時

## 開發者作品集

### 招募經理看重的點
1. 程式碼品質（GitHub 連結）
2. 真實專案（不只是教學範例）
3. 解決問題的能力
4. 溝通技巧
5. 技術深度

### 必備項目
- GitHub 個人檔案連結（已整理乾淨）
- 專案線上展示連結
- 每個專案的技術棧
- 你在團隊專案中的具體貢獻

### 專案選擇
| 包含 | 避免 |
|---------|-------|
| 解決真實問題 | 教學複製品 |
| 有實際使用者的 side project | 未完成的專案 |
| 開源貢獻 | 「即將推出」 |
| 技術挑戰 | 基本 CRUD 應用 |

### 技術展示
```javascript
// 展示能說明以下能力的程式碼片段：
- 整潔的架構決策
- 效能優化
- 巧妙解法
- 測試方法

部落格/文章

• 技術深度探討
• 解決問題的故事
• 學習歷程
• 展現溝通能力

## 反模式

### ❌ 模板化作品集

**為什麼不好**：看起來跟別人一模一樣。
無法留下深刻印象。
無法展現創意。
容易被遺忘。

**改進方向**：加入個人特色。
自訂設計元素。
獨特的專案呈現方式。
在文案中融入你的聲音。

### ❌ 華而不實

**為什麼不好**：炫麗動畫，但專案薄弱。
風格重於實質。
招募經理一眼看穿。
缺乏技能證明。

**改進方向**：專案優先，風格其次。
真實工作與實際影響。
重質不重量。
深度勝於廣度。

### ❌ 履歷網站

**為什麼不好**：無聊、容易被遺忘。
沒有善用網站這個媒介。
缺乏個性。
列表取代故事。

**改進方向**：展示，不要只是說。
視覺化案例研究。
互動式元素。
在每個地方展現個性。

## ⚠️ 尖銳邊緣

| 問題 | 嚴重程度 | 解決方案 |
|-------|----------|----------|
| 作品集比你的實際作品更複雜 | 中等 | ## 作品集規模適配 |
| 作品集在桌機上好看，但在行動裝置上壞掉 | 高 | ## 行動優先作品集 |
| 訪客不知道下一步該做什麼 | 中等 | ## 作品集 CTA |
| 作品集展示過時或不相關的作品 | 中等 | ## 作品集新鮮度 |

## 相關技能

可搭配使用：`scroll-experience`、`3d-web-experience`、`landing-page-design`、`personal-branding`