imranjan.cn

2025 年 7 月准备留学申请时，我发现简历只有一页，文书也有字数限制，每个项目只能写一两行：用了什么技术，拿了什么奖。为什么这样设计，中途换过几次方案，哪里没做好，这些都没有地方写。

于是我做了这个网站。每个项目一页，讲清楚背景、我负责的部分、怎么实现和结果；也放简历里没有位置的东西，比如我的摄影作品，以及我对交互的一些想法。2025 年 8 月 10 日第一版上线，之后一直在改。

网站从设计、3D 场景搭建、前后端开发、网站 AI 到部署，都是按我自己的想法，和 Claude、Codex 一起完成的。现在首页有两个入口：走进 3D 景观，或者直接和网站上的 AI 版我对话；手机访问时直接进入对话首页。

内容和页面是分开的：项目、照片、个人信息和技能都写在数据文件里，中英文成对保存，页面只负责排版。新增一个项目只要在目录里加一条，它的页面路由、预渲染和站点地图都会跟上。

构建在 Vercel 上完成：Vite 按页面拆分代码，Three.js 单独打包；Nitro 把内容页预渲染成静态 HTML，并给每页生成一份 Markdown。

访问时，页面和资源直接从 Vercel 的边缘网络返回，图片由 Vercel 的图片服务按需转成 WebP 并缓存。只有对话、访客数和点赞会调用新加坡的服务端函数，再由函数访问 Redis、Postgres 和两个 AI 接口。

英文是默认语言，中文在 /zh 下，每段文字都中英成对维护。每个页面的标题、描述、规范网址、分享图和结构化数据都从同一份配置生成，并通过 hreflang 告诉搜索引擎另一种语言的页面在哪里。3D 首页在服务器渲染的 HTML 里也有可读的标题和导航，没有 WebGL 也能被搜索引擎读到。

越来越多人会让自己的 AI 助手来读网页，所以每个页面在构建时还会生成一份 Markdown，内容和网页一致：请求头带 Accept: text/markdown 时，同一个网址直接返回 Markdown；页头的 MD 按钮可以手动打开。网站 AI 读的正文也是这份 Markdown。

我很早就想把脑海里的画面做成一片能走进去的 3D 景观。2026 年 9 月看到 GPT-6 Astra 宣传片的那一刻，我就开始动手：在 Codex 里用 Blender 官方 MCP 和 computer use，按我的想法搭出了整个场景，建筑细节、天气效果和性能优化再用 Fable 5.1 精修。

选 3D 入口后，首页是一片连续的景观。四个地方连成一条路：有风沙的沙漠、下雪的城市、下着小雨的校园和晴天的海边城市。可以滚动鼠标沿路导览，也可以打开自由漫游，用 WASD 和方向键走动、拖动视角。路边立着我的照片，点任意一张，镜头会平稳推到它正前方。

两处校园参考照片重新建模：电子科技大学的品学楼庭院，校名石上的字按照片描出轮廓；新加坡国立大学的 UTown，按照片压缩重组。山体用 SRTM 高程数据重新采样后缩放摆放，部分树木、岩石和材质用了 Poly Haven 的 CC0 素材。

2D 首页是一个对话首页：中间是可以用鼠标拨动的粒子人像，下面是输入框和推荐问题。访客可以问我的经历和项目，问某个项目的代码怎么写，也可以像平常一样随便聊。它用第一人称“我”回答，但始终标明是 AI，也不会替我答应任何事。

3D 首页起点左边的“Allio!”画板是同一个入口：镜头停稳后，用相机投影算出画板四个角在屏幕上的位置，把对话框贴上去。2D 和 3D 共用同一段对话。