Willie-Conway/CyberPrep
GitHub: Willie-Conway/CyberPrep
一个AI驱动的网络安全面试模拟平台，通过模拟面试和结构化学习帮助用户提升特定职业路径的求职准备效果。
Stars: 1 | Forks: 0
# 🛡️ CyberPrep — AI驱动的网络安全面试模拟器
## 🎯 **关于**
**CyberPrep** 是一个专业级的网络安全面试准备平台，它模拟跨8个网络安全职业路径的真实面试体验。与通用的闪卡应用不同，CyberPrep 提供：
- **针对特定角色的学习模块**，包含闪卡和知识检查
- **AI驱动的模拟面试**，由 Claude 评估您的回答
- **详细的评分与反馈**，包含可操作的改进领域
- **完整的准备旅程**，从角色概览到面试复盘
## ✨ **核心功能**
### 🎯 **8条职业路径**
| 角色 | 重点 | 难度 | 薪资范围 |
| ------------------------------------- | -------------------------------------- | ---------- | --------------- |
| **SOC分析师** | 安全监控与事件分诊 | ⭐⭐ | $55K – $95K |
| **渗透测试员** | 道德黑客与红队 | ⭐⭐⭐⭐ | $85K – $145K |
| **安全工程师** | 安全架构与基础设施 | ⭐⭐⭐ | $95K – $165K |
| **事件响应员/DFIR** | 取证与入侵响应 | ⭐⭐⭐⭐ | $80K – $140K |
| **云安全工程师** | AWS/Azure/GCP安全 | ⭐⭐⭐ | $100K – $175K |
| **GRC分析师** | 治理、风险与合规 | ⭐⭐ | $65K – $120K |
| **威胁情报分析师** | CTI与威胁研究 | ⭐⭐⭐ | $75K – $130K |
| **CISO / 安全经理** | 领导力与项目战略 | ⭐⭐⭐⭐⭐ | $150K – $300K+ |
### 📚 **三阶段准备旅程**
| 阶段 | 重点 | 主要功能 |
| ------------------------------ | --------------------- | --------------------------------------------------------------------------------- |
| **01 — 角色概览** | 理解该角色 | 职责、薪资数据、认证、工具、日常工作、关键技能 |
| **02 — 学习模块** | 学习核心概念 | 每角色3个模块 · 每个模块5张闪卡 · 5题知识检查 |
| **03 — 模拟面试** | 练习并获得评分 | 10个问题 · 3分钟计时器 · Claude AI评分 · 详细反馈 |
## 🧠 **阶段01：角色概览 — 了解你的目标**
每个角色都包含一份全面的概览：
| 元素 | 描述 |
| ---------------------------- | -------------------------------------------------------- |
| **角色概述** | 职责和影响的详细描述 |
| **薪资范围** | 市场薪酬数据 |
| **职业增长** | 截至2030年的行业预测 |
| **关键认证** | 所需/有益的认证（CISSP、OSCP、Security+等） |
| **核心工具** | 您日常接触的技术 |
| **日常工作** | 逼真的日常活动和任务 |
## 📖 **阶段02：学习模块 — 互动式学习**
### **模块结构**（每角色3个）
| 模块重点 | 示例主题 |
| ------------------------------------- | --------------------------------------------------------------------------- |
| **SIEM与日志分析** | SIEM功能、日志规范化、误报、关联规则、MTTD |
| **事件响应与分诊** | NIST生命周期、IoCs、遏制与根除、剧本 |
| **威胁情报与工具** | MITRE ATT&CK、威胁狩猎、Diamond Model、OSINT |
### **闪卡** 🔄
- **每个模块5张互动卡片**
- **点击翻转**设计以显示答案
- **上一张/下一张导航**
- **涵盖核心概念**，提供简洁、适考的答案
### **知识检查** ✅
- **5道多选题测验**
- **即时反馈**并附带解释
- **跨模块进度跟踪**
- **完成状态**在会话期间保存
## 🤖 **阶段03：模拟面试 — AI驱动的评估**
### **面试结构**
| 元素 | 详情 |
| ------------------------ | ------------------------------------- |
| **问题数量** | 每场面试10个问题 |
| **问题类型** | 技术类、行为类、情境类 |
| **时间限制** | 每个问题3分钟 |
| **计时器警告** | 60秒时黄色，30秒时红色闪烁 |
| **跳过选项** | 可跳过（分数=0） |
### **Claude AI评分** 📊
每个答案都根据专业评分标准进行评估：
| 分数范围 | 评级 | 描述 |
| -------------- | ----------- | ------------------------------------------------------------- |
| **9-10** | 卓越 | 完整、准确、有具体示例，展现专业知识 |
| **7-8** | 优秀 | 很好地涵盖主要要点，有轻微不足 |
| **5-6** | 合格 | 基本概念正确，缺乏深度 |
| **3-4** | 薄弱 | 部分理解，存在显著不足 |
| **1-2** | 差 | 大部分不正确或含糊不清 |
| **0** | 无 | 未作答或完全不相关 |
### **每个问题的详细反馈**
面试结束后，每个回答将获得：
- **✓ 优点** — 识别出您回答中的亮点
- **⚠ 不足之处** — 您遗漏的关键概念或细节
- **💡 理想答案** — 一个完美回答应包含的内容
- **您的答案** — 您回答的完整文本
## 📊 **结果与复盘**
### **绩效仪表板**
| 指标 | 描述 |
| ------------------------ | -------------------------------------------- |
| **总分** | 百分制分数（0-100%） |
| **字母评级** | A+ 到 F，基于表现 |
| **已答题数** | 包含实质性答案的问题数量 |
| **优秀答案** | 7分及以上的答案数 |
| **类型分解** | 技术、行为、情境得分 |
### **分数可视化**
- **径向得分环**，带有颜色编码的绩效
- **按问题类型的柱状图**
- **可展开的问题回顾**部分
- **颜色编码的分数**（绿色=优秀，黄色=一般，红色=薄弱）
### **推荐的下一步行动**
根据您的分数提供动态建议：
| 分数范围 | 建议 |
| ---------------- | -------------------------------------------------------------- |
| **< 60%** | 需要深入学习 · 聚焦基础性问题 |
| **60-79%** | 审查薄弱领域 · 改进回答结构（STAR方法） |
| **80%+** | 表现优秀 · 进阶准备 · 公司研究 |
## 🎨 **设计与美学**
### **赛博朋克面试美学** 🖥️
- **深色背景**（`#05080f`）帮助面试时保持专注
- **毛玻璃效果卡片**，带有背景模糊
- **渐变网格背景**增加深度感
- **青色/蓝色强调色**（`#3b82f6`, `#06b6d4`）用于主要界面
- **翡翠绿**（`#10b981`）用于正确答案和成功状态
- **琥珀色**（`#f59e0b`）用于警告和情境类问题
- **玫瑰红**（`#f43f5e`）用于关键/困难元素
- **紫罗兰色**（`#8b5cf6`）用于威胁情报
### **字体排版** ✍️
| 字体 | 用途 |
| ------------------------ | --------------------------------------------- |
| **Outfit** | 标题、正文、界面标签 |
| **JetBrains Mono** | 终端输出、代码、技术数据、徽章 |
### **动画与效果** ✨
- **向上淡入错开加载**以建立视觉层次
- **打字机效果**用于问题展示
- **闪烁的光标**在打字机中
- **带有颜色过渡的计时器**（白色 → 黄色 → 红色闪烁）
- **脉冲动画**用于阶段指示器
- **平滑的卡片翻转**用于闪卡
- **可展开的结果部分**带有箭头旋转
- **进度条**贯穿整个体验
### **严重性/标签颜色编码** 🎨
| 标签类型 | 颜色 | 用途 |
| ----------------------- | ----------- | ------------------------------------ |
| **徽章蓝** | `#3b82f6` | 技术问题、通用标签 |
| **徽章翡翠绿** | `#10b981` | 行为问题、成功状态 |
| **徽章琥珀黄** | `#f59e0b` | 情境问题、警告 |
| **徽章玫瑰红** | `#f43f5e` | 关键、高难度 |
| **徽章紫罗兰** | `#8b5cf6` | 威胁情报、高级主题 |
| **徽章青色** | `#06b6d4` | 云安全、技术深度 |
## 🛠️ **技术实现**
### **技术栈** 🥞
| 技术 | 用途 |
| ---------------------------- | ------------------------------------------ |
| **HTML5** | 结构与语义化标记 |
| **CSS3** | 自定义样式、动画、毛玻璃效果 |
| **Vanilla JavaScript** | 状态管理、DOM操作 |
| **Claude API** | AI驱动的答案评分 |
| **无框架** | 纯原生实现 — 无 React、Vue 或 Angular |
### **核心组件** 🧩
| 组件 | 用途 | 功能特性 |
| -------------------------- | ------------------- | ------------------------------------------- |
| **RoleGrid** | 角色选择 | 8张卡片，带有难度和颜色编码 |
| **BriefHero** | 角色概述 | 薪资、增长、标签、认证 |
| **FlashcardDeck** | 学习卡片 | 点击翻转，上一张/下一张导航 |
| **QuizModule** | 知识检查 | 多选题，即时反馈 |
| **InterviewSidebar** | 问题导航 | 状态指示器（活跃/已答/已跳过） |
| **Timer** | 时间管理 | 3分钟倒计时，带有警告 |
| **Typewriter** | 问题展示 | 逐字符动画 |
| **ScoringOverlay** | 处理界面 | AI评估期间的加载旋转器 |
| **DebriefPanel** | 结果展示 | 可展开部分，分数可视化 |
### **数据结构** 📊
```
Role = {
id, name, subtitle, icon, color, difficulty,
tags, tagLabels, desc, salary, growth, overview,
certs, tools, skills, dayInLife,
modules: [{
title, cards: [{q, a}], quiz: [{q, opts, ans, exp}]
}],
questions: [{q, type, difficulty}]
}
```
### **状态管理** 🔄
| 状态变量 | 用途 |
| ------------------ | -------------------------- |
| `role` | 当前选中的角色 |
| `moduleIndex` | 当前模块（0-2） |
| `moduleDone` | 模块完成状态 |
| `cardIndex` | 当前闪卡 |
| `quizIndex` | 当前测验问题 |
| `interviewIndex` | 当前面试问题 |
| `answers` | 用户答案数组 |
| `results` | AI评分结果 |
| `timerSeconds` | 剩余时间（最多180秒） |
## 🎥 **视频演示脚本**（90秒）
| 时间 | 阶段 | 操作 |
| ---- | --------------- | ----------------------------------------------------------------------------------- |
| 0:00 | 主页 | 着陆页显示角色网格，展示8条职业路径 |
| 0:05 | 角色选择 | 点击 SOC分析师 → 概览屏幕加载 |
| 0:15 | 概览 | 显示薪资（$55K-95K）、认证（Security+、CySA+）、工具（Splunk、Sentinel） |
| 0:25 | 学习 | 模块1：SIEM与日志分析 — 翻阅5张闪卡 |
| 0:40 | 知识检查 | 回答测验问题 → "真阳性/假阳性" → 正确！ |
| 0:50 | 完成模块 | 模块1完成，进度显示1/3 |
| 1:00 | 面试介绍 | 开始 SOC分析师 的模拟面试 |
| 1:10 | 面试 | 问题1："请描述调查可疑登录警报的过程" → 输入答案 |
| 1:25 | 提交 | 答案提交，进入问题2 |
| 1:40 | 完成 | 回答完所有10个问题 → 评分覆盖层 |
| 1:50 | 复盘 | 82%得分，评级A，展开每个问题的反馈 |
| 2:00 | 下一步 | 建议：复习薄弱领域，练习STAR方法 |
## 🚦 **性能**
| 指标 | 目标 |
| ---------------------- | ------------------------------------- |
| **加载时间** | < 1.5 秒 |
| **内存使用** | < 50 MB |
| **API调用** | Claude API（每次面试10次） |
| **动画** | 60 fps 流畅 |
| **响应式** | 桌面优先，带有移动端断点 |
## 🛡️ **数据流与架构**
```
User selects role
↓
Role brief loads (static data)
↓
Study modules (3 per role)
├── Flash cards (interactive)
└── Quizzes (5 Q's each)
↓
Interview intro
↓
Mock interview (10 questions)
├── Timer (3 min per Q)
├── Answer stored in State.answers
└── Skip option available
↓
AI Scoring (Claude API)
├── Each answer sent for evaluation
├── Score (0-10) + structured feedback
└── Results stored in State.results
↓
Debrief screen
├── Overall score (0-100%)
├── Grade (A+ through F)
├── Question-by-question feedback
└── Recommended next steps
```
## 📝 **许可证**
MIT 许可证 — 详见 LICENSE 文件。
## 🙏🏿 **致谢**
- **Anthropic Claude** — AI驱动的答案评估
- **Google Fonts** — Outfit 和 JetBrains Mono 字体
- **无外部库** — 纯原生实现
## 📧 **联系方式**
- **GitHub Issues**: [创建 issue](https://github.com/Willie-Conway/cyberprep/issues)
- **实时演示**: https://willie-conway.github.io/CyberPrep/
## 🚀 **未来增强**
- [ ] 跨会话保存用户进度（localStorage）
- [ ] 增加更多角色（DevSecOps、AppSec、恶意软件分析师）
- [ ] 将绩效报告导出为 PDF
- [ ] 用于口头回答练习的音频录制
- [ ] 带随机化功能的题库
- [ ] 角色练习分数的排行榜
- [ ] 自定义测验构建器
- [ ] 面试技巧和 STAR 方法培训模块
- [ ] 薪资谈判模块
- [ ] 模拟小组面试模式
*最后更新：2026年3月*标签：AI模拟, AI评分, meg, React, Syscalls, 信息安全, 反馈系统, 后端开发, 在线教育, 技术面试, 模拟面试, 知识检查, 网络安全, 职业培训, 职业技能, 职业路径, 角色特定学习, 闪卡, 隐私保护, 面试准备