我用Vue3写了一个个人主页

今天和大家分享一个我最近完成的个人主页项目。这个项目使用Vue3和Vite构建，借鉴了安知鱼主题关于页面的设计，打造了一个功能丰富、视觉精美的个人展示页面。

📸 效果展示

项目地址：[仓库地址]
在线演示：[演示地址]

🌟 项目概述

这个个人主页项目是一个现代化的前端应用，旨在展示个人技能、经历、兴趣爱好等信息。它具有以下特点：

响应式设计：适配各种设备屏幕，从桌面到移动端都有良好的用户体验
丰富的动画效果：包括数字滚动、文字轮播、鼠标跟踪等交互效果
模块化组件：采用Vue 3的组合式API，将页面拆分为多个可复用的组件
现代化技术栈：使用Vue 3、TypeScript、Vite等现代前端技术

🛠 技术栈

Vue 3：核心框架，使用组合式API
TypeScript：提供类型安全和更好的开发体验
Vite：快速的构建工具
Element Plus：UI组件库
VueUse：实用的Vue组合式函数库

📁 项目结构

src/
├── assets/           # 静态资源
│   └── styles/       # 全局样式文件
├── components/       # 组件目录
│   ├── layout/       # 布局组件
│   └── sections/     # 页面区块组件
├── composables/      # 组合式函数
├── types/            # TypeScript类型定义
├── views/            # 页面视图
├── App.vue           # 根组件
└── main.ts           # 入口文件

🎨 核心功能模块

1. 个人信息展示

展示头像、标签、基本信息等，使用浮动动画增强视觉效果。

2. 技能展示

通过图标轮播和技能列表两种方式展示技术栈，包含Java、Vue、React、Docker等技术。

3. 生涯经历

时间线形式展示教育背景和职业发展。

4. 数据统计

使用数字滚动动画展示访问统计数据。

5. 个人特质

展示16personalities性格测试结果。

6. 兴趣爱好

包括游戏、动漫、音乐等兴趣爱好的展示。

🚀 开发亮点

1. 组合式API的合理运用

通过composables目录将逻辑复用代码组织成独立的函数，如：

useData.ts：管理所有数据
useAnimation.ts：处理各种动画效果
useUtils.ts：提供通用工具函数

2. 动画系统的实现

项目实现了多种动画效果：

数字滚动：使用requestAnimationFrame实现平滑的数字变化
文字轮播：通过CSS变换实现文字切换效果
鼠标跟踪：在Hello区域实现鼠标交互效果
悬停动画：卡片和图标悬停时的变换效果

3. 响应式设计

使用Flex弹性布局确保在不同设备上都有良好的显示效果。

4. 类型安全

通过TypeScript类型定义确保代码的健壮性。

📦 构建与部署

项目使用Vite进行构建，具有极快的冷启动速度和热更新功能。

# 安装依赖
npm install

# 开发模式运行
npm run dev

# 构建生产版本
npm run build

🎯 项目特色

高度还原设计：严格按照安知鱼主题的设计规范实现
丰富的交互体验：多种动画和交互效果提升用户体验
模块化架构：清晰的组件结构便于维护和扩展
现代化技术：采用Vue 3和TypeScript等现代前端技术

🔚 总结

这个个人主页项目不仅展示了我的技术能力，也体现了我对前端开发的热情。通过这个项目，我深入学习了Vue 3的组合式API、TypeScript的类型系统以及现代化前端工程化实践。

项目的代码已经开源在GitHub上，欢迎大家一起学习交流！

如果你也想拥有一个精美的个人主页，不妨参考这个项目，或者基于它进行二次开发！

希望这篇分享对你有帮助，如果有任何问题或建议，欢迎在评论区留言讨论