← 返回全部项目

agenticnoob/hero-next

Hero Next 双语个人网站

根据项目 README 整理

阅读项目 ↓

一个基于 Next.js App Router、React Three Fiber 与 Three.js 的独立双语个人网站,整合个人简介、理念文章、项目案例、公开渠道和日志,并针对桌面沉浸式浏览与移动端阅读提供不同布局。

内容与浏览体验

网站以四个章节呈现个人简介、AI 与哲学理念、公开项目及公开渠道,随后展示按日期组织的日志。中英文内容由类型化数据共享,并保存语言、主题和项目房间选择。

宽屏精细指针设备使用圆形文章索引、动态纸张、四面项目展厅和透视日志;移动端、触控设备及较矮的横屏窗口则采用完整文本、紧凑列表和原生折叠控件组成的阅读布局。

交互与技术架构

项目维持单一运行时、Canvas 和滚动源,以 React Three Fiber 管理渲染与帧循环,并结合 WebGL 四面体、面投影、三角形过渡、GLB 模型和光照。语义化 DOM 布局、无障碍颜色、层叠与指针路由由 CSS 负责。

主题与语言使用独立的持久化状态。页面支持减少动态效果,并为普通文本保持至少 4.5:1 的对比度;移动阅读布局提供持续可用的主题按钮。

项目目录与机器可读内容

项目包含四篇完整的双语精选案例,也可将经过校验的公开仓库数据加入项目目录。案例既能在展厅中以原生阅读对话框打开,也能通过独立页面呈现。

服务器渲染的 Agent 目录与 Markdown 文档覆盖个人资料、理念、项目和日志,内容由现有类型化数据及已验证的日志快照在构建期间生成,无需维护另一套文案。日志必须在首次开发或构建前同步。

边界与限制

实现仅使用 Viselora 的公开入口,并固定相关依赖版本。开发环境的宽松主机允许列表只适用于受信任网络,不应将开发端口暴露到公网。

README 指出 Canvas 与 DOM 的字形栅格化仍可能略有差异,现有内容也是可继续编辑的基础版本。自动化覆盖、交互证据和剩余诊断记录在项目状态文档中。