总控架构师定稿。目标:设计感、简洁、不单调、参差但有秩序。
上一版的乱,不是 12 列网格的错,而是让内容块本身在网格上自由漂移: 每张卡片占位不同、边缘不齐,眼睛找不到一条能抓住的轴。
结论:参差只能发生在"留白"上,永远不能发生在"内容"上。
- 全页只有一条隐形主轴:每个 section 的内容块左缘落在锚点柱上(秩序)。
- 参差只出现在锚点柱的另一侧——呼吸边,用于挂索引号、meta、规则线等装饰(参差)。
- 视觉节奏:主轴(秩序) → 内容 → 留白(参差),一页从左到右即"静中有动"。
锚点值只能从 {2, 3, 4, 8, 9, 10}(12 列)中选,且相邻 section 必须换边, 整页形成一条 S 形呼吸曲线。
| 偏移 | 用途 |
|---|---|
| 0 列 | 内容主体对齐锚点 |
| +1 列 | 次级元素(meta、副标题、说明) |
| +2 列 | 装饰元素(索引号、印章、竖线) |
任何元素不得使用词汇表之外的偏移。 设计感来自"同三个偏移的重复与轮换",而不是任意摆放——这就是"参差有秩序"的机制。 (类比:音乐只用 3~4 个音符组成的动机反复变奏,听感既有变化又有秩序。)
- 名字锚定 col 2,超大衬线(96–120px),左对齐。
- 右侧 col 10–12:竖排 mono 元信息(
locus: 23.1°N · 113.3°E / SCROLL),配一条朱砂竖线。 - 按钮与名字同左对齐;参差来源 = 右侧元信息与左侧内容的垂直错位(+1 偏移)。
- 不居中。居中=呆板,纯左=单调;名字左、元信息右即为第一个"参差"。
- 标题 col 2;正文 col 3–10,两端对齐 + 首行缩进两字符(中文排版秩序感)。
- 右侧 col 11–12:hairline 竖线分隔,挂 mono 小字静态信息(
位于广州 / 1+ 年 / 可合作)。 - 4 个 stat 卡片:col 2–11 内 4 宫格等宽,数字用大号衬线、关键数字(3 / 20)用朱砂。
- 本节零参差——为后面 Projects 的"动"蓄势。
- 三张卡片全部锚定 col 2–11,宽度一致、内部结构一致(秩序)。
- 参差在左缘:每张卡片前挂大号 mono 索引号
01 / 02 / 03,朱砂色, 垂直位置按 上 → 中 → 下 轮换(+1 偏移)。 - 唯一一次换边:卡片 2 的 meta 列放到右侧,形成 S 形。
- 卡片间距用 hairline 分隔线;保留 3D tilt。
- 铁律:卡片本体永远不动,动的只有索引号和 meta 边。
- 2×2 严格网格:col 2–6 / 7–11,四张卡等宽等高,左对齐,零错位。
- 参差只在 header:左侧
// 核心能力+ 标题,右侧挂 mono 计数20 SKILLS(+1 偏移)。 - 让眼睛在 Projects 的"动"之后彻底休息。
- 左 col 2–6:邀请语 + 4 个联系方式(电话 / 邮箱 / 地址 / GitHub)纵向列表。
- 右 col 7–9:一个朱砂印章(纯 CSS 方印 + 白文"钟迪龙印"),hover 微微倾斜 + 墨色加深。
- 印章是全页唯一纯朱砂视觉锚,等于画作落款,收束全篇。
- 版权行 col 2 左对齐。
- section-tag(mono 11px)→ section-title(大衬线)的结构全站统一。
--section-gap: 96px保留;锚点交替表:hero=2 → about=2 → projects=2 → skills=2 → contact=2(左轴稳定), 参差由右缘装饰的交替实现,比"锚点乱跳"更安全。 (若想更激进:projects 整区右移锚点 8,其余保持 2——二选一,不要混合。)
- 参差只发生在留白,不发生在内容。 内容块永远对齐锚点柱、宽度取自词汇表;不齐的永远是空白那一侧。
- 全页只有一条主轴。
每个 section 复用同一个 12 列脚手架与同一
padding-inline,柱线跨 section 贯通; 锚点逐 section 交替(或保持左轴稳定 + 右缘装饰交替),形成 S 形节奏。 - 偏移词汇表上限为 3。 一切参差只用 0 / +1 / +2 的重复与轮换。宁可重复,不可乱加—— 秩序来自可预测的重复,设计感来自重复中的一次打破(如 Projects 卡片 2 换边)。
验收标准(可自查): 任意滚动位置截图,只看容器边缘线, 全页应能画出 ≤3 条清晰竖线。超过 3 条 = 乱,砍掉多余偏移。
--max-width: 1000px → 1200px——12 列太挤是"乱"的另一半原因,参差需要空间施展。- global.css 增加工具类:
.anchor-2 / .anchor-3 / .anchor-4 / .offset-1 / .offset-2, 每个 section 只改grid-column起点 + 结构 class,内容数据不动。 - 保留:粒子背景、HUD 意识流、滚动进度条、命令面板、Boot 序列、纸墨配色(#F4F1EA / #E5484D / #1A1A1A)。
- 移动端(<768px):退化为单列,锚点全部归 2,参差只保留索引号大小差与印章缩放。
- 改动面:仅 global.css 的锚点工具类 + 5 个 section 的 CSS(及 Projects 索引号结构), 无新依赖,无新组件库。