请帮我重做 `hey-Chloe.github.io` 这个 GitHub Pages 个人博客项目...

请帮我重做 hey-Chloe.github.io 这个 GitHub Pages 个人博客项目。

我想做的不是普通程序员模板站，而是一个有“独立杂志感 / 设计感 / 个人气质”的技术博客。

一、参考风格

我喜欢这些网站的气质：

• https://www.thisispaper.com/print
• https://www.itsnicethat.com/
• https://anhvn.com/
• https://liskfeng.com/
• https://www.booooooom.com/
• https://diygod.cc/
• https://templum.cn/
• https://elizen.me/

请注意：
不要复制这些网站的具体设计、布局、图片、文案、Logo 或品牌元素。
我只是喜欢它们的整体气质：留白、杂志感、强排版、卡片感、图片和文字的关系、克制的设计、个人表达感。

请做一个原创设计，但视觉方向可以参考：

• 独立杂志
• 设计媒体
• 个人知识档案
• 安静但有审美的技术博客
• 图文并重
• 大留白
• 清晰排版
• 有一点艺术感，但不能影响阅读

二、技术栈要求

请使用：

• Next.js
• TypeScript
• Tailwind CSS
• Markdown 或 MDX
• GitHub Pages 静态部署

重要限制：

• 不要使用数据库
• 不要使用 Prisma
• 不要使用 SQLite
• 不要做登录注册
• 不要做评论系统
• 不要引入复杂 CMS
• 不要做需要服务器运行的功能
• 不要引入太多依赖
• 不要过度动画

第一版目标：

• 能打开
• 好看
• 能写文章
• 能部署成功
• npm run build 必须通过

三、整体视觉方向

请把博客设计成“个人技术杂志 / 学习档案馆”的感觉。

关键词：

• clean
• editorial
• minimal
• magazine-like
• personal archive
• quiet but expressive
• typography-first
• image-aware
• warm neutral
• not cyberpunk
• not corporate
• not childish

视觉要求：

1. 首页不要像普通简历站，要像一个小型独立杂志首页。
2. 多用留白，不要塞满。
3. 字体层级要明确，标题可以大一些。
4. 文章卡片可以有杂志栏目感。
5. 颜色克制，避免大面积高饱和色。
6. 可以使用米白、浅灰、黑色、暖灰、低饱和点缀色。
7. 卡片边框和分割线要细，不要很厚重。
8. 移动端必须好看。
9. 不要使用夸张渐变和廉价阴影。
10. 不要做成暗黑黑客风。

四、博客定位

博客名称暂定：

Chloe's Archive

也可以在页面中使用：

Chloe's Blog
or
Chloe's Notes

博客定位：

一个记录 Java、Web 安全、CTF、计算机基础、自学计算机和个人成长过程的地方。

首页文案可以参考这个方向，但请写得自然一些，不要太 AI：

I write about Java, web security, CTF, computer science basics, and the messy process of learning things from scratch.

中文也可以：

这里记录 Java、Web 安全、CTF、计算机基础，以及一个普通学生重新建立技术能力的过程。

整体语气：

• 真诚
• 清醒
• 有成长感
• 不装大佬
• 不鸡汤
• 不自卑

五、页面结构

请实现这些路由：

• / 首页
• /blog 文章列表
• /blog/[slug] 文章详情
• /projects 项目展示
• /friends 友链
• /about 关于我
• /now 现在在做什么，可选，但如果实现成本不高请加上

建议目录结构：

txt
app/
  page.tsx
  blog/
    page.tsx
    [slug]/
      page.tsx
  projects/
    page.tsx
  friends/
    page.tsx
  about/
    page.tsx
  now/
    page.tsx

content/
  posts/
    java-basic-note.md
    sql-injection-note.md
    web-security-note.md
  friends.ts
  projects.ts

components/
  Header.tsx
  Footer.tsx
  Container.tsx
  PostCard.tsx
  ProjectCard.tsx
  FriendCard.tsx
  SectionTitle.tsx

lib/
  posts.ts

六、首页设计要求

首页要有杂志感，不要只是“头像 + 自我介绍”。

请包含这些区域：

1. Hero 区

内容包括：

• 博客名称
• 一句简短介绍
• 当前学习方向
• 进入文章 / 项目 的入口

风格可以是：

左侧大标题，右侧一段简介；
或者像杂志封面一样有大号文字和细线分割。

2. Featured Notes

展示最近 3 篇文章。

每个文章卡片显示：

• 标题
• 日期
• 分类
• 简短描述
• tags

3. Projects / Lab

展示 2-3 个项目，例如：

• Personal Blog
• SQL Lab
• Java Learning Notes
• Web Security Notes

4. Current Focus

展示我现在正在学什么：

• Java 基础
• SQL 注入
• HTTP / Web 基础
• CTF / Web 安全
• 计算机基础

5. Footer

Footer 简洁一点，包含：

• GitHub 链接占位
• RSS 占位可以先不实现
• “Built with Next.js” 之类

七、文章系统要求

使用 Markdown 或 MDX 存放文章。

每篇文章支持 frontmatter：

md
---
title: "Java 基础学习笔记"
date: "2026-07-08"
description: "记录 Java 基础语法、类、对象和方法的学习过程。"
tags: ["Java", "CS"]
category: "Notes"
cover: ""
---

正文内容……

文章列表页要求：

• 按日期倒序
• 支持标题、日期、描述、标签
• 视觉上像杂志文章列表，不要太像后台列表
• 每篇文章之间有舒服的间距
• 标签样式克制

文章详情页要求：

• 阅读体验舒服
• 正文字号适中
• 行距舒服
• 代码块清晰
• 标题层级明显
• 中文和英文混排不要难看
• 有返回文章列表的链接
• 文章不存在时显示 404

请先创建 3 篇示例文章，内容要像真实学习笔记，不要空壳：

1. Java 基础学习笔记
2. SQL 注入学习笔记
3. Web 安全入门笔记

内容不用太长，但要自然，像一个正在自学计算机和安全的人写的。

八、项目页内容

项目页不要写得太夸张，先展示学习型项目。

请用数据文件维护项目，例如 content/projects.ts。

每个项目包含：

• title
• description
• tech stack
• status
• link
• repo

示例项目：

1. Chloe's Archive
   个人技术博客，用来记录 Java、Web 安全、CTF 和自学计算机过程。

2. SQL Lab
   一个本地 SQL 练习环境，用来理解 SQL 查询、注入原理和 Web 请求到数据库的链路。

3. Java Notes
   Java 基础学习记录，包括类、对象、方法、数组、集合、接口等。

4. Web Security Notes
   Web 安全学习笔记，包括 HTTP、Cookie、Session、Token、SQL 注入等。

九、友链页内容

请实现友链页。

友链页风格不要像普通表格，要像一个小型目录。

每个友链包含：

• name
• url
• description
• category

先放占位数据即可，比如：

• DIYgod
• Templum
• Elizen
• Lisk Feng
• Anhvn

请注意，如果只是占位，请在代码里方便我之后修改。
不要把这些站写成我的真实朋友，只能写成 “Inspiration / Links”。

友链页可以分成：

• Friends
• Inspiration
• Tools

如果没有真实朋友，可以先只显示 Inspiration。

十、关于我页面

请写一个自然、不油腻、不像 AI 的 About 页面。

内容方向：

• 我正在自学计算机和网络安全
• 目前关注 Java、Web 安全、CTF、计算机基础
• 这个博客用来记录学习轨迹
• 我不想把这里写成完美简历，而是保留真实的学习过程
• 未来希望把技术基础打扎实，做出更多自己的项目

请避免：

• “热爱技术，追求卓越”
• “拥有丰富经验”
• “擅长全栈开发”
• “多年经验”
• 任何装大佬的措辞

语气要像真实学生。

十一、Now 页面

如果实现成本不高，请加 /now 页面。

内容展示：

• 最近在学什么
• 最近在做什么项目
• 最近的阅读/计划
• 下一步目标

可以先写静态内容，方便我后续改。

十二、GitHub Pages 部署

因为这是 hey-Chloe.github.io 仓库，请确保适配 GitHub Pages。

请配置 Next.js 静态导出：

ts
const nextConfig = {
  output: "export",
  images: {
    unoptimized: true,
  },
};

export default nextConfig;

请添加 GitHub Actions：

路径：

txt
.github/workflows/deploy.yml

要求：

• push 到 main 分支时自动部署
• 使用 Node.js
• 安装依赖
• 执行 npm run build
• 上传 out 目录
• 部署到 GitHub Pages

请确保最终：

bash
npm install
npm run dev
npm run build

都能正常运行。

十三、完成后请检查

完成后请你自己检查一遍：

1. 是否能本地启动
2. 是否能 build
3. 是否有 TypeScript 错误
4. 是否有明显 ESLint 错误
5. 所有页面是否能打开
6. 移动端是否不会崩
7. GitHub Actions 配置是否正确
8. 新增文章是否方便

最后请告诉我：

1. 你创建/修改了哪些文件
2. 本地如何运行
3. 如何新增一篇文章
4. 如何部署到 GitHub Pages
5. GitHub 仓库 Settings → Pages 应该怎么设置
6. 如果部署失败，我应该先看哪里