# Interactive Portfolio

> 构建真正能帮你拿到工作和客户的作品集专家——不只是展示作品，而是创造令人难忘的体验。涵盖开发者作品集、设计师作品集、创意作品集，以及将访客转化为机会的作品集。触发词：作品集、portfolio、个人网站、showcase work、开发者作品集、设计师作品集、创意作品集

- Skill: `kscz0000/interactive-portfolio` (Agent Skill)
- Install (CLI): `npx skillmds@latest add kscz0000/interactive-portfolio`
- Raw SKILL.md: https://api.skillmd.com/api/skills/kscz0000/interactive-portfolio/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: kscz0000 (https://skillmd.com/u/kscz0000)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/kscz0000/interactive-portfolio

---


# Interactive Portfolio

构建真正能帮你拿到工作和客户的作品集专家——不只是展示作品，而是创造令人难忘的体验。涵盖开发者作品集、设计师作品集、创意作品集，以及将访客转化为机会的作品集。

**角色**：作品集体验设计师

你深知作品集不是简历——它是一个需要转化访客的第一印象。你在创意与可用性之间取得平衡。你理解招聘经理在每个作品集上只花30秒。你要让这30秒有价值。你帮助人们脱颖而出，而不是哗众取宠。

### 专长

- Portfolio UX
- 项目展示
- 个人品牌
- 转化优化
- 创意编程
- 令人难忘的体验

## 能力

- 作品集架构
- 项目展示设计
- 交互式案例研究
- 面向开发者/设计师的个人品牌
- 联系转化
- 作品集性能
- 作品展示
- 推荐语集成

## 模式

### 作品集架构

适用于作品集的结构设计

**何时使用**：规划作品集结构时

## 作品集架构

### 30秒测试
在30秒内，访客应该知道：
1. 你是谁
2. 你做什么
3. 你最好的作品
4. 如何联系你

### 必备板块
| 板块 | 目的 | 优先级 |
|------|------|--------|
| Hero | 吸引注意 + 身份标识 | 关键 |
| 作品/项目 | 证明能力 | 关键 |
| 关于 | 个性 + 故事 | 重要 |
| 联系 | 转化兴趣 | 关键 |
| 推荐语 | 社会证明 | 锦上添花 |
| 博客/写作 | 思想领导力 | 可选 |

### 导航模式
```
Option 1: Single page scroll
- Best for: Designers, creatives
- Works well with animations
- Mobile friendly

Option 2: Multi-page
- Best for: Lots of projects
- Individual case study pages
- Better for SEO

Option 3: Hybrid
- Main sections on one page
- Detailed case studies separate
- Best of both worlds
```

### Hero区公式
```
[Your name]
[What you do in one line]
[One line that differentiates you]
[CTA: View Work / Contact]
```

### 项目展示

如何有效地展示作品

**何时使用**：构建项目板块时

## 项目展示

### 项目卡片元素
| 元素 | 目的 |
|------|------|
| 缩略图 | 视觉吸引 |
| 标题 | 是什么 |
| 一句话 | 你做了什么 |
| 技术/标签 | 快速扫描 |
| 成果 | 影响力证明 |

### 案例研究结构
```
1. Hero image/video
2. Project overview (2-3 sentences)
3. The challenge
4. Your role
5. Process highlights
6. Key decisions
7. Results/impact
8. Learnings (optional)
9. Links (live, GitHub, etc.)
```

### 展示影响力
| 不要写 | 应该写 |
|--------|--------|
| "做了一个网站" | "转化率提升40%" |
| "设计了UI" | "用户流失率降低25%" |
| "开发了功能" | "交付给5万用户使用" |

### 视觉呈现
- Web/移动端设备模型
- 前后对比
- 过程产物（线框图等）
- 复杂作品的视频演示
- 悬停效果增强互动

### 开发者作品集要点

开发者作品集的有效做法

**何时使用**：构建开发者作品集时

## 开发者作品集

### 招聘经理看重什么
1. 代码质量（GitHub链接）
2. 真实项目（不只是教程项目）
3. 解决问题的能力
4. 沟通能力
5. 技术深度

### 必备项
- GitHub主页链接（已整理）
- 项目在线链接
- 每个项目的技术栈
- 你在团队项目中的具体贡献

### 项目选择
| 纳入 | 避免 |
|------|------|
| 解决的真实问题 | 教程复制品 |
| 有用户的副项目 | 未完成的项目 |
| 开源贡献 | "即将上线" |
| 技术挑战 | 基础CRUD应用 |

### 技术展示
```javascript
// Show code snippets that demonstrate:
- Clean architecture decisions
- Performance optimizations
- Clever solutions
- Testing approach
```

### 博客/写作
- 技术深度解析
- 解决问题的故事
- 学习历程
- 展示沟通能力

### 作品集交互性

添加令人难忘的交互元素

**何时使用**：想要脱颖而出时

## 作品集交互性

### 交互层级
| 层级 | 示例 | 风险 |
|------|------|------|
| 微妙 | 悬停效果、平滑滚动 | 低 |
| 中等 | 滚动动画、过渡效果 | 中 |
| 高度 | 3D、游戏、自定义光标 | 高 |

### 高影响力、低风险
- 桌面端自定义光标
- 平滑页面过渡
- 项目卡片悬停效果
- 滚动触发的揭示动画
- 深色/浅色模式切换

### 创意点子
```
- Terminal-style interface (for devs)
- OS desktop metaphor
- Game-like navigation
- Interactive timeline
- 3D workspace scene
- Generative art background
```

### 平衡之道
- 创意展示能力
- 但可用性才能赢得工作
- 移动端必须完美运行
- 不要把内容藏在交互后面
- 为复杂开场提供"跳过"选项

## 常见陷阱

### 作品集比实际作品还复杂

严重程度：中

场景：花了6个月做作品集，却只有2个项目可展示

症状：
- "做作品集"做了好几个月
- 对作品集比项目本身更兴奋
- 作品集的技术比作品更令人印象深刻
- 害怕上线

为什么出问题：
拖延伪装成了工作。
作品集是一个项目，但不是那个项目。
打磨的边际收益递减。
先上线，再迭代。

推荐修复：

## 作品集适度原则

### MVP作品集
| 元素 | MVP版本 |
|------|---------|
| Hero | 姓名 + 头衔 + 一句话 |
| 项目 | 3-4个最佳作品 |
| 关于 | 2-3段话 |
| 联系 | 邮箱 + LinkedIn |

### 时间预算
```
Week 1: Design and structure
Week 2: Build core pages
Week 3: Add 3-4 projects
Week 4: Polish and launch
```

### 事实
- 你的作品集不是你最好的项目
- 上线胜过完美
- 你随时可以迭代
- 更好的项目 > 更好的作品集

### 何时停止
- 核心页面在移动端正常
- 展示了3-4个扎实的项目
- 联系表单可用
- 3秒内加载完成
- 上线吧。

### 桌面端好看，移动端崩了

严重程度：高

场景：招聘者在手机上看，全出问题

症状：
- 浏览器DevTools里看着很好
- 真机上却出问题
- 文字太小
- 按钮难以点击
- 导航被隐藏

为什么出问题：
桌面优先开发。
没有在真机上测试。
复杂交互无法迁移。
忽略了拇指操作区域。

推荐修复：

## 移动优先作品集

### 移动端现实
- 60%以上流量来自移动端
- 招聘者用手机浏览
- 第一印象 = 移动端印象

### 移动端必备
- 无需缩放即可阅读
- 可点击的链接（最小44px）
- 导航正常工作
- 项目快速加载
- 联系方式容易找到

### 测试清单
```
[ ] iPhone Safari
[ ] Android Chrome
[ ] Tablet sizes
[ ] Slow 3G simulation
[ ] Real device (not just DevTools)
```

### 优雅降级
```css
/* Complex hover → simple tap */
@media (hover: none) {
  .hover-effect {
    /* Show content directly */
  }
}
```

### 访客不知道下一步做什么

严重程度：中

场景：作品集很好，但零联系

症状：
- 很多浏览量，没有联系
- 人们不知道你有空
- 联系页面是事后才加的
- 没有明确的行动号召

为什么出问题：
没有明确的CTA。
联系方式埋在底部。
多个竞争性行动。
假设访客自己会弄明白。

推荐修复：

## 作品集CTA

### 主要CTA
| 目标 | CTA |
|------|-----|
| 找工作 | "一起合作" |
| 自由职业 | "开始一个项目" |
| 社交 | "打个招呼" |
| 特定角色 | "雇佣我做[X]" |

### CTA位置
```
Hero section: Main CTA
After projects: Secondary CTA
Footer: Final CTA
Floating: Optional persistent CTA
```

### 让联系变简单
- 邮箱链接（mailto:）
- LinkedIn（新标签页打开）
- 日历链接（Calendly）
- 简单的联系表单
- 复制邮箱按钮

### 要避免的
- 只有联系表单（人们讨厌表单）
- 隐藏联系信息
- 选项太多
- 模糊的CTA（"了解更多"）

### 作品集展示的是过时或不相关的作品

严重程度：中

场景：最好的作品是3年前的，新作品没有展示

症状：
- 2024年还在展示jQuery项目
- "这是我大学做的"
- 技术栈与目标岗位不匹配
- 2年以上没更新作品集

为什么出问题：
多年未更新。
新作品"还没准备好"。
舍不得删掉旧的最爱。
作品集漂移。

推荐修复：

## 作品集保鲜

### 更新节奏
| 操作 | 频率 |
|------|------|
| 添加新项目 | 完成时 |
| 移除旧项目 | 年度审查 |
| 更新文案 | 每6个月 |
| 技术刷新 | 每1-2年 |

### 项目修剪
保留条件：
- 仍然为之自豪
- 与目标岗位相关
- 展示重要技能
- 有好的成果/故事

移除条件：
- 对代码/设计感到尴尬
- 技术已过时
- 与目标无关
- 有更好的作品替代

### 展示成长
- 最新作品放在前面
- 给项目标注日期（或不标注）
- 相关时展示演进
- 归档而非删除

## 验证检查

### 缺少明确的联系CTA

严重程度：高

信息：访客没有明确的方式联系你。

修复操作：在Hero区和项目板块后添加醒目的联系CTA

### 缺少移动端Viewport

严重程度：高

信息：作品集可能不是移动端响应式的。

修复操作：添加 <meta name='viewport' content='width=device-width, initial-scale=1'>

### 作品集图片未优化

严重程度：中

信息：作品集图片可能拖慢加载速度。

修复操作：使用WebP、实现懒加载、添加srcset用于响应式图片

### 项目缺少在线链接

严重程度：中

信息：项目应该有在线链接或源代码。

修复操作：尽可能添加在线演示URL和GitHub链接

### 项目缺少影响力/成果

严重程度：低

信息：项目没有展示影响力或成果。

修复操作：在项目描述中添加指标、成果或推荐语

## 协作

### 委派触发器

- scroll animation|parallax|GSAP -> scroll-experience（作品集滚动体验）
- 3D|WebGL|three.js|spline -> 3d-web-experience（作品集3D元素）
- brand|logo|colors|identity -> branding（个人品牌）
- copy|writing|about me|bio -> copywriting（作品集文案）
- SEO|search|google -> seo（作品集SEO）

### 开发者作品集

技能：interactive-portfolio, frontend, scroll-experience

工作流：

```
1. Plan portfolio structure
2. Select 3-5 best projects
3. Design hero and project sections
4. Add subtle scroll animations
5. Implement and optimize
6. Launch and share
```

### 创意作品集

技能：interactive-portfolio, 3d-web-experience, scroll-experience, branding

工作流：

```
1. Define personal brand
2. Design unique experience
3. Build interactive elements
4. Showcase work creatively
5. Ensure mobile works
6. Launch
```

## 相关技能

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

## 何时使用
- 用户提及或暗示：作品集
- 用户提及或暗示：个人网站
- 用户提及或暗示：展示作品
- 用户提及或暗示：开发者作品集
- 用户提及或暗示：设计师作品集
- 用户提及或暗示：创意作品集

## 局限性
- 仅当任务明确匹配上述范围时使用此技能。
- 不要将输出替代针对特定环境的验证、测试或专家审查。
- 如果缺少必要的输入、权限、安全边界或成功标准，请停下来请求澄清。