# PRD 产品需求文档 — 极简个人品牌简历站

---

| 文档属性 | 内容 |
|---------|------|
| 文档名称 | 极简个人品牌简历站 · 产品需求文档 |
| 版本号 | v1.0 |
| 产品负责人 | （填写姓名） |
| 创建日期 | 2026-07-06 |
| 当前状态 | ✅ 已交付上线 |
| 项目代号 | Resume Site |

---

## 目录

- [一、修订记录](#一修订记录)
- [二、背景与目标](#二背景与目标)
- [三、市场与竞品分析](#三市场与竞品分析)
- [四、目标用户](#四目标用户)
- [五、用户故事](#五用户故事)
- [六、信息架构与页面结构](#六信息架构与页面结构)
- [七、功能需求](#七功能需求)
- [八、交互与动效规范](#八交互与动效规范)
- [九、非功能性需求](#九非功能性需求)
- [十、数据埋点与成功指标](#十数据埋点与成功指标)
- [十一、项目排期](#十一项目排期)
- [十二、风险与依赖](#十二风险与依赖)
- [十三、附录](#十三附录)

---

## 一、修订记录

| 版本 | 日期 | 修订人 | 修订内容 |
|------|------|--------|---------|
| v1.0 | 2026-07-06 | — | 初始版本，完整 PRD |

---

## 二、背景与目标

### 2.1 背景

当前求职场景中，候选人通常只能在 Boss 直聘、智联等平台上上传一份格式固定、信息受限的 PDF 简历。这份简历无法展示作品集、无法体现个人风格、无法传达「这个人到底是个什么样的人」。

同时，越来越多的招聘方（尤其是中小型团队、创业公司、内容型岗位）更希望看到候选人的完整画像，而不仅仅是学历和工作经历。

### 2.2 产品愿景

**让每个人都能拥有一个体面的、个性化的在线个人页面，像名片一样发出去。**

### 2.3 核心目标

| 目标 | 量化指标 | 优先级 |
|------|---------|--------|
| 完整展示个人画像 | 覆盖简历/作品/特质/兴趣/生活 5 个维度 | P0 |
| 非技术人员可自行管理内容 | 修改 1 个 JSON 文件即可换人 | P0 |
| 体验与视觉效果达到商用模板水准 | 双主题、启动动画、多交互形态 | P0 |
| 零成本一键部署 | 5 分钟内从文件夹到上线 | P1 |
| 全端可用 | 桌面/平板/手机端体验一致 | P1 |

### 2.4 不做的事（本期范围外）

- 不用后端，不做 CMS 后台管理系统（保持「改 JSON → 上传」的极简模式）
- 不做多语言切换（第一版仅中文）
- 不做用户登录/注册（纯静态站点，无用户系统）
- 不做站内统计面板（统计由 EdgeOne 平台层面提供）

---

## 三、市场与竞品分析

### 3.1 市场现状

当前个人在线简历的主流方案：

| 方案 | 优点 | 痛点 |
|------|------|------|
| **Notion / 飞书页面** | 搭建简单 | 加载慢、URL 不专业、无法自定义域名、视觉千篇一律 |
| **GitHub Pages + Jekyll/Hexo** | 免费、自定义域名 | 需要技术背景、配置繁琐、设计感依赖主题 |
| **Linktree / Lit.link** | 链接聚合快 | 功能单一、不能展示详细简历 |
| **付费建站工具（Wix/Squarespace）** | 拖拽搭建 | 月付费、模板感重、迁移成本高 |
| **手写 HTML** | 完全自主 | 门槛极高，非技术人员不可维护 |

### 3.2 本产品差异点

1. **零代码维护**：非技术人员只需编辑一个 JSON 文本文件，替换图片，上传文件夹即可完成内容更新
2. **全维度画像**：不仅展示简历信息，还覆盖作品、认知特质、兴趣爱好、生活照片
3. **差异化视觉**：赛博朋克 + 暖奶油双主题，启动画面仪式感，打破「简历 = 白纸黑字」的刻板印象
4. **零成本**：EdgeOne Pages 免费托管，无需服务器、域名必须但低价
5. **一次搭建，永久使用**：纯静态，不依赖任何第三方服务（不会出现「平台下线」的问题）

---

## 四、目标用户

### 4.1 核心用户画像

#### 画像 A：应届求职者「小明」

```
年龄：22 岁
背景：应届本科毕业生，专业市场营销
痛点：简历只有一页 PDF，作品集要发压缩包，HR 没耐心打开
需求：一个链接，包含简历 + 社团经历 + 摄影作品 + 性格测试结果
技术能力：会改 Word 文档，不会写代码
场景：微信上把链接发给 HR
```

#### 画像 B：自由职业/内容创作者「小雪」

```
年龄：27 岁
背景：自由插画师，抖音 10w 粉丝
痛点：甲方问「发个你们做的案例看看」，每次都手忙脚乱翻聊天记录
需求：一个页面展示所有作品 + 个人介绍 + 合作联系方式
技术能力：会用手机编辑图片，不会写代码
场景：在抖音/小红书个人简介中放链接，有意向客户点击查看
```

#### 画像 C：职场人「老王」

```
年龄：32 岁
背景：在职产品经理，考虑看新机会
痛点：想低调展示自己，不想被当前同事发现挂在招聘网站
需求：一个有设计感的个人页面，看起来像「个人博客」而非「求职中」
技术能力：会 Markdown，不会写 CSS
场景：猎头/朋友推荐工作时发链接
```

### 4.2 非目标用户

- 需要在线编辑、实时发布的管理后台用户（这是另一个产品方向）
- 需要用户系统、数据统计的 HR 招聘平台
- 需要多语言支持的海外面试者

---

## 五、用户故事

以下按用户目标优先级排列：

| 编号 | 用户故事 | 验收标准 | 优先级 |
|------|---------|---------|--------|
| US-01 | 作为求职者，我打开链接后首先看到一个有仪式感的启动画面，让我感觉「这是一个用心做的页面」 | 启动画面包含头像、姓名、身份标签、格言；2-3 秒后自动过渡到主页 | P0 |
| US-02 | 作为 HR，我在页面顶部能看到清晰的导航，一眼知道这个页面包含哪些信息 | 导航包含主页/作品展示/个人特质/兴趣爱好/生活展示 5 个入口，滚动时高亮当前位置 | P0 |
| US-03 | 作为 HR，我进入页面后从左边的信息卡快速获取候选人的核心信息 | 侧边栏展示头像、姓名、联系方式、学历、性别、年龄 | P0 |
| US-04 | 作为 HR，我在「主页」板块看到完整的教育经历、工作经历、专业技能、资格证书 | 时间线清晰，技能标签可浏览，资格证书有展示 | P0 |
| US-05 | 作为招聘方，我想看到候选人的实际作品和项目，不是只读文字描述 | 作品区有项目详情卡片、游戏演示视频、可下载文件 | P0 |
| US-06 | 作为招聘方，我想了解候选人的性格特质和认知风格 | 荣格八维 + IQ 测试 + 个人优势文字展示 | P1 |
| US-07 | 作为招聘方，我想看到候选人的生活状态 | 兴趣爱好拼图 + 生活照片瀑布流，点击可放大查看 | P1 |
| US-08 | 作为内容运营者，我想用手机看这个页面效果也得好 | 手机端自动切换单栏布局，动画精简，内容全部展示不折叠 | P1 |
| US-09 | 作为深夜浏览的用户，我想切换到暗色模式 | 点一下导航栏的日夜切换按钮即可切换，下次打开记住偏好 | P2 |
| US-10 | 作为非技术用户，我想换掉示例内容变成我自己的信息 | 打开 `data.json`，改掉姓名、经历、技能，换掉 `assets/` 里的图片，重新上传即可 | P1 |

---

## 六、信息架构与页面结构

### 6.1 站点地图（Sitemap）

```
首页（单页应用）
├── 🚀 启动画面（首屏过渡）
│   ├── 头像光环动画
│   ├── 姓名 + 身份标签
│   ├── 个性签名
│   └── 加载进度条
│
├── 🧭 顶部导航栏（固定）
│   ├── Logo（品牌名）
│   ├── 5 个板块锚点
│   └── 日夜模式开关
│
├── 📋 左侧信息卡（桌面端固定 / 移动端置顶）
│   ├── 头像
│   ├── 姓名 + 身份头衔
│   ├── 联系方式（手机/邮箱/微信）
│   └── 基本信息（院校/学历/性别/年龄）
│
└── 📄 右侧内容区（垂直滚动）
    ├── 01 主页（简历）
    │   ├── 首屏标语（打字机动效）
    │   ├── 教育经历（时间线）
    │   ├── 工作经历（时间线）
    │   ├── 校内实践（时间线）
    │   ├── 专业技能（标签云 + 详情卡片）
    │   └── 资格证书（标签列表）
    │
    ├── 02 作品展示
    │   ├── 抖音/自媒体账号卡片
    │   ├── 项目 1：使徒迎击记录
    │   ├── 项目 2：游戏 Demo（含视频 + 下载）
    │   └── 项目 3：通讯系统搭建
    │
    ├── 03 个人特质
    │   ├── 荣格八维认知（图片 + 文字）
    │   ├── IQ 测试结果（图片 + 文字）
    │   └── 个人优势（5 张叙事性卡片）
    │
    ├── 04 兴趣爱好
    │   └── 分类拼图（按原始比例排列，不裁切）
    │
    └── 05 生活展示
        └── 照片/视频瀑布流（点击进入灯箱）
```

### 6.2 页面入口

- 用户访问域名 → 启动画面播放 → 2.8 秒后自动进入主页面
- 直接滚到底部可以连续浏览所有 5 个板块
- 点击顶部导航可跳转到对应板块

### 6.3 内容优先级策略

> 针对 HR 平均浏览一份简历约 6 秒的行为特征，内容采用「漏斗式」排布：

1. **首屏 3 秒**：姓名 + 身份标签 + 标语（启动画面 + 侧边栏 + Hero 区）→ 让浏览者知道「这是谁」
2. **滚动 10 秒**：教育/工作经历 + 技能 → 快速判断「匹配度」
3. **后续浏览**：作品展示 → 个人特质 → 兴趣/生活 → 兴趣驱动深度停留

---

## 七、功能需求

### 7.1 模块：启动画面

| 需求编号 | 需求描述 | 交互说明 | 优先级 |
|---------|---------|---------|--------|
| F-01 | 页面首次加载时展示启动画面，包含圆形头像、姓名、身份标签、个性签名和进度条 | 头像外圈有蓝色光晕旋转动画，签名有呼吸光效，进度条 2.2 秒填满 | P0 |
| F-02 | 启动画面播放完毕后自动过渡到主页面 | 整个启动画面在 2.8 秒处以淡出动画消失，0.8 秒过渡 | P0 |

**设计意图**：启动画面创造「仪式感」。用户看到的不是一个白屏加载，而是一个有品牌感的「封面」，降低跳出率，建立第一印象。

### 7.2 模块：固定导航栏

| 需求编号 | 需求描述 | 交互说明 | 优先级 |
|---------|---------|---------|--------|
| F-03 | 页面顶部固定导航栏，包含品牌名、5 个板块锚点、日夜切换按钮 | 始终可见，不随滚动消失 | P0 |
| F-04 | 用户滚动到对应板块时，导航栏对应项自动高亮 | 激活项底部显示色条，5 个板块使用不同颜色区分（灰/橙/蓝/红/绿） | P1 |
| F-05 | 点击导航项平滑滚动到对应板块 | 滚动动画自然流畅 | P1 |
| F-06 | 日夜模式切换按钮，点击切换暗色/亮色主题 | 按钮 label 同步变化（夜间模式 / 日间模式），选择记录到浏览器本地存储 | P2 |

### 7.3 模块：左侧信息卡

| 需求编号 | 需求描述 | 交互说明 | 优先级 |
|---------|---------|---------|--------|
| F-07 | 展示用户头像（圆形），鼠标悬浮时放大 + 光晕增强 | 放大比例 1.08x | P0 |
| F-08 | 展示姓名 + 身份头衔 | 从数据文件读取 | P0 |
| F-09 | 展示联系方式：手机、邮箱、微信，每项有对应图标 + 文字 | 鼠标悬浮时文字右移，视觉反馈 | P0 |
| F-10 | 展示基本信息：毕业院校、学历、性别、年龄 | 键值对表格形式展示 | P0 |

**设计意图**：左侧信息卡等同于「纸质简历的页眉区域」，让 HR 无需滚动就能获取核心联系方式。桌面端固定在左侧，模拟「名片」的感受。

### 7.4 板块 01：主页（简历详情）

| 需求编号 | 需求描述 | 交互说明 | 优先级 |
|---------|---------|---------|--------|
| F-11 | Hero 区展示英文标签 + 大字标语 + 副标题 | 标语逐字打出（打字机效果），打完后光标消失，文字产生辉光 | P0 |
| F-12 | 教育经历时间线，含学校、专业、时间、课程 | 每条目的左侧有绿色竖线 + 圆点，hover 时右移 | P0 |
| F-13 | 工作经历时间线，含公司、职位、时间、成就列表 | 成就用项目符号列出，布局同教育经历 | P0 |
| F-14 | 校内实践时间线 | 布局同上，独立展示 | P1 |
| F-15 | 专业技能标签云 + 详情卡片 | 标签 hover 上浮 + 放大 + 发光；下方三栏展示技能说明详情 | P0 |
| F-16 | 资格证书标签列表 | 标签带奖杯图标，hover 上浮 + 绿光 | P1 |

### 7.5 板块 02：作品展示

| 需求编号 | 需求描述 | 交互说明 | 优先级 |
|---------|---------|---------|--------|
| F-17 | 抖音/自媒体账号介绍卡片 | 显示头像、昵称、认证标识、时间线、简介 bio | P0 |
| F-18 | 两个翻转卡展示高光事件（正面标题 → 反面详情） | hover 翻转，点击锁定翻转状态 | P0 |
| F-19 | 使徒迎击记录项目卡片 | 默认显示标题行，hover 展开详细成就列表 | P0 |
| F-20 | EVA 战术模拟游戏 Demo 项目卡片 | 标题 + 技术栈标签 + hover 展开详情：游戏描述 + 6 个功能翻转卡 + 演示视频 + 下载按钮 | P0 |
| F-21 | NERV 通讯系统搭建项目卡片 | 标题行 + hover 展开参与详情 | P1 |

**设计意图**：作品展示区采用「折叠式」设计——默认只显示标题概览，hover/点击才展开详情。这样页面不会因内容过多而臃肿，同时给主动探索的用户准备了丰富信息。

### 7.6 板块 03：个人特质

| 需求编号 | 需求描述 | 交互说明 | 优先级 |
|---------|---------|---------|--------|
| F-22 | 荣格八维认知功能展示，含测试结果图片 + 文字解读 | 图片点击可全屏查看（灯箱） | P1 |
| F-23 | IQ 测试结果展示，含成绩截图 + 能力解读 | 同上 | P1 |
| F-24 | 5 张个人优势叙事卡片 | 每张卡左侧有彩色装饰条（紫/橙/绿/红/蓝），hover 整体上浮 | P1 |

**设计意图**：认知测试和人格特质是「非标准简历信息」，但能让招聘方更立体地了解候选人，尤其在创意型、协作型岗位中，人格特质是重要的软性参考。

### 7.7 板块 04：兴趣爱好

| 需求编号 | 需求描述 | 交互说明 | 优先级 |
|---------|---------|---------|--------|
| F-25 | 兴趣爱好按分类展示（如大提琴、SDAT 音乐、古典音乐、模拟训练等） | 每个分类有渐变色标签（紫→橙） | P1 |
| F-26 | 图片按原始宽高比自适应排列，不裁切、不变形 | 每行填满容器宽度，自动计算每张图宽度 = (宽/高) × 行高 | P1 |
| F-27 | 点击任意图片进入灯箱浏览模式 | 支持键盘左右切换 + 触屏滑动 + 关闭按钮 | P1 |

### 7.8 板块 05：生活展示

| 需求编号 | 需求描述 | 交互说明 | 优先级 |
|---------|---------|---------|--------|
| F-28 | 照片/视频以瀑布流方式排列 | 桌面端 3 列、平板 2 列、手机 1 列 | P1 |
| F-29 | 每张照片有圆角卡片样式，hover 轻微放大 + 阴影 | 放大 1.03x | P1 |
| F-30 | 视频卡片显示播放图标区分 | ▶ 图标覆盖层 | P1 |
| F-31 | 点击任意照片/视频进入灯箱全屏浏览 | 照片显示图片、视频显示播放器、底部显示标题 + 页码（如 "3 / 22"） | P1 |

### 7.9 全局模块：全屏灯箱

| 需求编号 | 需求描述 | 交互说明 | 优先级 |
|---------|---------|---------|--------|
| F-32 | 点击照片/兴趣图片/认知图片触发全屏灯箱 | 遮罩层 + 居中展示 | P1 |
| F-33 | 关闭灯箱的 3 种方式 | 点击 ✕ 按钮 / 点击遮罩区域 / 按 ESC 键 | P1 |
| F-34 | 左右切换内容 | 点击左右箭头 / 键盘 ← → / 触屏滑动（>60px 触发） | P1 |
| F-35 | 图片显示 `<img>`，视频显示 `<video>` 播放器 | 自动识别素材类型 | P1 |
| F-36 | 底部信息栏显示标题 + 当前页码 | 如 "3 / 22" | P1 |
| F-37 | 关闭灯箱后视频停止播放 | 不残留播放状态 | P1 |

---

## 八、交互与动效规范

### 8.1 设计原则

- **微动效服务功能**：动效用于引导注意力和反馈操作，不为炫技而加
- **尊重用户偏好**：手机端关闭复杂动效（照顾性能和流量）
- **加载速度优先**：所有动效使用 CSS/Canvas 实现，不引入动效库

### 8.2 动效清单

| 编号 | 动效 | 触发时机 | 预期感受 |
|------|------|---------|---------|
| M-01 | 启动画面光环旋转 + 签名呼吸光 | 页面加载 | 仪式感、品牌感 |
| M-02 | 启动画面淡出过渡 | 加载完毕 | 丝滑、不突兀 |
| M-03 | 标语逐字打字 | 用户视线进入 Hero 区 | 期待感、被引导阅读 |
| M-04 | 卡片滚动渐入（从下方 70px 淡入） | 各卡片进入视口 | 内容有层次地展开 |
| M-05 | 卡片 hover 上浮 + 阴影加深 | 鼠标悬停任意卡片 | 可交互的暗示 |
| M-06 | 卡片 click 按压反馈 | 鼠标点击 | 瞬态的「被按下去」触感 |
| M-07 | 时间线条目 hover 右移 | 鼠标悬停时间线项 | 引导横向阅读 |
| M-08 | 技能标签 hover 上浮 + 发光 | 鼠标悬停技能标签 | 可交互、有活力 |
| M-09 | 翻转卡正反面切换 | hover / 点击锁定 | 探索感、趣味性 |
| M-10 | 星空粒子背景缓慢运动 | 始终运行 | 宁静、深邃的氛围 |
| M-11 | 灯箱打开/关闭过渡 | 点击图片 | 沉浸感 |

### 8.3 降级策略

- **移动端**：关闭滚动渐入动效，内容直接可见（避免性能问题 + 减少等待）
- **移动端**：卡片 hover 展开内容改为默认全部展开（触摸屏无 hover）
- **低性能设备**：减少粒子数量或彻底关闭粒子

---

## 九、非功能性需求

### 9.1 性能要求

| 指标 | 目标值 | 测量方式 |
|------|--------|---------|
| 首屏加载（LCP） | < 2 秒 | Lighthouse |
| 首次内容绘制（FCP） | < 1.5 秒 | Lighthouse |
| 可交互时间（TTI） | < 2.5 秒 | Lighthouse |
| 页面总大小 | < 5MB（含图片） | 浏览器 DevTools |
| 图片格式 | WebP 优先，JPEG 降级 | — |

### 9.2 兼容性要求

| 平台 | 要求 | 备注 |
|------|------|------|
| Chrome Desktop | 90+ | 主要测试平台 |
| Edge Desktop | 90+ | 与 Chrome 同内核 |
| Safari Desktop | 15+ | 毛玻璃效果需前缀 |
| Firefox Desktop | 90+ | 全量兼容 |
| iOS Safari | iOS 15+ | 触屏滑动灯箱已适配 |
| Android Chrome | Android 10+ | 移动端布局已验证 |
| 微信内置浏览器 | 最新版 | 需特别验证启动画面和灯箱 |

### 9.3 可维护性要求

- **内容与展示分离**：所有个人数据集中在一个 JSON 文件，改内容不需要懂 HTML/CSS
- **模块独立**：修改某个板块的展示样式不影响其他板块
- **零依赖**：不依赖任何 npm 包、CDN 资源（图片除外），保证离线可用

### 9.4 安全性要求

- 纯静态站点，无用户输入、无数据库、无服务端，攻击面极小
- HTTPS 由 EdgeOne Pages 自动提供
- 图片使用 `onerror` 降级处理，防止裂图影响体验

### 9.5 可访问性

- 语义化 HTML 标签（`nav`、`main`、`section`、`aside`）
- 图片提供 `alt` 文本
- 按钮提供 `title`/`aria-label`
- 键盘可操作灯箱（ESC 关闭、← → 切换）

---

## 十、数据埋点与成功指标

### 10.1 核心指标（通过 EdgeOne Pages 平台 + 第三方工具埋点）

| 指标 | 定义 | 目标值（上线后 3 个月） |
|------|------|------------------------|
| 页面浏览量（PV） | 每日页面访问次数 | > 50/天 |
| 独立访客（UV） | 每日独立设备数 | > 30/天 |
| 平均停留时长 | 从打开到关闭的时长 | > 45 秒 |
| 滚动深度 | 滚动超过 50% 页面高度的用户比例 | > 40% |
| 主题切换率 | 至少切换过一次日夜模式的用户比例 | 观察值（不做目标） |
| 灯箱打开率 | 至少打开过一次灯箱的用户比例 | > 20% |
| 作品展示展开率 | hover/点击过作品卡片详情的比例 | > 30% |
| 下载完成率 | 点击游戏下载按钮的转化 | 观察值（不做目标） |

### 10.2 埋点事件（建议）

| 事件名 | 触发条件 |
|--------|---------|
| `page_view` | 每次页面加载（可复用 EdgeOne 平台统计） |
| `theme_toggle` | 用户切换日夜模式 |
| `section_scroll` | 滚动到各个 section（01-05） |
| `lightbox_open` | 打开灯箱 |
| `lightbox_navigate` | 灯箱内左右切换 |
| `flip_card_click` | 点击翻转卡锁定 |
| `expand_content` | hover/点击展开作品详情 |
| `download_click` | 点击下载游戏按钮 |

---

## 十一、项目排期

### 11.1 里程碑

| 阶段 | 内容 | 预估工时 | 产出 |
|------|------|---------|------|
| **M1 · 需求确认** | 用户调研、竞品分析、PRD 撰写 | 0.5 天 | 本 PRD 文档 |
| **M2 · 原型设计** | 低保真线框图、交互流程确认 | 0.5 天 | 线框图（可手绘 or Figma） |
| **M3 · 页面搭建** | HTML 结构 + CSS 样式 + 双主题变量 | 2 天 | 静态页面 + 全样式 |
| **M4 · 交互实现** | JS 逻辑（数据渲染/动画/灯箱/翻转卡/打字机/粒子/滚动监听） | 2 天 | 完整可交互页面 |
| **M5 · 内容填充** | 准备示例 JSON 数据 + 图片/视频素材 | 1 天 | deploy/ 文件夹 |
| **M6 · 自测 + 修 Bug** | 多端兼容性测试、性能优化 | 1 天 | 问题清单 + 修复 |
| **M7 · 部署上线** | EdgeOne Pages 上传 + 域名绑定 | 0.5 天 | 线上可访问地址 |
| **M8 · 文档输出** | 用户使用指南（如何改 JSON 换人） | 0.5 天 | 使用手册 |

**总预估工时：8 个工作日**（含沟通和反馈）

### 11.2 依赖关系

```
M1 → M2 → M3 → M4 → M5 → M6 → M7 → M8
              ↘
                M5（可并行）
```

M5（内容素材）可与 M4（交互）并行进行，优化整体工期。

---

## 十二、风险与依赖

### 12.1 技术风险

| 风险 | 等级 | 应对措施 |
|------|------|---------|
| iOS Safari 对 CSS 毛玻璃支持有问题 | 低 | 已加 `-webkit-` 前缀，降级为不透明卡片 |
| 图片过多导致页面体积过大 | 中 | 限制单张 ≤ 500KB，画像区用 WebP，生活区可用 Unsplash CDN |
| Safari 启动画面动画卡顿 | 低 | 实测 iOS 15+ 流畅，更低版本降级为静态封面 |
| EdgeOne Pages 服务变更 | 低 | 纯静态文件可迁移到任何托管平台（GitHub Pages/Netlify/Vercel），零锁定 |

### 12.2 产品风险

| 风险 | 等级 | 应对措施 |
|------|------|---------|
| 用户不理解如何改 JSON / 换图片 | 高 | 输出详细使用手册，走一步截一张图；未来考虑加一个极简的在线编辑页 |
| 目标用户群体太小 | 低 | 不仅面向求职者，内容创作者、自由职业者等也需要个人主页 |
| 视觉风格独特但可能「劝退」保守的 HR | 中 | 提供「亮色主题」作为默认主题，视觉上更接近普通白底页面 |

### 12.3 外部依赖

| 依赖项 | 类型 | 备选方案 |
|--------|------|---------|
| 腾讯云 EdgeOne Pages | 部署平台 | GitHub Pages / Netlify / Vercel |
| 示例图片素材 | 内容 | Unsplash 免费图库 |
| 用户自有域名 | 可选 | EdgeOne 提供免费子域名 |

---

## 十三、附录

### 13.1 核心概念解释

| 术语 | 说明 |
|------|------|
| **纯静态站点** | 不依赖后端服务器、数据库、API 的网站，所有文件直接放在文件服务器上 |
| **数据驱动** | 页面展示内容由 JSON 数据文件控制，修改数据不碰代码 |
| **双主题** | 同一套 HTML/CSS 支持暗色和亮色两套配色方案 |
| **灯箱（Lightbox）** | 点击图片后全屏展开查看的交互模式 |
| **瀑布流** | 图片像瀑布一样按列排列，每列高度不同，视觉上错落有致 |
| **时间线（Timeline）** | 按时间顺序纵向排列的信息展示方式 |

### 13.2 文件清单

最终部署包仅含 4 个核心文件 + 1 个资源目录：

```
deploy/                       ← 上传到 EdgeOne Pages 的最终产物
├── index.html                （页面结构）
├── styles.css                （全部样式）
├── app.js                    （全部交互逻辑）
└── data.json                 （用户可编辑的内容数据）
├── avatar.jpg                （头像）
└── assets/                   （图片、视频、可下载文件）
```

### 13.3 内容更新流程（非技术用户操作指南摘要）

1. 打开 `data.json`，修改姓名、经历、技能等文字内容
2. 把 `assets/` 里的图片替换为自己的图片（保持文件名不变 or 更新 JSON 中的路径）
3. 把整个 `deploy/` 文件夹重新拖到 EdgeOne Pages 控制台
4. 等待几秒刷新即生效

---

> **文档状态：已交付**  
> **相关文档**：《飞书文档-从零构建个人品牌简历站》（开发复盘）  
> **在线演示**：（部署后填写域名）