极简主义 · 内容优先 · 性能至上
- 🚀 零服务器 - 纯静态网站，无需后端，部署到任意静态托管平台
- � Git 即 CMS - Markdown 文件管理内容，Git 作为版本控制系统
- 🎨 渐变科技风 - 蓝紫粉渐变主题，现代化设计语言
- 🌍 国际化就绪 - 完整中英双语支持，98% i18n 覆盖率
- ⚡ 极速加载 - SSG + ISR 策略，首屏秒开，SEO 友好
纯前端架构 = Next.js 15 SSG + TypeScript + Tailwind CSS
无数据库 = Markdown 文件 + Git 版本控制
无状态管理库 = React Context + Custom Hooks
代码使用率 = 100% (零冗余)
- Next.js 15 - App Router + React Server Components
- TypeScript 5.2 - 严格模式，全链路类型安全
- Tailwind CSS 3.3 - 原子化 CSS + 自定义设计系统
- shadcn/ui - 现代组件库（按需使用）
- Radix UI - 无障碍组件基础
- Framer Motion - 流畅动画效果
- Lucide Icons - 一致的图标系统
- gray-matter - Markdown Front Matter 解析
- remark - Markdown 转 HTML
- remark-gfm - GitHub 风格 Markdown
- ESLint - 代码质量检查
- next-themes - 主题切换系统
Node.js >= 18.17.0
npm >= 9.0.0# 1. 克隆仓库
git clone https://github.com/wyw121/PortfolioPulse.git
cd PortfolioPulse
# 2. 安装依赖
cd frontend
npm install
# 3. 启动开发服务器
npm run dev
# 4. 打开浏览器访问
# http://localhost:3000# 构建静态网站
npm run build
# 本地预览构建结果
npm run startPortfolioPulse/
├── frontend/ # Next.js 应用
│ ├── app/ # App Router 页面
│ │ ├── page.tsx # 首页
│ │ ├── about/ # 关于页面
│ │ ├── projects/ # 项目展示
│ │ └── blog/ # 博客（ISR）
│ ├── components/ # React 组件
│ │ ├── sections/ # 页面区块
│ │ ├── portfolio/ # 项目卡片
│ │ ├── blog/ # 博客组件
│ │ ├── about/ # 关于组件
│ │ ├── layout/ # 布局组件
│ │ └── ui/ # shadcn/ui 组件
│ ├── content/ # 内容管理
│ │ └── blog/ # Markdown 博客文章
│ ├── lib/ # 工具库
│ │ ├── blog-loader.ts # 博客加载器
│ │ ├── config.ts # 站点配置
│ │ └── i18n.ts # 国际化
│ ├── locales/ # 多语言字典
│ │ ├── zh.json # 中文
│ │ └── en.json # English
│ └── types/ # TypeScript 类型
├── docs/ # 项目文档
└── .github/ # GitHub 配置
└── copilot-instructions.md # AI 开发指令
在 frontend/content/blog/ 目录下创建 Markdown 文件：
---
title: "文章标题"
date: "2025-01-27"
excerpt: "文章摘要"
tags: ["Next.js", "TypeScript"]
category: "技术"
---
# 正文内容
这里是 Markdown 格式的文章内容...- ✅ 自动路由生成 - 文件名即 URL
- ✅ ISR 增量更新 - 60秒自动重新验证
- ✅ Front Matter - 元数据管理
- ✅ GFM 支持 - GitHub 风格 Markdown
- ✅ 双语支持 -
.md(中文) +.en.md(英文)
/* 主题色 - 蓝紫粉渐变 */
--gradient-primary: linear-gradient(135deg, #3b82f6 → #8b5cf6 → #ec4899);
/* 暗色主题 */
--bg-primary: #0f0f0f;
--bg-secondary: #1e1e1e;
--text-primary: #ffffff;
--text-secondary: #a3a3a3;- 悬停效果:
translateY(-4px)+ 发光阴影 - 动画时长: 300ms cubic-bezier(0.4, 0, 0.2, 1)
- 边框渐变: 鼠标悬停显示渐变边框
- 布局原则: 大屏中心式，大量留白（Vercel 风格）
项目支持中英双语：
// 使用 useTranslation Hook
const { dict, lang, setLang } = useTranslation();
// 在组件中使用翻译
<h1>{dict.home.welcome}</h1>- 在
frontend/locales/创建新语言文件（如ja.json） - 在
lib/i18n.ts添加语言配置 - 更新语言切换器组件
| 路由 | 页面 | 渲染方式 | 说明 |
|---|---|---|---|
/ |
首页 | SSG | 静态生成，包含 Hero + 项目网格 |
/about |
关于 | SSG | 个人简介、技能、经验 |
/projects |
项目 | SSG | 项目展示卡片网格 |
/blog |
博客列表 | ISR | 60s 重新验证 |
/blog/[slug] |
博客详情 | ISR | 动态路由，60s 重新验证 |
项目支持部署到任意支持 Next.js 的平台：
- Netlify: 自动识别 Next.js 项目
- GitHub Pages: 需要配置
output: 'export' - Cloudflare Pages: 原生 Next.js 支持
npm run build
# 生成 .next/ 目录（Standalone 模式）
# 或 out/ 目录（Static Export 模式）| 文档 | 说明 |
|---|---|
| 开发指令 | GitHub Copilot AI 开发规范 |
| 前端架构 | 前端架构深度分析 |
| 系统分析 | 完整系统状态报告 |
| 项目风格 | UI/UX 设计系统 |
| 主题实现 | 主题和国际化指南 |
| 博客使用 | 博客系统使用说明 |
欢迎提交 Issue 和 Pull Request！
- Fork 本仓库
- 创建特性分支：
git checkout -b feature/amazing-feature - 提交更改：
git commit -m 'feat: add amazing feature' - 推送分支：
git push origin feature/amazing-feature - 提交 Pull Request
feat: 新功能
fix: 修复 Bug
docs: 文档更新
style: 代码格式
refactor: 重构
perf: 性能优化
test: 测试
chore: 构建/工具
本项目采用 MIT 许可证。
- sindresorhus.com - 极简主义的完美典范
- Vercel - 现代化的布局和交互
感谢以下优秀的开源项目：
- Next.js - The React Framework
- Tailwind CSS - Utility-first CSS
- shadcn/ui - Re-usable components
- TypeScript - JavaScript with syntax for types
- Framer Motion - Production-ready motion library