# personal_website

**Repository Path**: captainwilson/personal_website

## Basic Information

- **Project Name**: personal_website
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-10-15
- **Last Updated**: 2025-12-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 个人作品集网站

这是一个使用 Vue.js 和 Tailwind CSS 构建的个人作品集网站，专为前端开发者展示其专业技能和项目而设计。

## 功能特性

- **响应式设计**：完全适配桌面、平板和移动设备
- **现代 UI/UX**：采用 Awwwards 级别的设计风格，具有动态视觉效果和流畅的动画过渡
- **模块化架构**：清晰的代码结构和组件划分，便于维护和扩展
- **丰富的交互体验**：包括平滑滚动、悬停效果、动画过渡等
- **完整的页面结构**：包含首页、关于我、作品集和联系页面
- **表单验证**：联系表单支持实时验证和反馈
- **项目筛选**：作品集中的项目支持按类别筛选
- **SEO 优化**：包含元数据和语义化 HTML 结构

## 技术栈

- **前端框架**：Vue.js 3
- **构建工具**：Vite
- **样式框架**：Tailwind CSS 3
- **路由管理**：Vue Router
- **图标**：Font Awesome (通过 SVG 内联)
- **字体**：Inter

## 项目结构

```
├── src/
│   ├── assets/          # 静态资源文件
│   │   └── style.css    # 全局样式
│   ├── components/      # Vue 组件
│   ├── router/          # 路由配置
│   │   └── index.js     # 路由定义
│   ├── views/           # 页面组件
│   │   ├── Home.vue     # 首页
│   │   ├── About.vue    # 关于我页面
│   │   ├── Portfolio.vue # 作品集页面
│   │   ├── Contact.vue  # 联系页面
│   │   └── NotFound.vue # 404页面
│   ├── App.vue          # 应用根组件
│   └── main.js          # 应用入口
├── public/              # 静态资源
├── package.json         # 项目配置和依赖
├── vite.config.js       # Vite配置
├── tailwind.config.js   # Tailwind配置
├── postcss.config.js    # PostCSS配置
└── index.html           # 入口HTML文件
```

## 快速开始

### 前提条件

- Node.js (v14.0.0 或更高版本)
- npm, yarn 或 pnpm 包管理器

### 安装依赖

```bash
# 使用 npm
npm install

# 使用 yarn
# yarn install

# 使用 pnpm
# pnpm install
```

### 开发模式

启动开发服务器，在浏览器中打开 `http://localhost:3000` 查看效果：

```bash
# 使用 npm
npm run dev

# 使用 yarn
# yarn dev

# 使用 pnpm
# pnpm dev
```

### 构建生产版本

生成优化后的生产版本文件：

```bash
# 使用 npm
npm run build

# 使用 yarn
# yarn build

# 使用 pnpm
# pnpm build
```

### 预览生产版本

在本地预览生产构建的效果：

```bash
# 使用 npm
npm run preview

# 使用 yarn
# yarn preview

# 使用 pnpm
# pnpm preview
```

## 自定义配置

### 修改主题颜色

在 `tailwind.config.js` 文件中可以自定义网站的主题颜色：

```javascript
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#1a365d', // 主色调
        secondary: '#f7fafc', // 辅助色
        accent: '#4299e1', // 强调色
        // ...
      },
    },
  },
}
```

### 修改网站内容

1. 更新 `src/views` 目录下的各个页面组件，替换为您自己的内容
2. 更新 `src/App.vue` 中的导航栏和页脚信息
3. 修改 `index.html` 中的元数据和标题

### 添加新项目

在 `src/views/Portfolio.vue` 文件中，您可以在 `projects` 数组中添加自己的项目：

```javascript
projects: [
  {
    id: 1,
    title: '项目标题',
    description: '项目描述',
    image: '项目图片URL',
    category: '项目类别',
    skills: ['技能1', '技能2'],
    link: '项目链接'
  },
  // ...
]
```

## 部署

### Netlify 部署

1. 登录 Netlify 并连接您的 Git 仓库
2. 设置构建命令：`npm run build`
3. 设置发布目录：`dist`
4. 点击 "Deploy site"

### Vercel 部署

1. 登录 Vercel 并连接您的 Git 仓库
2. Vercel 会自动检测 Vite 项目并配置正确的构建设置
3. 点击 "Deploy"

### GitHub Pages 部署

1. 安装 `gh-pages` 包：
   ```bash
   npm install gh-pages --save-dev
   ```

2. 在 `package.json` 中添加部署脚本：
   ```json
   "scripts": {
     "deploy": "gh-pages -d dist"
   }
   ```

3. 构建并部署：
   ```bash
   npm run build
   npm run deploy
   ```

## 许可证

本项目采用 MIT 许可证 - 详见 [LICENSE](LICENSE) 文件

## 联系方式

如有任何问题或建议，请随时联系：
- 电子邮件：contact@example.com
- 网站：https://example.com