关于页重设计：从一张卡片到一场身份叙事

起点

关于页一直是博客里最没存在感的页面——一张毛玻璃卡片，几段文字，加一句"直而不肆 光而不耀"。它像是个被遗忘的角落，和其他页面的精心设计（FullHero 粒子动画、动态页星河时间线、随记页星穹背景）形成鲜明对比。

但关于页恰恰是最不该敷衍的——它是读者了解"写博客的人是谁"的入口。

核心思路：身份叙事而非自我简介

传统关于页就是一份简历式自我介绍："我叫 XX，做 XX，会 XX"。我想换个思路——不是堆砌信息，而是构建一场渐进的视觉旅程。读者 scroll 下去，像翻一本小小的身份画册。

分四个区，每个区承担不同的叙事功能：

区域	叙事功能	视觉策略
第1区 · 身份卡片	"我是谁"——第一印象	大头像 + 霓虹光环 + 装饰背景 + 低调社交链接
第2区 · 技能星图	"我做什么"——能力图景	2×2 卡片网格，标签云式技能分布
第3区 · 联系	"找到我"——开放邀请	彩色社交按钮 + 幽默文案
签名区	"我相信什么"——价值观收束	大字书法诗句 + 装饰分隔线

关键在于每个区看一眼就够了，不需要逐字阅读。头像、标签、按钮——都是视觉元素而非文本块。

关于页和首页的区别

初版方案被批评"和首页 Hero 太像"。确实——首页 Hero 已经有一个大头像 + 社交按钮 + 统计胶囊的 Bento Grid。关于页如果再来一套，就是自我重复。

几个关键区分决策：

• 去掉统计胶囊。文章数、标签数、运行天数是首页的叙事（"这个博客有多活跃"），不是关于页的叙事。
• 社交链接用文字而非彩色按钮。首页 Hero 的社交图标是彩色圆角方块，关于页第1区用浅灰色文字链接 + 标签名——更安静，不抢注意力。
• 去掉"浮光"二字。首页 FullHero 的大标题已经充分建立了品牌，关于页是个人页，不应该重复站名。

亮色模式的打磨：从刺眼到柔和

这是整个设计中最折腾的部分。

第一版：白色背景 + 暖色光晕球。看着还行，但用户反馈"太亮了，刺眼"。问题不在光晕强度，在底色本身——纯白或近白会放大所有视觉元素的亮度对比。

第二版：换成暖棕色渐变。用户反馈"沉闷"。

第三版：最终落地为灰鼠尾草绿渐变（#EDF2EF → #E5ECE7 → #EEF4F0 → #F3F7F5）。这个色系有几个好处：

• 绿色天然比棕色更"安静"，不会让人联想到沉闷
• 低饱和度 + 轻微冷暖变化，有层次但不喧宾夺主
• 和 Sakura 暖色调形成互补（红绿互补），而不是同色系叠加

光晕球的透明度也大幅降低——亮色模式下光晕球降到 0.04-0.1 的不透明度，几乎只是"微微的气息"。

标签的困境

技能标签（"C/C++"、"ROS1" 等）经历了三轮迭代：

1. 填充色标签（bg-sakura-100）：和背景色、卡片色混在一起，分辨不清
2. 更深填充色（bg-sakura-200）：太抢眼，像一个个按钮
3. 最终方案：描边标签（border border-sakura-200/60 text-sakura-500）：无背景填充，仅彩色边框和文字。有存在感但不叫嚷，读者知道它们是可扫描的标签但不会被打断阅读流。

这让我意识到一个设计原则：标签的视觉权重应该和它们的语义权重匹配。技能标签在关于页是"顺便提及"，不是"行动号召"——描边风格刚好。

Footer 消失之谜

最后一个踩坑。Footer 在关于页完全不可见，但 DOM 检查确认它存在。

根因是 CSS 层叠上下文。关于页有四层固定定位的背景元素（about-bg、about-glow-top、about-glow-bottom、about-overlay），其中 about-overlay 是 fixed inset-0 z-[2] 带 backdrop-filter: blur(2px)。Footer 则是 position: static——在同一个层叠上下文中，定位元素（z ≥ 0）总是绘制在非定位元素之上。

修复只有一行：给 Footer 加 relative z-10。但排查过程让我重新理解了 z-index 不只是一个数字——它是由层叠上下文决定的相对排序。

设计原则回顾

这次重设计让我更确信几个原则：

1. CSS 能做的不写 JS。 整个关于页的动画（入场、光晕漂移）全部用 CSS keyframes，零客户端组件。
2. 先验证机制，再叠加样式。 Footer 的 z-index 问题如果不先理解层叠上下文机制，加再多 z-50 也没用。
3. 每个改动验证两个状态。 亮色模式和暗色模式的背景色、光晕透明度、标签颜色都是独立调整的——不能假设一个模式的参数适用于另一个。
4. 设计就是做减法。 从初版的"把所有东西塞进去"到最终版克制的四个区域，每次迭代都在删：删统计胶囊、删重复的"浮光"、删标签填充色、删除亮的配色。

关于页现在终于和博客的其他页面站在了同一设计水准上。它不喧哗，但有分量——就像"直而不肆 光而不耀"那句话本身。