# 苏予安 · 产品设计师 · 简历与作品集

> 活页公开模板 `sample-resume` · 场景: 招生 · 招聘 · 落地页 · 行业: 个人家庭 / 科技互联网
> 任何人、任何 Agent 都可以读、照着改，不需要账号。示例内容均为虚构。
> 真页面: https://space.24haowan.com/s/jzjsd4C2pEyU · 详情: https://space.24haowan.com/examples/sample-resume

## 这是什么

在线简历 · 求职时发给 HR 和内推人的一页简历加作品集

## 什么时候用

个人求职：把简历和作品集做成一个链接发给 HR、猎头或内推人，对方手机上 30 秒看懂你是谁、电脑上能细看项目，还能在页末留联系方式约面试，选它。公司招人、发岗位让大家投递或内推，选 sample-job-post；接单的自由职业者介绍服务和报价，选 service-landing；只想记录作品、不求职，用 sample-growth-album 改。

## 用户对助手说的原话

帮我把简历做成一页在线简历加作品集，发成一个链接给 HR 和内推人：首屏是名片——名字、一句话说我是做什么的、三个硬指标数字（打开时从 0 数上去），再列求职意向、方向、城市、期望薪资和最快到岗日期，放一个「保存为 PDF」按钮（调浏览器打印，打印样式把简历排成 A4 一到两页、隐藏表单和开关）和「约我聊聊」按钮；名片下方一个显眼的「HR 看这里：30 秒版」开关，打开后整页压成一屏：顶上出五行摘要（是谁、最好成绩、擅长、想找、到岗），经历只留一行成绩、作品只留标题；接着是竖向时间轴的经历，从最近往前写，滚动时那根线跟着描下来、经过的节点亮起，每段写公司、职位、时长、一句代表成绩，点「项目细节」展开情境、任务、行动、结果四行；然后是能力：一张六维雷达（自评满分 5）和一张研究量条形图，都用内联矢量画；再是 4 张作品卡片，示意图用内联矢量现画，点开看大图和一段说明；最后「约我聊聊」表单（公司、职位、称呼、联系方式、方便时间）存进一张数据表，提示留言只有我本人看得到，页面只显示已有几位 HR 留言。电脑上左栏名片固定、右栏时间轴和其余内容滚动；手机上名片就是首屏，滚下去后右上角浮出小开关。以后换意向、补作品都更新同一个链接。

如果你还没有活页连接器（MCP），先读 https://space.24haowan.com/for-agents.md ，照里面的说明接入，或不登录直接发布。

## 照着做一份

1. 读入口文件 https://space.24haowan.com/examples/sample-resume/source/index.html（它引用的其他文件见下方列表）。
2. 保留结构、版式和交互，把内容**全部**换成用户自己的；模板里的公司、人名、数字都是虚构的，一样都别留。
3. 交付一个自包含的单文件 HTML：样式写在页面里，不引外部字体 / 脚本 / CDN；手机 375 宽和电脑 1440 宽都要好看，模板有暗色就保留暗色。
4. 要发成微信里能打开、改了链接不变的网页：接入活页（https://space.24haowan.com/for-agents.md）后发布；没有账号也可以让用户在 https://space.24haowan.com/quick 上传这个文件。
5. 没有活页工具、但能发 HTTPS 请求：把做好的 HTML 以 Content-Type: text/html POST 到 https://space.24haowan.com/api/quick?client=template-sample-resume ，返回预览链接、7 天分享与认领链接（登录后保留、链接不变）。

## 页面结构

- 名片
- 经历
- 能力
- 作品
- 约我聊聊

## 文件（公开，纯文本）

- https://space.24haowan.com/examples/sample-resume/source/index.html（入口）

## 发成活页之后还能做的

- 「HR 30 秒版」开关：一键把全页压成一屏能读完的精简版；链接末尾加 #hr 发出去，对方打开就是精简版
- 经历时间轴随滚动描线、节点依次亮起，每段点开看 STAR 式项目细节（<details>，不跑脚本也能展开）
- 页末「约我聊聊」原生表单写回数据表 contact（POST ./_data/contact），页面读回只数有几位 HR 留言、认出自己留过的那一行，不显示任何人的内容
- 「保存为 PDF」调浏览器打印，打印样式排成 A4 一到两页（项目细节自动展开，开关、表单、图表不打印）
- 同一个链接一直有效：换工作意向、补新作品都更新这一页；阅读回执看 HR 停在哪一节（经历、作品还是留言）

## 发之前要备好

- 数据表 contact（列 company / role / name / contact / time，append_open=true）：页末「约我聊聊」写进这里，发布前先用 set_data 建好，用 list_data_rows 读回；找到工作后把 append_open 关掉
- 联系方式类数据：页面本身只显示留言人数，但能打开这一页的人技术上读得到已过审的行；介意就把页面设成口令可看（set_visibility passcode），口令随链接一起发给 HR

## 模板说明（README）

一位 5 年经验的产品设计师「苏予安」的一页在线简历 + 作品集。人名、公司、学校、项目与数字均为虚构。

## 演示哪个特色

**「HR 30 秒版」一键切换 + 时间轴滚动描线 + 页内留言写回数据表。**

- 名片下方的开关（`#hr`，`role="switch"`）给 `<html>` 加上 `brief`：顶上出五行摘要（`.digest`），带 `.full` 的东西（能力一节、项目细节、作品示意图与说明）全部收起。
  链接末尾加 `#hr` 发出去，对方打开就是 30 秒版；手机上名片滚出首屏后右上角浮出一个小开关（`.fhr`）。
- 经历时间轴（`.tlw`）随滚动描线：脚本把「视口 60% 那条线」扫过的比例写进 `--p`，`.tl-fill` 按它缩放，经过的节点亮起，线刚走到的那个节点标成金色（`li.cur`）。
  不跑脚本或 `prefers-reduced-motion` 时整根线是描好的终态；项目细节用原生 `<details>`，不跑脚本也能展开。
- 页末「约我聊聊」是原生表单 `<form method="post" action="./_data/contact">`：不跑脚本也能提交；脚本在时页内提交、就地显示「收到了」。
  页面读 `./_data/contact.json` **只数行数**、认出 `_mine` 那一行（「你在 10 月 30 日 20:14 留过言了」），任何人的公司、称呼、联系方式都不显示。
- 发出去之后：同一个链接一直有效，换意向、补作品都更新这一页；阅读回执能看到 HR 停在哪一节（`data-track-section`：名片 / 经历 / 能力 / 作品 / 约我聊聊）。
- 没有外链、没有位图：头像是字母标、作品示意图与图表都是内联 SVG。

## 改哪里变成我的

| 位置 | 改什么 |
|---|---|
| 名片 `#profile` | 名字、拼音、一句定位（`.pitch`，蓝字是最想让人记住的那半句）、更新日期、微信号 |
| 三个数 `.kpi` | 每格一个 `<span class="num" data-to="…">`：`data-to` 与里面的数字同改（计数动画从 0 数到 `data-to`）；单位写在 `<small>` |
| 求职意向 `.want` | 想找 / 方向 / 城市 / 期望 / 到岗；最快到岗日期用 `.soon` 标金色，日期和星期自己核一遍 |
| 30 秒版 `.digest` | 五行摘要：是谁、最好成绩、擅长、想找、到岗 —— 和名片、时间轴里的数字保持一致 |
| 时间轴 `.tl` | 每段一个 `<li>`：`.when` 起止与时长、`h3` 公司 · 职位、`.org` 一句背景、`.win` 代表成绩（`<em>` 蓝字）、`details.star` 里 S / T / A / R 四行；教育经历加 `class="edu"`（方形节点） |
| 能力 `#skills` | 两套 SVG：电脑 `.chart.wide`（雷达 + 条形一张图）、手机 `.chart.narrow`（雷达、条形各一张），坐标各算各的。雷达六个顶点 = 圆心 + 半径 × 分值 / 5（电脑圆心 150,150 半径 100；手机 171.5,150 半径 96），改分值要两套都改、`aria-label` 同步 |
| 作品 `.works` | 每张 `<button class="work" data-i="N">`：一段内联 SVG 示意图 + 年份 / 标题 / 一句话；大图里那段长说明在脚本的 `DESC[N]`。示意图配色用 `.m-*` 类，暗色自动跟 |
| 留言 `form.ask` | 字段名就是表的列名（`company` / `role` / `name` / `contact` / `time`）；「方便的时间」的选项按自己的作息改 |
| 「保存为 PDF」 | 按钮调 `window.print()`，`@media print` + `@page{size:A4}` 把简历排成 A4 一到两页：名片、经历（项目细节全部展开）、技能清单、作品标题；开关、表单、图表、页脚都不打印。改版式看样式表末尾那段 `@media print`。微信内置浏览器不支持打印，按钮会提示「在浏览器打开」。想直接给一份现成文件：把 `resume.pdf` 放进包、`manifest.json` 写 `"downloads": ["resume.pdf"]`，按钮换成 `<a class="btn" data-space="download:resume.pdf" href="resume.pdf">下载 PDF</a>` |
| 配色 | `:root` 里的变量；暗色在 `@media (prefers-color-scheme:dark)` 与 `:root[data-theme="dark"]` 两处，同改 |
| 页脚 | 平台标志与名称（与 `core/space/src/theme.ts` 的 `MARK_SVG` / `PUBLIC_NAME` 逐字一致）+ 一句场景；发自己的简历时整段删掉 |
| `manifest.json` | `title` / `share.title` / `share.desc`（微信卡片上的字：名字 · 职位 + 一个最硬的数 + 到岗时间）；节增减时 `sections` 与页里的 `id` / `data-track-section` 三处同改 |

## 数据表

页末留言写进 `contact`（列 `company` / `role` / `name` / `contact` / `time`，一次提交一行，`append_open=true`）。发布前先建表：

```
set_data  proposal_id: <id>  table: "contact"  columns: ["company","role","name","contact","time"]  rows: []  append_open: true  revision: 0
```

用 `list_data_rows table=contact` 读回谁约了你。页面只显示人数，但能打开页面的人技术上读得到已过审的行：
介意联系方式外露，就 `set_visibility` 设成口令可看，把口令和链接一起发给 HR。找到工作后把 `append_open` 关掉。
本地 `space-cli serve` 会把提交写进包里的 `_data/contact.json`，试完改回 `[]`。

## 怎么发出去

单文件，最省事的是 MCP `publish_file`（不需要终端）：

```
publish_file
  filename: "index.html"
  content: <index.html 全文>
  title: "苏予安 · 产品设计师 · 简历与作品集"
  manifest: <manifest.json 的内容，去掉 entry>
  hold: true            # 先看预览，确认后 publish_version
```

发给 HR 时可以直接发 `<链接>#hr`（打开就是 30 秒版）。换意向、补作品：再调一次 `publish_file`，传 `proposal_id` 而不是 `title` —— 链接不变。
有终端时也可以 `node core/space/cli/space-cli.mjs push core/space/examples/sample-resume --proposal <proposal_id> --manifest core/space/examples/sample-resume/manifest.json --hold`。

## 素材

- 没有位图：头像字母标、作品示意图、雷达与条形图都是内联 SVG，品牌与人物均为虚构。
- `thumb.webp` / `phone.webp`：由 `examples/verify-shots.mjs --write-thumb --write-phone` 从成品截出，不进发布包。