Academic CV

项目概述

这是一个学术简历项目，使用 Vue 3 重写了 starter-hugo-academic 项目，并添加了一些自定义功能。

主要功能

• 个人信息展示
• 技能徽章展示
• 教育和工作经历
• 学术论文展示
• GitHub 项目展示
• 响应式设计，适配各种设备

技术栈

• 前端框架: Vue 3
• UI 组件库: Element Plus
• 构建工具: Vite
• 路由管理: Vue Router
• 状态管理: Pinia
• 代码规范: ESLint + Prettier

项目结构

src/
├── data/          # 各类数据文件
│   ├── skills.js  # 技能数据
│   ├── projects.js # 项目数据
│   └── ...
├── components/    # 可复用组件
│   ├── GithubCard.vue # GitHub 项目卡片
│   └── ...
├── views/         # 页面视图
│   └── HomeView.vue # 主页面
└── services/      # 服务层
    └── githubService.js # GitHub API 服务

开发指南

1. 安装依赖

pnpm install

2. 启动开发服务器

pnpm dev

3. 构建生产版本

pnpm build

开发进度

第一阶段：项目初始化与基础结构搭建

1. 项目创建与依赖安装

   • 使用 Vite 创建 Vue 3 项目
   • 安装 Element Plus、Font Awesome 等依赖
   • 配置 ESLint 和 Prettier

2. 基础结构设计

   • 设计并实现顶部导航栏
   • 实现页面布局（头部、主体、页脚）
   • 配置路由系统，支持锚点平滑滚动

第二阶段：主要功能模块开发

1. 个人信息模块

   • 实现个人头像、姓名和社交媒体链接
   • 添加个人简介和研究方向描述
   • 添加简历下载按钮

2. 技能模块

   • 使用卡片组件展示各类技能
   • 集成 Font Awesome 图标
   • 按类别组织技能（操作系统、编程语言等）

3. 经历模块

   • 使用时间线组件展示教育和工作经历
   • 包含职位、机构、时间段和地点信息
   • 添加经历描述

4. 论文模块

   • 使用卡片组件展示学术论文
   • 包含标题、作者、期刊/会议、年份和摘要
   • 添加论文链接（PDF、DOI、GitHub 等）
   • 实现论文相关图片预览功能

5. 项目模块

   • 使用卡片组件展示研究项目
   • 包含项目标题、描述和相关链接
   • 实现项目图片预览功能

6. 成就模块

   • 展示获奖情况和荣誉
   • 包含奖项名称、颁发机构、日期和描述
   • 添加证书图片预览功能

7. 联系方式模块

   • 展示办公地点、办公时间和电子邮件
   • 预留地图集成位置

第三阶段：优化与增强功能

1. 导航栏滚动效果

   • 实现向下滚动时隐藏导航栏
   • 实现向上滚动时显示导航栏
   • 添加平滑过渡动画

2. 响应式设计优化

   • 针对不同屏幕尺寸优化布局
   • 移动设备上调整导航菜单和内容展示

功能特点

1. 导航与布局

   • 固定顶部导航栏，支持滚动隐藏/显示
   • 导航菜单项链接到页面各部分
   • 响应式布局，适配桌面和移动设备

2. 内容展示

   • 使用 Element Plus 组件（卡片、时间线、对话框等）
   • 集成 Font Awesome 图标增强视觉效果
   • 图片预览功能

3. 用户体验

   • 平滑滚动到锚点位置
   • 简洁美观的蓝白灰配色方案
   • 统一的卡片样式和间距