Multi-Track 个人网站

背景

个人网站需要同时展示水利工程、AI 工程、开发工具、独立开发四个方向的能力。传统的单一叙事无法满足多方向求职需求，因此设计了 Multi-Track 架构。

核心功能

Multi-Track 方向切换

• 4 个就业方向：水利数字化、AI 工程、开发工具、独立开发
• 切换后 Hero、核心能力、技能排序、项目筛选、博客过滤全部响应
• URL query + cookie 持久化，可分享特定方向的链接
• 默认水利方向，保持 SEO 不变

内容系统

• Markdown + YAML frontmatter 驱动所有内容
• tracks overlay 字段实现按方向的内容变体
• gray-matter + remark 解析管线

搜索与 CMS

• SQLite FTS5 全文搜索
• /admin CMS 后台（Cloudflare Access 保护）
• 博客 CRUD 操作

部署

• Next.js standalone 输出
• VPS systemd 服务 + Nginx 反向代理
• Cloudflare CDN + Origin 证书
• bash deploy.sh 一键部署

技术栈

• Next.js 15 (App Router) + React 19 + TypeScript
• Tailwind CSS + shadcn/ui
• SQLite (better-sqlite3) + FTS5
• Resend (邮件) + Google Analytics

在线访问

tianlizeng.cloud

源代码

GitHub