初始化提交
This commit is contained in:
270
README.md
Normal file
270
README.md
Normal file
@@ -0,0 +1,270 @@
|
||||
# 萌芽个人主页
|
||||
|
||||
一个现代化的个人主页网站，采用前后端分离架构，支持 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！
|
||||
Reference in New Issue
Block a user