JCHIN.X WEB | JCHIN.X

简介

这是一个基于 Astro 5.x 的个人作品集网站复刻指南。整站采用深海视觉主题，融合 Three.js 交互与 CMS 内容管理。本指南按模块拆分，每个部分包含独立的提示词，可直接喂给 AI 编码工具（Cursor / Claude Code）使用。

一、项目初始化

帮我创建一个基于 Astro 5.x 的个人作品集网站项目，要求：
- 使用 TypeScript
- 启用 Content Collections 管理内容
- 安装 three.js 依赖（用于首页着色器）
- 安装 mermaid 依赖（用于知识库图表）
- 创建以下目录结构：
  src/
  ├── components/       # 组件
  ├── content/          # 内容集合
  │   ├── config.ts     # 集合定义
  │   ├── projects/     # 项目 markdown
  │   └── knowledge/    # 知识库 markdown
  ├── layouts/          # 布局
  ├── pages/            # 页面
  └── styles/           # 全局样式
  public/
  └── images/           # 图片资源

依赖清单：

{
  "dependencies": {
    "astro": "^5.x",
    "three": "^0.170.0",
    "mermaid": "^11.x"
  }
}

二、全局样式与主题系统（global.css）

创建一个全局样式文件 src/styles/global.css，实现深海主题的明暗双模式系统：

1. CSS 变量定义（暗色为默认）：
   --bg-dark: #060810           # 主背景
   --bg-secondary: #0d1018      # 次背景
   --text-primary: #ffffff      # 主文字
   --text-secondary: #8b9dc3    # 次文字
   --accent-blue: #3b82f6       # 主题蓝
   --accent-blue-light: #60a5fa # 亮蓝
   --border-color: rgba(59, 130, 246, 0.15)
   --card-bg: transparent        # 卡片背景（透明）
   --card-bg-hover: rgba(17, 17, 24, 0.15)
   --card-border: rgba(255, 255, 255, 0.1)
   --shadow-glow: rgba(59, 130, 246, 0.1)
   --divider: rgba(255, 255, 255, 0.06)
   --text-muted: rgba(255, 255, 255, 0.25)
   --text-body: rgba(255, 255, 255, 0.7)
   --text-sub: rgba(255, 255, 255, 0.5)
   --badge-bg: rgba(255, 255, 255, 0.1)
   --badge-border: rgba(255, 255, 255, 0.2)
   --btn-border: rgba(255, 255, 255, 0.5)

2. 亮色主题 [data-theme="light"]：
   --bg-dark: #f0f5fa
   --card-bg: transparent
   --card-bg-hover: rgba(255, 255, 255, 0.2)
   --card-border: rgba(37, 99, 235, 0.12)
   （其余变量对应调整为浅色系）

3. body 背景动效：
   - body::before — 多层 radial-gradient 模拟深海焦散光流，带 causticsDrift 18s 循环动画
   - body::after — SVG 波浪纹 + CSS 网格线，带 gridFloat 60s 平移动画
   - 亮色模式下降低 opacity 和饱和度

4. 全局基础样式：
   - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto' 等系统字体
   - scroll-behavior: smooth
   - a 标签无下划线，hover 时 opacity 0.8
   - 响应式断点：1024px / 768px

三、布局组件（BaseLayout.astro）

创建 src/layouts/BaseLayout.astro，作为全站公共布局：

1. Props 接口：
   - title?: string（默认 'JCHIN.X'）
   - activeNav?: 'home' | 'projects' | 'knowledge' | 'workspace'

2. Header（固定顶部，backdrop-filter blur）：
   - 左侧：品牌名 "JCHIN.X"，链接到首页，font-size 1.75rem，hover 时蓝色光晕
   - 中间：导航栏，4 个链接（首页/项目库/AI知识库/AI工作空间），当前页高亮并显示底部蓝色短线动画
   - 右侧：明暗切换按钮（太阳/月亮 SVG 图标），通过 data-theme 属性切换，localStorage 持久化

3. Main：slot 插槽

4. Footer：
   - 居中排列 3 个图标链接：Email（mailto）、GitHub（外链）、WeChat（hover 显示二维码弹窗）
   - 图标用 SVG，48px 方形，半透明边框，hover 时蓝色边框 + 光晕

5. 明暗切换脚本（is:inline）：
   - 读取 localStorage('theme')
   - 点击切换 data-theme 属性
   - 暗色时移除属性，亮色时设为 'light'

四、首页（index.astro）

创建 src/pages/index.astro，全屏深海视觉首页：

1. 结构：
   - Hero 区域：100svh 全屏，flex 居中
   - Three.js 水波纹 Canvas 作为背景（absolute 定位，z-index 0）
   - 文字内容在 Canvas 上方（z-index 2）

2. 文字内容：
   - 大标题 "JCHIN.X"：clamp(4rem, 12vw, 10rem)，font-weight 900，白色文字光晕
   - 打字机效果：两行文字逐字显示
     - 第一行："探索AI、设计与人交互的连接！"
     - 第二行："欢迎来到加成space，一个汇聚先锋洞察、生成式创意与沉浸式叙事的智能场域。"
   - 光标闪烁效果（2px 蓝色竖线，blink 动画）
   - 打字速度 70ms/字，第一行完成后停顿 200ms 再开始第二行

3. Three.js 水波纹着色器（单独组件 src/components/WaterShader.astro）：
   - 使用 WebGL 着色器渲染逼真水面
   - 高性能版：16 次法线迭代，8 次光线步进
   - 低性能版（移动端/低核心数）：10 次法线迭代，5 次光线步进，pixelRatio 0.75
   - 鼠标交互：水面随鼠标位置变化
   - 包含大气散射、太阳高光、菲涅尔反射
   - 自适应窗口大小，resize 防抖

五、Content Collections 配置（config.ts）

创建 src/content/config.ts，定义两个内容集合：

1. projects 集合（type: 'content'）：
   - title: string
   - description: string
   - category: 'ai' | 'other'（枚举）
   - image?: string（封面图路径）
   - demoUrl?: string
   - githubUrl?: string
   - projectImages: string[]（项目展示图片，默认空数组）
   - projectVideos: string[]（项目展示视频，默认空数组）
   - techTags: string[]（技术标签，默认空数组）
   - pubDate: date
   - featured: boolean（默认 false）
   - order: number（默认 99，用于排序）
   - sections: Array<{ heading: string, body: string }>（内容卡片，默认空数组）
   - productThinking?: { problem, solution, decision, result, recap }（产品思考，5 个 string 字段）

2. knowledge 集合（type: 'content'）：
   - title: string
   - description: string
   - category: string
   - subcategory?: string
   - tags: string[]（默认空数组）
   - image?: string
   - pubDate: date

六、项目库列表页（projects.astro）

创建 src/pages/projects.astro，项目卡片网格页面：

1. 页面结构：
   - 页面标题 "项目库" + 分隔线 "｜" + 副标题 "探索我的数字创意与技术实践"
   - 两组项目：AI 项目 和 其他项目，每组前有分类标签
   - 每组内卡片按 order 字段升序排列

2. 卡片结构（project-card）：
   - 顶部：封面图（object-fit cover，高度自适应）
   - 中间：分割线
   - 底部：标题 + 描述 + 技术标签列表
   - 整个卡片是链接，点击跳转到详情页

3. 卡片样式：
   - 透明毛玻璃背景（var(--card-bg) + backdrop-filter blur）
   - 1px 半透明边框
   - Hover：放大 1.05 倍 + 蓝色边框 + 蓝黑荧光光晕
     box-shadow: 0 0 12px rgba(59,130,246,0.5), 0 0 40px rgba(59,130,246,0.25), 0 0 80px rgba(0,0,0,0.4)
   - 封面图 hover 时放大 1.08 倍

4. 网格布局：repeat(auto-fill, minmax(320px, 1fr))，gap 24px
5. 响应式：768px 以下单列

七、项目详情页（projects/[…slug].astro）

创建 src/pages/projects/[...slug].astro，项目详情页：

1. 路由：根据 slug 动态生成，从 projects 集合获取数据

2. 页面结构（从上到下）：
   a. 返回按钮 "← 返回项目库"
   b. 项目头部：封面大图（max-height 480px）+ 分类标签 + 标题（2.5rem，居中）+ 描述（居中）
   c. 内容区域（根据 category 分两种模式）：

   AI 项目（category === 'ai'）：
   - sections 横向卡片：遍历 sections 数组，每个 heading 生成一张卡片，grid-template-columns 自动匹配数量
   - 产品思考：5 个维度纵向列表（问题/方案/决策/结果/复盘），每项有蓝色标签 + 正文
   - 项目展示：图片 3 列网格（object-fit: contain, max-height 400px）+ 视频跨 2 列
   - GitHub 链接（居中，带 SVG 图标）

   其他项目（category === 'other'）：
   - sections 横向卡片（同上，有 sections 时优先使用，否则 fallback 到 markdown body）
   - 项目展示（同上）
   - 工作内容（tech tags 标签流）

   底部：
   - 可选的 "在线体验" 按钮（demoUrl）

3. 卡片样式：
   - 所有 content-section 统一：透明毛玻璃 + 1px 边框 + backdrop-filter blur
   - 标题居中，letter-spacing 0.05em
   - Hover：蓝色边框 + 蓝黑荧光光晕
   - sections 卡片横向排列，gap 24px

4. 响应式：
   - 1024px：padding 收窄
   - 768px：sections 单列堆叠，标题缩小
   - 480px：图片网格单列

5. 背景动效：独立的 causticsFloat 焦散光流动画（12s 循环）

八、AI 知识库列表页（knowledge/index.astro）

创建 src/pages/knowledge/index.astro，知识库卡片网格：

1. 数据：硬编码分类数组，每类包含 label、description、items
   示例分类：Prompts、Skills、Thinking 等
   每个 item：{ name, desc, url?, slug? }

2. 页面结构：
   - 标题 "AI知识库" + 分隔线 + 副标题 "Prompts · Skills · Agents · Ideas · Thinking"
   - 每个分类一个 category-block：类目标题（居中）+ 类目描述（居中）+ 卡片网格

3. 卡片类型：
   - 有 url 的：外链卡片（target="_blank"）
   - 有 slug 的：内链卡片（跳转到 /knowledge/[slug]）
   - 都没有的：静态卡片（无链接）

4. 卡片结构：
   - 顶部：名称 + 箭头图标
   - 分割线（hover 时发光）
   - 底部：描述文字（最多 3 行截断）

5. 卡片样式：同项目库卡片（透明毛玻璃 + 蓝黑荧光 hover）
6. 网格：repeat(4, 1fr)，响应式 3 列 → 2 列 → 1 列

九、知识文章详情页（knowledge/[…slug].astro）

创建 src/pages/knowledge/[...slug].astro，知识文章详情页：

1. 路由：根据 slug 从 knowledge 集合获取数据

2. 页面结构：
   - 返回按钮 "← 返回知识库"
   - 文章头部（居中）：
     - 分类/子分类标签（小号 uppercase）
     - 标题（2rem，居中）
     - 描述（居中）
     - 发布日期
   - 标签栏：tag 列表，居中排列，底部分割线
   - 正文：markdown 渲染，行高 2，字号 1.05rem

3. Mermaid 图表支持：
   - 引入 mermaid 库
   - 初始化：dark 主题，自定义主题变量（半透明背景 + 白色文字）
   - 将所有 pre > code.language-mermaid 替换为 div.mermaid
   - 自动渲染

4. 排版细节：
   - 段落间距 24px，标题间距 40px
   - 引用块：左边框 2px + 斜体
   - 分割线：1px 半透明线
   - 最大宽度 900px，居中

5. 背景动效：同项目详情页的 causticsFloat

十、AI 工作空间（workspace.astro）

创建 src/pages/workspace.astro，工具资源链接页：

1. 数据：硬编码分类数组
   示例结构：
   {
     label: '大模型',
     description: '常用大语言模型平台',
     links: [
       { name: 'DeepSeek', url: 'https://...', desc: '描述文字' },
       ...
     ]
   }
   分类示例：大模型、设计灵感、3D/着色器、组件库、个人站参考

2. 页面结构：
   - 标题 "AI工作空间" + 分隔线 + 副标题 "创意工具与灵感资源整合"
   - 每个分类一个 category-block：
     - 类目标题（居中）+ 类目描述（居中）
     - link-grid：4 列卡片网格

3. 卡片结构：
   - 顶部：名称 + 外链箭头图标
   - 分割线（hover 时发光：box-shadow 蓝色光晕）
   - 底部：描述（最多 3 行截断，居中）

4. 卡片样式：透明毛玻璃 + 蓝黑荧光 hover
5. 响应式：1200px 3列 → 1024px 2列 → 768px 1列

十一、项目 Markdown 文件格式

AI 项目示例：

---
title: 项目名称
description: 一句话描述
category: ai
image: /images/封面图.png
demoUrl: https://体验链接
githubUrl: https://github.com/xxx
projectImages: ["/images/展示图1.png", "/images/展示图2.png"]
projectVideos: ["/images/演示视频.mov"]
techTags: ["标签1", "标签2"]
pubDate: 2026-06-01
featured: true
order: 1
sections:
  - heading: 项目介绍
    body: 项目的核心定位和价值主张
  - heading: 产品功能
    body: "功能一：描述；功能二：描述；功能三：描述"
  - heading: 使用场景
    body: 目标用户和使用场景描述
productThinking:
  problem: 用户/市场痛点是什么
  solution: 你的解决方案是什么
  decision: 关键的产品决策和取舍
  result: 项目成果和数据
  recap: 复盘反思和认知收获
---

其他项目示例：

---
title: 项目名称
description: 描述
category: other
image: /images/封面图.png
projectImages: ["/images/图片1.png"]
techTags: ["标签1", "标签2"]
pubDate: 2023-11-10
featured: false
order: 2
sections:
  - heading: 板块标题1
    body: 板块内容1
  - heading: 板块标题2
    body: 板块内容2
---

十二、UI 设计规范速查

颜色体系

用途	暗色模式	亮色模式
主背景	#060810	#f0f5fa
主题蓝	#3b82f6	#2563eb
主文字	#ffffff	#1a1a2e
次文字	#8b9dc3	#4a5568
卡片背景	transparent	transparent
卡片边框	rgba(255,255,255,0.1)	rgba(37,99,235,0.12)

卡片交互规范

基础状态：
  background: transparent
  border: 1px solid var(--card-border)
  backdrop-filter: blur(10px)

Hover 状态：
  border-color: #3b82f6
  box-shadow: 0 0 12px rgba(59,130,246,0.5),
              0 0 40px rgba(59,130,246,0.25),
              0 0 80px rgba(0,0,0,0.4)
  transform: scale(1.05) 或 translateY(-8px)

动画清单

动画名	时长	用途
causticsDrift	18s	全局背景焦散光流
gridFloat	60s	背景网格平移
causticsFloat	12s	内容页背景光流
blink	2s	打字机光标闪烁
cornerPulse	8s	Hero 角落装饰呼吸

响应式断点

断点	适配
1200px	工作空间 4列→3列
1024px	导航隐藏，padding 收窄
768px	标题缩小，卡片单列
480px	图片网格单列

内容居中规范

所有以下元素统一 text-align: center：

页面标题、副标题
类目标题、类目描述
卡片标题、卡片描述
项目标题、项目描述
文章标题、文章描述、标签栏

十三、实现顺序建议

第一步：项目初始化 + 全局样式 + BaseLayout（搭好骨架）
第二步：首页 + WaterShader 组件（视觉冲击第一印象）
第三步：Content Collections 配置 + 项目库列表页
第四步：项目详情页（最复杂的页面）
第五步：AI 知识库列表页 + 文章详情页
第六步：AI 工作空间页
第七步：填充内容 markdown 文件
第八步：响应式适配 + 明暗模式细节调优

每一步都可以单独喂给 AI 编码工具，配合本指南的提示词使用。