/colophon
这个网站是怎么做的。
rin.contact 背后的每一个决定 — 框架、字体、部署、设计理念，以及彩蛋。版本说明本是印刷者的附注，这是我的。
框架与运行时
框架
Next.js 16
Pages Router — SSG + SSR + CSR 混合
运行时
Node.js
通过 Vercel 无服务器函数
语言
TypeScript / JSX
在关键处启用严格模式
包管理器
npm
没什么花哨的
样式
工具类 CSS
Tailwind CSS
v3 — 移动优先，生产环境裁剪
理念
Nothing OS 美学
硬朗、极简、单色 — 扁平、无阴影
配色
#FFFFFF · #000000 · #FF3C3C
白 · 黑 · 圆点红 — 克制使用
圆角
无或全圆
绝不取中间值
动效
CSS keyframes
150–300ms ease-in-out — 不弹跳、不回弹
排版
标题字体
Bitcount Prop Double
字重 300–600 · 仅用于标题
正文字体
DM Sans
字重 300–500 · 阅读舒适
点缀字体
Playfair Display
仅用于编辑式点缀
等宽字体
Courier New
系统后备 · 终端与标签
加载器
next/font
零布局偏移，自托管
部署与基础设施
托管
Vercel
边缘网络 · 每次 push 都有预览部署
域名
rin.contact
通过 Namecheap 注册
CDN
Vercel Edge Network
全球、自动
CI/CD
GitHub + Vercel CLI
git push → 构建 → 别名
分析
无
隐私优先 — 无追踪像素
第三方服务
性能决策
图片
next/image
懒加载、WebP 转换、响应式尺寸
代码分割
动态导入
首屏以下的区块按需加载
LCP 目标
4G 下 < 1.5s
首屏渲染无任何阻塞资源
重点
无布局偏移
font display:swap + 明确的图片尺寸
隐藏路由与彩蛋
/resume
交互式命令行
输入命令，探索职业数据
/fun/matrix
数据科学之雨
∑ ∇ λ σ 等等
/fun/art
生成式螺旋
斐波那契叶序
/fun/haiku
俳句集
5–7–5 数据科学荒诞主义
/fun/coffee
/fun/roast
诚实的反馈
数据科学吐槽
/fun/spin
Rin 在做什么？
转动转盘
/fun/secret
/tools/card
可拖拽名片
试着甩一甩
/ds
以数据科学呈现的 Rin
模型卡、SHAP、混淆矩阵
/info/site-map
人类可读站点地图
每一页，而非 XML
/info/changelog
↑↑↓↓←→←→BA
科乐美秘籍
在主页上试试
DevTools
控制台彩蛋
打开浏览器控制台
curl
终端视图
curl rin.contact
/api/rin.json
/api/fortune
/api/roast
/api/now
/api/stack
设计理念
原则 1
每个决定都是有意为之
如果它配不上自己的位置，就不会上线
原则 2
留白也是设计的一部分
密度 ≠ 质量
原则 3
始终移动优先
375px 是唯一的真理基准
原则 4
无渐变，无投影
扁平单色 — Nothing 之道
原则 5
无障碍并非可选项
AA 对比度、焦点环、描述性替代文本
原则 6
先上线，再改进
v5.22.1，仍在继续