用 Next.js 维护一张可访问的个人名片

这个网站承担三件事：介绍我是谁，展示做过的实践，让感兴趣的人方便联系我。本文按当前代码整理页面组织、静态输出和检查方法。

技术选型

• Next.js 16 — App Router 与 Server Components，用于页面组织和服务端渲染
• Tailwind CSS — 用样式工具类统一排版与响应式布局
• Framer Motion — 流畅的交互动画
• shadcn/ui — 高质量的基础组件
• Vercel — 承载网站发布；国内访问仍需单独检查

设计原则

首页保留个人简介、代表实践、近期关注、文章和联系入口。每个项目讲清问题、我的角色和目前状态；没有公开依据的数字不作为成果展示。

SEO优化

页面配置独立标题、描述、规范网址与分享封面，网站地图列出可访问的页面。发布后还要检查正式域名：文章是否有正文、错误地址是否返回 404、robots 和 sitemap 是否正常。构建结果与正式域名需要分别验证。