个人网站产品系统

该网站属于 个人品牌与内容展示类网站，主要面向以下场景：
个人展示：展示个人信息、技能、经历，便于求职或建立专业形象。
内容创作：博客模块用于分享技术文章、学习笔记或专业见解。
网络名片：作为在线简历或联系方式平台，为潜在雇主、客户或社区成员提供联系渠道。
行业上，它常应用于 技术个人品牌建设、自由职业者展示、内容创作及知识分享。

首页（Home）
网站入口，概览个人简介、核心技能和近期动态。
可展示作品集、博客推荐、联系方式或社交链接。
博客页（Blog）
展示文章列表，支持分页或标签分类。
每篇博客可点击进入详细内容页。
可能支持 Markdown 渲染、阅读量统计、评论功能等。
个人介绍页（About）
展示个人详细信息，如教育经历、工作经历、技能专长、兴趣爱好等。
可包含下载简历、联系方式或社交链接。
通用功能
响应式布局，支持手机、平板、PC 浏览。
SEO 优化，提升搜索引擎友好度。
网站导航栏，方便不同页面之间切换。

框架：Next.js（支持 SSR / SSG，提高性能和 SEO）。
样式：可使用 CSS Modules、TailwindCSS 或 Styled Components。
数据管理：博客内容可通过 Markdown 文件、CMS（如 Strapi、Sanity）或 JSON 存储。
路由：Next.js 的文件路由系统管理首页、博客页、文章详情页和个人介绍页。
页面实现
首页：通过 pages/index.js 实现，包含 Banner、作品/文章预览、导航组件。
博客页：pages/blog/index.js 列表页，pages/blog/[slug].js 详情页，利用 getStaticProps 和 getStaticPaths 做静态生成。
个人介绍页：pages/about.js，静态展示个人信息，可添加图文混排和社交链接。
优化与部署
SEO：使用 next/head 设置 meta 标签。
性能优化：静态生成博客列表和详情页，图片使用 next/image。
部署：使用 git action 实现项目的部署