前端工程师的线上简历：用 VitePress + GitHub Pages 打造你的个人品牌
前言
作为一名前端工程师，你是否遇到过这样的困扰：
- 投递简历后，面试官对你的技术能力了解有限
- 传统简历格式固定，无法充分展示你的技术栈和项目经验
- 想要展示自己的开源项目和个人作品，但缺少一个统一的展示平台
- 简历内容更新后，需要重新发送给所有面试官
今天，我想分享一种现代化的简历展示方式——线上简历。通过 VitePress + GitHub Pages，打造一个完全属于你自己的技术品牌展示平台。
什么是线上简历
线上简历不是简单的将 Word 或 PDF 简历放到网上，而是：
- 一个完整的技术博客/作品集网站
- 展示你的技术栈、项目经验、开源贡献
- 方便面试官快速了解你的技术能力
为什么选择线上简历
1. 技术能力的直观展示
传统简历只能用文字描述你的技术能力，而线上简历可以：
- 展示你的前端技术栈：Vue2/3、React、TypeScript、VitePress 等
- 展示你的项目经验：图文并茂地介绍你的核心项目
- 展示你的开源贡献：直接链接到你的 GitHub 仓库和 npm 包
- 展示你的技术博客：分享你的技术见解和学习心得
如何搭建自己的线上简历
1. 初始化项目
# 创建项目目录
mkdir my-resume
cd my-resume
# 初始化 npm 项目
npm init -y
# 安装 VitePress
npm install -D vitepress
# 创建文档目录
mkdir docs
echo '# Hello World' > docs/index.md
2. 配置 VitePress
创建 docs/.vitepress/config.mts：
import { defineConfig } from 'vitepress'
export default defineConfig({
title: "你的名字-简历",
description: "个人简历与项目",
themeConfig: {
nav: [
{ text: "首页", link: "/" },
{ text: "简历", link: "/resume" },
{ text: "开源项目", link: "/open-source" },
],
socialLinks: [{ icon: "github", link: "https://github.com/yourusername" }],
},
base: "/your-repo-name/",
})
3. 编写简历内容
在 docs/ 目录下创建 Markdown 文件：
index.md：首页介绍resume.md：完整简历open-source.md：开源项目personal-project.md：个人项目
总结
线上简历是前端工程师展示技术能力的最佳方式之一。通过 VitePress + GitHub Pages，你可以：
- 免费搭建一个专业的技术展示平台
- 直观展示你的技术栈和项目经验
- 吸引更多面试官的关注
如果你是一名前端工程师，我强烈建议你搭建自己的线上简历。如果你是一名面试官，我建议你优先关注有线上简历的候选人。
