ruiqin.dev — 个人作品集

在线访问：https://ruiqin.dev · English version: /en/

袁锐钦（Yuan Ruiqin / PNGTRID）的个人作品集网站。中文默认（/）+ 英文（/en/），浅色主题默认 + 暗色切换，17 个作品 + 5 篇精华文章（含全文页面）。

技术栈

• Astro 5 纯静态 SSG，零客户端框架、零动画库（动效为原生 IntersectionObserver/rAF 实现）
• Tailwind CSS 3.4 + CSS 变量双主题（浅色默认，暗色 class 切换，防 FOUC 内联脚本）
• 图片：WebP + 双宽度变体（1280w/640w）+ srcset
• 部署：Cloudflare Pages，绑定域名 ruiqin.dev

开发

pnpm install
pnpm dev       # 本地开发 http://localhost:4321
pnpm build     # 构建到 dist/（43 页）
pnpm preview   # 预览构建产物
pnpm test      # 数据完整性测试（vitest）

如何维护

• 作品：改 src/data/projects.ts（双语字段、链接、技术标签、status），首页卡片（按 线上/内部/开源 分组）与详情页自动生成
• 文章：src/data/posts.ts 是元数据；正文 markdown 放 src/content/posts/<slug>.md（frontmatter: title/date/source），详情页与 TOC 自动生成
• 站点信息：改 src/config/site.ts（⚠️ 邮箱仍是占位符，socials 数组待补充）
• UI 文案：改 src/locales/zh.ts 与 en.ts（结构必须一致，测试会校验）
• 作品配图：替换 public/images/projects/ 下同名 .webp（1280×800）和 -640.webp 变体；新增 PNG 后跑 node scripts/to-webp.mjs 转换
• 加新作品：projects.ts 加一项 + 两张 webp 图即可

目录结构

src/
├── pages/                # 路由：/ (zh 默认) 与 /en/ 成对；writing/ 为文章
├── components/           # 布局 + 首页区块（Hero/Skills/ProjectsGrid/Writing）+ 详情页
├── data/projects.ts      # 作品数据（唯一来源，14 项）
├── data/posts.ts         # 文章元数据
├── content/posts/        # 文章正文（markdown）
├── config/site.ts        # 站点元信息
├── locales/              # 中英 UI 字典
├── i18n/                 # locale 工具
├── lib/seo.ts            # canonical / hreflang / JSON-LD
├── scripts/motion.ts     # 原生动效（无依赖）
└── styles/globals.css    # 主题变量与工具类

部署（Cloudflare Pages）

1. 推送到 GitHub（首次 commit 自行执行）
2. Cloudflare Pages → Connect to Git → 选此仓库
3. 构建命令 pnpm build，输出目录 dist
4. Custom domain 添加 ruiqin.dev