Sweta0519/Pro-portfolioBuilder

# 🚀 ProPortfolio Builder [](https://vitejs.dev/) [](https://reactjs.org/) [](https://tailwindcss.com/) [](https://www.typescriptlang.org/) [](LICENSE) 一款集成了 AI 驱动的简历解析器、ATS 合规扫描器、交互式简历指导工具、**结合 Google 实时搜索的 AI 面试准备教练**，以及专业 Web 作品集生成器的多合一平台。 ProPortfolio Builder 允许求职者粘贴或上传标准的 PDF/Word 简历，根据在招职位进行审核，自动优化内容，利用源自 Glassdoor 和 Blind 的针对特定岗位的问题进行面试准备，通过实时的模拟面试工具进行练习，上传个人头像，自定义样式，并即时导出一个完全响应式且可直接部署的 Vite + React + Tailwind CSS 作品集网站。 ## 🌟 核心功能 ### 📁 1. 智能简历解析器 * **多格式解析：** 直接上传并解析标准的 `.docx`、`.pdf` 或纯文本文件。 * **结构化数据提取：** 自动将文本分离为清晰的 JSON schema，涵盖个人信息、工作经验、项目、技能、教育背景、证书和推荐信。 ### 🎭 2. 5 款优质交互式 Web 主题 * **Creative Morph：** 流畅变形的渐变背景团块、旋转卡片式头像侧边栏，以及时尚的交互式过渡效果。 * **Cyberpunk Terminal：** 复古未来主义、高对比度的等宽字体开发者终端外观。采用 CLI 仪表盘美学构建。 * **Minimal Slate：** 围绕优质排版、微妙间距和传统结构构建的超简洁、高可读性布局。 * **Gradient Glow：** 采用悬浮的毛玻璃效果、渐变卡片和发光霓虹节点的时尚暗色模式 UI。 * **Classic Professional：** 整洁、结构化的企业布局，非常适合传统的工程、金融或咨询领域。 ### 🎨 3. 深度自定义引擎 * **动态调色板自定义器：** 实时主题色选择器，支持在紫罗兰色、翠绿色、蓝色、琥珀色、玫瑰色和石板色之间即时切换。 * **排版选择器：** 切换字体族（Sans、Serif 和 Monospace）以匹配你的开发者身份。 * **Base64 头像上传器：** 上传自定义头像。照片通过 `FileReader.readAsDataURL()` 处理，并以 Base64 字符串的形式存储在 state 中。这会将头像直接嵌入到页面标记和导出的包中，实现**零第三方托管依赖**。 ### 📊 4. 实时 ATS 与求职信扫描器 * **Jobscan 风格评分：** 粘贴目标职位描述以分析匹配概率。 * **审核检查：** 自动检查联系信息、格式布局，并标记会导致旧版 ATS 系统解析失败的不可读嵌套网格。 * **招聘人员洞察：** 审核文档字数、句子长度复杂性，根据简历日期估算经验年限，并验证职位名称的匹配度。 * **关键词密度分析：** 生成针对硬技能和软技能的目标频率与实际频率对照清单。 * **求职信审核器：** 针对问候语、篇幅和关键词映射提供实时反馈。 ### 🧠 5. 交互式 AI 简历教练 * **实时评分：** 按 `0 - 100` 的等级对简历内容进行评分，并赋予字母等级（从 `A+` 到 `Needs Work`）。 * **主动动词审核：** 自动扫描描述行并标记被动措辞，如果你缺乏强有力的起始动词（例如 *Led*、*Spearheaded*、*Engineered*），则会向你发出警告。 * **指标审核器：** 扫描项目符号以查找量化值（百分比、节省成本、货币、数量），帮助你用具体数据证明影响力。 * **行为动词升级器：** 内置字典，可将弱动词（如 *"worked on"*、*"helped"*、*"made"*）映射为高影响力的项目符号示例。 ### 🔄 6. 一键简历优化器 * **关键词注入：** 自动将相关的缺失技术关键词附加到你的技能部分。 * **动词升级：** 自动将你经历历史中的被动动词替换为专业的强有力动词。 * **简介润色：** 完善并充实简短的专业简介，以提升高管风范。 ### 📦 7. 多格式导出器 * **Vite + React + Tailwind ZIP：** 下载一个包含完整、模块化、响应式且预配置了 Tailwind CSS 4.0 的 Vite 应用 zip 压缩包。上传至 Vercel/Netlify 即可一键部署实时作品集。 * **Word 导出器：** 使用标题结构生成结构清晰、排版整洁且样式精美的 Word 文档 (`.docx`)。 * **打印 PDF：** 渲染针对打印或直接生成 PDF 优化的整洁文档布局。 ### 🎯 8. AI 面试准备教练 一套全面的、具备角色感知能力的面试准备系统，可根据你的具体职位和目标公司量身定制所有内容。 #### 🧠 角色感知智能（13 种职位类别） 系统会将你的职位归类为 13 种类别之一，并自动调整显示的面试轮次和问题： | 检测到的职位 | 显示的面试轮次 | DSA? | System Design? | |---|---|---|---| | Software / Fullstack Engineer | HR, Behavioral, Technical, DSA, System Design | ✅ | ✅ | | Frontend Engineer | HR, Behavioral, Technical, DSA | ✅ | ❌ | | Tech Support / Customer Success | HR, Behavioral, Technical, **Customer Scenarios** | ❌ | ❌ | | Product Manager | HR, Behavioral, **Product Sense** | ❌ | ❌ | | Data Analyst | HR, Behavioral, **SQL & Analytics** | ❌ | ❌ | | Data Scientist / ML Engineer | HR, Behavioral, Technical, **ML & Statistics** | ❌ | ❌ | | DevOps / SRE | HR, Behavioral, **Infrastructure**, System Design | ❌ | ✅ | | QA / SDET | HR, Behavioral, Technical, **QA & Testing** | ❌ | ❌ | | UX/UI Designer | HR, Behavioral, **Design Portfolio** | ❌ | ❌ | | Engineering Manager | HR, Behavioral, **Leadership** | ❌ | ❌ | #### 🌐 Gemini Google Search 集成（可选） 凭借免费的 [Google AI Studio API key](https://aistudio.google.com/apikey)，该工具会调用 **Gemini 2.0 Flash with Google Search grounding** 来获取真实的实时信息： * **相关人员实际的工作内容**（在该特定公司担任此职位，源自 Glassdoor、LinkedIn、Blind、Indeed） * **真实的面试流程** —— 实际候选人上报的逐步轮次 * **8–10 个真实面试问题**（在 Glassdoor、Blind 和 LeetCode Discuss 上报道过的） * 源自网络搜索结果的**来源链接**，供核实验证 面试表单包含三个输入字段：**Company Name**、**Position/Job Title** 和 **Job Description**。明确输入公司名称以获得最精准的搜索结果。 #### 🔍 职位洞察仪表盘 针对每一个“公司 + 职位”组合，都会展示一张详尽的“相关人员在此职位中的工作内容”卡片： * 日常职责（具备公司文化意识：大厂 vs. 初创公司 vs. 咨询公司） * 典型的工作日描述 * 期望的核心技能 * 候选人面临的主要挑战 #### 📋 100+ 道精选练习题 * **HR & Screening** —— 薪资期望、求职动机、优势/劣势 * **Behavioral (STAR)** —— Amazon LP 风格、失败/成功案例、冲突解决 * **Technical** —— REST vs GraphQL、事件循环、SOLID、Docker、JWT auth、数据库优化 * **DSA / Coding** —— Two Sum、LRU Cache、Number of Islands、Coin Change（真实的 LeetCode 问题） * **System Design** —— URL Shortener、Notification System、News Feed、Rate Limiter * **Customer Scenarios** —— 工单优先级排序、升级处理、知识库编写 * **Product Sense** —— 指标调查、功能优先级排序、自建与购买决策 * **SQL & Analytics** —— 窗口函数、滚动平均值、A/B 测试设计 * **ML & Statistics** —— 偏差-方差、精确率/召回率、推荐系统 * **Infrastructure** —— CI/CD pipelines、事件响应、Kubernetes、成本优化 * **QA & Testing** —— 测试金字塔、API 测试、不稳定测试管理 * **Design Portfolio** —— 作品集演示、无障碍设计、设计师与工程师的交接 * **Leadership** —— 绩效反馈、技术债谈判、团队建设 #### 📚 智能学习规划器 * 识别你的简历与职位描述之间的技能差距 * 根据职位类别和资历分配高/中/低优先级 * 链接到真实的外部学习资源（LeetCode、NeetCode、YouTube、官方文档） * 所有链接均在新标签页中打开，便于访问 #### 🎤 模拟面试器 * **逐题作答**的顺序流程，配有实时计时器 * **🎙️ 语音录制：** 点击麦克风按钮说出你的答案 —— 实时的语音转文字转录内容将显示在文本框中（由浏览器的 Web Speech API 提供支持）。音频也会被录制下来供回放，以便你进行自我复盘。 * **AI 驱动的答案评分器** 会从以下方面评估你的回答： * STAR 方法结构（适用于行为面试轮次） * 量化指标和影响声明 * 行为动词的使用（Led、Built、Delivered、Optimized...） * 技术深度和专业术语（适用于技术面试轮次） * 特定角色的标准（分析师考察 SQL 术语、支持岗位考察客户同理心等） * 字母等级系统（从 A+ 到 “Needs Work”），并提供可执行的反馈 * 练习快捷方式：点击任意问题上的 “Practice This” 即可直接进入模拟模式 ## 🛠️ 技术栈 * **前端框架：** React 19 (TypeScript) * **构建工具：** Vite 7.3.2 * **样式引擎：** Tailwind CSS 4.1.17（使用 `@tailwindcss/vite` 插件编译） * **AI 集成：** Gemini 2.0 Flash API with Google Search grounding（可选，免费额度） * **图标集：** Lucide React * **文档解析支持：** `pdfjs-dist`（PDF 提取）& `mammoth`（Docx 提取） * **导出工具：** `docx`（Word 格式化）、`jszip`（ZIP 文件编译） ## 📂 项目结构 ``` build-portfolio-from-resume/ ├── src/ │ ├── App.tsx # Main UI: Sidebar editors, previewers, ATS scanner, interview coach, and layout tools │ ├── ThemeRenderer.tsx # Layout engine rendering all 5 portfolio styles and interactions │ ├── types.ts # Core TypeScript definitions (ResumeData, ThemeSettings, Interview types, etc.) │ ├── parser.ts # Text-to-JSON resume parsing heuristics │ ├── fileParser.ts # File upload readers (converting PDF/DOCX to plain text) │ ├── ats.ts # ATS scanner, keyword mapping, and cover letter analysis │ ├── coach.ts # AI Coach recommendations engine and action verb dictionary │ ├── interviewCoach.ts # Interview Prep engine: role classifier, question banks, study planner, Gemini integration │ ├── zipExporter.ts # Code generator writing React/Vite/Tailwind source files into a ZIP │ ├── wordExporter.ts # Word Document (.docx) builder │ ├── ResumeDocumentTemplate.tsx # Document preview layout optimized for PDF printouts │ ├── ResumeInteractivePreview.tsx# Live interactive editor preview cards │ ├── sampleData.ts # Fallback mock data populated on startup │ ├── index.css # Core Tailwind styling imports and transition rules │ └── main.tsx # React entrypoint ├── public/ # Static assets ├── index.html # HTML container template ├── vite.config.ts # Vite compilation configurations ├── tsconfig.json # TypeScript setup ├── package.json # Dependencies & execution scripts └── README.md # Documentation ``` ## 🚀 快速开始 ### 前置条件 确保你已安装 [Node.js](https://nodejs.org/)（推荐 18+ 版本）。 ### 1. 安装依赖 在根目录下，安装所有必需的包： ``` npm install ``` ### 2. 启动本地开发服务器 启动本地热重载开发环境： ``` npm run dev ``` 在 Web 浏览器中打开 [http://localhost:5173/](http://localhost:5173/)。 ### 3. 生产环境构建 将项目打包为高度优化的生产环境资源构建版本： ``` npm run build ``` 在本地验证生产环境构建： ``` npm run preview ``` ## 💡 导出器工作原理 **Vite/React/Tailwind ZIP 导出器**（`src/zipExporter.ts`）的工作原理是将你当前的简历状态和自定义配置直接编译成一个独立的 React 代码库。 1. **自包含数据：** 代码生成器会在导出文件中写入一个 `data.json` 文件，其中包含你所有自定义的文本以及上传头像的 Base64 表示形式。 2. **模块化组件：** 它将专用的 `App.tsx`、`ThemeRenderer.tsx`、`types.ts` 副本和核心样式打包到 ZIP 中。 3. **Tailwind CSS 4.0 集成：** 导出的代码配置了 Tailwind 的 Vite 编译器，允许实用样式在部署时即时编译。 4. **无需服务器后端：** 导出网站上的联系表单已完全配置为处理本地输入，使其能够以静态方式运行。 ## 🌐 一键部署指南 将你导出的 ZIP 压缩包部署到云端既快捷又免费。 ### 部署到 Vercel（推荐） 1. 将下载的 ZIP 文件解压到你电脑上的某个文件夹中。 2. 安装 Vercel CLI（`npm install -g vercel`），或将该文件夹推送到 **GitHub repository**。 . 如果使用 GitHub： * 进入 [Vercel Dashboard](https://vercel.com/) 并点击 **Add New Project**。 * 导入你的 GitHub repository。 * Vercel 会自动检测到 **Vite** 并配置相关设置。点击 **Deploy**。 4. 如果使用 Vercel CLI： * 在解压后的目录中打开终端。 * 运行： vercel * 根据提示回答问题，并运行 `vercel --prod` 将其发布上线！ ### 部署到 Netlify 1. 登录 [Netlify](https://www.netlify.com/)。 2. 将你解压后的项目文件夹直接拖拽到 **Netlify Drop** 上传区。 3. 你的作品集将在几秒钟内通过公开 URL 上线！ ## 📝 许可证 本项目基于 MIT 许可证授权 —— 详见 LICENSE 文件了解详情。

标签：ATS合规, React, Syscalls, Tailwind CSS, Vite, 前端建站, 求职辅导, 简历解析, 自定义脚本