胡旭sui_blog
个人博客 — 水墨纸质杂志风格。
技术栈：Next.js 16 + React 19 + Tailwind CSS 4 + GSAP ScrollTrigger。
页面
| 路由 | 说明 |
|---|---|
/ |
首页 — Hero 逐字揭示 + 精选文章 + 最新文章 |
/blog |
文章列表 — 按时间倒序，分类/标签筛选 |
/posts/[slug] |
文章详情 — 宋式排版，上下篇导航 |
/categories |
分类浏览 — 卡片网格，悬停动效 |
/tags |
标签云 |
/about |
关于页 — 个人介绍 + 时间轴 + 技术栈 |
后台管理
| 路由 | 说明 |
|---|---|
/admin/login |
登录（密码认证，cookie session） |
/admin |
仪表盘 — 统计概览 + 最近文章 |
/admin/posts |
文章管理 — 列表筛选、新建、编辑、删除 |
/admin/categories |
分类管理 — 增删改 |
/admin/tags |
标签管理 — 云式展示，hover 删除 |
数据存储在 src/data/storage/*.json，已加入 .gitignore。
快速开始
pnpm install
pnpm dev # http://localhost:3000
pnpm build # 生产构建
初始化种子数据（首次运行）：
npx tsx src/lib/seed.ts
项目结构
src/
├── app/
│ ├── page.tsx # 首页
│ ├── layout.tsx # 根布局
│ ├── globals.css # 全局样式 + Tailwind v4 设计令牌
│ ├── about/ # 关于页
│ ├── admin/ # 后台管理
│ │ ├── layout.tsx # 侧栏 + 鉴权
│ │ ├── login/ # 登录页
│ │ ├── posts/ # 文章 CRUD
│ │ ├── categories/ # 分类管理
│ │ └── tags/ # 标签管理
│ ├── api/ # Route Handlers
│ │ ├── auth/ # 登录/登出/鉴权
│ │ ├── posts/ # 文章 CRUD
│ │ ├── categories/ # 分类 CRUD
│ │ └── tags/ # 标签 CRUD
│ ├── blog/ # 文章列表
│ ├── categories/ # 分类浏览
│ ├── posts/[slug]/ # 文章详情
│ └── tags/ # 标签云
├── components/
│ ├── Header.tsx # 顶部导航
│ ├── Footer.tsx # 页脚
│ ├── HeroSection.tsx # 首页 Hero
│ ├── BlogList.tsx # 文章列表组件
│ ├── PostContent.tsx # 文章正文排版
│ ├── PostSections.tsx # 精选/最近文章卡片
│ └── GsapReveal.tsx # GSAP 滚动动画组件
├── data/
│ ├── posts.ts # Mock 数据
│ └── storage/ # JSON 数据文件（gitignored）
└── lib/
├── store.ts # 数据存储层（posts/categories/tags CRUD）
└── seed.ts # 种子数据脚本
设计系统
详见 UI.md。
核心色彩：parchment（纸张底色）+ ink（墨色文字）+ terracotta（赭石强调）+ sage（成功/发布状态）。
字体三层：font-display（宋体标题）→ font-body（宋体正文）→ font-sans（无衬线 UI 文字）。
动画：GSAP ScrollTrigger 驱动页面滚动揭示，逐字 blur 动画用于标题，CSS transition 处理微交互。
部署
pnpm build
pnpm start
或部署到 Vercel / 任意 Node.js 主机。
License
MIT