个人主页制作过程

最开始只是想做一个简单的个人介绍页放简历，但越做越觉得可以把它变成一个真正的「数字分身」——不仅展示我是谁，还能让访客直接和我的 AI 聊天。另外也想通过这个项目把 Next.js 16 和 Framer Motion 真正用熟。

本地用 Next.js 16 App Router 开发，所有页面组件自己手写（拒绝模板），CSS 变量做深色/浅色主题切换。AI 聊天通过 Next.js API Route 转发 DeepSeek API，SSE 流式输出打字机效果。Canvas 粒子背景和鼠标光晕是纯手写的 requestAnimationFrame 动画循环。部署去阿里云开了台 2核2G 香港 ECS，Nginx 反代 + Let's Encrypt HTTPS + PM2 进程守护。更新用 tar 打包 + scp 推送。

• ●AI 数字分身聊天（SSE 流式输出，拟人化人设）
• ●知识库系统（28 篇文章，6 大分类，侧边栏导航）
• ●Canvas 粒子背景 + 鼠标跟随光晕
• ●深色/浅色主题一键切换
• ●响应式设计，移动端优化
• ●Let's Encrypt 免费 HTTPS 自动续期

最大的坑是 Canvas 动画的性能。粒子 70 颗 + 鼠标光晕 + CRT 扫描线叠加在一起，低配机器会掉帧。折腾了两天，最后用 devicePixelRatio 做了自适应降级：高分屏 ≤2、低分屏 ≤1，移动端粒子数量降到 20 颗。另外第一次搞服务器部署，被安全组规则卡了半天——开 443 端口忘了同时开 80。