个人网站改版复盘：深色模式、页面软切换与能力墙设计

这次个人网站改版，不是简单换颜色、换卡片，而是一次完整的信息架构和交互体验调整。目标是让网站更像作品集，而不是传统简历模板。

1. 改版目标

我希望访问者进入网站后，能快速获得三个判断：

  • 我主要做 Python、自动化、数据采集和小型系统开发；
  • 我有完整流程意识，不只是写单点脚本；
  • 我正在把 AI 工具、平面设计和开发工作流结合起来。

因此页面结构从“个人介绍 + 技能进度条 + 项目列表”调整为：

Hero -> 工作方式 -> AI 平面设计 -> 能力墙 -> 交付数据 -> 工具生态 -> 项目入口

这套结构更接近一个持续更新的个人品牌页。

2. 深色模式：从主题变量开始排查

深色模式最开始的问题是切换页面时会闪白。第一版方案是加预加载和黑色遮罩，但仍然会闪，因为浏览器在整页跳转时会重新创建文档，短暂露出默认白底。

最终采用的是软导航方案：

const response = await fetch(url.href, { credentials: 'same-origin' });
const html = await response.text();
const newDoc = new DOMParser().parseFromString(html, 'text/html');
document.querySelector('main').replaceWith(newDoc.querySelector('main'));
history.pushState({ pjax: true }, '', url.href);

这使得主题状态、背景色和页面框架都不会被销毁，只替换主体内容，深色模式下体验更稳定。

3. 变量命名带来的真实问题

另一个问题是深色模式下出现白色卡片。原因是变量语义不清晰。

:root[data-theme="dark"] {
  --ink: #f5f7fb;
}

.cta-card {
  background: var(--ink);
}

--ink 本来是文字色，却被用作背景。深色模式下它变成浅色，组件自然就变白。

修复方式是为组件写深色覆盖：

:root[data-theme="dark"] .cta-card {
  background:
    radial-gradient(circle at 78% 36%, rgba(141,136,255,.18), transparent 28%),
    linear-gradient(135deg, rgba(17,24,39,.94), rgba(10,15,27,.96));
}

这个问题提醒我：CSS 变量最好按用途命名，而不是按颜色感觉命名。

4. 能力区为什么重做

原来的能力区大量使用进度条，视觉上会显得模板化。更重要的是，技能百分比并不能准确表达实际能力。

我把它改成两种形式：

  • 技能较多的分类：使用方块技能卡；
  • 技能较少的分类：使用横向任务条。

这样既保留了分类层级，也避免“全页面都是百分比”的疲劳感。

5. 动效的边界

这次动效主要用于三个地方：

  • 页面首次进入时的元素浮现；
  • 能力卡片进入视口时的延迟出现；
  • 合作伙伴轮播的持续运动。

动效没有追求复杂，而是服务信息层级。比如能力卡片只做轻微位移和透明度变化，避免抢内容本身的注意力。

6. 后续优化方向

下一步还可以继续增强：

  • 项目页增加案例详情；
  • 博客页增加专题归档；
  • 首页加入近期文章卡片；
  • 后台支持更灵活的首页模块管理；
  • 深色模式继续统一变量命名。

这次改版让我确认一个方向：个人网站不应该只是“展示我是谁”，更应该展示“我是如何解决问题的”。