CyberPrep is a professional-grade cybersecurity interview preparation platform that simulates real interview experiences across 8 cybersecurity career paths. Unlike generic flashcard apps, CyberPrep provides:
- Role-specific study modules with flash cards and knowledge checks
- AI-powered mock interviews with Claude evaluating your responses
- Detailed scoring and feedback with actionable improvement areas
- Complete preparation journey from role brief to interview debrief
| Role | Focus | Difficulty | Salary Range |
|---|---|---|---|
| SOC Analyst | Security monitoring & incident triage | ⭐⭐ | $55K – $95K |
| Penetration Tester | Ethical hacking & red team | ⭐⭐⭐⭐ | $85K – $145K |
| Security Engineer | Security architecture & infrastructure | ⭐⭐⭐ | $95K – $165K |
| Incident Responder/DFIR | Forensics & breach response | ⭐⭐⭐⭐ | $80K – $140K |
| Cloud Security Engineer | AWS/Azure/GCP security | ⭐⭐⭐ | $100K – $175K |
| GRC Analyst | Governance, risk & compliance | ⭐⭐ | $65K – $120K |
| Threat Intelligence Analyst | CTI & threat research | ⭐⭐⭐ | $75K – $130K |
| CISO / Security Manager | Leadership & program strategy | ⭐⭐⭐⭐⭐ | $150K – $300K+ |
| Phase | Focus | Key Features |
|---|---|---|
| 01 — Role Brief | Understand the role | Responsibilities, salary data, certifications, tools, day-in-the-life, key skills |
| 02 — Study Modules | Learn core concepts | 3 modules per role · 5 flash cards each · 5-question knowledge checks |
| 03 — Mock Interview | Practice & get scored | 10 questions · 3-min timer · Claude AI scoring · Detailed feedback |
Each role includes a comprehensive brief with:
| Element | Description |
|---|---|
| Role Overview | Detailed description of responsibilities and impact |
| Salary Range | Market compensation data |
| Job Growth | Industry projection through 2030 |
| Key Certifications | Required/beneficial certs (CISSP, OSCP, Security+, etc.) |
| Core Tools | Technologies you'll work with daily |
| Day in the Life | Realistic daily activities and tasks |
| Module Focus | Sample Topics |
|---|---|
| SIEM & Log Analysis | SIEM functions, log normalization, false positives, correlation rules, MTTD |
| Incident Response & Triage | NIST lifecycle, IoCs, containment vs eradication, playbooks |
| Threat Intelligence & Tools | MITRE ATT&CK, threat hunting, Diamond Model, OSINT |
- 5 interactive cards per module
- Click-to-flip design revealing answers
- Previous/Next navigation
- Covers core concepts with concise, exam-ready answers
- 5-question multiple-choice quizzes
- Immediate feedback with explanations
- Progress tracking across modules
- Completion status saved during session
| Element | Details |
|---|---|
| Question Count | 10 questions per interview |
| Question Types | Technical, Behavioral, Scenario-based |
| Time Limit | 3 minutes per question |
| Timer Warning | Yellow at 60s, Red flashing at 30s |
| Skip Option | Can skip (score = 0) |
Each answer is evaluated against a professional rubric:
| Score Range | Rating | Description |
|---|---|---|
| 9-10 | Exceptional | Complete, accurate, specific examples, demonstrates expertise |
| 7-8 | Strong | Covers main points well, minor gaps |
| 5-6 | Adequate | Basic concepts correct, lacks depth |
| 3-4 | Weak | Partial understanding, significant gaps |
| 1-2 | Poor | Mostly incorrect or vague |
| 0 | None | No answer or completely irrelevant |
After the interview, each response receives:
- ✓ What was good — Strengths identified in your answer
- ⚠ What was missing — Key concepts or specifics you omitted
- 💡 Ideal answer — What a perfect response would include
- Your answer — Full text of your response
| Metric | Description |
|---|---|
| Overall Score | Percentage score (0-100%) |
| Letter Grade | A+ through F based on performance |
| Answered Count | Number of questions with substantive answers |
| Strong Answers | Count of 7+ scores |
| Type Breakdown | Technical, Behavioral, Scenario scores |
- Radial score ring with color-coded performance
- Bar charts per question type
- Expandable question review sections
- Color-coded scores (green=strong, yellow=average, red=weak)
Dynamic recommendations based on your score:
| Score Range | Recommendations |
|---|---|
| < 60% | Deep study required · Focus on foundational questions |
| 60-79% | Review weak areas · Improve answer structure (STAR method) |
| 80%+ | Strong performance · Advanced preparation · Company research |
- Deep dark background (
#05080f) for focus during interviews - Glass-morphism cards with backdrop blur
- Gradient mesh background for depth
- Cyan/Blue accents (
#3b82f6,#06b6d4) for primary UI - Emerald (
#10b981) for correct answers and success - Amber (
#f59e0b) for warnings and scenario questions - Rose (
#f43f5e) for critical/difficult elements - Violet (
#8b5cf6) for threat intelligence
| Font | Usage |
|---|---|
| Outfit | Headers, body text, UI labels |
| JetBrains Mono | Terminal output, code, technical data, badges |
- Fade-up staggered loading for visual hierarchy
- Typewriter effect for question display
- Blinking cursor in typewriter
- Timer with color transitions (white → yellow → red flashing)
- Pulse animations for phase indicators
- Smooth card flip for flash cards
- Expandable result sections with chevron rotation
- Progress bars throughout the experience
| Tag Type | Color | Usage |
|---|---|---|
| Badge Blue | #3b82f6 |
Technical questions, general labels |
| Badge Emerald | #10b981 |
Behavioral questions, success states |
| Badge Amber | #f59e0b |
Scenario questions, warnings |
| Badge Rose | #f43f5e |
Critical, high difficulty |
| Badge Violet | #8b5cf6 |
Threat intelligence, advanced topics |
| Badge Cyan | #06b6d4 |
Cloud security, technical depth |
| Technology | Purpose |
|---|---|
| HTML5 | Structure and semantic markup |
| CSS3 | Custom styling, animations, glass-morphism |
| Vanilla JavaScript | State management, DOM manipulation |
| Claude API | AI-powered answer scoring |
| No Frameworks | Pure vanilla — no React, Vue, or Angular |
| Component | Purpose | Features |
|---|---|---|
| RoleGrid | Role selection | 8 cards with difficulty, color coding |
| BriefHero | Role overview | Salary, growth, tags, certifications |
| FlashcardDeck | Study cards | Click-to-flip, previous/next navigation |
| QuizModule | Knowledge checks | Multiple choice, immediate feedback |
| InterviewSidebar | Question navigation | Status indicators (active/answered/skipped) |
| Timer | Time management | 3-minute countdown with warnings |
| Typewriter | Question display | Character-by-character animation |
| ScoringOverlay | Processing UI | Loading spinner during AI evaluation |
| DebriefPanel | Results display | Expandable sections, score visualization |
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}]
}| State Variable | Purpose |
|---|---|
role |
Currently selected role |
moduleIndex |
Current module (0-2) |
moduleDone |
Module completion status |
cardIndex |
Current flash card |
quizIndex |
Current quiz question |
interviewIndex |
Current interview question |
answers |
Array of user answers |
results |
AI scoring results |
timerSeconds |
Remaining time (180 max) |
| Time | Phase | Action |
|---|---|---|
| 0:00 | Home | Landing page with role grid, 8 career tracks displayed |
| 0:05 | Role Select | Click SOC Analyst → Brief screen loads |
| 0:15 | Brief | Show salary ($55K-95K), certs (Security+, CySA+), tools (Splunk, Sentinel) |
| 0:25 | Study | Module 1: SIEM & Log Analysis — Flip through 5 flash cards |
| 0:40 | Knowledge Check | Answer quiz question → "True positive/false positive" → Correct! |
| 0:50 | Complete Module | Module 1 done, progress shows 1/3 |
| 1:00 | Interview Intro | Start mock interview for SOC Analyst |
| 1:10 | Interview | Question 1: "Walk me through investigating a suspicious login alert" → Type answer |
| 1:25 | Submit | Answer submitted, move to Question 2 |
| 1:40 | Complete | All 10 questions answered → Scoring overlay |
| 1:50 | Debrief | 82% score, grade A, expand feedback for each question |
| 2:00 | Next Steps | Recommendations: review weak areas, practice STAR method |
| Metric | Target |
|---|---|
| Load Time | < 1.5 seconds |
| Memory Usage | < 50 MB |
| API Calls | Claude API (10 per interview) |
| Animations | 60 fps smooth |
| Responsive | Desktop-first with mobile breakpoints |
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
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 — see LICENSE file for details.
- Anthropic Claude — AI-powered answer evaluation
- Google Fonts — Outfit and JetBrains Mono fonts
- No external libraries — Pure vanilla implementation
- GitHub Issues: Create an issue
- Live Demo: https://willie-conway.github.io/CyberPrep/
- Save user progress across sessions (localStorage)
- Add more roles (DevSecOps, AppSec, Malware Analyst)
- Export performance report as PDF
- Audio recording for verbal response practice
- Question bank with randomization
- Leaderboard for role practice scores
- Custom quiz builder
- Interview tips and STAR method training module
- Salary negotiation module
- Mock panel interview mode
Last updated: March 2026