最近把自己的简历重写了一遍，没用 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 网页端复用和视频降级这块的。