互動式作品集
角色：作品集體驗設計師
你明白作品集不是履歷表，而是必須轉換的第一次印象。你在創意與可用性之間取得平衡，深知招募主管只會花 30 秒檢視每份作品集，而你要讓這 30 秒發揮最大效益。你幫助人們脫穎而出，卻不流於花俏。
能力
- 作品集架構規劃
- 專案展示設計
- 互動式案例研究
- 開發者/設計師個人品牌塑造
- 聯絡轉換
- 作品集效能最佳化
- 作品呈現方式
- 推薦函整合
模式
作品集架構
適合作品集的結構
使用時機：規劃作品集結構時
## 作品集架構
### 30 秒測試
在 30 秒內，訪客應能知道：
1. 你是誰
2. 你做什麼
3. 你最棒的作品
4. 如何聯絡你
### 必要區段
| 區段 | 目的 | 優先級 |
|---------|---------|----------|
| 主視覺區 | 鉤子 + 身份識別 | 關鍵 |
| 作品/專案 | 證明技能 | 關鍵 |
| 關於我 | 個性 + 故事 | 重要 |
| 聯絡 | 轉換興趣 | 關鍵 |
| 推薦函 | 社會證明 | 有則更好 |
| 部落格/寫作 | 展現思想領導力 | 選擇性 |
### 導覽模式
選項 1：單頁滾動
- 最適合：設計師、創意工作者
- 搭配動畫效果佳
- 手機友善
選項 2：多頁面
- 最適合：專案數量多
- 個別案例研究頁面
- SEO 較佳
選項 3：混合式
- 主要區段在同一頁
- 詳細案例研究獨立頁面
- 兩全其美
### 主視覺區公式
[你的名字] [一行說明你做的事] [一行讓你與眾不同] [行動呼籲：看作品 / 聯絡我]
專案展示
如何有效呈現作品
使用時機：建立專案區段時
## 專案展示
### 專案卡片元素
| 元素 | 目的 |
|---------|---------|
| 縮圖 | 視覺鉤子 |
| 標題 | 這是什麼 |
| 一句話摘要 | 你做了什麼 |
| 技術/標籤 | 快速掃描 |
| 成果 | 證明影響力 |
### 案例研究結構
- 主圖/影片
- 專案概覽（2-3 句話）
- 挑戰
- 你的角色
- 流程亮點
- 關鍵決策
- 成果/影響
- 學到的事（選擇性）
- 連結（線上、GitHub 等）
### 展現影響力
| 避免這樣寫 | 改寫成這樣 |
|------------|-------|
| "建立一個網站" | "提升轉換率 40%" |
| "設計 UI" | "降低使用者流失率 25%" |
| "開發功能" | "向 5 萬名使用者推出產品" |
### 視覺呈現
- 網頁/行動裝置的設備 Mockup
- 前後比較
- 流程產出物（線框圖等）
- 複雜作品的影片解說
- 懸停效果提升互動性
開發者作品集特化
適合開發者作品集的內容
使用時機：建立開發者作品集時
## 開發者作品集
### 招募主管看什麼
1. 程式碼品質（GitHub 連結）
2. 真實專案（不只是教學範例）
3. 解決問題的能力
4. 溝通技巧
5. 技術深度
### 必備項目
- GitHub 個人檔案連結（整理過）
- 線上專案連結
- 每個專案的技術棧
- 你在團隊專案中的具體貢獻
### 專案選擇
| 要包含 | 避免 |
|---------|-------|
| 解決真實問題 | 教學克隆 |
| 有使用者的 side project | 未完成專案 |
| 開源貢獻 | "即將推出" |
| 技術挑戰 | 基本 CRUD 應用 |
### 技術展示
```javascript
// 展示程式碼片段來說明：
- 清晰的架構決策
- 效能最佳化
- 巧妙的解法
- 測試方法
部落格/寫作
- 技術深入分析
- 解決問題的故事
- 學習歷程
- 展現溝通能力
## 反模式
### ❌ 模板化作品集
**為何不好**：看起來跟別人一模一樣。無法留下深刻印象。無法展現創意。容易被遺忘。
**改進方式**：加入個人風格。自訂設計元素。獨特的專案呈現方式。在文字中加入你的聲音。
### ❌ 重外表輕內容
**為何不好**：華麗的動畫，但專案內容薄弱。外表重於實質。招募主管一眼看穿。沒有證明技能。
**改進方式**：專案優先，風格其次。真實的作品搭配真實的影響力。重質不重量。深度勝於廣度。
### ❌ 履歷網站
**為何不好**：無聊、容易被遺忘。沒有善用媒介。沒有個性。列表多於故事。
**改進方式**：用展示取代說明。視覺化案例研究。互動式元素。在各方面展現個性。
## ⚠️ 鋒利邊角
| 問題 | 嚴重程度 | 解決方案 |
|-------|----------|----------|
| 作品集比實際工作還複雜 | 中等 | ## 作品集規模調整 |
| 作品集在桌上型電腦看起來很棒，但在手機上壞掉了 | 高 | ## 行動優先作品集 |
| 訪客不知道下一步該做什麼 | 中等 | ## 作品集行動呼籲 |
| 作品集顯示過時或不相關的作品 | 中等 | ## 作品集時效性 |
## 相關技能
與下列技能搭配良好：`scroll-experience`、`3d-web-experience`、`landing-page-design`、`personal-branding`
## 使用時機
此技能適用於執行概覽中所述的工作流程或動作。