# Vue.js 项目：交互式个人作品集

## 概述

使用 Vue.js 3 和 Vite 构建一个现代、响应式的 SPA 个人作品集。网站用于展示个人信息、技能、项目和联系方式，并包含平滑的页面过渡和交互。

## 功能需求

### 1. 页面与组件
- **主页**: 包含“英雄”区域（介绍）、“关于我”和技能展示（图标或进度条）。
- **作品集页**: 使用卡片布局展示项目列表（截图, 标题, 描述, 技术标签）。点击卡片可打开模态框或详情页显示项目详情。
- **联系页**: 包含带前端验证的联系表单和社交媒体链接。
- **导航栏**: 固定在顶部，含 Logo 和页面链接，滚动时有样式变化。
- **页脚**: 版权和社交媒体链接。

### 2. 交互与动画
- **路由**: 使用 `vue-router` 实现客户端路由，页面切换带过渡效果。
- **响应式**: 使用 CSS Flexbox/Grid 和媒体查询适配桌面、平板和手机。
- **状态管理**: 使用 `Pinia` 管理全局状态（如暗黑/明亮模式切换）。
- **动画**: 为页面元素加载添加微妙的动画效果（`gsap` 或 `motion`）。

## 技术栈

- **框架**: Vue.js 3 (Composition API)
- **构建**: Vite
- **路由**: Vue Router 4
- **状态管理**: Pinia
- **样式**: Tailwind CSS 或 SCSS
- **表单验证**: vee-validate
- **图标**: `vue-feather-icons` 或 `FontAwesome`
- **部署**: Netlify, Vercel, 或 GitHub Pages

## 项目结构

```
/vue-portfolio
├── src/
│   ├── assets/             # 静态资源
│   ├── components/         # 可复用组件
│   ├── views/              # 页面级组件
│   ├── router/             # 路由配置
│   ├── store/              # Pinia store
│   ├── App.vue
│   └── main.js
└── package.json
```

## 任务步骤

1.  **初始化**: 使用 `npm create vue@latest` 创建项目，选择 Vite, Vue Router, Pinia 等。
2.  **结构设置**: 创建所需的文件夹和文件。
3.  **路由配置**: 在 `src/router/index.js` 中定义所有页面路由。
4.  **布局开发**: 创建 `Navbar` 和 `Footer` 并在 `App.vue` 中使用。
5.  **页面开发**: 逐个开发 `Home`, `Portfolio`, `Contact` 页面。
6.  **状态管理**: 创建 Pinia store 实现主题切换功能。
7.  **交互与动画**: 使用 `<transition>` 组件为路由切换添加动画，并为其他元素添加入场效果。
8.  **响应式适配**: 使用媒体查询确保在所有设备上布局正确。
9.  **部署**: 将应用部署到静态网站托管平台。

**先行任务**: 设计网站的线框图和基本视觉风格（主色调、字体）。