- FLIP 封面转场 — 点击卡片，封面以弹簧动画「飞」入详情页，返回时同步飞回原卡位（framer-motion
layoutId） - 整页板块 — 每个板块独占一屏（100dvh）自然滚动，板块间可配置分隔文本
- 同步退场动画 — 关闭详情时，文字模糊 + 淡出、背景模糊淡出与封面飞行三者同步进行，无生硬跳变
- 配置驱动 — 站点文案、板块、卡片样式、平台标签（含图标）、社交链接全部集中在
src/config.ts，构建时随编译嵌入页面 - 亮 / 暗双主题 — 纸感亮色 + 暗夜模式，封面浸染式背景自适应
- 丝滑滚动 — Lenis 平滑滚动 + GSAP ScrollTrigger 首屏视差
- 无障碍 —
prefers-reduced-motion全局降级、键盘可达、语义化标签
要求 Node.js 22+ 与 pnpm（corepack enable 即可启用）。
pnpm install # 安装依赖
pnpm dev # 本地开发（http://localhost:3000）
pnpm lint # ESLint 检查
pnpm build # 类型检查 + 生产构建（输出 dist/）
pnpm preview # 本地预览构建产物所有可自定义项集中在 src/config.ts 一个文件，改完重新构建即生效：
| 配置项 | 说明 |
|---|---|
SITE |
站点名、Hero 文案（eyebrow / 大标题 / 英文行 / 签名句）、板块间分隔文本（editorNotes，按间隔配置，置空不显示）、细页脚 slogan、GitHub 仓库链接（repoUrl，置空不显示） |
SECTIONS |
板块完全由此驱动——增删板块、eyebrow / 大标题 / 手记文案、主题色、卡片样式（竖版 2:3 / 横版 16:9、封面下方信息显隐）、卡片副标题（cardSubtitle）、详情 eyebrow（detailEyebrow）、详情信息栏格子（infoCells）。新增板块 = src/data/ 加一个数据文件 + 这里加一条，主页板块、路由 /<id>/:workId、锚点、详情页全部自动生成 |
PLATFORM_TAGS |
平台标签的显示名与图标（如 PC → Monitor 图标），卡片与详情页统一渲染 |
TAG_ICONS |
类型标签的可选图标映射 |
页脚为底部一条细栏：左侧 SITE.footerSlogan，右侧 GitHub 图标链接（SITE.repoUrl）。
作品内容数据在 src/data/（films.ts / games.ts），全板块共用 Work 类型（板块特有字段皆为可选），每个字段带行内注释与 TODO(主人) 标记。
src/
├── config.ts ★ 站点集中配置（SITE 文案 / SECTIONS 板块 / 平台标签 / 标签图标）
├── data/ 作品内容数据（films / games）与公共类型（Work / WorkExtra）
├── components/ 共享组件（DetailOverlay / FullPageSection / SectionHeader / Footer 等）
├── sections/ 通用板块与详情页（WorkSection / WorkDetail，由 SECTIONS 驱动）
├── pages/ 路由页面（Home 长滚动页）
├── hooks/ 自定义 hooks
├── lib/ 工具（lenis 平滑滚动 / 主题 / 共享动画参数）
├── App.tsx 路由（详情以路由级覆盖层叠加在主页之上）
└── main.tsx 入口
路径别名 @/ 指向 src/。
构建产物为纯静态文件（dist/），三个平台的配置均已内置，任选其一：
| 平台 | 配置文件 | 说明 |
|---|---|---|
| GitHub Pages | .github/workflows/deploy.yml |
推送 main 自动部署，含 SPA 404 兜底；Pages Source 需设为 GitHub Actions |
| Vercel | vercel.json |
导入仓库即用（自动识别 pnpm + SPA 回退） |
| Cloudflare Pages | public/_redirects |
构建命令 pnpm build，输出目录 dist |
- 构建：Vite 7 + TypeScript 5.9
- 框架：React 19 + react-router 7
- 样式：Tailwind CSS 3 + 自定义组件（CSS 变量双主题）
- 动画：framer-motion（FLIP / 滚动视差）、GSAP ScrollTrigger（首屏）、Lenis（平滑滚动）
- CI/CD：GitHub Actions（lint + 类型检查 + 构建 + Pages 部署）
请阅读 CONTRIBUTING.md（分支 / Conventional Commits / PR 规范）。 AI 协作者请先阅读 AGENTS.md。