工程基座
TypeScript 5.9 · Vite · pnpm · ESLint flat config
类型检查是这个项目的第一道防线,不是事后补的。组件契约、内容数据和动效入口都有
显式类型,错误会在 pnpm typecheck 中暴露,而不是等到浏览器运行时静默失败。
pnpm 的严格依赖树让构建工具、测试环境与运行时使用同一套可追踪的版本约束。
往下滚,看看构成这个站点的工程、框架、样式、动效与渲染方式。
读博客TypeScript 5.9 · Vite · pnpm · ESLint flat config
类型检查是这个项目的第一道防线,不是事后补的。组件契约、内容数据和动效入口都有
显式类型,错误会在 pnpm typecheck 中暴露,而不是等到浏览器运行时静默失败。
pnpm 的严格依赖树让构建工具、测试环境与运行时使用同一套可追踪的版本约束。
Vue 3 组合式 API · Nuxt 4 · Nitro server routes
首页是 SSR 输出的。你现在读到的这五段文字来自 content/home/layers/*.md,
在服务端就已经渲染进 HTML,首屏无需等待客户端脚本才能阅读。
组合式 API 将页面编排与滚动动画分开,组件只负责清晰的内容结构与样式。
UnoCSS 原子化 · Design Tokens · 响应式断点
五个层色不是随机装饰,而是内容编码。同一个色值贯穿面板边框、项目标签与交互反馈。
色值只存一份,UnoCSS theme 与组件样式从同一个常量表读取,避免重复硬编码。
GSAP timeline · ScrollTrigger · Reduced Motion
每个 Layers 段落由一条滚动时间线控制。左侧内容从下向上划入,中心保持留白, 右下占位块稍晚出现,入场、停留与退场都随滚动位置稳定回放。
Nuxt Content · SSR · Semantic DOM
Layers 使用语义化 DOM 和 Nuxt Content 渲染,文字可选择、可索引,也能在脚本失效时 保持完整。视觉动效只改变 transform 与 opacity,不改变内容的阅读顺序。