最近把自己的简历重写了一遍，没用 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 → 静态 poster saveData / 慢网 → 预渲染 mp4 默认 → 懒加载 @remotion/player ,进入视口才挂载,离开自动暂停回首帧 Remotion 双入口 。CLI/Studio 用 index.ts 注册 root,网页端只 import exports.ts (纯组件 + zod schema + 默认值 + 元信息),两边复用 composition 但互不污染。 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 网页端复用和视频降级这块的。
最近把自己的简历重写了一遍，没用 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 → 静态 poster saveData / 慢网 → 预渲染 mp4 默认 → 懒加载 @remotion/player ,进入视口才挂载,离开自动暂停回首帧 Remotion 双入口 。CLI/Studio 用 index.ts 注册 root,网页端只 import exports.ts (纯组件 + zod schema + 默认值 + 元信息),两边复用 composition 但互不污染。 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 网页端复用和视频降级这块的。
最近把自己的简历重写了一遍，没用 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 → 静态 poster saveData / 慢网 → 预渲染 mp4 默认 → 懒加载 @remotion/player ,进入视口才挂载,离开自动暂停回首帧 Remotion 双入口 。CLI/Studio 用 index.ts 注册 root,网页端只 import exports.ts (纯组件 + zod schema + 默认值 + 元信息),两边复用 composition 但互不污染。 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 网页端复用和视频降级这块的。