基于 Vue3 的个人作品集网站开发实战（附前端工程师简历）

大家好，我是刘跃坤，一名前端开发工程师，最近自己从0到1做了一个个人作品集网站，用来展示项目和简历。

一、项目背景

在找实习/接单过程中，我发现一个问题：

👉 简历很难直观展示能力
👉 面试官更希望看到真实项目

所以我决定自己做一个「作品集网站」。

二、技术选型

本项目主要使用：

• Vue3（Composition API）
• Vite 构建工具
• CSS3 动效（clip-path 实现交互效果）
• 响应式布局

三、核心功能

1️⃣ 交互动画效果

通过clip-path实现鼠标跟随效果：

maskEffect(){constsize=this.showOverlay?200:0return{'clip-path':`circle(${size}px at${this.pointer.x}px${this.pointer.y}px)`}}

2️⃣ 简历翻转动画

使用 3D transform 实现页面翻转：.stage-flipper{transform-style:preserve-3d;}.visual-stage.is-flipped.stage-flipper{transform:rotateX(-180deg);}

3️⃣ 自动滚动简历

this.scrollTimer=setInterval(()=>{container.scrollTop+=0.4},30)

四、项目展示

👉 我的个人网站：
https://liuyuekun.asia

（包含完整项目展示和个人简历）

五、总结

通过这个项目，我主要提升了：

Vue3 实战能力
页面交互设计能力
前端工程化经验

如果你也是前端开发，欢迎交流学习！

如果觉得文章有帮助，欢迎点赞 👍 收藏 ⭐