展示页
原型 C。读者要迅速判断：此人此物是否值得继续了解。 简历、作品集和项目主页都如此；目标不是读完，而是作出判断。
结构
沈约
写文档，也写把文档变成产物的工具。
2024—现在
设计系统负责人
把一份规范做成能被复用的产物：token、组件、校验，以及一组可失败的质量门禁。
2021—2024
前端工程师
内容型站点的排版与性能。中文行长、竖排、注音这些问题都是在这段时间遇上的。
查看代码 · Source
<main class="wx-showcase">
<header class="wx-showcase__intro">
<h3>沈约 <span class="wx-seal" aria-hidden="true"></span></h3>
<p class="wx-lede">写文档，也写把文档变成产物的工具。</p>
</header>
<section class="wx-showcase__timeline" aria-label="经历">
<article><p class="wx-eyebrow">2024—现在</p><div><h4>设计系统负责人</h4><p>把一份规范做成能被复用的产物：token、组件、校验，以及一组可失败的质量门禁。</p></div></article>
<article><p class="wx-eyebrow">2021—2024</p><div><h4>前端工程师</h4><p>内容型站点的排版与性能。中文行长、竖排、注音这些问题都是在这段时间遇上的。</p></div></article>
</section>
</main>十秒内要回答的三个问题
展示页的信息顺序不是按时间，是按读者的判断顺序：
- 这是谁 / 这是什么——一行，不加修饰词
- 做成过什么——具体成果，不是职责描述
- 怎么找到——联系方式或下一步
"负责用户体验优化"回答不了第二个问题，"把首屏时间从 4.2s 降到 1.1s"可以。 展示页最常见的失败不是排版，是把职责当成果写。
时间线用两列，不用卡片
宽屏下 wx-showcase__timeline 是 0.28fr / 1fr 两列——
左列时间，右列内容。窄屏下堆叠。每一条不是一张卡片：
条目靠留白和对齐分开，不靠边框把它们各自装起来。
2026
一个条目
左列是时间，右列是内容。没有边框，没有底色。
2025
另一个条目
对齐本身就是分组——这是这套语言里卡片的替代物。
印章消耗强调预算
展示页通常需要一处身份标记；它应附在名称后，而不是作为另一枚游离图形。朱砂印是全页视觉焦点， 它占用全页两处强调色中的一处。剩下的一处留给真正需要被点击的那个动作， 不要再给第二个装饰用掉。
宽度与轨道
| 项 | 值 | 为什么 |
|---|---|---|
| 容器宽 | --width-showcase | 比文章宽——读者在扫描，不在逐行读。 |
| 轨道 | 阅读轨 | 无卡片、导航 CTA 不用填充按钮、≤2 处 accent。 |
| 动效 | E9-0 或 E9-1 | 入场淡入可以有；循环动画不行。 |
骨架
kit/patterns/c-showcase.html直接复制。它只用留白与对齐分组，不提供任何四边包围容器。