Full-stack
个人网站
一个把个人基础设施当生产环境来做的双语开发者作品集 —— 隐私优先的自建分析、WCAG AAA 无障碍、29 个自动化测试、带 Lighthouse 审计的完整 CI 流水线。
Next.js 16React 19TypeScriptTailwind CSSFramer MotionSupabasePlaywright
为什么做这个
不是模板从零搭建，作为学习 Next.js App Router、Server Components 和 i18n 的实验场 —— 同时也是面向雇主的正式线上作品集。
故意过度工程化隐私优先的分析、Bot 过滤的追踪、每个页面的 E2E 测试、axe-core 无障碍审计、Lighthouse CI —— 因为这个网站本身就是作品。
一览
12
页面
10
API 路由
29
测试文件
2
语言
AAA
WCAG 等级
176
翻译条目
技术栈
框架
Next.js 16 · React 19 · TypeScript · Tailwind CSS 4
数据
Supabase (PostgreSQL) · 10 张表 · Markdown 博客内容
动画
Framer Motion 12 · View Transitions API · prefers-reduced-motion
国际化
next-intl · 176 条 × 2 种语言 · 数据库 _zh 后缀字段
测试
Playwright（20 个 E2E 文件）· Jest（9 个单元测试）· axe-core 无障碍审计
CI
GitHub Actions · lint → typecheck → build → test → Lighthouse
功能概览
全栈作品集，包含博客、摄影画廊、项目展示、隐私优先的分析和生产级基础设施 —— 全部双语。
内容
博客Markdown + 语法高亮 + 相关文章 + 分类
摄影瀑布流 · EXIF 元数据 · 灯箱 · 分类筛选
项目展示结构化详情页，双语内容
用户体验
命令面板 (Cmd+K)搜索页面、项目、文章、经历、教育
3 套主题浅色 · 深色 · 跟随系统 — OkLCh 色彩空间，AAA 对比度
键盘导航方向键切换页面，Escape 关闭弹窗
基础设施
隐私优先分析无 Cookie · 不记录 IP · 自建 page_views 表
安全头CSP · X-Frame-Options · Bot 过滤 · Permissions-Policy
SEO动态站点地图 · hreflang · JSON-LD · OG 图片 · robots.txt
权衡
Umami Cloud 实现隐私友好分析
Umami Cloud 提供准确、无 cookie 的分析，包含 Bot 过滤、设备/浏览器检测和 REST API。Stats 页面从 Umami API 获取聚合数据 —— 无需自定义追踪代码或数据库表。
WCAG AAA，而非仅 AA
所有颜色 token 都达到 AAA 标准（两种主题下 13:1+ 对比度）。OkLCh 色彩空间在明暗模式间保持感知一致性。每个页面在 E2E 中运行 axe-core 检查 —— 无障碍退化会让构建失败。
Supabase _zh 字段而非独立翻译表
只有 2 种语言，用外键关联的翻译表是过度设计。每张表上的 _zh 后缀列保持查询简单 —— 一次查询、一次语言判断、不需要 JOIN。
给个人网站写 20 个 E2E 测试
每个页面、命令面板、键盘导航、安全头和无障碍都有专门的测试文件。对作品集来说过度了 —— 但 CI 流水线本身就是作品集展示的一部分。