组合项目：个人作品集

组合项目：个人作品集

你已经完成了三个独立项目。现在把它们组合成一个作品集页面——就像画廊展示画作一样，展示你的编程作品。

你会学到什么

• 信息架构：如何组织和展示多个项目
• 组件思维：把每个项目看作一个可复用的"卡片"
• 导航设计：单页内跳转和外部链接
• 项目文档：如何让别人快速理解你的作品
• 持续迭代：作品集是一个活文档，会随着你成长

第一步：规划你的作品集

先别急着写 Prompt。拿出一张纸（或打开记事本），列出：

1. 你的个人介绍（1-2 句话，你是谁，在学什么）
2. 你做的所有项目，每个项目写三条信息：
   • 项目名称
   • 一句话说明（这个项目是干什么的）
   • 你从这个项目中学到了什么
3. 你的联系方式（至少一个能联系到你的方式）

例如：

个人介绍：我是小明，正在学习用 AI 编程，这是我的作品集。

项目一：个人主页
- 说明：我的第一个网页，展示个人信息和社交链接
- 学到：HTML 基本结构、CSS 颜色和布局

项目二：待办清单
- 说明：可交互的任务管理工具，支持增删改查
- 学到：JavaScript 事件处理、localStorage 存储

项目三：倒计时工具
- 说明：实时倒计时，支持自定义目标日期
- 学到：Date 对象、setInterval 定时器

第二步：写 Prompt

帮我做一个个人作品集网页，要求：

• 顶部：个人介绍区（名字大标题 + 一句话简介）
• 中间：项目展示区，每个项目一张卡片，包含：
  • 项目名称
  • 一句话描述
  • "我学到了什么"标签列表
  • "查看项目"按钮（链接到对应的 HTML 文件）
• 底部：联系方式 + "持续更新中"的文字
• 卡片式布局，桌面端 3 列，平板 2 列，手机 1 列
• 简洁专业的设计风格，使用柔和的配色
• 所有代码写在一个 HTML 文件中

第三步：发布和持续更新

1. 把作品集保存为 index.html（注意：必须是 index.html）
2. 用第 7 章学到的方法把它发布到 GitHub Pages
3. 以后每做完一个新项目，就加一张卡片

作品集是你最有价值的资产

记住：找实习、申请学校、接外包项目时，一个在线的作品集比简历更有说服力。它直接证明了你能做出东西。

你的作品集会随着你的学习不断丰富。今天只有 3 个项目，一个月后可能是 8 个，一年后可能是 30 个。每次回头看，都能感受到自己的成长。

进阶挑战

• 给作品集加一个深色/浅色切换开关
• 项目卡片加悬停动画（鼠标放上去微微上浮）
• 顶部加一个打字机效果的自我介绍
• 把项目截图放到卡片里（截图 → 裁剪 → 告诉 AI 图片文件名）