# 萌芽个人主页

一个现代化的个人主页网站，采用前后端分离架构，支持 Docker 一键部署。

## 🚀 快速部署 (Docker)

### 一键启动

**Windows:**
```bash
docker-deploy.bat
```

**Linux/Mac:**
```bash
chmod +x docker-deploy.sh
./docker-deploy.sh
```

**或使用 Docker Compose:**
```bash
docker-compose up -d --build
```

**访问应用:**
- 主页: http://localhost:5000
- 管理员: http://localhost:5000/admin?token=shumengya520

📖 详细文档: [Docker 部署指南](DOCKER_README.md) | [快速开始](QUICKSTART.md)

---

## 项目简介

这是一个功能完整、设计精美的个人主页系统，展示个人信息、精选项目和联系方式。

### 特性亮点

- 🎨 **现代化设计**: 渐变色背景、流畅动画、精美卡片布局
- 📱 **响应式布局**: 完美适配桌面端和移动端
- 🔄 **前后端分离**: React + Python Flask 架构
- 🐳 **Docker 支持**: 一键部署，开箱即用
- 💾 **数据持久化**: 配置文件外部存储
- ⚡ **快速灵活**: 通过 JSON 配置文件轻松管理内容
- 🎯 **三大模块**: 个人信息、精选项目、联系方式
- 🔐 **权限控制**: 管理员模式隐藏私密项目

## 项目结构

```
萌芽个人主页/
├── mengyaprofile-backend/    # 后端 Python Flask 项目
│   ├── app.py                 # Flask 应用主文件
│   ├── requirements.txt       # Python 依赖
│   └── data/                  # 数据配置文件
│       ├── profile.json       # 个人信息
│       ├── projects.json      # 项目列表
│       └── contacts.json      # 联系方式
│
└── mengyaprofile-frontend/    # 前端 React 项目
    ├── public/                # 静态资源
    ├── src/                   # 源代码
    │   ├── App.js            # 主应用
    │   ├── App.css           # 全局样式
    │   └── components/       # 组件目录
    │       ├── ProfileSection.js   # 个人信息组件
    │       ├── ProjectsSection.js  # 项目展示组件
    │       └── ContactsSection.js  # 联系方式组件
    └── package.json          # 项目配置
```

## 快速开始

### 前置要求

- Python 3.7+
- Node.js 14+
- npm 或 yarn

### 1. 启动后端服务

```bash
# 进入后端目录
cd mengyaprofile-backend

# 安装依赖
pip install -r requirements.txt

# 运行服务
python app.py
```

后端服务将运行在 `http://localhost:5000`

### 2. 启动前端应用

```bash
# 进入前端目录
cd mengyaprofile-frontend

# 安装依赖
npm install

# 启动开发服务器
npm start
```

前端应用将运行在 `http://localhost:3000`

### 3. 访问应用

在浏览器中打开 `http://localhost:3000` 即可查看你的个人主页！

## 功能模块

### 1️⃣ 个人信息模块

展示个人基本信息：
- ✨ 昵称
- 🖼️ 头像（支持动画效果）
- 📝 个人介绍
- 💼 技术定位（Full-Stack / Backend / DevOps）
- 💡 个人座右铭

**配置文件**: `mengyaprofile-backend/data/profile.json`

### 2️⃣ 精选项目模块

以卡片形式展示项目：
- 📦 项目标题
- 📄 项目简介
- 🔗 项目链接
- 🏷️ 项目标签
- 🎯 自动获取网站图标（favicon）

**配置文件**: `mengyaprofile-backend/data/projects.json`

### 3️⃣ 联系方式模块

展示多种联系方式：
- 💬 QQ
- 📧 邮箱
- 🐙 GitHub
- 📋 一键复制功能
- 🔗 直接跳转链接

**配置文件**: `mengyaprofile-backend/data/contacts.json`

## 自定义配置

### 修改个人信息

编辑 `mengyaprofile-backend/data/profile.json`:

```json
{
  "nickname": "你的昵称",
  "avatar": "头像URL",
  "introduction": "个人介绍",
  "position": "Full-Stack / Backend / DevOps",
  "motto": "你的座右铭"
}
```

### 添加项目

编辑 `mengyaprofile-backend/data/projects.json`:

```json
{
  "projects": [
    {
      "id": 1,
      "title": "项目名称",
      "description": "项目简介",
      "link": "https://your-project.com",
      "icon": "",
      "tags": ["标签1", "标签2"]
    }
  ]
}
```

### 更新联系方式

编辑 `mengyaprofile-backend/data/contacts.json`:

```json
{
  "contacts": [
    {
      "type": "qq",
      "label": "QQ",
      "value": "你的QQ号",
      "link": "tencent://message/?uin=你的QQ号",
      "icon": "💬"
    }
  ]
}
```

## 技术栈

### 前端
- React 19
- CSS3（动画、渐变、响应式布局）
- Fetch API

### 后端
- Python 3
- Flask 3.0
- Flask-CORS（跨域支持）

## API 接口

后端提供以下 RESTful API：

- `GET /api/profile` - 获取个人信息
- `GET /api/projects` - 获取项目列表
- `GET /api/contacts` - 获取联系方式
- `GET /api/all` - 获取所有数据

## 部署建议

### 后端部署

推荐使用以下方式部署后端：
- Heroku
- AWS EC2
- 阿里云 ECS
- 使用 Gunicorn 作为生产服务器

### 前端部署

推荐使用以下方式部署前端：
- Vercel
- Netlify
- GitHub Pages
- Nginx 静态服务器

**注意**: 部署前需要修改前端 `src/App.js` 中的 API 地址为生产环境地址。

## 浏览器支持

- ✅ Chrome（推荐）
- ✅ Firefox
- ✅ Safari
- ✅ Edge
- ✅ 移动端浏览器

## 开发计划

- [ ] 添加博客模块
- [ ] 添加深色模式
- [ ] 添加多语言支持
- [ ] 添加后台管理系统
- [ ] 添加访问统计
- [ ] 添加留言板功能

## 许可证

MIT License

## 作者

萌芽

---

如有问题或建议，欢迎提 Issue！