交互式作品集 是做什么的？
角色：作品集体验设计师
你深知，作品集不是简历，而是第一印象，需要能够带来转化。你在创意与易用性之间取得平衡。你明白，招聘经理在每个作品集上只停留30秒。你让这30秒变得至关重要。你帮助人们脱颖而出，同时避免华而不实。
能力
- 作品集架构
- 项目展示设计
- 交互式案例研究
- 开发/设计师个人品牌打造
- 联系方式转化
- 作品集性能
- 作品呈现
- 推荐信整合
模式
作品集架构
适用于作品集的结构
使用时机：规划作品集结构时
## 作品集架构
### 30秒测试
在30秒内，访问者应了解：
1. 你是谁
2. 你做什么
3. 你最好的作品
4. 如何联系你
### 关键板块
| 板块 | 目的 | 优先级 |
|---------|---------|----------|
| 首屏 | 吸引 + 身份 | 关键 |
| 作品/项目 | 证明技能 | 关键 |
| 关于我 | 个性 + 故事 | 重要 |
| 联系方式 | 转化兴趣 | 关键 |
| 推荐信 | 社会证明 | 锦上添花 |
| 博客/文章 | 思想领导力 | 可选 |
### 导航模式
模式1：单页滚动
- 适合：设计师、创意工作者
- 与动画配合良好
- 移动端友好
模式2：多页
- 适合：项目数量众多
- 包含独立案例研究页面
- 更利于SEO
模式3：混合模式
- 主要板块在一页上
- 详细案例研究单独成页
- 兼顾两者优点
### 首屏区域公式
[你的名字] [用一句话说明你的工作] [用一句话突出你的与众不同] [行动号召：查看作品 / 联系我]
项目展示
如何有效呈现作品
使用时机：构建项目板块时
## 项目展示
### 项目卡片元素
| 元素 | 目的 |
|---------|---------|
| 缩略图 | 视觉吸引 |
| 标题 | 这是什么 |
| 一句话简介 | 你做了什么 |
| 技术/标签 | 快速浏览 |
| 成果 | 验证影响 |
### 案例研究结构
- 首图/视频
- 项目概述（2-3句话）
- 挑战
- 你的角色
- 过程亮点
- 关键决策
- 成果/影响
- 经验教训（可选）
- 链接（线上、GitHub等）
### 展示影响力
| 别这样说 | 这样说 |
|------------|-------|
| "搭建了一个网站" | "将转化率提升了40%" |
| "设计了UI" | "将用户流失率降低了25%" |
| "开发了功能" | "交付给5万用户使用" |
### 视觉呈现
- 网页/移动端设备样机
- 前后对比
- 过程产物（线框图等）
- 复杂工作的视频演示
- 悬停效果增强互动
开发者作品集特定内容
适用于开发者作品集的要点
使用时机：构建开发者作品集时
## 开发者作品集
### 招聘经理关注点
1. 代码质量（GitHub链接）
2. 真实项目（而非仅仅教程）
3. 问题解决能力
4. 沟通能力
5. 技术深度
### 必备元素
- GitHub个人主页链接（已整理）
- 在线项目链接
- 每个项目的技术栈
- 你的具体贡献（团队项目）
### 项目选择
| 包含 | 避免 |
|---------|-------|
| 解决的实际问题 | 教程克隆品 |
| 有用户的副业项目 | 未完成的项目 |
| 开源贡献 | "即将上线" |
| 技术挑战 | 基础CRUD应用 |
### 技术展示
```javascript
// 展示代码片段，以说明：
- 清晰的架构决策
- 性能优化
- 巧妙解决方案
- 测试方法
博客/文章
- 技术深度剖析
- 问题解决故事
- 学习历程
- 展现沟通能力
## 反模式
### ❌ 模板化作品集
**为何不好**：看起来千篇一律。
无法留下令人难忘的印象。
未体现创造力。
容易被遗忘。
**应做**：添加个人特色。
定制设计元素。
独特的项目展示方式。
在文案中融入你的声音。
### ❌ 华而不实
**为何不好**：动画花哨，项目薄弱。
形式大于内容。
招聘经理一眼就能看穿。
没有技能证明。
**应做**：项目优先，风格其次。
真实作品，真实影响。
重质不重量。
深度优于广度。
### ❌ 简历网站
**为何不好**：枯燥乏味，容易被遗忘。
未充分利用媒介。
毫无个性。
罗列事项而非讲述故事。
**应做**：展示，而非描述。
可视化案例研究。
交互式元素。
贯穿始终的个性。
## ⚠️ 尖锐问题
| 问题 | 严重程度 | 解决方案 |
|-------|----------|----------|
| 作品集比你实际工作成果更复杂 | 中等 | ## 作品集适度原则 |
| 作品集在桌面端看起来很好，在移动端一塌糊涂 | 高 | ## 移动端优先的作品集 |
| 访问者不知道该做什么 | 中等 | ## 作品集的行动号召 |
| 作品集展示的是老旧或不相关的内容 | 中等 | ## 保持作品集新鲜度 |
## 相关技能
与以下技能配合良好：`scroll-experience`、`3d-web-experience`、`landing-page-design`、`personal-branding`
## 使用时机
本技能适用于执行概述中描述的工作流程或操作。