# yao-info

**Repository Path**: yao-coder/yao-info

## Basic Information

- **Project Name**: yao-info
- **Description**: yao-info.me 是后端开发者 YAO 的双语个人作品集，黑白极简风，签名特效是悬停反色的鼠标黑球与 3D 视差 Hero 揭示
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-04
- **Last Updated**: 2026-07-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# yao-info

后端开发者 YAO 的个人作品集站 —— `yao-info.me`。
黑白极简、中英双语、单页五段式（Hero / Skills / Projects / Collaborate / Contact）。

> 实建架构与设计细节请看 [`Personal Portfolio Site.md`](./Personal%20Portfolio%20Site.md)。

---

## 特性

- 中英双语，URL 形如 `/zh` `/en`，默认 `/zh`（`next-intl` + `localePrefix: 'always'`）
- Hero 区"鼠标黑球 + clip-path 双层文本反色揭示" + 标题 3D look-at 倾斜
- Skills 区投影仪式悬停（其它项变暗后退、悬停项浮起放大）+ 数字 count-up
- Projects 区 Work / Personal 双 Tab，sliding pill 切换；个人项目卡含截图 lightbox
- Contact 表单经 Telegram Bot 投递，IP 维度限流；失败 600ms 后 `mailto:` 兜底
- 桌面端 Lenis 平滑滚动；移动端走系统原生
- 全局尊重 `prefers-reduced-motion`，移动端禁用所有鼠标交互

---

## 技术栈

- **Next.js 16.2.4**（App Router，中间件文件名为 `proxy.ts`）+ **React 19.2.4** + **TypeScript 5**
- **Tailwind CSS v4**（`@tailwindcss/postcss`，主题变量内联在 `app/globals.css` 的 `@theme` 块，**没有 `tailwind.config.ts`**）
- **Framer Motion 12** / **lenis** / **next-intl 4** / **lucide-react**
- 字体：**Inter** + **Instrument Serif** + **Space Grotesk**（均通过 `next/font/google`）

---

## 本地开发

```bash
npm install

# 1. 复制环境变量模板
cp .env.local.example .env.local
# Windows PowerShell: Copy-Item .env.local.example .env.local
# Windows CMD:        copy /Y .env.local.example .env.local

# 2. 在 .env.local 中填入 Telegram 凭据（见下文）
#    不填也能跑前端，但提交 Contact 表单会得到 500 server_misconfigured

# 3. 启动开发服务器
npm run dev
# 浏览器打开 http://localhost:3000，会自动跳到 /zh
```

---

## 可用脚本

| 命令 | 作用 |
|---|---|
| `npm run dev` | 开发服务器 |
| `npm run build` | 生产构建 |
| `npm run start` | 启动构建产物 |
| `npm run lint` | ESLint 检查 |

---

## 环境变量

模板：[`.env.local.example`](./.env.local.example)

| 变量 | 必填 | 说明 |
|---|---|---|
| `TELEGRAM_BOT_TOKEN` | ✅ | Telegram Bot Token。**仅服务端使用，不要带 `NEXT_PUBLIC_` 前缀**，否则会泄漏到客户端 bundle |
| `TELEGRAM_CHAT_ID` | ✅ | 接收消息的 Chat ID |
| `NEXT_PUBLIC_CONTACT_EMAIL` | ❌ | Telegram 失败时 `mailto:` 兜底邮箱，默认 `talent_liyao@163.com` |

获取 Bot Token 与 Chat ID：

1. Telegram 找 [@BotFather](https://t.me/BotFather) → `/newbot` → 拿到 **Bot Token**。
2. 用自己的账号给新建的 Bot 发任意一条消息，然后浏览器访问：
   `https://api.telegram.org/bot<TOKEN>/getUpdates`
3. 在返回 JSON 的 `result[0].message.chat.id` 中拿到 **Chat ID**。

---

## 目录结构（精简）

```
app/
  [locale]/         # 顶层 layout + 首页（仓库唯一 layout，没有根 app/layout.tsx）
  api/contact/      # POST /api/contact —— Telegram 投递端点
  globals.css       # Tailwind v4 入口 + @theme 主题变量
components/
  effects/          # CursorBlackHole / FadeInUp / SmoothScrollProvider
  layout/           # Header / Footer / LocaleToggle
  sections/         # Hero / Skills / Projects / Collaborate / Contact
  ui/               # 原子组件（卡片 / 表单 / Badge / Lightbox / 自定义图标 ...）
lib/
  animations.ts     # Framer Motion 共享 variants
  data/             # 静态数据：skills / projects / personal-projects / services
  hooks/            # useIsMobile / useMounted
  utils.ts          # cn() = twMerge(clsx(...))
i18n/
  routing.ts        # locales: ['zh','en']，默认 'zh'
  request.ts        # 服务端按 locale 加载消息
  navigation.ts     # locale-aware Link / useRouter / usePathname
messages/           # zh.json / en.json，按 section 命名空间
proxy.ts            # next-intl middleware（Next 16 默认中间件文件名）
```

更详细的结构见 [`Personal Portfolio Site.md`](./Personal%20Portfolio%20Site.md)。

---

## 部署

推荐 Vercel：

1. GitHub 仓库 → Vercel Import → 自动识别 Next.js。
2. **Vercel Settings → Environment Variables**：填入 `TELEGRAM_BOT_TOKEN` / `TELEGRAM_CHAT_ID`（视需要再加 `NEXT_PUBLIC_CONTACT_EMAIL`）。**不填表单会一直返回 500。**
3. **Settings → Domains**：添加 `yao-info.me`，DNS 配 A / CNAME，SSL 自动签发。

---

## 进一步阅读

- [`Personal Portfolio Site.md`](./Personal%20Portfolio%20Site.md) — 实建架构说明：CursorBlackHole / Hero 揭示原理、动画体系、设计 token、数据模型、Contact 状态机等技术细节。
- [`AGENTS.md`](./AGENTS.md) — 给 AI 协作者的注意事项。