作品集技能

构建一份让招聘经理、招聘人员或客户在关闭标签页后仍能记住的作品集：一个自信的视觉创意、具体的文案、有理由的动效，以及在打开 DevTools 时经得起推敲的工程实现。

主题因人而异。此文档未固定任何颜色、字体或布局样式。本文中的所有具体数值均为模式的示例，而非要照搬的默认值。

1. 质量标准（完成前逐项检查）

一致的统一艺术指导。 一个命名的概念驱动字体、颜色、布局、动效和文案基调。绝不在一个网站上混合不相关的风格（玻璃拟态 + 霓虹 + 粗野主义 + 渐变）。
真实、具体的内容。 所有陈述均来自用户的简历、代码仓库、个人资料或消息。提供具体数字、技术栈名称、角色、日期。不使用 lorem ipsum，不杜撰指标，不说“热爱编程的充满激情的开发者”。
作品是主角。 优先给 2-4 个最佳项目最多的空间，并最好为其单独设立案例研究页面，其中包含一些交互元素。其余项目放在可扫描、可筛选的索引中。
版式承载设计。 表现力展示字体 + 可读性正文字体 + 可选等宽/实用字体。使用 clamp() 实现流体缩放。Inter、Roboto、Arial 或系统字体栈不应作为展示字体。
动效经过编排，而非随意添加。 一个开场动画、滚动揭示以及 1-2 个标志性时刻。所有效果都遵循 prefers-reduced-motion 并能优雅降级。
处处可用。 从 360px 到超宽屏，键盘可操作，满足 WCAG AA 对比度要求，首次内容绘制快，无需 WebGL 或 JS 动画即可完全阅读。
交付。 零类型错误，生产构建通过，每个路由有元标签/OG 标签，简历链接，可送达的联系方式，部署配置。

2. 工作流程

收集材料。 阅读提供的所有内容：PDF/DOCX 格式简历、现有网站、README 文件、GitHub 数据、笔记。仅索取缺失的必需信息（姓名、角色、目标受众、2-4 个旗舰项目、链接、视觉偏好）。如果未提供偏好，请自行选择一个方向并说明选择和原因。
选择原型和野心级别（第 6A.2 节），使其符合用户和时间线，然后在编写任何 UI 代码之前编写设计简报（第 3 节）。
构建基础（第 5 节）：内容模块、标记、字体、路由器、平滑滚动。
按合理顺序组合页面： 内容 -> 标记/字体 -> 导航/页脚 -> 首屏 -> 旗舰项目 -> 作品索引 -> 关于/能力/时间线 -> 联系方式 -> 案例研究页面 -> 404 页面。然后是动效（第 6 节）。WebGL 和标志性效果最后添加。
验证（第 9 节）在实际浏览器中，大约在 1440px 和 390px 宽度下。绝不要仅凭阅读代码就宣布完成。

如果仓库已使用某个技术栈（Next.js、Astro、SvelteKit、纯 HTML），则保留它。以下所有模式均可平移适配。

3. 艺术指导

3.1 从个人身上提炼主题

思考：谁会看这个，他们应该在 5 秒内感受到什么，这个人的作品是什么样子的？将其映射到一个概念。用户指定的品牌颜色、字体或主题始终优先。

人物 / 信号	示例方向（选择一个，或自行发明）
后端 / 系统 / 基础设施	编辑式纸张 + 墨迹；蓝图/技术图纸；终端粗野主义；带数据可视化点缀的瑞士网格
前端 / 创意开发	大胆的动态排版；WebGL 主导的沉浸式；趣味贴纸/杂志；高对比度单色 + 一种霓虹色
产品 / UX 设计师	宁静的画廊留白空间；温暖的工作室（奶油色、赤陶色、柔和衬线）；案例研究杂志
机器学习 / 研究 / 数据	实验室笔记本（网格纸、等宽注释）；科学期刊；带绘图线条的暗色天文台
移动开发者	以设备为中心的展示；柔软触感表面；带实时手机模拟器的应用商店级精致度
摄影师 / 艺术家	以图像为先的全出血；极简装饰；暗色影院；联系表网格
创始人 / 通才	自信的编辑风格；宣言式排版；以指标为导向的可信度
学生 / 早期职业者	干净、充满活力、诚实；强调项目和学习路径而非职位头衔

避免那些看起来像是 AI 生成的默认样式：白色背景上的紫色到蓝色渐变、通用玻璃拟态卡片、居中的“你好，我是 X” + 挥手表情符号的首屏、三个功能卡片、现成的 3D 斑点。

3.2 设计简报模板（首先编写此项）

概念：       <名称 + 一句意图描述>
受众：       <谁，他们必须带走什么>
调色板：     背景色, 次级背景色, 前景色, 次级前景色, 柔和色, 线条色, 强调色（以及每个项目的强调色，如果使用）
字体：       展示字体 / 正文字体 / 等宽字体（带后备字体），缩放比例
布局语法：   网格、边距、节拍节奏、规则/边框与卡片
动效：       个性（利落/有弹性/缓慢/机械），主要缓动函数，持续时间
标志性效果： 人们会记住的 1-2 个时刻
纹理：       颗粒感 / 网格线 / 无 / 着色器

3.3 标记（结构固定，值随主题变化）

:root {
  /* 调色板：按主题替换值 */
  --bg: #eeeae2;  --bg-2: #e5e0d5;
  --fg: #121210;  --fg-2: #2a2925;
  --muted: #6d695f;
  --line: rgba(18,18,16,.14);
  --accent: #ff4d1c;
  /* 字体角色 */
  --display: 'Instrument Serif', 'Times New Roman', serif;
  --text: 'Geist', 'Helvetica Neue', sans-serif;
  --mono: 'Geist Mono', ui-monospace, monospace;
  /* 节奏 */
  --gutter: clamp(1.1rem, 3.2vw, 2.75rem);
  --ease: cubic-bezier(.16, 1, .3, 1);
  /* 页面级别名，使案例研究页面可以通过覆盖这些值来重新主题 */
  --page-bg: var(--bg); --page-fg: var(--fg); --page-muted: var(--muted);
  --page-line: var(--line); --page-accent: var(--accent);
}

组件仅引用 --page-*。案例研究页面在其 <main> 上设置新的 --page-* 值，整个 UI（按钮、规则、光标、选择）将免费重新主题化。

3.4 排印规则

对比搭配：衬线展示字体 + 怪诞正文字体，或粗重怪诞展示字体 + 等宽字体，或窄体展示字体 + 人文正文字体。通过 Google Fonts 或自托管的 woff2 加载，使用 display=swap 和 preconnect。
使用带有 clamp 的流体缩放，例如 h-xl: clamp(3.6rem, 14.5vw, 15rem)、h-lg: clamp(2.8rem, 8vw, 8.5rem)、h-md: clamp(2.1rem, 5vw, 4.6rem)、lede: clamp(1.05rem, 1.45vw, 1.3rem)。
展示字体：紧凑行高（0.85-0.95）和负字距（-0.02 到 -0.04em）。正文：行高 1.5-1.65，max-width 38-62ch。
元数据使用小号大写等宽字体并略带字距（"（02）精选作品"、"2024 - 至今"）。
在标题中对一个词使用斜体或粗细变化来增加语气（“我会首先展示的那些。”）。
计数器和统计数据使用 font-variant-numeric: tabular-nums。

3.5 布局语法

全出血首屏（min-height: 100svh），内容锚定在左下角或跨越网格布局，而非居中放置。
节标题使用细线规则，左侧带编号等宽标签，右侧带上下文。
优先使用发丝线规则和网格，而非带阴影的卡片（除非概念是触觉/柔软的）。
变化节拍节奏：大型陈述、密集索引、水平卷轴、两列拆分。永远不要连续使用六个相同的节。
一致的 --gutter；节的 padding 为 clamp(5rem, 13vw, 11rem)。

3.6 纹理选项

胶片颗粒（body::after 上的 SVG feTurbulence data-URI，不透明度 0.04-0.08，pointer-events:none）、蓝图网格线、微妙的径向渐变或 WebGL 场。选择一个，不要叠加。

4. 内容策略

4.1 信息架构

首页（单页滚动）：

首屏： 姓名、一句话定位、1-2 句子引导文案、主要行动号召（看作品）+ 次要行动号召（简历/联系方式）、小行元数据（角色、专注领域、地点、可用性）。
陈述 / 关于： 2-4 句以个人口吻写就的句子，以及 3-4 个真实的统计数据（已交付项目数、经验年限、用户数、星星数、学生的话是平均绩点）。
旗舰项目： 2-4 个主打项目，大卡片形式，每个链接到一个案例研究页面。
作品索引： 其他所有项目以行形式呈现（编号、名称、一句话简介、技术栈、年份/链接），可按类型筛选。
能力： 分组的技能（例如后端、移动端、人工智能、工具），仅包含他们能在面试中自证的内容。
路径 / 时间线： 教育背景、职位、重要成就。
联系方式： 大号行动号召标题、电子邮件、表单、社交链接、简历下载。

每个旗舰项目有案例研究页面：带主题的首屏（名称、标语、角色、技术栈、链接）、问题、构建内容、交互式演示（模拟器、游乐场、实时模拟、可悬停架构图）、关键决策/权衡、指标/结果，然后是“下一个项目”交接和联系方式。

404 页面使用相同的语气。

4.2 文案规则

第一人称，平实，具体。以构建了什么以及为何重要开头，然后是具体方法。
好的例子：“连接您自己的 AWS、GCP 和 Azure 账户，它们的免费层级如同一个磁盘。” 差的例子：“一个利用尖端技术的革命性云解决方案。”
禁用的废话：充满激情的、尖端的、利用、无缝的、稳健的、创新的、旅程、深入探究、“我热爱编程”。
每个指标都有来源或省略。绝不捏造。
微观文案有个性但保持清晰（404 页面的“在卷轴中迷失。”，“滚动平移”提示）。

4.3 单一内容模块

所有文案和数据保存在 src/content.ts 中。组件从不硬编码传记文字。

export const PROFILE = { name, role, location, email, github, linkedin, resume: '/resume.pdf', statement };
export type Metric = { value: string; label: string };
export type Flagship = {
  slug: string; path: string; index: string; name: string; kicker: string; tagline: string;
  summary: string; role: string; stack: string[]; metrics: Metric[]; repo: string;
  accent: string; bg: string; fg: string;          // 每个项目的主题
};
export const FLAGSHIPS: Flagship[] = [ /* 2-4 */ ];
export type WorkKind = 'Systems' | 'AI' | 'Mobile' | 'Web'; // 根据个人调整
export const WORKS: { name: string; blurb: string; stack: string[]; kind: WorkKind; year: string; href: string; route?: string }[] = [];
export const CAPABILITIES: { title: string; items: string[] }[] = [];
export const PATH: { when: string; what: string; detail: string }[] = [];
export const STATS: Metric[] = [];

5. 架构

5.1 默认技术栈

Vite + React + TypeScript；使用自定义属性的纯 CSS（如果团队偏好，也允许使用 Tailwind）；gsap + @gsap/react（ScrollTrigger）；lenis 用于平滑滚动；three 仅在方向使用 WebGL 时使用；nodemailer 用于联系方式；部署在 Vercel/Netlify 上。

5.2 结构

index.html                 字体、基础元数据/OG、noscript 回退文本
public/                     favicon.svg, resume.pdf, og-image
src/content.ts             所有文案和数据
src/index.css              标记、字体、布局、组件、响应式、减少动效
src/lib/smooth.ts           Lenis + GSAP 更新器、减少动效标志、滚动速度
src/lib/motion.tsx          useReveals、useHeroIntro、<Split>、useMeta
src/lib/router.tsx          历史记录路由器 + 帷幕过渡 + <Link>
src/components/Chrome.tsx  导航、移动端菜单、光标、预加载器、页脚/联系方式
src/components/Field.tsx   可选的 WebGL 首屏背景
src/components/CaseShell.tsx 共享的案例研究脚手架
src/pages/*.tsx            首页、每个旗舰项目一个页面、404 页面
api/contact.ts             无服务器邮件处理器
vercel.json                单页应用重写

5.3 路由

一个小的历史记录路由器足以用于作品集，并让您掌控过渡效果：

normalizePath（移除尾部斜杠，转为小写）。
navigate(to)：相同路径 + 锚点 -> 平滑滚动到锚点；不同路径 -> 播放帷幕，在覆盖期间切换页面，滚动到顶部，然后揭示。
监听 popstate；每次路由更改后调用 ScrollTrigger.refresh()；在切换后处理待处理的 #hash。
<Link>：外部（http、mailto）渲染为普通锚点，带有 target="_blank" rel="noopener noreferrer"；内部拦截点击，除非按下 metaKey/ctrlKey/shiftKey 或非左键，以便新标签页仍能工作。
Next.js/Astro：使用它们自己的路由器，并在布局/过渡钩子中实现帷幕效果。

5.4 每个路由的搜索引擎优化

useMeta(title, description, themeColor) 在每个路由上更新 document.title、描述、og:*、twitter:*、theme-color 和规范 URL。index.html 包含完整的默认值以及一个 <noscript> 文字摘要。如果可能，添加 summary_large_image Twitter 卡片和 OG 图片。考虑添加 JSON-LD Person 架构。

5.5 联系方式 API（无服务器，`api/contact.ts`）

要求：

仅接受 POST（否则返回 405），Cache-Control: no-store。
蜜罐字段（例如隐藏的 website）：如果填写，返回 200 并丢弃。
修剪并限制每个字段的长度；使用简单的正则表达式验证电子邮件；最小消息长度。
从用于头部/主题的任何内容中移除 \r\n（防头部注入）；对 HTML 正文中的任何内容进行 HTML 转义。
replyTo = 发件人；from = 您的 SMTP 用户。
尽力而为的每个 IP 速率限制（例如，通过内存中的 Map 实现每 10 分钟 3 次，IP 来自 x-forwarded-for）。
如果缺少 SMTP 环境变量，返回 503 并附带友好的“直接给我发邮件”消息；UI 必须显示电子邮件作为后备。
环境变量：SMTP_HOST、SMTP_PORT、SMTP_USER、SMTP_PASS、CONTACT_TO。提供 .env.example。绝不提交机密信息。
前端表单：空闲/发送中/已发送/错误状态，aria-live="polite" 状态，发送时禁用提交按钮，每个输入都有标签。

5.6 部署

Vercel vercel.json：

{ "cleanUrls": true,
  "rewrites": [{ "source": "/((?!api/|assets/|.*\..*).*)", "destination": "/" }] }

Netlify：在 _redirects 中添加 /* /index.html 200。简历存放在 public/resume.pdf；每个简历按钮都链接到它并带有 download。

6. 动效系统

6.1 原则

一个统一的缓动函数（例如 expo.out / cubic-bezier(.16,1,.3,1)），揭示动画持续时间 0.6-1.4 秒，悬停动画 0.3-0.6 秒。
仅对 transform、opacity、clip-path 进行动画。绝不动画化布局属性。
蒙版揭示（文本从 overflow:hidden 的盒子中升起）看起来高级；纯淡入看起来廉价。
编排：首屏介绍等待预加载器/帷幕清除（共享 intro.delay）。
每个效果都受 prefersReducedMotion 媒体查询控制；

portfolio-skill：简历+仓库 → 量身个人作品集