Multi-Track 个人网站
独立开发|2025-2026|Web 开发
Next.jsReactTypeScriptTailwindVPS
背景
个人网站需要同时展示水利工程、AI 工程、开发工具、独立开发四个方向的能力。传统的单一叙事无法满足多方向求职需求,因此设计了 Multi-Track 架构。
核心功能
Multi-Track 方向切换
- 4 个就业方向:水利数字化、AI 工程、开发工具、独立开发
- 切换后 Hero、核心能力、技能排序、项目筛选、博客过滤全部响应
- URL query + cookie 持久化,可分享特定方向的链接
- 默认水利方向,保持 SEO 不变
内容系统
- Markdown + YAML frontmatter 驱动所有内容
tracksoverlay 字段实现按方向的内容变体- 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