博客改版记录：首页、栏目页与轻量 3D

目标

这次改版主要处理四个问题：

• 首页文案和首屏层级偏口号式，不像学习型技术博客。
• 首页、动态、项目、资源、关于和文章页之间的结构不统一。
• 文章卡片、文章页和移动端布局还有明显边界问题。
• 页面已经可用，但缺少一层克制的空间感。

改版目标也相应收得很明确：

1. 首页重写成更适合长期写作的入口页。
2. 二级页统一成一套固定骨架。
3. 文章页回到同一套阅读语言。
4. 先修边界，再补轻量 3D。

首页：先改信息结构

首页这次没有从颜色和动效开始，而是先重排信息顺序。新的结构分成五块：

• Hero：站点范围、阅读入口、首篇文章。
• Lead Story：一篇主文章。
• Mini Story：三篇补充内容。
• 主题入口和文章索引。
• 底部说明区域。

标题也从偏口号的写法收回到更直接的范围说明：

<div className="readme-hero-copy">
  <div className="readme-eyebrow">TechLoop Journal</div>
  <h1 className="readme-hero-title">
    AI 工具、工程实践与研究笔记
  </h1>
  <p className="readme-hero-subtitle">
    记录 AI 工具、项目实现、论文阅读和排障过程，重点放在可复用的判断与做法。
  </p>
</div>

首屏需要同时完成三件事：说明写作范围、给出阅读入口、暴露后续索引。

栏目页统一：一套骨架复用到底

动态、项目、资源、关于四个栏目页，现在统一成同一套结构：

• 顶部 Hero
• 右侧概况面板
• 主内容区
• 侧栏补充信息

动态页是最明显的例子：

对应代码结构保持得很简单：

<section className="readme-page-hero readme-page-hero-with-depth">
  <HeroDepthScene className="readme-page-depth-scene" />
  <div className="readme-page-hero-copy">
    <h1 className="readme-page-title">动态与短记</h1>
    <p className="readme-page-desc">
      记录工具更新、产品变化，以及暂时还不准备写成长文的线索。
    </p>
  </div>

  <div className="readme-page-panel">
    <div className="readme-panel-title">记录概况</div>
  </div>
</section>

统一骨架之后，栏目页之间的切换成本低了很多。内容不同，但阅读路径保持一致。

卡片与文章页：从组件和阅读页一起收口

首页、动态页和相关文章都依赖同一套卡片组件。卡片结构这次做了两件事：

• 固定媒体比例和正文密度。
• 让 compact 只改变密度，不再变成另一种卡片。

<TiltCard>
  <article className={`readme-card ${compact ? 'is-compact' : ''}`}>
    <img src={image} alt={post.title} className="readme-card-media" />
    <div className="readme-card-body">
      <div className="readme-card-label">{post.tags?.[0] || '文章'}</div>
      <h3 className="readme-card-title">{post.title}</h3>
      <p className="readme-card-excerpt">{post.excerpt}</p>
    </div>
  </article>
</TiltCard>

文章页也一起重做成统一的浅色阅读页：

目录、代码高亮、复制链接和相关文章都保留，但布局回到同一套浅色阅读页。

响应式与轻量 3D：先修边界，再补层次

移动端问题主要集中在资源页和部分双栏页面。最后实际修的不是单个卡片，而是容器宽度规则：

.readme-page-hero,
.readme-page-main,
.readme-post-hero,
.readme-post-layout {
  width: auto;
  max-width: none;
}

@media (max-width: 760px) {
  .readme-hero-depth,
  .readme-page-depth-scene {
    display: none;
  }
}

资源页在手机端的状态现在稳定很多：

3D 部分只保留了轻量层次：

• 首页和动态页 Hero 的透视网格与浮板。
• 卡片 hover 的轻微倾斜。
• 手机端和低动效环境自动降级。

3D 只负责补层次，不参与主要信息表达。

结果

这次改版之后，站点已经形成一套比较稳定的阅读系统：

• 首页改成了更适合技术笔记站的入口页。
• 动态、项目、资源、关于、文章页统一成同一套骨架。
• 文章卡片和文章页回到一致的排版语言。
• 移动端宽度、边距和断行规则更稳定。
• 3D 只作为层次补充，不影响正文和列表阅读。

后续如果继续扩展，优先级也会保持一致：先改信息结构和内容组织，再补视觉细节。