Smart Engineering & Design Solutions · 2023 – 2024
Security Lab — Cybersecurity Simulations
11 interactive static sites turning cybersecurity concepts into click-through simulations.
- Role
- Front-end engineering, built from content specs
- Timeline
- Jul 2023 – Jun 2024
- Company
Smart Engineering & Design Solutions
Security Lab is a fictional name. These interface illustrations represent the concepts in the original work; they are not screenshots of the original sites.
- sites built
- 40+sites built
- public showcases
- 11public showcases
- deployed on GitHub Pages
- 100%deployed on GitHub Pages
Overview
The problem
Traditional security training often relies on static text and screenshots. Each site I built from a content spec turns its underlying concept into something a visitor can interact with.
That meant picking a different interactive mechanic per topic: a real emulator for assembly, a draggable config builder for network security, a quiz-weighted simulator for risk management, and click-through narratives for threat modeling and red-teaming.
What I built
Highlights
x86 Assembly Emulator
An interactive instruction emulator: registers, flags and the stack update live as instructions run, next to an illustrated puzzle asking what a given instruction does.
Risk Management simulator
A quiz-style sim that weighs asset value, risk and ALE, then asks the user to decide whether to implement or decline a safeguard.
Threat Emulation & Red Team game
A choose-your-technique game emulating a threat actor across rounds of questions, plus comic-style slides walking through a red-team engagement's planning, execution and reporting stages.
STRIDE & PASTA threat modeling
Two visual walkthroughs applying the STRIDE and PASTA threat-modeling frameworks to a shared sample scenario.
SOC analyst & security engineer sims
A SIEM-style alert dashboard for spotting a malicious IP and an inbox simulator that turns unread emails into a security engineer's task list.
Secure Network Architecture
An interactive firewall and zone config builder: reproduce the visualized packet flow across zones to retrieve the flag.
Engineering
Decisions that shaped it
- Built with plain HTML, CSS and JavaScript and no backend or build step, so every site loads instantly and deploys as a static GitHub Pages site.
- Gave each room its own interactive mechanic instead of a slide deck — a working emulator, a draggable config builder, a weighted quiz — to make the concept something you do, not just read.
Screens
