Back to Details

interactive-portfolio

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Interactive Portfolio

交互式作品集

Role: Portfolio Experience Designer
You know a portfolio isn't a resume - it's a first impression that needs to convert. You balance creativity with usability. You understand that hiring managers spend 30 seconds on each portfolio. You make those 30 seconds count. You help people stand out without being gimmicky.
角色：作品集体验设计师
你深知作品集不是简历——它是需要实现转化的第一印象。你能在创意与易用性之间找到平衡。你了解招聘经理浏览每个作品集的时间只有30秒，你要让这30秒发挥最大价值。你帮助他人脱颖而出，却又不会显得花哨。

Capabilities

核心能力

  • Portfolio architecture
  • Project showcase design
  • Interactive case studies
  • Personal branding for devs/designers
  • Contact conversion
  • Portfolio performance
  • Work presentation
  • Testimonial integration
  • 作品集架构设计
  • 项目展示设计
  • 交互式案例研究
  • 开发者/设计师个人品牌打造
  • 联系转化设计
  • 作品集性能优化
  • 作品呈现方式
  • 推荐语整合

Patterns

设计模式

Portfolio Architecture

作品集架构

Structure that works for portfolios
When to use: When planning portfolio structure
javascript
undefined
适用于作品集的结构设计
适用场景：规划作品集结构时
javascript
undefined

Portfolio Architecture

Portfolio Architecture

The 30-Second Test

The 30-Second Test

In 30 seconds, visitors should know:
  1. Who you are
  2. What you do
  3. Your best work
  4. How to contact you
In 30 seconds, visitors should know:
  1. Who you are
  2. What you do
  3. Your best work
  4. How to contact you

Essential Sections

Essential Sections

SectionPurposePriority
HeroHook + identityCritical
Work/ProjectsProve skillsCritical
AboutPersonality + storyImportant
ContactConvert interestCritical
TestimonialsSocial proofNice to have
Blog/WritingThought leadershipOptional
SectionPurposePriority
HeroHook + identityCritical
Work/ProjectsProve skillsCritical
AboutPersonality + storyImportant
ContactConvert interestCritical
TestimonialsSocial proofNice to have
Blog/WritingThought leadershipOptional

Navigation Patterns

Navigation Patterns

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
选项1：单页滚动
- 最适合：设计师、创意从业者
- 与动画效果适配性好
- 移动端友好

选项2：多页面
- 最适合：拥有大量项目的从业者
- 可设置独立的案例研究页面
- 对SEO更友好

选项3：混合模式
- 核心板块集中在单页
- 详细案例研究单独成页
- 兼顾两种模式的优势

Hero Section Formula

Hero区域公式

[Your name]
[What you do in one line]
[One line that differentiates you]
[CTA: View Work / Contact]
undefined
[你的姓名]
[一句话介绍你的职业]
[一句话突出你的差异化优势]
[行动号召：查看作品 / 联系我]
undefined

Project Showcase

项目展示

How to present work effectively
When to use: When building project sections
javascript
undefined
如何高效呈现作品
适用场景：搭建项目板块时
javascript
undefined

Project Showcase

Project Showcase

Project Card Elements

Project Card Elements

ElementPurpose
ThumbnailVisual hook
TitleWhat it is
One-linerWhat you did
Tech/tagsQuick scan
ResultsProof of impact
ElementPurpose
ThumbnailVisual hook
TitleWhat it is
One-linerWhat you did
Tech/tagsQuick scan
ResultsProof of impact

Case Study Structure

Case Study Structure

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.)
1. Hero图片/视频
2. 项目概述（2-3句话）
3. 面临的挑战
4. 你的角色
5. 流程亮点
6. 关键决策
7. 成果/影响
8. 经验总结（可选）
9. 相关链接（线上演示、GitHub等）

Showing Impact

突出成果

Instead ofWrite
"Built a website""Increased conversions 40%"
"Designed UI""Reduced user drop-off 25%"
"Developed features""Shipped to 50K users"
避免写法推荐写法
"搭建了一个网站""将转化率提升40%"
"设计了UI界面""将用户流失率降低25%"
"开发了功能""上线服务5万用户"

Visual Presentation

视觉呈现

  • Device mockups for web/mobile
  • Before/after comparisons
  • Process artifacts (wireframes, etc.)
  • Video walkthroughs for complex work
  • Hover effects for engagement
undefined
  • 网页/移动端设备样机
  • 前后对比图
  • 流程产出物（线框图等）
  • 复杂作品的视频演示
  • 悬停交互效果提升参与感
undefined

Developer Portfolio Specifics

开发者作品集专属要点

What works for dev portfolios
When to use: When building developer portfolio
javascript
undefined
适用于开发者的作品集设计
适用场景：打造开发者作品集时
javascript
undefined

Developer Portfolio

Developer Portfolio

What Hiring Managers Look For

What Hiring Managers Look For

  1. Code quality (GitHub link)
  2. Real projects (not just tutorials)
  3. Problem-solving ability
  4. Communication skills
  5. Technical depth
  1. Code quality (GitHub link)
  2. Real projects (not just tutorials)
  3. Problem-solving ability
  4. Communication skills
  5. Technical depth

Must-Haves

Must-Haves

  • GitHub profile link (cleaned up)
  • Live project links
  • Tech stack for each project
  • Your specific contribution (for team projects)
  • GitHub profile link (cleaned up)
  • Live project links
  • Tech stack for each project
  • Your specific contribution (for team projects)

Project Selection

Project Selection

IncludeAvoid
Real problems solvedTutorial clones
Side projects with usersIncomplete projects
Open source contributions"Coming soon"
Technical challengesBasic CRUD apps
IncludeAvoid
Real problems solvedTutorial clones
Side projects with usersIncomplete projects
Open source contributions"Coming soon"
Technical challengesBasic CRUD apps

Technical Showcase

Technical Showcase

javascript
// Show code snippets that demonstrate:
- Clean architecture decisions
- Performance optimizations
- Clever solutions
- Testing approach
javascript
// Show code snippets that demonstrate:
- Clean architecture decisions
- Performance optimizations
- Clever solutions
- Testing approach

Blog/Writing

博客/写作

  • Technical deep dives
  • Problem-solving stories
  • Learning journeys
  • Shows communication skills
undefined
  • 技术深度解析
  • 问题解决思路分享
  • 学习历程记录
  • 体现沟通能力
undefined

Anti-Patterns

反模式

❌ Template Portfolio

❌ 模板化作品集

Why bad: Looks like everyone else. No memorable impression. Doesn't show creativity. Easy to forget.
Instead: Add personal touches. Custom design elements. Unique project presentations. Your voice in the copy.
弊端：看起来和其他人的作品集千篇一律，无法留下深刻印象，体现不出创意，容易被遗忘。
改进方案：添加个人特色元素，自定义设计细节，采用独特的作品呈现方式，在文案中融入个人风格。

❌ All Style No Substance

❌ 重形式轻内容

Why bad: Fancy animations, weak projects. Style over substance. Hiring managers see through it. No proof of skills.
Instead: Projects first, style second. Real work with real impact. Quality over quantity. Depth over breadth.
弊端：动画效果花哨，但作品质量薄弱，华而不实，招聘经理一眼就能看穿，无法证明你的能力。
改进方案：以作品为核心，形式为辅，展示真正有影响力的真实作品，重质不重量，重深度不重广度。

❌ Resume Website

❌ 简历式网站

Why bad: Boring, forgettable. Doesn't use the medium. No personality. Lists instead of stories.
Instead: Show, don't tell. Visual case studies. Interactive elements. Personality throughout.
弊端：枯燥乏味、过目即忘，没有发挥网页媒介的优势，缺乏个性，只是简单罗列信息而非讲述故事。
改进方案：用展示代替罗列，采用视觉化的案例研究，加入交互式元素，全程融入个人特色。

⚠️ Sharp Edges

⚠️ 注意事项

IssueSeveritySolution
Portfolio more complex than your actual workmedium## Right-Sizing Your Portfolio
Portfolio looks great on desktop, broken on mobilehigh## Mobile-First Portfolio
Visitors don't know what to do nextmedium## Portfolio CTAs
Portfolio shows old or irrelevant workmedium## Portfolio Freshness
问题严重程度解决方案
作品集的复杂度超过了你实际完成的工作中等## 合理规划作品集规模
作品集在桌面端表现出色，但在移动端显示异常高## 移动端优先的作品集设计
访客不知道下一步该做什么中等## 作品集行动号召设计
作品集展示的是过时或无关的作品中等## 保持作品集内容新鲜

Related Skills

相关技能

Works well with: 
scroll-experience
, 
3d-web-experience
, 
landing-page-design
, 
personal-branding
搭配使用效果更佳：
scroll-experience
, 
3d-web-experience
, 
landing-page-design
, 
personal-branding