# 个人作品集网站 · 优化版规格书

> **使用方式**：将本文档完整复制给 Claude / ChatGPT / Cursor 等 LLM，即可生成完整的个人作品集网站代码。实现前请先替换附录中的「占位符清单」为你的真实信息。

---

## 第 1 章 · 技术栈与全局配置

### 1.1 技术选型

| 分类   | 选型                                                         |
| ------ | ------------------------------------------------------------ |
| 框架   | Next.js 14 App Router，TypeScript 严格模式                   |
| 样式   | Tailwind CSS v3                                              |
| 动画   | Framer Motion（处理所有动效，不使用 CSS transition 做入场/出场动画） |
| 主题   | next-themes（管理暗黑/白天主题切换）                         |
| 包管理 | pnpm                                                         |

### 1.2 全局字体

JetBrains Mono（Google Fonts），作为唯一字体族：

- 标题：`weight 700`
- 正文：`weight 400`
- 辅助文字：`weight 300`
- 开启连字特性：`font-feature-settings: "liga" "calt"`

### 1.3 tailwind.config.ts 扩展

```ts
// tailwind.config.ts
{
  theme: {
    extend: {
      fontFamily: {
        mono: ['JetBrains Mono'， 'monospace']，
      }，

      colors: {
        accent: {
          start:  '#6366f1'，  // indigo
          mid:    '#a855f7'，  // purple
          mid2:   '#ec4899'，  // pink
          end:    '#f97316'，  // orange
          green:  '#22c55e'，
          cyan:   '#06b6d4'，
        }，
        glass: {
          light:        'rgba(255，255，255，0.04)'，
          'border-light': 'rgba(255，255，255，0.10)'，
          dark:         'rgba(0，0，0，0.04)'，
          'border-dark': 'rgba(0，0，0，0.08)'，
        }，
        surface: {
          dark:  '#000000'，
          light: '#fafafa'，
        }，
      }，

      backdropBlur: {
        glass:        '40px'，
        'glass-heavy': '80px'，
        'glass-light': '16px'，
      }，

      borderRadius: {
        pill:             '9999px'，
        'dynamic-island': '28px'，
      }，
    }，
  }，
}
```

---

## 第 2 章 · 暗黑/白天双模主题

使用 next-themes 的 `ThemeProvider` 包裹根布局 `app/layout.tsx`。

### 2.1 暗黑模式（默认）

| 层级     | 样式                                                         |
| -------- | ------------------------------------------------------------ |
| 背景     | `#000000`                                                    |
| 主文字   | `#f5f5f7`                                                    |
| 次文字   | `#98989d`                                                    |
| 辅文字   | `#6e6e73`                                                    |
| 玻璃面板 | `bg-white/[0.03]` + `border-white/[0.08]` + `backdrop-blur-[40px]` |
| 强调色   | accent 渐变系（见第 1 章 colors.accent）                     |

### 2.2 白天模式

| 层级     | 样式                                                         |
| -------- | ------------------------------------------------------------ |
| 背景     | `#fafafa`                                                    |
| 主文字   | `#1a1a1a`                                                    |
| 次文字   | `#6b6b6b`                                                    |
| 辅文字   | `#9b9b9b`                                                    |
| 玻璃面板 | `bg-white/[0.70]` + `border-black/[0.06]` + `backdrop-blur-[40px]` |
| 强调色   | 与暗黑模式同一组渐变，饱和度提升 20%                         |
| 面板阴影 | `0 1px 3px rgba(0，0，0，0.06)， 0 0 0 0.5px rgba(0，0，0，0.04)`   |

### 2.3 主题切换按钮

- **位置**：Dynamic Island 导航栏最右侧
- **图标**：暗黑模式显示 ☀️，白天模式显示 🌙
- **交互**：点击切换主题，图标旋转 180deg 并弹性缩放
- **动画**：`spring`，duration 300ms

### 2.4 全局过渡

主题切换时所有元素平滑过渡颜色：

```css
* {
  transition:
    background-color 0.4s ease，
    color            0.4s ease，
    border-color     0.4s ease;
}
```

---

## 第 3 章 · Dynamic Island 导航栏

仿 iPhone Dynamic Island 的浮动胶囊导航，置于页面顶部中央。

### 3.1 基础样式

```css
/* Dynamic Island 容器 */
position: fixed;
top: 16px;
left: 50%;
transform: translateX(-50%);
z-index: 50;
height: 48px;
border-radius: 28px; /* 对应 borderRadius.dynamic-island */

/* 暗黑模式 */
background: rgba(0， 0， 0， 0.6);
border: 1px solid rgba(255， 255， 255， 0.12);

/* 白天模式 */
background: rgba(255， 255， 255， 0.7);
border: 1px solid rgba(0， 0， 0， 0.06);

/* 阴影 */
box-shadow:
  0 8px 32px rgba(0， 0， 0， 0.12)，
  0 0 0 0.5px rgba(0， 0， 0， 0.08);

/* 毛玻璃 */
backdrop-filter: blur(80px); /* backdropBlur.glass-heavy */
```

### 3.2 三态交互

使用 Framer Motion 的 `animate`（width） + `layout` prop 实现平滑宽度过渡。

#### 状态 1 · Collapsed（默认 / 鼠标离开）

- **宽度**：`56px`（高度 48px → 接近圆形）
- **内容**：仅显示 ⌘ 图标或首字母 logo
- **过渡**：`width` 使用 `spring(stiffness: 200， damping: 24)`，duration 0.5s

#### 状态 2 · Expanded（鼠标悬停）

- **宽度**：`auto`，`min-width: 420px`，`max-width: 560px`
- **高度**：悬停时胶囊高度略微增加（约 4~6px），动画流畅自然
- **内容布局**（从左到右）：⌘ logo → 导航链接 → 分隔线 → ThemeToggle
- **内边距**：`12px 24px`
- **当前路由高亮**：使用 GradientText 组件渲染当前页链接文字
- **过渡**：`width` 使用 `spring`，duration 0.5s；`padding` 使用 `ease`，duration 0.4s；高度变化使用 `spring`，与宽度动画同步

#### 状态 3 · Scroll Context（折叠态滚动提示）

- **触发条件**：Collapsed 状态下，页面滚动到不同 section
- **表现**：⌘ 图标旁短暂显示当前 section 名称（如 "Works"、"About"）
- **行为**：显示 2 秒后自动淡出，回到纯 ⌘ 图标

### 3.3 移动端适配

手机端（viewport  **核心理念**：终端元素是氛围装饰，不是视觉主题。像 VS Code 一样冷静克制，而非 80 年代绿色荧光屏。

### 4.1 分行式代码注释

Section 副标题 / 描述文字前加 `//` 前缀。

- **样式**：`font-mono text-xs`，文字颜色 `text-tertiary/50`（半透明），`tracking-wider`（拉开字距）
- **与标题间距**：8px
- **示例**：`// featured works`

### 4.2 左对齐微缩提示符

- **位置**：名字正上方
- **内容**：微缩 `$` 符号，作为页面唯一提示符装饰
- **样式**：`text-xs`（14px），`weight 300`，颜色 `text-tertiary/40`，静态，无动画
- **视觉原则**：不闪烁、不绿色、不抢眼 —— 像一个真实的终端 prompt，视觉权重极低

同时可使用类终端命令作为提示信息，例如：

- `$ cat ~/me.md`
- `$ scroll down`

### 4.3 macOS 窗口圆点

所有玻璃卡片左上角添加装饰性三圆点：

| 圆点 | 颜色      |
| ---- | --------- |
| 红   | `#ff5f57` |
| 黄   | `#febc2e` |
| 绿   | `#28c840` |

- **直径**：8px（比标准 macOS 缩小一圈）
- **间距**：圆点之间间距 6px
- **位置**：距卡片左上角 14px
- **内容偏移**：圆点下方正文区域从距顶部 44px 处开始

### 4.4 行号装饰

About 区域文字段落左侧添加行号：

- **内容**：垂直排列 `1` `2` `3` ...
- **样式**：颜色 `text-tertiary/30`，字号 11px，右对齐
- **宽度**：28px
- **距正文间距**：20px

### 4.5 括号 / 标签装饰

- **名字包裹**：用 `` 包裹，括号颜色 `accent-mid/60`（降低饱和度）
- **标签格式**：用 `#` 前缀（如 `#react`、`#golang`）

### 4.6 背景代码水印

- **位置**：Hero 区域背景
- **内容**：随机字符
- **样式**：`font-mono`，倾斜 12deg，透明度 0.025（暗黑模式可降至 0.02）
- **动画**：极度缓慢滚动（约 60 秒一个循环周期）
- **显示条件**：仅桌面端

---

## 第 5 章 · 路由架构

多页路由（仅供参考，可按需调整）：

| 路径           | 页面     | 内容                    |
| -------------- | -------- | ----------------------- |
| `/`            | 首页     | Hero + 精选作品         |
| `/works`       | 作品列表 | 终端风格筛选 + 作品网格 |
| `/work/[slug]` | 作品详情 | README 风格展示         |
| `/about`       | 关于     | 极客简历 + 技能         |

所有页面共享根布局 `layout.tsx`，包含以下全局组件：

```
ThemeProvider + BackgroundBlobs + NoiseOverlay + CustomCursor + DynamicIsland + PageTransition
```

---

## 第 6 章 · 核心组件

### 6.1 组件清单

| 组件                | 用途                  | 关键规格                                                     |
| ------------------- | --------------------- | ------------------------------------------------------------ |
| **TerminalWindow**  | 通用卡片容器          | macOS 三圆点 + title + 内容区；`backdrop-blur-glass` + `border border-glass-border` + `rounded-2xl` |
| **GradientText**    | 渐变文字              | 文字填充 accent 渐变色（start → mid → mid2 → end），无额外前缀或装饰，纯净渲染 |
| **GlassPill**       | 小标签（技能 / 筛选） | 字体 JetBrains Mono，默认 `#` 前缀，毛玻璃胶囊样式           |
| **DynamicIsland**   | 顶部浮动导航          | 见第 3 章完整规格                                            |
| **CustomCursor**    | 自定义光标            | 暗黑模式：白色圆环；白天模式：黑色圆环；移动端隐藏           |
| **ProjectCard**     | 作品卡片              | TerminalWindow 包裹；含 Canvas 生成艺术预览、标题、描述、标签 |
| **BackgroundBlobs** | 背景光斑              | 暗黑：3 个彩色光斑；白天：3 个暖灰色光斑；`blur-[120px]`；带视差滚动 |
| **ThemeToggle**     | 主题切换按钮          | 基于 next-themes `useTheme`；见第 2 章 2.3 节                |
| **ScrollReveal**    | 入场动画              | stagger 效果；文字字体使用 JetBrains Mono                    |

### 6.2 GradientText 详细规格

```tsx
// GradientText 实现参考
// 使用 CSS background-clip: text 实现渐变文字填充
// 渐变方向：左到右，覆盖 accent.start → accent.mid → accent.mid2 → accent.end
// 回退方案：纯色文字（不支持 background-clip 的浏览器）
```

- **渐变顺序**：`accent.start` → `accent.mid` → `accent.mid2` → `accent.end`
- **渲染方式**：`background-clip: text` + `text-fill-color: transparent`
- **无装饰**：不添加星号、括号、下划线等额外元素
- **适用场景**：名字、章节标题、当前路由高亮、重要强调文字

### 6.3 GlassPill 详细规格

- **形状**：`rounded-pill`（`border-radius: 9999px`）
- **背景**：毛玻璃效果，暗黑 `bg-white/[0.06]`，白天 `bg-black/[0.04]`
- **边框**：暗黑 `border-white/[0.08]`，白天 `border-black/[0.06]`
- **内边距**：`px-3 py-1`（水平 12px，垂直 4px）
- **字体**：JetBrains Mono，`text-xs`
- **前缀**：默认显示 `#`（技能标签、筛选按钮等场景）

---

## 第 7 章 · 各 Section 要点

### 7.1 Hero

- **对齐**：内容左对齐
- **元素排列**（从上到下）：
  1. 微缩 `$` 符号（`text-xs text-tertiary/40`，静态，无动画）
  2. 名字（GradientText 渲染）
  3. 身份标签（GradientText 渲染）
  4. 一句话描述（`//` 前缀，`text-xs text-tertiary/50`）
  5. GlassPill 技能标签（水平排列）
- **底部**：淡色向下指示箭头（`text-tertiary/20`，无文字，暗示可滚动）

### 7.2 精选作品

- **标题**："Featured Works"（GradientText 渲染）
- **副标题**：`// featured projects`
- **布局**：大小交错 —— 大卡片（66% 宽）与小卡片（34% 宽）交替排列
- **内容**：n 张 ProjectCard
- **底部**：淡色「查看更多」链接
- 从 Github API  获取 Star 最多的 4个作品

### 7.3 作品列表 / 筛选

- **标题**："Works"
- **筛选栏**：GlassPill 按钮组 —— `#all` `#design` `#dev` `#other`
- **网格布局**：瀑布流 / 响应式网格
- **入场动画**：每张卡片 stagger 渐入
- **防空洞规则**：网格排列时禁止出现单侧空白列；如左侧内容过多导致右侧悬空，直接换行填充

使用 Github API 获取作品列表，包含基本 Description，语言，star count 与 fork count。

使用 Edgeone Function 服务端代理访问。

### 7.4 作品详情

- **返回链接**：纯文字 GlassPill（文字 `↩ Back`），无 `$` 前缀
- **内容容器**：TerminalWindow 包裹，仿 GitHub README 排版风格
- **底部导航**：`← Prev` 和 `Next →`，指向前后项目

需要支持渲染 README ，需要支持常见 Markdown 能力：

- 标题
- 段落
- 列表
- 表格
- 引用
- 链接
- 图片
- 行内代码
- 代码块

代码块要符合终端玻璃风格。  
图片要自适应宽度，不要撑破布局。  
外链应新窗口打开，并带安全属性

需要展示：

- 仓库名称
- 仓库描述
- GitHub 外链
- stars
- forks
- language
- license
- 更新时间
- README Markdown 内容

### 7.5 关于

- **标题**："About"
- **正文区**：TerminalWindow 内，带行号装饰的段落文字（见 4.4 行号规格）
- **技能区**：
  - 标题："Skills"
  - 布局：3 列 TerminalWindow
  - 内容排版：代码高亮风格（类似 IDE 中的语法高亮）

在 最下方添加一个留言板

留言板包含：

- 留言列表
- 昵称输入框
- 内容输入框
- 可选联系方式输入框
- 提交按钮
- 空状态
- loading 状态
- 错误提示

留言板是轻量功能，不要做成复杂社区系统。

### 7.6 评论系统

每个作品详情页底部都要有独立评论区。

标题示例：

```txt
Comments
// project discussion
```

评论系统包含：

- 评论列表
- 昵称输入
- 评论内容输入
- 提交按钮
- 空状态
- loading 状态
- 错误状态

要求：

- 评论绑定到当前作品
- 不需要登录
- 不做楼中楼
- 不做点赞
- 不做富文本
- 只做简洁可用的评论能力

### 7.7 全局 footer

- 全站访问量（page view） 使用 Edgeone KV
- 社交链接
- 版权信息
- 简短终端风格文案

示例：

```txt
// 访问量: 1024  苏ICP备xxx
```

## 

## 第 8 章 · 自定义 Hook

### 8.1 useGenerativeArt

```ts
function useGenerativeArt(
  canvasRef: React.RefObject，
  artType: 1 | 2 | 3 | 4 | 5 | 6
): void
```

- **渲染**：`requestAnimationFrame`，帧率 30fps
- **算法**：6 种不同生成艺术算法（由 `artType` 参数选择）
- **性能**：`IntersectionObserver` 检测离开视口时暂停绘制；`ResizeObserver` 响应画布尺寸变化

### 8.2 useDynamicIsland

```ts
function useDynamicIsland(): {
  isExpanded: boolean;
  // ... 其他返回值
}
```

- **展开触发**：鼠标进入导航区域
- **折叠触发**：鼠标离开导航区域，延迟 300ms 后折叠（防止误触）

---

## 第 9 章 · 响应式三档

| 断点           | 桌面（≥1024px）     | 平板（768px ~ 1023px）                         | 手机（ **重要**：实现前请将以下占位符替换为你的真实信息。确保全部替换完成后再执行构建。

| 占位符         | 含义             | 示例值                                   |
| -------------- | ---------------- | ---------------------------------------- |
| `{名字}`       | 你的名字 / ID    | xcsoft                                   |
| `{身份标签}`   | 你的身份描述     | 独立开发者 / 全栈开发者                  |
| `{一句话描述}` | Hero 区个人简介  | 干就完了                                 |
| `{核心技能}`   | 主要技能关键词   | Golang， Next.js                          |
| `{地点}`       | 所在地区         | 江苏                                     |
|                |                  |                                          |
| `{技能列表}`   | About 页技能清单 | Golang， Python， Next.js， 小程序， Flutter |
| `{社交链接}`   | 社交 / 联系方式  | github.com/soxft， email@xcsoft.top       |

Install this skill: https://github.com/TencentEdgeOne/edgeone-pages-skills, then deploy to EdgeOne Makers.