[分享] 把个人简历重写成了一个赛博朋克网站，几段动画用 Remotion 做的，已开源

[Mark0309]

最近把自己的简历重写了一遍，没用 Notion 也没套模板，当成一个正经前端工程在做。聊几个我觉得有点意思的设计，顺便求 Star 和拍砖。

一句话介绍：Vite + React 写网站，Remotion 写"简历视频"，同一份 zod 校验过的双语数据驱动两端。

几个自己比较得意的点：

1. Monorepo 里两个 source-only 包。@resume/data 和 @resume/ui 都没有 build 步骤，exports 直接指向 src/*.ts，Vite / Vitest / Remotion 的 webpack / tsc 全部直接吃 TS 源码，少一层产物，少一类玄学。

2. 简历数据单一事实源。基于 JSON Resume schema 扩展，zod 校验，所有字符串都是 LocalizedString { zh, en },网站 section 、Remotion composition 、CLI 渲染脚本全都读同一份 resume.ts,改一行全部同步。

3. 视频三级降级,按用户偏好/网络自动挑：

   • prefers-reduced-motion → 静态 poster
   • saveData / 慢网 → 预渲染 mp4
   • 默认 → 懒加载 @remotion/player,进入视口才挂载,离开自动暂停回首帧

4. Remotion 双入口。CLI/Studio 用 index.ts 注册 root,网页端只 import exports.ts(纯组件 + zod schema + 默认值 + 元信息),两边复用 composition 但互不污染。

5. CI 渲染按内容哈希缓存。apps/remotion/src + packages/data/src 哈希没变就跳过 render,首次部署 5–8 分钟,之后 1–2 分钟。

技术栈：pnpm + Turborepo / React 18 / Remotion 4 / Tailwind(自写 cyberpunk preset)/ react-i18next / @antfu/eslint-config 。

• 仓库：https://github.com/JS-mark/personal-resume-website
• Demo：https://js-mark.com/personal-resume-website/

任何拍砖都欢迎,尤其想听听别人是怎么处理 Remotion 网页端复用和视频降级这块的。

---

[aahao]

emmm,有点难评。我还是更喜欢简洁风格的简历，建议炫技的项目可以在简历里单独放个入口。

[w3]

做的蛮有意思的，谢谢分享

[EngelEyes]

好基尔中二

[Rain59]

之前 AI 是蓝紫渐变，现在 AI 都是你这种风格了，看来 AI 要么是这一套，要么是那一套，现在对这些页面美感审美疲劳了。

[sillydaddy]

有点意思啊，我前不久才了解到有 Remotion ，我还以为它只是做成品视频的。
我还纳闷说怎么没看到你说的视频，原来还可以用 web player 这样做，而且里面的文本都可以选中。
学习了。感谢 OP 分享。