个人作品集搭建
个人作品集网站是展示技能、项目和经历的最佳方式。本教程将指导你使用 VitePress 搭建一个专业的个人作品集网站。
项目概述
你将学到
- 设计作品集网站结构
- 创建首页和个人介绍
- 展示项目作品列表
- 添加技能和经历时间线
- 集成联系方式和社交媒体
- 响应式设计和动效优化
最终效果
portfolio/
├── docs/
│ ├── index.md # 首页（个人介绍）
│ ├── projects.md # 项目作品
│ ├── skills.md # 技能展示
│ ├── experience.md # 工作经历
│ ├── about.md # 关于我
│ └── .vitepress/
│ ├── config.mts # 配置文件
│ └── theme/
│ ├── index.ts # 主题入口
│ ├── Layout.vue # 布局组件
│ └── style.css # 样式文件
└── package.json项目初始化
创建项目
bash
# 创建项目目录
mkdir my-portfolio
cd my-portfolio
# 初始化 package.json
npm init -y
# 安装 VitePress
npm add -D vitepress
# 创建目录结构
mkdir -p docs/.vitepress/theme
touch docs/index.md
touch docs/projects.md
touch docs/skills.md
touch docs/experience.md
touch docs/about.md配置文件
ts
// docs/.vitepress/config.mts
import { defineConfig } from 'vitepress'
export default defineConfig({
title: '张三 | 前端开发者',
description: '热爱前端开发，专注于 Vue.js 和 Web 性能优化',
lang: 'zh-CN',
head: [
['meta', { name: 'author', content: '张三' }],
['meta', { name: 'keywords', content: '前端开发,Vue.js,作品集,简历' }],
['link', { rel: 'icon', href: '/favicon.svg' }]
],
themeConfig: {
logo: '/logo.svg',
siteTitle: '张三',
nav: [
{ text: '首页', link: '/' },
{ text: '项目', link: '/projects' },
{ text: '技能', link: '/skills' },
{ text: '经历', link: '/experience' },
{ text: '关于', link: '/about' }
],
socialLinks: [
{ icon: 'github', link: 'https://github.com/your-username' },
{ icon: 'linkedin', link: 'https://linkedin.com/in/your-username' },
{ icon: 'twitter', link: 'https://twitter.com/your-username' }
],
footer: {
copyright: 'Copyright © 2024 张三'
}
}
})首页设计
Hero 区域
markdown
<!-- docs/index.md -->
---
layout: home
hero:
name: 张三
text: 前端开发者
tagline: 5年经验 · Vue.js 专家 · 开源贡献者
image:
src: /avatar.svg
alt: 张三
actions:
- theme: brand
text: 查看项目
link: /projects
- theme: alt
text: 联系我
link: /about#contact
features:
- title: Vue.js 开发
details: 深入理解 Vue 3 Composition API，熟练使用 Pinia、Vue Router 等生态工具
icon: 🎨
- title: 性能优化
details: 专注 Web 性能优化，熟练使用 Lighthouse、WebPageTest 进行性能分析
icon: ⚡
- title: 开源贡献
details: 为 Vue.js、Vite 等开源项目贡献代码，积极参与社区交流
icon: 🌟
---
<!-- 个人简介 -->
<div class="about-section">
<h2>关于我</h2>
<p>
我是一名拥有 5 年经验的前端开发者，专注于 Vue.js 生态系统和 Web 性能优化。
热爱开源，相信技术改变生活。曾主导多个大型项目的前端架构设计，
在性能优化和工程化方面有丰富经验。
</p>
</div>
<!-- 技能概览 -->
<div class="skills-overview">
<h2>技能概览</h2>
<div class="skill-tags">
<span class="skill-tag primary">Vue.js</span>
<span class="skill-tag primary">TypeScript</span>
<span class="skill-tag">React</span>
<span class="skill-tag">Node.js</span>
<span class="skill-tag">Vite</span>
<span class="skill-tag">Webpack</span>
<span class="skill-tag">CSS/Sass</span>
<span class="skill-tag">Git</span>
</div>
</div>
<!-- 最新项目 -->
<div class="featured-projects">
<h2>精选项目</h2>
<div class="project-grid">
<a href="/projects#vue-admin" class="project-card">
<div class="project-icon">🎯</div>
<h3>Vue Admin Pro</h3>
<p>企业级后台管理模板</p>
</a>
<a href="/projects#component-lib" class="project-card">
<div class="project-icon">🎨</div>
<h3>UI 组件库</h3>
<p>基于 Vue 3 的组件库</p>
</a>
<a href="/projects#cli-tool" class="project-card">
<div class="project-icon">⚡</div>
<h3>CLI 工具</h3>
<p>项目脚手架工具</p>
</a>
</div>
</div>项目展示页
项目列表
markdown
<!-- docs/projects.md -->
---
title: 项目作品
description: 我的项目作品展示
---
# 项目作品
这里展示了我参与开发和维护的主要项目。
## 开源项目
### Vue Admin Pro
<div class="project-header">
<span class="project-type">开源项目</span>
<span class="project-status active">维护中</span>
</div>
一个现代化的企业级后台管理模板，基于 Vue 3 + TypeScript + Vite 构建。
**技术栈：** Vue 3、TypeScript、Vite、Pinia、Element Plus
**主要特性：**
- 完整的权限管理系统
- 多标签页路由缓存
- 动态主题配置
- 国际化支持
**链接：** [GitHub](https://github.com/your-username/vue-admin-pro) | [在线预览](https://vue-admin.example.com)
**数据：**
- ⭐ 1.2k Stars
- 🔀 300+ Forks
- 📦 npm 周下载量 5000+
---
### UI 组件库
<div class="project-header">
<span class="project-type">开源项目</span>
<span class="project-status active">维护中</span>
</div>
基于 Vue 3 的轻量级组件库，专注于性能和开发体验。
**技术栈：** Vue 3、TypeScript、Vite、Vitest
**主要特性：**
- 30+ 高质量组件
- 完整的 TypeScript 支持
- 单元测试覆盖率 95%+
- 支持 Tree Shaking
**链接：** [GitHub](https://github.com/your-username/ui-lib) | [文档](https://ui-lib.example.com)
---
## 企业项目
### 电商平台前端
<div class="project-header">
<span class="project-type">企业项目</span>
<span class="project-status completed">已完成</span>
</div>
某大型电商平台的 PC 端和移动端前端开发。
**技术栈：** Vue 3、Nuxt 3、Pinia、Tailwind CSS
**主要贡献：**
- 负责核心购物流程模块开发
- 优化首屏加载时间 40%
- 实现微前端架构迁移
**成果：**
- 日活用户 100 万+
- 页面加载时间从 3s 降至 1.8s
- 代码覆盖率从 60% 提升至 85%
---
### 数据可视化平台
<div class="project-header">
<span class="project-type">企业项目</span>
<span class="project-status completed">已完成</span>
</div>
企业级数据可视化平台，支持自定义图表和仪表盘。
**技术栈：** Vue 3、ECharts、TypeScript、WebSocket
**主要贡献：**
- 设计图表组件系统
- 实现实时数据推送
- 开发拖拽式仪表盘编辑器
**成果：**
- 支持 20+ 图表类型
- 实时数据延迟 < 100ms
- 服务 50+ 企业客户技能展示页
技能矩阵
markdown
<!-- docs/skills.md -->
---
title: 技能
description: 我的技术技能和工具使用情况
---
# 技能
## 前端开发
### 核心技术
<div class="skill-matrix">
<div class="skill-item">
<div class="skill-info">
<span class="skill-name">Vue.js</span>
<span class="skill-level expert">专家</span>
</div>
<div class="skill-bar">
<div class="skill-progress" style="width: 95%"></div>
</div>
<p class="skill-desc">5年经验，深入理解响应式原理、编译器实现</p>
</div>
<div class="skill-item">
<div class="skill-info">
<span class="skill-name">TypeScript</span>
<span class="skill-level advanced">高级</span>
</div>
<div class="skill-bar">
<div class="skill-progress" style="width: 85%"></div>
</div>
<p class="skill-desc">熟练使用类型体操、泛型编程、类型推断</p>
</div>
<div class="skill-item">
<div class="skill-info">
<span class="skill-name">React</span>
<span class="skill-level intermediate">中级</span>
</div>
<div class="skill-bar">
<div class="skill-progress" style="width: 70%"></div>
</div>
<p class="skill-desc">熟悉 Hooks、状态管理、常用生态库</p>
</div>
</div>
### CSS & 样式
| 技术 | 熟练度 | 说明 |
|------|--------|------|
| CSS3 | ⭐⭐⭐⭐⭐ | 熟练使用 Flexbox、Grid、动画 |
| Sass/SCSS | ⭐⭐⭐⭐⭐ | 模块化样式、变量、混入 |
| Tailwind CSS | ⭐⭐⭐⭐ | 原子化 CSS、自定义配置 |
| Styled Components | ⭐⭐⭐ | React 生态 CSS-in-JS |
### 构建工具
| 工具 | 熟练度 | 说明 |
|------|--------|------|
| Vite | ⭐⭐⭐⭐⭐ | 熟练配置和插件开发 |
| Webpack | ⭐⭐⭐⭐ | 深入理解打包原理、优化配置 |
| Rollup | ⭐⭐⭐⭐ | 库打包、Tree Shaking |
| esbuild | ⭐⭐⭐ | 极速构建、API 使用 |
## 后端开发
| 技术 | 熟练度 | 说明 |
|------|--------|------|
| Node.js | ⭐⭐⭐⭐ | Express、Koa、中间件开发 |
| Nest.js | ⭐⭐⭐ | 企业级后端框架 |
| 数据库 | ⭐⭐⭐ | MySQL、MongoDB、Redis |
## 工具 & 其他
- **版本控制：** Git、GitHub、GitLab CI/CD
- **代码质量：** ESLint、Prettier、Husky、lint-staged
- **测试：** Vitest、Jest、Playwright、Cypress
- **部署：** Vercel、Netlify、Docker、Nginx
- **设计：** Figma、Sketch、Adobe XD
## 证书 & 认证
- AWS Certified Cloud Practitioner
- Google Analytics Individual Qualification经历时间线
工作经历
markdown
<!-- docs/experience.md -->
---
title: 工作经历
description: 我的工作经历和教育背景
---
# 工作经历
## 职业生涯
<div class="timeline">
<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="timeline-date">2022.03 - 至今</div>
<div class="timeline-content">
<h3>高级前端工程师</h3>
<p class="company">某科技公司</p>
<ul>
<li>主导前端架构设计，推动技术栈升级至 Vue 3</li>
<li>建立前端规范体系，代码质量提升 40%</li>
<li>负责团队技术分享和新人培养</li>
</ul>
</div>
</div>
<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="timeline-date">2020.06 - 2022.02</div>
<div class="timeline-content">
<h3>前端工程师</h3>
<p class="company">某互联网公司</p>
<ul>
<li>负责电商平台核心模块开发</li>
<li>优化首屏加载性能，提升 35%</li>
<li>参与微前端架构设计与实现</li>
</ul>
</div>
</div>
<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="timeline-date">2019.07 - 2020.05</div>
<div class="timeline-content">
<h3>前端开发工程师</h3>
<p class="company">某创业公司</p>
<ul>
<li>从零搭建公司官网和管理后台</li>
<li>独立完成 H5 营销活动页面开发</li>
<li>参与产品需求讨论和用户调研</li>
</ul>
</div>
</div>
</div>
## 教育背景
<div class="timeline">
<div class="timeline-item education">
<div class="timeline-dot"></div>
<div class="timeline-date">2015.09 - 2019.06</div>
<div class="timeline-content">
<h3>计算机科学与技术</h3>
<p class="company">某大学 · 本科</p>
<ul>
<li>GPA: 3.8/4.0</li>
<li>获得校级优秀毕业生称号</li>
<li>ACM 程序设计竞赛银奖</li>
</ul>
</div>
</div>
</div>
## 开源贡献
| 项目 | 贡献类型 | 说明 |
|------|---------|------|
| Vue.js | 代码贡献 | 修复响应式边界情况 bug |
| Vite | 文档贡献 | 完善中文文档 |
| Pinia | Issue/PR | 添加类型声明改进 |
| Element Plus | PR | 修复组件样式问题 |关于页面
联系方式
markdown
<!-- docs/about.md -->
---
title: 关于我
description: 了解更多关于我的信息
---
# 关于我
## 个人简介
你好！我是张三，一名热爱前端开发的工程师。
我相信技术改变生活，热衷于探索新技术和解决复杂问题。工作之余，我喜欢：
- 📖 阅读技术书籍和博客
- 🏃 跑步和健身
- 🎸 弹吉他
- ✈️ 旅行和摄影
## 联系方式 {#contact}
<div class="contact-grid">
<a href="mailto:your-email@example.com" class="contact-card">
<div class="contact-icon">📧</div>
<div class="contact-info">
<h4>邮箱</h4>
<p>your-email@example.com</p>
</div>
</a>
<a href="https://github.com/your-username" target="_blank" class="contact-card">
<div class="contact-icon">💻</div>
<div class="contact-info">
<h4>GitHub</h4>
<p>@your-username</p>
</div>
</a>
<a href="https://linkedin.com/in/your-username" target="_blank" class="contact-card">
<div class="contact-icon">💼</div>
<div class="contact-info">
<h4>LinkedIn</h4>
<p>张三</p>
</div>
</a>
<a href="https://twitter.com/your-username" target="_blank" class="contact-card">
<div class="contact-icon">🐦</div>
<div class="contact-info">
<h4>Twitter</h4>
<p>@your_username</p>
</div>
</a>
</div>
## 下载简历
<div class="resume-download">
<a href="/resume.pdf" class="download-btn" download>
📄 下载 PDF 简历
</a>
</div>
## 留言板
欢迎在这里留言，我会尽快回复！
<GiscusComment />样式定制
自定义 CSS
css
/* docs/.vitepress/theme/style.css */
/* 技能进度条 */
.skill-bar {
height: 8px;
background: var(--vp-c-divider);
border-radius: 4px;
overflow: hidden;
margin: 8px 0;
}
.skill-progress {
height: 100%;
background: linear-gradient(90deg, var(--vp-c-brand-1), var(--vp-c-brand-2));
border-radius: 4px;
transition: width 0.6s ease;
}
/* 时间线 */
.timeline {
position: relative;
padding-left: 32px;
}
.timeline::before {
content: '';
position: absolute;
left: 8px;
top: 0;
bottom: 0;
width: 2px;
background: var(--vp-c-divider);
}
.timeline-item {
position: relative;
padding-bottom: 32px;
}
.timeline-dot {
position: absolute;
left: -28px;
top: 4px;
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--vp-c-brand-1);
border: 2px solid var(--vp-c-bg);
}
/* 项目卡片 */
.project-card {
display: block;
padding: 24px;
border: 1px solid var(--vp-c-divider);
border-radius: 12px;
transition: all 0.3s ease;
}
.project-card:hover {
border-color: var(--vp-c-brand-1);
transform: translateY(-4px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}
/* 联系方式网格 */
.contact-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 16px;
margin: 24px 0;
}
.contact-card {
display: flex;
align-items: center;
padding: 16px;
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
transition: all 0.2s ease;
}
.contact-card:hover {
border-color: var(--vp-c-brand-1);
background: var(--vp-c-bg-soft);
}部署上线
Vercel 部署
bash
# 安装 Vercel CLI
npm i -g vercel
# 部署
vercelGitHub Pages 部署
yaml
# .github/workflows/deploy.yml
name: Deploy Portfolio
on:
push:
branches: [main]
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: 20
- run: npm ci
- run: npm run build
- uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: docs/.vitepress/dist最佳实践
1. 内容真实
- 真实描述项目经历和贡献
- 提供可验证的项目链接
- 数据要准确可查
2. 持续更新
- 定期更新项目内容
- 添加新的学习成果
- 保持技术栈同步
3. 性能优化
- 压缩图片资源
- 使用懒加载
- 优化首屏加载
4. SEO 友好
- 设置合适的 meta 信息
- 使用语义化标签
- 添加结构化数据
相关资源