← 全部作品

2026 — 设计 / 开发

NEWZERO 个人站

你正在看的这个站。从零设计的视觉系统,加一个 200 行的构建脚本。

这是 NEWZERO 的主站,也是一次"把东西做到最少"的练习。

目标

市面上个人站模板很多,但大多有两个问题:一是信息密度太低,一屏只有一句口号;二是堆了太多动效,读起来累。

我想要的是:信息清楚、排版有性格、加载足够快。

做了什么

  • 视觉系统:纸感底色 + 墨黑 + 一点朱红,衬线做大标题、等宽做标签,三套字体层级撑起整个站。
  • 手写构建脚本:Markdown 进,静态 HTML 出,同时生成 RSS 和 sitemap,没有任何前端框架。
  • 暗色模式:跟随系统,也可以手动切换,状态存在本地。
  • 细节:作品卡悬停反色、标题描边、旋转圆环、入场动画,全部尊重 prefers-reduced-motion。

结果

  • 首屏 HTML + CSS + JS 合计不到 40KB;
  • Lighthouse 性能、可访问性、SEO 都在 95 以上;
  • 新增一篇文章 = 新建一个 .md 文件。

好的个人站不该让人赞叹技术,而该让人记住人。