最近把自己的简历重写了一遍，没用 Notion 也没套模板，当成一个正经前端工程在做。聊几个我觉得有点意思的设计，顺便求 Star 和拍砖。
一句话介绍：Vite + React 写网站，Remotion 写"简历视频"，同一份 zod 校验过的双语数据驱动两端。
几个自己比较得意的点：
-
Monorepo 里两个 source-only 包。
@resume/data和@resume/ui都没有 build 步骤，exports直接指向src/*.ts，Vite / Vitest / Remotion 的 webpack /tsc全部直接吃 TS 源码，少一层产物，少一类玄学。 -
简历数据单一事实源。基于 JSON Resume schema 扩展，zod 校验，所有字符串都是
LocalizedString { zh, en },网站 section 、Remotion composition 、CLI 渲染脚本全都读同一份resume.ts,改一行全部同步。 -
视频三级降级,按用户偏好/网络自动挑：
prefers-reduced-motion→ 静态 postersaveData/ 慢网 → 预渲染 mp4- 默认 → 懒加载
@remotion/player,进入视口才挂载,离开自动暂停回首帧
-
Remotion 双入口。CLI/Studio 用
index.ts注册 root,网页端只 importexports.ts(纯组件 + zod schema + 默认值 + 元信息),两边复用 composition 但互不污染。 -
CI 渲染按内容哈希缓存。
apps/remotion/src+packages/data/src哈希没变就跳过 render,首次部署 58 分钟,之后 12 分钟。
技术栈：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 网页端复用和视频降级这块的。
Select Language