Cerarin · 个人主页

一个 Vite + React 18 + Tailwind 的个人导航页，深墨绿 + 青绿主题，支持深浅双模式。

---

快速开始

npm install
npm run dev      # 本地开发，热更新
npm run build    # 构建生产包到 dist/
npm run preview  # 本地预览构建产物

项目结构

项目根/
─ index.html          # 元信息、字体
─ vite.config.js
─ tailwind.config.js
─ public/             # 静态资源（背景图、图标等）
│  ├─ bg.png
│  ├─ bg.svg
│  ├─ favicon.svg
│  ─ og.png
─ src/
   ├─ data/site.js     #  所有文案和数据都在这里
   ├─ index.css        # 主题色变量
   ├─ components/      # 组件
   ─ hooks/ i18n/     # 工具

改内容

编辑 src/data/site.js，名字、简介、导航卡片、社交链接都在这个文件里。中英文案用 { zh, en } 表示，右上角语言切换会自动切换。

export const site = {
  profile: { name: { zh: 'Cerarin', en: 'Cerarin' } },
  socials: [{ id: 'github', icon: 'github', href: 'https://github.com/you' }],
  nav: [{ id: 'blog', icon: 'blog', title: { zh: '博客', en: 'Blog' }, href: '#' }],
}

改主题色

编辑 src/index.css 顶部的 CSS 变量，改一处全局生效：

:root {
  --brand: 110 213 192;        /* 主色 */
  --brand-light: 162 237 224;  /* 浅色 */
  --brand-dark: 79 187 166;    /* 深色 */
}

背景色在 body / html.dark body 里改。变量只写空格分隔的 RGB 数字。

改背景图

直接替换 public/bg.png 就行。想换文件名就改 src/components/Background.jsx 里的 BG_IMAGE 路径，留空则用纯色背景。

改导航卡片

在 src/data/site.js 的 nav 数组里增删对象即可，网格会自动重排。图标名需在 src/components/Icon.jsx 里定义。

部署

项目已配好 vercel.json，推到 GitHub 后在 Vercel 导入即可，框架选 Vite，构建命令 npm run build，输出目录 dist。

也可以用 CLI：

npm install -g vercel
vercel deploy --prebuilt --prod

注意事项

• Tailwind 透明度非 5 的倍数要用方括号，如 bg-white/[0.45]
• vite.config.js 里 emptyOutDir: false 是故意的，别改回去
• 部署前记得改 index.html 里的占位域名
• 字体走 CDN，离线环境回退到系统字体

---

Author: Cerarin · License: MIT