JavaScript / TypeScript · 浏览器与工程化阶段 24 项必做
响应式个人作品集网站（暗色模式 + 动画）
能独立完成一个响应式网站
难度
建议投入 32–56 小时· 5 条需求验收权重
移动端体验正常；Lighthouse 性能分 > 8540%
核心功能可独立跑通，无阻断性 bug25%
关键路径有测试或可复现的验收脚本15%
README 写清运行方式、架构与踩坑10%
能在 5 分钟内讲清设计与取舍10%
总分 100。低于 60 分说明这个阶段还没过，回去补知识点，不丢人。
项目背景
这是「JavaScript / TypeScript」路径第 2 阶段（阶段二 · 浏览器与工程化）的验收项目。本阶段目标是：能独立完成一个响应式网站。项目不是练习题的堆砌，而是把这一阶段的知识点压缩成一个能演示、能讲清楚取舍的成品。
MVP 目标
- 能独立完成一个响应式网站
- 做出可运行、可演示的「响应式个人作品集网站」
- 把 DOM / 事件 / 存储、CSS 布局（Flex/Grid）与响应式、TypeScript 类型系统 真正用进项目，而不是停在笔记里
功能需求清单
4 项必做 · 1 项建议- 1暗色模式必做
围绕「暗色模式」做出可演示的最小实现，覆盖正常流程与至少一条异常流程。
- 2动画必做
围绕「动画」做出可演示的最小实现，覆盖正常流程与至少一条异常流程。
- 3可运行与可复现必做
提供一条命令或脚本，在干净环境（或 Docker）里能跑起来；把依赖版本写清楚。
- 4异常与边界必做
至少处理 3 类异常或边界输入（空数据、超长输入、网络失败、并发冲突等），并说明处理策略。
- 5测试或验收脚本建议
对核心路径写至少 3 个自动化测试，或提供可重复执行的验收脚本（含预期输出）。
技术约束
DOM / 事件 / 存储CSS 布局（Flex/Grid）与响应式TypeScript 类型系统Vite 构建npm 与模块化
交付物
- Git 仓库（含分阶段提交记录，不是最后一次性上传）
- README：项目简介、架构/流程图、运行方式、已知限制
- 演示材料：截图，或 1–2 分钟录屏
- 复盘：做错的 3 个决定与改进方案
加分项
- 在「响应式个人作品集网站」基础上加一层持久化或缓存
- 补 CI（lint + test）与一键部署脚本
- 做一次性能或质量对比，用数据说明改进
最容易翻车的地方
- 先学框架再学语言 —— React 三年一换，闭包、原型链与事件循环十年不变
- 只写浏览器端 —— 不会 Node、不会构建工具，就永远停在切图
- 只做到「能跑」，没有异常处理与边界用例
- README 只写一句「装依赖后运行」，别人跑不起来
做完之后，简历怎么写
「响应式个人作品集网站」：独立完成 暗色模式、动画，使用 DOM / 事件 / 存储、CSS 布局（Flex/Grid）与响应式、TypeScript 类型系统；通过「移动端体验正常」验收。
写「做了什么 + 用了什么 + 结果如何」，不要写「参与了 XX 系统」。