第46期 | 简历与作品集包装——让 HR 和面试官想见你

第46期 | 简历与作品集包装——让 HR 和面试官想见你 第46期 | 简历与作品集包装——让 HR 和面试官想见你 今天你将学会前端简历的标准结构和写法项目描述的 STAR 数据化公式GitHub Profile 美化README、Pin、贡献图用 AI 优化简历措辞和定制投递 核心知识简历是求职的敲门砖。HR 平均花6-8 秒扫一份简历面试官花1-2 分钟决定要不要给面试机会。你的 3 个项目已经做完了——TechAssistAI 知识库、FlowAI工作流编排、个人作品集。但如果你简历上写做了一个 AI 知识库和写基于 RAG 构建的 AI 知识库平台支持文档上传与智能问答85% 回答准确率——效果天差地别。今天我们来讲怎么把你做的东西包装成面试官想看的简历。一、简历结构1.1 标准模板┌─────────────────────────────────────────┐ │ 张三 │ │ AI 前端工程师 | zhangsanexample.com │ │ 138-xxxx-xxxx | github.com/xxx │ │ zhangsan.vercel.app | 城市 │ ├─────────────────────────────────────────┤ │ 个人简介 │ │ 1-2 年前端开发经验专注 AI Web 方向。 │ │ 独立完成 3 个 AI 驱动的全栈 Web 应用... │ ├─────────────────────────────────────────┤ │ 技能 │ │ 前端React, TypeScript, Tailwind... │ │ AIOpenAI API, RAG, Prompt Engineering │ │ 工具Git, Vite, Vercel, Supabase... │ ├─────────────────────────────────────────┤ │ 项目经历 │ │ ┌─ TechAssist - AI 知识库助手 ────────┐ │ │ │ • 技术栈React TS OpenAI... │ │ │ │ • 实现了 RAG 检索增强生成... │ │ │ │ • 性能优化 Lighthouse 95... │ │ │ └────────────────────────────────────┘ │ │ ┌─ FlowAI - AI 工作流编排工具 ────────┐ │ │ │ ... │ │ │ └────────────────────────────────────┘ │ ├─────────────────────────────────────────┤ │ 工作经历如有 │ │ XX 公司 - 前端开发工程师 (2024.01-至今) │ │ • 负责XX模块开发... │ ├─────────────────────────────────────────┤ │ 教育背景 │ │ XX大学 计算机科学与技术 本科 2020-2024 │ └─────────────────────────────────────────┘1.2 简历的 3 个层次层次HR 视角面试官视角你的目标第一眼关键词匹配React/TS/AI技术栈是否匹配6 秒过筛仔细看项目是否真实项目深度想要面试你面试时—项目能不能展开讲能聊 30 分钟二、项目描述公式2.1 STAR 数据化每条项目描述遵循[动词] [做了什么] [技术手段] [量化结果]对比❌ 平庸写法✅ 优秀写法做了一个 AI 知识库基于 RAG 架构实现 AI 知识库平台支持 PDF/Markdown 文档上传与智能问答用了 React 和 OpenAI采用 React 18 TypeScript Vite 构建OpenAI API 流式响应首字延迟 500ms做了性能优化通过代码分包和图片懒加载Lighthouse 性能评分从 62 提升至 95写了前端页面封装可复用组件库 20含流式 Markdown 渲染器、虚拟列表等2.2 三个项目的简历描述项目1TechAssist — AI 知识库助手TechAssist | AI 知识库助手 | 个人项目 | 2026.05-2026.06 技术栈React 18, TypeScript, Tailwind CSS, OpenAI API, Supabase, Vercel • 基于 RAG检索增强生成架构实现 AI 知识库平台支持文档上传、 分片向量化与智能问答回答准确率 85% • 封装 OpenAI API 调用层支持流式响应SSE、自动重试、超时取消 首字延迟 500ms • 实现 Markdown 实时渲染、代码高亮、流式打字效果消息列表虚拟化 支持 10000 条消息流畅滚动 • 采用 API Route 后端代理保护 API KeyZod 数据验证ErrorBoundary 错误边界产品级安全架构 • Lighthouse 性能评分 95部署于 Vercel支持自定义域名 • Demo: tech-assist.vercel.app | GitHub: github.com/xxx/tech-assist项目2FlowAI — AI 工作流编排工具FlowAI | AI 工作流编排工具 | 个人项目 | 2026.06 技术栈React 18, React Flow, Zustand, TypeScript • 构建可视化 AI 工作流编辑器支持拖拽节点、连线、配置参数 类似 n8n/Dify 的交互体验 • 实现 DAG有向无环图执行引擎基于 Kahn 算法拓扑排序 支持条件分支和节点级错误处理 • 自定义 4 种节点类型Input/LLM/Condition/Output每种节点 独立配置面板支持实时执行状态可视化 • 实现撤销/重做系统双栈结构、节点复制、网格对齐等编辑器功能 • 键盘快捷键支持CtrlZ/Y撤销重做、CtrlD复制、Delete删除 • Demo: flow-ai.vercel.app | GitHub: github.com/xxx/flow-ai项目3个人 AI 作品集网站AI 作品集网站 | 个人项目 | 2026.06 技术栈React 18, Tailwind CSS, Vite, Vercel Serverless • 开发集成项目展示、博客、AI 互动的个人作品集网站 • 实现访客 AI 对话功能基于 OpenAI API访客可通过自然语言 询问站主技术经历System Prompt 控制回答范围 • 首屏打字机动画 粒子效果响应式设计适配移动端 • Lighthouse 全维度 90Performance 95 / Accessibility 100 / SEO 95 • Demo: zhangsan.vercel.app | GitHub: github.com/xxx/portfolio2.3 常见动词库类别推荐动词开发实现、构建、开发、封装、搭建优化优化、提升、降低、减少、重构架构设计、采用、基于、引入成果达到、实现、支持、覆盖避免使用参与了、负责了、做了太模糊。三、量化数据的来源面试官看到85% 准确率Lighthouse 95会追问数据来源。你需要能回答数据来源回答准确率 85%测试 50 个问题人工评估正确/错误首字延迟 500ms浏览器 DevTools Network 面板测Lighthouse 95Chrome DevTools → Lighthouse 面板支持 10000 消息写个脚本生成 10000 条消息测性能组件复用 20代码库components/目录统计构建时间减少 X%npm run build前后对比关键原则简历上的每个数据你都要能在面试时解释怎么测的。编造数据是简历造假面试时一定会露馅。四、GitHub 美化面试官一定会看你的 GitHub。一个精心维护的 GitHub Profile 能加很多分。4.1 Profile README在 GitHub 创建一个与你用户名同名的仓库README.md 会显示在你的 Profile 页面。# 你好我是张三 我是一名 **AI 前端工程师**专注于 AI Web 应用开发 正在深入学习 **LLM Agent 开发** 和 **RAG 系统优化** 问我关于React, TypeScript, AI 应用开发, Prompt Engineering 联系我zhangsanexample.com [个人网站](https://zhangsan.vercel.app) | [技术博客](https://blog.zhangsan.dev) ## 技术栈 ![React](https://img.shields.io/badge/React-20232A?styleflatlogoreactlogoColor61DAFB) ![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?styleflatlogotypescriptlogoColorwhite) ![OpenAI](https://img.shields.io/badge/OpenAI-412991?styleflatlogoopenailogoColorwhite) ![Vite](https://img.shields.io/badge/Vite-646CFF?styleflatlogovitelogoColorwhite) ![Tailwind CSS](https://img.shields.io/badge/Tailwind-06B6D4?styleflatlogotailwindcsslogoColorwhite) ## GitHub 统计 p img height160 srchttps://github-readme-stats.vercel.app/api?username你的名字show_iconstruethemeradical / img height160 srchttps://github-readme-stats.vercel.app/api/top-langs/?username你的名字layoutcompactthemeradical / /p ## 精选项目 - **[TechAssist](https://github.com/你的名字/tech-assist)** - AI 知识库助手RAG 对话 - **[FlowAI](https://github.com/你的名字/flow-ai)** - AI 工作流编排工具 - **[Portfolio](https://github.com/你的名字/portfolio)** - 个人 AI 作品集网站4.2 项目 README 模板每个项目仓库都要有好的 README# TechAssist - AI 知识库助手 基于 RAG 的 AI 知识库平台支持文档上传、智能问答和知识管理。 ![TechAssist Demo](docs/demo.gif) ## ✨ 特性 - 文档上传与自动分片PDF/Markdown/TXT - RAG 检索增强生成回答基于文档内容 - 流式响应实时打字效果 - Markdown 渲染 代码高亮 - API Key 服务端保护 - 响应式设计 ## 技术栈 - **前端**: React 18, TypeScript, Tailwind CSS, Vite - **AI**: OpenAI GPT-4o-mini, text-embedding-3-small - **后端**: Vercel Serverless Functions - **数据库**: Supabase (PostgreSQL pgvector) ## 快速开始 \\\bash # 克隆仓库 git clone https://github.com/你的名字/tech-assist.git cd tech-assist # 安装依赖 npm install # 配置环境变量 cp .env.example .env.local # 填入你的 OpenAI API Key 和 Supabase 配置 # 启动开发服务器 npm run dev \\\ ## 项目结构 \\\ src/ ├── components/ # UI 组件 ├── hooks/ # 自定义 Hook ├── store/ # Zustand 状态管理 ├── api/ # API 调用层 ├── types/ # TypeScript 类型 └── utils/ # 工具函数 \\\ ## 截图 | 首页 | 对话 | 知识库 | |------|------|--------| | ![](docs/home.png) | ![](docs/chat.png) | ![](docs/kb.png) | ## License MIT4.3 Pin 精选项目在 GitHub Profile → Customize your pins → 选择 6 个最好的项目展示。选择标准3 个课程项目TechAssist / FlowAI / Portfolio如果有其他开源贡献选 1-2 个如果有技术文章仓库选 1 个4.4 保持绿框面试官会看你的贡献图绿框。 策略 - 不需要每天提交但最近 3 个月要有持续的绿色 - 课程期间每周 2 次更新 持续绿色 - 每次完成一个功能就 commit不要攒一堆一起提交 - commit message 要规范feat: / fix: / docs: / refactor:五、简历排版5.1 格式选择格式优点缺点推荐PDF格式固定所有设备一致不能编辑⭐⭐⭐⭐⭐WordHR 可编辑格式可能错乱❌网页可交互有些公司系统不兼容作为补充永远发 PDF。用 Markdown 写然后用 Typora / VS Code 插件导出 PDF。5.2 排版原则1 页原则 - 应届生/1-2年经验1 页 - 3年以上最多 2 页 - HR 不会看第 3 页 字体 - 中文宋体 / 微软雅黑 / 思源黑体 - 英文Arial / Helvetica / Calibri - 代码JetBrains Mono / Fira Code - 字号正文 10-11pt标题 12-14pt 间距 - 行距 1.2-1.5 - 段间距 6-10pt - 页边距 1.5-2cm 颜色 - 主体黑色 #333 - 强调色 1 种蓝色或紫色 - 不要用 3 种以上颜色 AI协作实战场景1AI 优化简历措辞我的 Prompt请优化以下简历项目描述使其更有吸引力和专业感。 原文 用 React 和 OpenAI 做了一个 AI 知识库。用户可以上传文档AI 会根据文档回答问题。做了流式响应和 Markdown 渲染。部署在 Vercel 上。 优化要求 1. 每条以动词开头 2. 包含技术细节 3. 尽量量化 4. 控制每条 30-40 字 5. 分 3-4 条 bullet point 6. 突出AI 前端的差异化AI 输出• 基于 RAG 架构实现 AI 知识库平台支持文档上传、自动分片与智能问答 • 封装 OpenAI API 流式调用层实现 SSE 实时响应首字延迟 500ms • 开发 Markdown 实时渲染组件支持代码高亮、表格、流式打字效果 • 部署于 Vercel ServerlessAPI Key 服务端代理保护Lighthouse 评分 95我的修改AI 写得不错但我调整了顺序——把最有技术含量的RAG 架构放第一条面试官第一眼就看到。场景2AI 模拟 HR 筛简历Prompt: 你是一位互联网公司的 HR正在筛选前端开发岗位的简历。 以下是一份简历的项目经历部分请 1. 以 HR 视角评分1-10 2. 指出 3 个优点和 3 个不足 3. 如果这是你收到的简历你会给面试机会吗为什么 4. 给出具体改进建议 [粘贴简历项目部分]这个练习非常有价值——AI 模拟 HR 视角能帮你发现自己觉得写得好但 HR 看不懂的问题。场景3AI 定制投递Prompt: 以下是目标岗位的 JD职位描述请帮我分析 1. 关键词提取技术栈、软技能 2. 我的简历中哪些点最匹配 3. 简历中哪些描述需要调整以更匹配 JD 4. 建议的简历定制方案 JD: [粘贴 JD] 我的简历: [粘贴简历]学到了什么AI 优化简历措辞效果显著——同一个项目AI 能把平淡的描述变得专业且有吸引力AI 模拟 HR 筛简历时会指出你以为很厉害但 HR 看不懂的术语——需要用更通俗的语言定制投递时AI 能精准找到JD 和简历的匹配点帮你调整简历侧重点但数据不能编——AI 可能建议加一些你没做过的数据必须只写真实做过的 动手练习练习1写简历简单用 Markdown 写一份 1 页简历3 个项目用 STAR 数据化格式导出为 PDF让 AI 模拟 HR 审一遍练习2美化 GitHub中等创建 Profile README同仓库添加技术栈徽章和 GitHub Stats3 个项目仓库各写完整 READMEPin 6 个项目确保最近 3 个月有绿色贡献练习3定制投递挑战找 3 个目标岗位的 JD用 AI 分析每个 JD 的关键词根据每个 JD 定制一份简历微调项目描述侧重点对比 3 份简历的差异 本期要点简历 6 秒法则HR 6 秒决定是否继续看——关键词匹配 排版清晰 项目数据化STAR 数据化公式动词 做了什么 技术手段 量化结果每条 30-40 字GitHub Profile README是面试官必看——技术栈徽章 精选项目 绿色贡献图项目 README要有截图、快速开始、技术栈、项目结构——让别人 30 秒看懂你的项目AI 是简历优化的最佳工具——优化措辞、模拟 HR 筛选、定制投递三步搞定 下期预告第47期面试准备——八股文与算法。前端高频面试题怎么答、算法怎么快速准备、AI前端方向有什么特殊考点。我们用 AI 模拟面试来训练。如果你没有苹果电脑需要上传ios到APPStore可以访问以下网站iPA上传工具 - IPA解析与AppStore提交