# 个人网站

**Repository Path**: yzj1/personal-website

## Basic Information

- **Project Name**: 个人网站
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-06
- **Last Updated**: 2026-03-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 个人网站 - Next.js 14 + Tailwind CSS

基于 Next.js 14 (App Router) 和 Tailwind CSS 开发的响应式个人网站。

## 功能特性

- ✅ 首页、关于我、作品集、博客四大页面
- ✅ 响应式设计（支持移动端/PC端）
- ✅ 导航栏路由高亮
- ✅ 作品卡片和博客卡片组件
- ✅ 使用 Next.js Image 组件优化图片加载
- ✅ Tailwind CSS 样式系统
- ✅ 本地 JSON 数据存储

## 项目结构

```
hyd/
├── app/
│   ├── api/              # API 路由
│   │   ├── profile/
│   │   ├── projects/
│   │   └── blogs/
│   ├── components/       # React 组件
│   │   ├── Navbar.tsx
│   │   ├── Footer.tsx
│   │   ├── ProjectCard.tsx
│   │   └── BlogCard.tsx
│   ├── lib/              # 工具函数
│   │   └── data.ts
│   ├── about/            # 关于我页面
│   ├── projects/         # 作品集页面
│   ├── blog/             # 博客页面
│   ├── layout.tsx        # 全局布局
│   ├── page.tsx          # 首页
│   └── globals.css       # 全局样式
├── data/                 # JSON 数据文件
│   ├── profile.json
│   ├── projects.json
│   └── blogs.json
├── public/               # 静态资源
├── package.json
├── next.config.js
├── tsconfig.json
├── tailwind.config.js
└── postcss.config.js
```

## 安装和运行

### 1. 安装依赖

```bash
npm install
```

### 2. 运行开发服务器

```bash
npm run dev
```

访问 [http://localhost:3000](http://localhost:3000) 查看网站。

### 3. 构建生产版本

```bash
npm run build
npm start
```

## 技术栈

- **Next.js 14** (App Router)
- **React 18**
- **TypeScript**
- **Tailwind CSS**
- **PostCSS**
- **Font Awesome** (图标库)

## 自定义配置

### 修改配色

在 `tailwind.config.js` 中修改主题颜色：

```javascript
theme: {
  extend: {
    colors: {
      primary: '#3b82f6',    // 主色调
      secondary: '#64748b',  // 次色调
      dark: '#1e293b',       // 深色
      light: '#f1f5f9',      // 浅色
      accent: '#10b981',     // 强调色
    }
  }
}
```

### 修改数据

编辑 `data/` 目录下的 JSON 文件：

- `profile.json` - 个人信息
- `projects.json` - 作品列表
- `blogs.json` - 博客列表

## 部署

### Vercel 部署

1. 将代码推送到 GitHub
2. 访问 [Vercel](https://vercel.com)
3. 导入项目
4. 部署完成

### 其他平台

```bash
npm run build
```

构建完成后，将 `out/` 目录部署到任何静态托管平台（如 Netlify、GitHub Pages 等）。

## 许可证

MIT License