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

一、项目背景

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

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

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

二、技术选型

本项目主要使用：

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

三、核心功能

1️⃣ 交互动画效果

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

maskEffect () {
  const size = this.showOverlay ? 200 : 0
  return {
    '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 实战能力
页面交互设计能力
前端工程化经验

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

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