# ProjectPresentation

**Repository Path**: CodeBing_X/project-presentation

## Basic Information

- **Project Name**: ProjectPresentation
- **Description**: 一个用来展示个人项目的网站，你可以把自己做过的项目发布上去，从而更好的展示项目
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-02-02
- **Last Updated**: 2025-02-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 个人作品集网站

一个使用 Vue 3 + Vite 构建的个人作品集展示网站，采用响应式设计，展示项目作品和个人联系方式。

## 项目展示

![项目展示](./image/image.png)

## 🌟 特性

- 响应式卡片布局，完美适配各种屏幕尺寸
- 现代化的 UI 设计，包含磨砂玻璃效果
- 项目技术标签展示
- 点赞功能
- 社交媒体联系方式（GitHub、微信、抖音）
- 二维码悬浮显示功能

## 🛠️ 技术栈

- Vue 3
- Vite
- Font Awesome 图标
- CSS3 动画效果
- 响应式设计

## 📦 安装

1. 克隆项目
```bash
git clone https://gitee.com/bing_985/project-presentation.git
cd project-presentation
```

2. 安装依赖
```bash
npm install
```

3. 运行开发服务器
```bash
npm run dev
```

4. 构建生产版本
```bash
npm run build
```

## 🔧 配置

### 项目展示配置

在 `src/components/ProjectShowcase.vue` 中修改 `projects` 数组来自定义你的项目展示：

```javascript
const projects = [
  {
    id: 1,
    title: "项目名称",
    description: "项目描述",
    imageUrl: "项目图片URL",
    technologies: ["技术1", "技术2"],
    likes: 0,
    demoUrl: "演示链接",
    githubUrl: "GitHub链接"
  },
  // ...更多项目
];
```

### 社交媒体配置

在 `src/App.vue` 中修改社交媒体链接和二维码图片：

```vue
<a href="你的GitHub链接" target="_blank" class="social-icon">
  <i class="fab fa-github"></i>
</a>
```

## 📱 响应式设计

- 桌面端：4列布局
- 平板端：3列布局
- 小平板端：2列布局
- 移动端：1列布局

## 📄 许可证

[MIT License](LICENSE)

## 🤝 贡献

欢迎提交 issue 和 pull request

## 📞 联系方式

- GitHub: [@your-username](https://github.com/your-username)
- 微信: 扫描网站右上角二维码
- 抖音: 扫描网站右上角二维码