给自己做一个网站：WHRCT22 的 3D 主页与写作后台
一个 UI 控的个人网站：用 Next.js 与 Three.js 做 3D 首页，用 Redis 和 Vercel Blob 管理文章与图片，再通过授权 API 让 AI 参与写作。这里记录它的设计、功能与实现，源码已公开。
类目：项目 ↗
我是 WHRCT22，坐标重庆，现在读高三。我喜欢了解新技术，也愿意把它们用到自己的项目里。对一个 UI 控来说，个人网站既是放作品的地方，也是可以认真打磨排版、配色和交互的一块空间。
这个项目就是现在你正在访问的网站。我把源码放到了 GitLab 公开仓库，想看看实现的朋友可以直接阅读代码。
从一张主页，做到可以持续更新
首页保留了两件最想表达的事：对技术好奇，对美感认真。
视觉上，我选择了深绿色背景与浅绿色强调色，搭配大字号和留白。右侧的环结雕塑由 Three.js 实时渲染，日间与夜间主题会使用对应的材质和配色。3D 模块按需加载，页面隐藏或雕塑离开可视区域时暂停渲染；无法使用 WebGL 时显示静态替代画面。
现在的首页只保留一个文章区，直接从后端读取最新三篇已发布文章。项目介绍、技术记录和新的尝试，都可以在同一套内容系统里更新。
主题之外，也把日常使用做好
日夜切换从按钮中心展开，首次打开页面时也会根据已保存的主题设置渲染。字体使用本地提供的 MiSans VF 和 Manrope，中文与英文各有合适的位置。
手机端有固定在顶部的菜单，可以直接去首页、文章、关于我和联系区域。阅读文章时，图片使用统一圆角，宽度限制在正文范围内，小屏上也不会把页面撑宽。
点击链接之后，页面最上方的细加载条会跟随真实导航和数据准备状态显示。未知进度只表现“正在加载”，不显示假百分比；完成后走满、淡出。加载途中切换主题，颜色会变化，任务不会重新开始。这些细节看起来很小，但直接影响一个网站用起来是否顺手。
写文章不必再改源码
内容后台使用 Next.js 构建。登录后可以新增、修改、保存草稿、发布或撤回文章，也可以上传图片、管理类目和标签。
正文使用 Markdown，支持导入、导出和 JSON 备份。每篇文章可以选择一个类目，多个标签则独立保留；已有文章也可以重新分类。原来的 Streamgate、青钥和 CE-MCP-Plugin 介绍已经迁入后台，旧链接仍然能够跳转到相应文章。
文章、类目、会话和索引保存在 Upstash Redis 中，图片交给 Vercel Blob。文章保存带有版本检查：如果另一个编辑已经提交了更新，旧版本会收到冲突提示，避免直接覆盖新的内容。
让 AI 成为写作流程的一部分
我拥抱 AI，也希望工具可以通过明确的接口参与内容整理和发布。
因此，这个项目提供了带授权的写作 API。管理员可以为工具创建独立密钥，按需要开放文章读取、写入、发布和图片上传权限，也能设置有效期或撤销密钥。
工具可以提交 Markdown、摘要、封面和类目；具有发布权限时，可以直接发布文章。没有发布权限的密钥不能把草稿公开。图片上传与文章提交使用对应接口，后台仍然保留手动编辑入口。
接口说明在 API 文档，也提供 OpenAPI 描述，方便工具接入。API 授权不会开放管理员密码，也不允许 AI 密钥管理其他密钥或删除文章。
代码在这里
项目使用 Next.js App Router、React、TypeScript 和 Three.js，部署在 Vercel。公开仓库包含前端、内容后台、API、测试和环境变量示例；文章数据库与生产凭据不在仓库里。
如果你想参考其中某个部分，可以从首页组件、主题切换、导航加载管理或 CMS 接口开始读。自己部署时，需要配置自己的 Redis、Blob 和管理员凭据，并调整图片允许域名。
它会继续承载我的项目和记录。下一次有值得分享的尝试，就写在这里。