首页修改记录 01：第一屏为什么不是营销页

这次首页修改，我一直在提醒自己一件事：huzejun.com 不是产品官网，不需要把每个板块都包装成卖点。它更像一个个人资料馆，访客进来时应该先感觉到“这是一个人的空间”，再慢慢找到博客、摄影、书法这些入口。

所以第一屏没有做大段介绍，也没有做复杂的 feature card。最后留下的东西很少：欢迎语、书法鸟图、一个很短的 name card、几个社交入口，以及底部的继续浏览按钮。

第一屏的顺序

现在首页第一屏大致分成四段：

1. 顶部浮动 header，负责站点导航。
2. 欢迎语，告诉访客这里是 huzejun.com。
3. 书法鸟图，作为这个网站最明确的个人视觉符号。
4. name card 和社交入口，让访客知道我是谁，以及可以怎么联系。

书法鸟图不是装饰品。它是自己画的，也是这个站点最有辨识度的视觉资产，所以它在第一屏里必须有足够的比例。欢迎语和 name card 都要给它让出呼吸空间。

为什么保留 name card

一开始我试过更轻的首页，只放欢迎语和图。但这样会有一个问题：站点的“人”被藏得太深。访客必须点关于页，才知道这个网站是谁的。

现在的 name card 只写最少的信息：

胡泽君 / Zejun Hu
电子工程硕士，喜欢书法和摄影。

这段话不负责完整自我介绍。完整内容应该在关于页。首页只需要把身份感补上，让访客知道后面这些内容来自同一个人。

入口按钮为什么少

第一屏只有 GitHub、Email 和最近听歌三个动作。GitHub 和 Email 是外部联系，最近听歌是站内跳转。它们的性质不同，所以视觉上也分开：

• GitHub 和 Email 是小圆形 icon。
• 最近听歌是带文字的轻按钮，点击后滑到音乐模块。

这样做的好处是，第一屏不会变成按钮矩阵。访客如果只是随便看看，底部箭头会引导他继续往下；如果有明确意图，header 仍然可以直接进入博客、摄影、书法或关于。

代码上的取舍

Hero 组件仍然是一个相对独立的服务端组件。它接收翻译后的文案，不直接读 messages：

<Hero
  welcome={tHome("welcome")}
  name={tHome("nameCard.name")}
  intro={tHome("nameCard.intro")}
  musicLabel={tHome("actions.music")}
  githubLabel={tHome("actions.github")}
  emailLabel={tHome("actions.email")}
  scrollLabel={tHome("actions.scrollDown")}
/>

这样做有两个小好处：

• 首页 page 负责数据和翻译，Hero 只负责展示。
• 以后要调整文案，不需要进入组件内部找字符串。

书法鸟图继续使用双 Image：

<Image className="dark:hidden" src="/images/hzjwebsitefront_light.png" alt="" />
<Image className="hidden dark:block" src="/images/hzjwebsitefront_dark.png" alt="" />

这不是为了“优雅”，而是为了避免主题切换时动态换 src 带来的白底闪烁。两张图都提前渲染，CSS 只负责显示哪一张，切换会更稳定。

小结

这次首页第一屏的目标不是信息越多越好，而是让访客在几秒钟内知道三件事：

• 这是 huzejun.com。
• 这个网站和书法、摄影、个人学习有关。
• 往下还有内容可以慢慢看。

个人网站最难的地方不是加模块，而是知道哪些话可以不说。第一屏越克制，后面的内容才越容易被认真阅读。