93 lines
1.6 KiB
Markdown
93 lines
1.6 KiB
Markdown
# 萌芽个人主页 - 前端
|
|
|
|
基于 React 的个人主页前端应用。
|
|
|
|
## 功能特性
|
|
|
|
- ✨ 现代化的界面设计，渐变色背景和流畅动画
|
|
- 📱 完美适配移动端和桌面端
|
|
- 🎨 精美的卡片式布局
|
|
- 🚀 快速响应的用户交互
|
|
- 🔗 项目自动获取网站 favicon
|
|
- 📋 一键复制联系方式
|
|
|
|
## 三大模块
|
|
|
|
### 1. 个人信息模块
|
|
展示个人基本信息，包括：
|
|
- 昵称
|
|
- 头像（带动画效果）
|
|
- 个人介绍
|
|
- 技术定位
|
|
- 个人座右铭
|
|
|
|
### 2. 精选项目模块
|
|
以卡片形式展示项目：
|
|
- 项目标题
|
|
- 项目简介
|
|
- 项目链接
|
|
- 项目标签
|
|
- 自动获取网站图标
|
|
|
|
### 3. 联系方式模块
|
|
展示联系方式，支持：
|
|
- QQ
|
|
- 邮箱
|
|
- GitHub
|
|
- 一键复制
|
|
- 直接跳转
|
|
|
|
## 快速开始
|
|
|
|
### 安装依赖
|
|
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
### 启动开发服务器
|
|
|
|
```bash
|
|
npm start
|
|
```
|
|
|
|
应用将在 `http://localhost:3000` 上运行。
|
|
|
|
### 构建生产版本
|
|
|
|
```bash
|
|
npm run build
|
|
```
|
|
|
|
构建后的文件将生成在 `build` 目录中。
|
|
|
|
## 配置说明
|
|
|
|
前端会从后端 API 获取数据，请确保后端服务已启动：
|
|
- 后端地址：`http://localhost:5000`
|
|
- 如需修改，请编辑 `src/App.js` 中的 API 地址
|
|
|
|
## 技术栈
|
|
|
|
- React 19
|
|
- CSS3 动画
|
|
- Fetch API
|
|
- 响应式设计
|
|
|
|
## 浏览器支持
|
|
|
|
- Chrome (推荐)
|
|
- Firefox
|
|
- Safari
|
|
- Edge
|
|
- 移动端浏览器
|
|
|
|
## 自定义
|
|
|
|
如需自定义样式，可以编辑以下文件：
|
|
- `src/App.css` - 全局样式
|
|
- `src/components/ProfileSection.css` - 个人信息样式
|
|
- `src/components/ProjectsSection.css` - 项目展示样式
|
|
- `src/components/ContactsSection.css` - 联系方式样式
|
|
|