个人简历 / 作品集单页设计

概述

把一份个人简历（或艺人/演员/设计师的介绍资料）做成一页式、可滚动的响应式网页。视觉基因来自 W3Layouts 的 Professional CV 商业模板（模板王收录号 16160），并经现代化改造：去掉 jQuery/Bootstrap 依赖，用纯 CSS 渐变替代图片背景，用原生 API 替代插件。

目标是产出单个自包含 HTML 文件（内联 CSS/JS，可直接双击打开、可直接落到静态托管），而不是需要构建工具的工程。

何时使用

• "帮我做个个人简历网页 / 个人主页 / 作品集"
• "把这份简介（doc/txt）做成网页"
• "要那种简历模板的配色和排版"
• "我想改这个简历模板的颜色/内容/结构"

不适用：需要 CMS/后台/多页路由的企业站；需要真实表单后端的系统（本框架的表单只做前端提示）。

核心设计特征（必须保留的 DNA）

按重要性排序，这七条决定了"像不像"这套风格：

1. 单页纵向叙事 + 锚点导航。区块顺序固定为：Hero 轮播 → 关于我 → 我的服务/领域 → 技能 → 作品集 → 数据统计 → 经历时间线 → 联系 → 页脚。不要打乱——这是模板的骨架。
2. 明暗交替的节奏。白底区块与深色区块交替出现，形成呼吸感：Hero(深) → 关于(白) → 服务(深) → 技能(浅灰) → 作品(白) → 统计(深) → 经历(白) → 联系(近黑) → 页脚(纯黑)。
3. 双色强调系统。主色珊瑚红 #ff6c5f 负责"人"的部分（姓名、小标题、进度条、时间线圆点）；次色青蓝系 #00bce4 / #1cc7d0 负责"技术/交互"的部分（Hero 关键词、图标、链接、返回顶部、表单焦点）。图标区允许一组高饱和糖果色做点缀。
4. 超大号区块标题。每个区块一个 h3.text-center，桌面 40px，字母间距 2px，capitalize；深色区块上标题翻白。它是区块之间的视觉分隔符。
5. 全大写字距排版。Montserrat 走标题、Open Sans 走正文；副标题/按钮/小标签一律 uppercase + letter-spacing: 1~2px。中文场景把 letter-spacing 降到 0.5px 左右，避免字距过散。
6. 幽灵按钮双态反转。所有按钮（Hire Me / Contact Me / Know more / Send Message）都是 2px 描边 + 直角（border-radius: 0），hover 时描边填充、文字反色。这是模板最容易被识别的交互细节。
7. 入场即动的量感。进度条要"长出来"、环形仪表要"转上去"、数字要动，并且由滚动进入视口触发——静态截图看不出味道，动起来才像。

排版与节奏规范

桌面区块内边距      6em 0        (平板 5em → 移动 4em → 小屏 3em)
容器               max-width 1170px, padding 0 15px
栅格               col-md-* 12 栅格，992px 以上生效，以下塌成 100%
区块标题           40px / margin-bottom 1.5em / 深底翻白
Hero 主标题        3em, weight 300, 关键词 span 加粗 700 且着色
Hero 底部留白      margin: 18em 0 14em（靠留白而不是靠高度撑出"大"）
正文               14–15px / line-height 28px / letter-spacing .5px

Hero 的"高"是靠上下巨大 margin 挤出来的，不是 100vh。这是模板的原始手法，保留它——同时这也意味着移动端必须同步收缩这些 margin（见下）。

动态效果清单

详细实现（可直接复制的代码片段）见 references/effects-cookbook.md。需要落地的一共九项：

红线：所有动效必须包在 @media (prefers-reduced-motion: reduce) 的关闭规则里。

响应式断点

模板自带的断点颗粒度很细，保留这套粒度：1440 / 1366 / 1280 / 1080 / 1024 / 991 / 800 / 768 / 736 / 667 / 640 / 600 / 568 / 480 / 414 / 384 / 320。

只需记住四个关键台阶：

• ≤1440：Hero 上下留白开始收缩（18em/14em → 15em/13em）。
• ≤1080：区块内边距降一级，Hero 标题 3em → 2.5em。
• ≤991：栅格塌陷点——col-md-* 全部 100%。作品集 4 列 → 3 列，统计 4 列 → 2 列，技能双栏 → 单栏。
• ≤768 / ≤640：Hero 标题降到 2.2em，区块内边距 3.5em→3em，页脚左右栏改为居中堆叠。
• ≤480：作品集 → 1 列，关闭图片 hover 放大（触屏无 hover 语义）。

工作流程

1. 先确定内容源

如果用户给了 doc/docx/txt/纯文本，先抽取为结构化字段：姓名、一句话身份、联系方式、社交账号、技能条目+百分比、作品列表（年份/标题/角色或一句话说明）、经历时间线（时间/职位/描述）、统计项（标签+数值）。不要在没拿到真实内容时用 lorem ipsum 交付。

2. 起步用资产模板，不要从零写

复制 assets/onepage-template.html 到工作目录，然后只做替换。这个文件是完整可运行的单文件实现，包含全部九个动效、全部断点和全部区块结构。

替换清单（按出现顺序）：

• <title> / <meta keywords|description> / <html lang>
• .logo a 里的姓名与强调词
• Hero 三个轮播项的主标题、副文案、两个按钮
• #about 的字段表（ul.address）与自我介绍两段
• #services 的六张图标卡片（图标用 FontAwesome 字符码，见 cookbook）
• #skills 左侧百分比条与右侧六个爱好/标签圆图标
• #gallery 的 works[] 数组（年份 / 标题 / 角色 / 主题色 / 简介）
• #stats 的 gauges[] 数组（值 / 颜色）
• #experience 的时间线条目
• #contact 的联系方式与表单文案
• 页脚版权

3. 换配色时只改两处

主色与次色是全局变量语义，但模板里是硬编码的。要换色就全局替换：

#ff6c5f  → 主色（人）      #1cc7d0 / #00bce4 → 次色（技术/交互）

深色区块底色族：#0d1216 / #161e24 / #0c1014 / #171717 / #000。浅色区块：#fff / #fafafa / #f3f3f3。
不要只换主色而不换对应的深色渐变 radial-gradient 里的同色 rgba——那样会"跑色"。

4. 图片处理

原模板依赖外部大图（bg.jpg / about.jpg / services.jpg / skills.jpg）。现代化版本已全部替换为 CSS 多层渐变 + 2px 点阵噪点纹理，好处是零依赖、加载快、色彩可控。优先沿用渐变方案；用户坚持要照片时，用 background-image: linear-gradient(遮罩), url(...) 叠一层暗色遮罩，保证白字可读。

作品集缩略图同理——模板的 .poster 是纯 CSS 画的"海报占位卡"（径向渐变光晕 + 底部暗渐变 + 年份/标题/角色/分隔线），每个卡片通过 --pc 自定义属性拿自己的主题色。有真实海报图时再换成 <img>。

5. 自检

交付前逐条确认：

• [ ] 单文件可双击打开，无外部 CDN 依赖（字体走 Google Fonts 或系统字体栈均可接受）
• [ ] 明暗区块交替节奏未被打乱
• [ ] 所有按钮为 2px 描边 + 直角 + hover 反色
• [ ] 进度条 / 仪表 / 滚动淡入均由 IntersectionObserver 触发，且只触发一次
• [ ] prefers-reduced-motion 下动效全部关闭
• [ ] 991px 断点处栅格正确塌陷，无横向溢出（body { overflow-x: hidden }）
• [ ] 480px 下作品集单列、hover 放大已禁用
• [ ] 表单占位符颜色为半透明白，聚焦有青色描边反馈

资源

• assets/onepage-template.html —— 完整可运行的单文件模板（无依赖、含全部区块与动效）。起步直接复制它。
• references/design-system.md —— 完整设计令牌：色板、字号阶梯、间距、区块规格、组件类名对照表。
• references/effects-cookbook.md —— 九个动效的可复制代码片段 + 常见坑（含中文排版适配、Canvas 仪表实现、无 hover 设备的降级）。