# 从零构建个人品牌简历站 — 完整复盘文档

> 适用人群：不会写代码，但想拥有一个专属个人简历网站的人
> 核心工具：CodeBuddy（AI 编程助手）+ 腾讯云（域名 + EdgeOne Pages 部署）
> 最终成果：一个纯前端、数据驱动的个人品牌展示站，改 JSON 即可换内容

---

## 一、起点：一个想法 + 一段对话

### 1.1 缘起

我在网上看到别人用 AI 做网站的视频，觉得很有意思。但我完全不会写代码，连 HTML 是什么都不太清楚。于是我用了一个最笨但最有效的方法：**先找 ChatGPT / DeepSeek 帮我生成一个"需求描述"**。

我的第一句话大概是这样的：

> "帮我写一个个人简历网站的前端开发需求文档，要包含首页、作品展示、生活照片、认知能力这几个模块，风格要极简专业，数据要从 JSON 文件读取。"

### 1.1.1 DeepSeek 对话截图

> **（飞书文档粘贴时，请手动上传图片）**
> 
> 图片位置：`d:\CodeBuddy\resume-project\assets\deepseek-chat.png`
> 
> 完整 DeepSeek 对话链接：https://chat.deepseek.com/share/iaengopymgal566anp
> 
> 对话内容摘要：
> - 我提出想做一个个性化的简历网站，分模块展示
> - DeepSeek 先进行了搜索调研（搜索了 17 个网页，浏览了 7 个页面）
> - 给我拆解了**需求框架**：首页（让 HR 一目了然）+ 次级页面（让感兴趣的人深入了解）
> - 给出**技术方案建议**：推荐了 DevFolio、Reactive Resume、Astrofy 等开源项目
> - 最终输出了一份完整的开发规格说明文档

> 截图预览：
> ![与 DeepSeek 的对话](assets/deepseek-chat.png)

DeepSeek 给我输出了一份详细的规格说明。我就拿着这份说明，打开了 CodeBuddy。

### 1.2 第一轮：生成基础框架

我把需求粘贴给 CodeBuddy，它一次性生成了四个文件：

| 文件 | 作用 |
|------|------|
| `index.html` | 页面结构 |
| `styles.css` | 所有样式和配色 |
| `app.js` | 交互逻辑和动画 |
| `data.json` | 所有个人数据 |

第一版大概是这样：

- 深色背景 + 半透明卡片
- 顶部导航栏，四个 Tab 切换
- 简历页（头像、教育、工作、技能标签云）
- 内容创作页（作品卡片网格）
- 生活瞬间页（照片瀑布流）
- 认知档案页（荣格八维 + IQ 卡片）

**可以直接在浏览器里打开了**，但还比较简陋。

### 1.3 核心迭代过程

接下来就是我和 CodeBuddy 反复对话的过程。每一轮我只提一个具体需求，它改，我预览，不满意再说。以下是最关键的迭代节点：

#### 迭代 1：配色和氛围

> "这个配色太普通了，能不能做成 EVA / 赛博朋克风格的？暗紫色 + 橙色点缀？"

CodeBuddy 引入了 CSS 变量体系，暗色和亮色两套配色全部通过 `:root` 变量控制。后来我又加上了亮色/暗色一键切换功能，偏好用 localStorage 记住。

#### 迭代 2：启动画面

> "能不能加一个开屏动画？圆形头像 + 呼吸光晕 + 名字标签 + 进度条，2-3 秒后消失。"

CodeBuddy 生成了一段 CSS 动画 `@keyframes ringGlow` 和 `splashIn`，头像外面套了一个 `conic-gradient` 光晕圈，签名文字有呼吸发光效果，底部进度条自动填满。

#### 迭代 3：星空粒子背景

> "背景太空了，能不能加一个 Canvas 星空粒子？"

100 个随机点，多色渐变光晕，缓动漂浮。切换日夜模式时透明度自动变化。

#### 迭代 4：打字机效果

> "首屏的大标题能不能逐字打出来？像打字机一样。"

`setTimeout` 递归逐字填充 `textContent`，打完后光标消失，标题触发 CSS `glow-in` 辉光动画。

#### 迭代 5：滚动渐入动画

> "每个板块滚动到的时候能不能有一个渐入效果？"

用 `IntersectionObserver` 监听元素进入视口，触发 `transform: translateY` + `opacity` 过渡，卡片之间还有交错延迟，看起来像卷轴铺展。

#### 迭代 6：翻转卡片

> "作品展示能不能做成翻卡？正面是封面图，背面是详细介绍。"

CSS 3D `transform: rotateY(180deg)` + `backface-visibility: hidden`，hover 翻转预览，点击锁定翻转状态。

#### 迭代 7：自适应拼图布局

> "兴趣爱好那块，能不能做成 Pinterest 那种拼图？但图片不要裁切。"

JS 读取每张图片的原始宽高比（`new Image()`），按行计算总比例，等比缩放到填满容器宽度。这是一个比较棘手的算法，但 CodeBuddy 一轮就做出来了。

#### 迭代 8：瀑布流 + 灯箱

> "生活展示改成多列瀑布流，点击图片弹出灯箱，支持左右箭头和触屏滑动。"

瀑布流用纯 CSS `columns` 实现（不需要 JS 计算）。灯箱是固定全屏浮层，支持键盘方向键、触屏滑动切换，视频也能播。

#### 迭代 9：响应式适配

> "手机端打开太宽了，能不能自适应？"

`@media (max-width: 768px)` 断点，桌面双栏 → 手机单栏，导航栏收缩，瀑布流改为 1-2 列。全部用 CSS 媒体查询完成。

#### 迭代 10：数据和展示分离

> "如果我以后想给别人用这个模板，怎么让他们只改内容不动代码？"

把所有硬编码的文字全部移到 `data.json`，JS 用 `renderAll()` 统一渲染。`app.js` 内置了一份内联 JSON 作为 `file://` 协议下的降级方案。

---

## 二、最终提示词模板

以下是经过数十轮迭代后沉淀下来的**通用构建提示词**。你可以直接复制，发给任何 AI 编程工具（CodeBuddy、Cursor、Windsurf 等）来生成你自己的版本：

```text
请帮我构建一个纯前端的个人品牌展示/简历站点。以下是技术要求：

## 技术约束
- 纯 HTML + CSS + 原生 JavaScript，零框架依赖
- 所有个人数据集中存储在 data.json，页面代码不硬编码个人信息
- 兼容 file:// 协议直接打开（内联 JSON 作为降级方案）
- 响应式适配：桌面端双栏布局，768px 以下自动收为单栏
- 支持双主题切换（暗色/亮色），偏好通过 localStorage 记住

## 页面结构

### 1. 启动画面（首次加载自动播放，2-3秒后淡出消失）
- 圆形头像（带呼吸光晕动画）
- 名字 + 身份标签行（用 · 分隔）
- 一句个人签名/格言
- 底部进度条

### 2. 固定顶部导航栏（启动画面消失后出现）
- 左侧 LOGO/名称
- 中间 5 个锚点导航链接
- 右侧主题切换按钮
- 滚动到对应区块时导航自动高亮，各区用不同颜色标记

### 3. 桌面端左侧固定侧边栏（移动端收为顶部折叠栏）
- 头像、姓名、身份标签
- 联系方式列表（图标 + 文字）
- 基本信息表（键值对，如生日、所在地等）

### 4. 右侧主内容区（5个板块）

**板块一：首页（简历）**
- 大字标语（逐字打字机动画，完成后加发光效果）
- 教育经历卡片（时间线）
- 工作/实习经历卡片
- 实践经历卡片
- 技能标签云
- 证书列表

**板块二：作品展示**
- 作品卡片网格（封面图 + 标题 + 互动数据）
- 项目详情翻转卡（正面简介 + 背面功能列表，hover/点击翻转）
- 部分卡片可嵌入视频 + 下载按钮

**板块三：个人特质**
- 优势卡片横向列表
- 荣格八维认知功能（图片 + 文字说明）
- IQ 测试结果展示

**板块四：兴趣爱好**
- 顶部分类标签筛选栏
- 自适应拼图布局：JS 读取图片原始宽高比，按行填满容器不裁切

**板块五：生活展示**
- CSS columns 瀑布流（桌面3列、平板2列、手机1列）
- 点击进灯箱（图片/视频，左右箭头+键盘方向键+触屏滑动）

## 特色功能
- Canvas 粒子/星空背景，跟随主题切换透明度
- 打字机首屏标语
- IntersectionObserver 滚动渐入动画
- CSS 3D 翻转卡
- 自适应拼图（不裁切图片）
- CSS columns 瀑布流
- 全屏灯箱（键盘+触屏导航）
- 日夜模式一键切换

## 数据文件（data.json）
结构：name / title / avatar / bio / contact / education / experience / skills / certifications / advantages / cognition / interests / works / photos
所有文字和图片路径集中在这里，改它就能换内容。

---

请生成完整的 index.html、styles.css、app.js、data.json 四个文件。
配色风格请根据「[在此填入你的主题描述]」来设计。
```

### 使用方式

1. 复制上面这段提示词
2. 把最后一行 `[在此填入你的主题描述]` 替换成你想要的风格（如"极简白领风""赛博朋克""日系清新""暗黑科技"）
3. 发给 AI 编程工具
4. 拿到代码后，修改 `data.json` 里的个人信息和图片路径
5. 预览 → 满意 → 部署上线

---

## 三、域名购买与部署上线

### 3.1 购买域名

**在哪买**：百度搜索"购买域名" → 点击腾讯云域名注册（阿里云也可以，操作类似）

**步骤**：
1. 进入腾讯云域名注册页面
2. 搜索你想要的域名（比如 `yourname.com` / `yourname.cn` / `yourname.top`）
3. 选一个可用的，加入购物车
4. 付款（首年一般几十块到一百多不等，.top 等后缀更便宜）
5. 完成实名认证（国内域名必须实名，按指引上传身份证即可）

**不需要 ICP 备案**：因为后面用的是腾讯云 EdgeOne Pages 的全球加速服务，域名可以直接绑定，不需要走传统备案流程。

### 3.2 部署到腾讯云 EdgeOne Pages

> EdgeOne Pages 是腾讯云的静态网站托管服务，支持全球 CDN 加速 + 免费 HTTPS 证书 + 自定义域名绑定。

**最终部署包结构**：

CodeBuddy 最终生成的项目是一个完整的文件夹，可以直接上传部署。把 demo-share 里网站实际用到的文件整理到 `deploy/` 目录，去掉所有没用到的测试图和冗余文件：

```
deploy/
├── index.html        # 主页面
├── styles.css        # 样式文件
├── app.js            # 逻辑文件
├── data.json         # 数据文件（改这个就能换内容）
├── avatar.jpg        # 头像
└── assets/           # 图片/视频资源目录
    ├── *.jpg         # 作品、生活照片
    ├── *.png         # 认知测试图等
    ├── *.mp4         # 演示视频
    └── game/         # 可下载游戏文件
```

**步骤**：

1. 登录腾讯云控制台，搜索"EdgeOne Pages"
2. 进入 EdgeOne Pages 控制台，点击「创建站点」
3. 选择「文件夹上传」→ **直接把整个 `deploy/` 文件夹拖拽上传**（EdgeOne Pages 会自动解析目录结构，无需手动打包成 zip）
4. 上传后 EdgeOne 会自动分配一个 `xxx.edgeonepages.com` 的临时域名，并完成部署
5. 在站点设置中 →「自定义域名」→ 添加你购买的域名
6. 到腾讯云 DNS 解析（DNSPod）中，添加一条 CNAME 记录，将你的域名指向 EdgeOne 分配的那个临时域名
7. 等待 2-10 分钟，DNS 生效后，你的域名就能访问你的网站了

**关键操作**：上传时选「文件夹」，不是「文件」也不是「zip」，EdgeOne Pages 会自动识别 `index.html` 作为入口。资产路径（`assets/`）保持原样即可，不需要改任何路径。

**优势总结**：
- 无需服务器，纯静态托管
- 文件夹直传，零配置，腾讯云自动解析部署
- 自动 HTTPS（免费 SSL 证书）
- 全球 CDN 加速，国内外访问都快
- 不需要 ICP 备案即可绑定域名
- 免费额度足够个人站点使用

### 3.3 如果不想买域名

也可以直接用 EdgeOne Pages 分配的那个 `xxx.edgeonepages.com` 链接访问，不需要任何花费。

---

## 四、核心关键词总结

以下是整个项目中最关键的"魔法词汇"，在后续的对话迭代中反复用到了这些：

| 分类 | 关键词 |
|------|--------|
| **架构** | 纯前端、零框架、数据驱动、CSS 变量体系、响应式双栏 |
| **动画** | Canvas 粒子、打字机效果、IntersectionObserver 滚动渐入、CSS 3D 翻转卡 |
| **布局** | CSS columns 瀑布流、自适应拼图（JS 宽高比计算）、Flexbox 卡片网格 |
| **交互** | 灯箱（键盘导航+触屏滑动）、日夜模式切换、localStorage 持久化、启动画面 |
| **数据** | data.json 数据分离、内联 JSON 降级、renderAll 统一渲染 |
| **部署** | EdgeOne Pages 静态托管、腾讯云域名、CNAME 解析、全球 CDN |

---

## 五、踩过的坑 & 经验总结

### 5.1 不要一次性提太多需求

刚开始我犯了一个错误：把一大堆效果（星空、打字机、翻转卡、灯箱、瀑布流……）一次性告诉 AI，结果生成的代码各种冲突，Bug 找不到源头。后来学乖了，**每次只提一个具体需求**，确认没问题后再提下一个。

### 5.2 图片路径是坑王

`file://` 协议下 `fetch('data.json')` 在某些浏览器上会失败。解决方案是在 `app.js` 里内嵌一份 JSON 数据作为降级。图片加载失败也要有占位图，不然页面会很难看。

### 5.3 手机端一定要早测试

我一开始只在桌面端调试，后来在手机上打开才发现导航栏太挤、瀑布流 3 列变成 1 列后顺序不对。建议每改一版就用浏览器的设备模拟器看一眼。

### 5.4 数据和代码分离是灵魂

整个项目最有价值的设计就是：**改 JSON 就能换人**。这意味着模板可以给任何人用——换头像、换名字、换经历、换图片路径，HTML/JS/CSS 一行不动。

---

## 六、成品展示

### 页面截图速览

| 页面 | 内容 |
|------|------|
| 启动画面 | 圆形头像 + 呼吸光晕 + 名字 + 身份标签 + 签名 + 进度条 |
| 主页（简历） | 打字机标题 + 教育经历 + 工作实习 + 技能标签云 + 证书 |
| 作品展示 | 抖音风格卡片 + 翻转项目卡 + 视频嵌入 |
| 个人特质 | 优势卡片 + 荣格八维 + IQ 测试结果 |
| 兴趣爱好 | 分类标签筛选 + 自适应拼图（不裁切） |
| 生活展示 | CSS 三列瀑布流 + 点击灯箱（键盘/触屏导航） |

### 技术亮点

- 零依赖：纯 HTML + CSS + 原生 JS，加载速度极快
- 双主题：CSS 变量一键换肤，偏好自动记住
- 响应式：桌面双栏 → 768px 以下单栏，手机体验完整
- 数据驱动：JSON 改内容，代码不动，模板复用性满分
- 全域访问：EdgeOne Pages 全球 CDN 加速 + 自定义域名

---

## 七、附录：文件清单

以下就是最终上传到 EdgeOne Pages 的完整文件夹内容：

```
deploy/                          # ← 直接把这个文件夹拖拽到 EdgeOne Pages 即可
├── index.html                   # 主页面
├── styles.css                   # 样式文件
├── app.js                       # 逻辑文件
├── data.json                    # 数据文件（改这个就能换人）
├── avatar.jpg                   # 头像
└── assets/                      # 图片/视频资源目录
    ├── eva-rooftop.jpg          # 背景大图
    ├── avatar_shinji.jpg        # 开屏头像
    ├── jung.png                 # 荣格八维认知功能
    ├── iq.png                   # IQ 测试结果
    ├── screenshot-10w.png       # 抖音作品截图
    ├── game-demo.mp4            # 游戏演示视频
    ├── deepseek-chat.png        # DeepSeek 对话截图（用于文档配图）
    ├── *.jpg / *.png            # 34 张作品 & 生活照片
    └── game/                    # 游戏下载文件
        ├── 坤蛋传说.exe
        └── kun-basketball.py
```

> 之前 demo-share 里混了 55 个网站没引用到的文件（测试图、备用视频等），CodeBuddy 帮你自动扫描引用、剔除干净，最终 deploy 只剩 52 个文件，一个不多一个不少。

---

> **一句话总结**：一个不会写代码的人，用 CodeBuddy 和 AI 一轮一轮对话，从想法到上线，做出了一个能在全球访问的个人简历网站。你也能。