Personal project · SOC platform prototype · 2026

CyberGuard

A security operations platform built as a working prototype — the demonstrable, public-safe twin of the government SOC work I do by day and can never show.

Working prototype · Mock data

The 30-second version

The problem

My strongest interface work — SOC dashboards and an agentic AI platform for government clients — is exactly the work a portfolio can never show.

What I did

So I built its public twin: a security operations platform under a fictional brand, with a live 3D threat globe, an incident queue, and a six-agent AI pipeline made visible — designed and coded solo.

Where it landed

A running product on mock data: three dense, real-time surfaces that demonstrate the craft the classified work trained, with nothing confidential in it.

Try the real thing

This is the actual prototype, running inside the page — not a video. Spin the globe, open an incident, ask the assistant something. Best explored on a desktop screen.

The embedded build runs entirely on mock data: fictional alerts and incidents, canned demo headlines, and a local (offline) AI assistant. No API keys, no live feeds, nothing real.Open full-screen in a new tab

Why this exists

At Ensign InfoSecurity I design SOC dashboards and lead the interface of an agentic AI platform shown at GovWare — but that work serves government clients and cannot be published. A portfolio that says “trust me, the real work is classified” is asking for faith. CyberGuard is the answer: the same category of product — analyst tooling, security telemetry, AI agents — rebuilt from zero on my own time, under a fictional brand, on mock data, so the craft is inspectable even though the client work isn't.

Everything here is illustrative: the alerts, incidents and hosts are fabricated, the brand (“Rayonics Security”) is invented, and the only live data is public CISA advisory feeds.

Overview

Three surfaces with three different tempos. The Threat Map is ambient — a room screen you glance at, built around a three.js globe with severity as its only colour language. Incidents is the working queue — dense rows, hard filters, an evidence drawer with MITRE technique mapping. And the Agents page makes an invisible thing visible: six specialised AI agents drawn as rooms, with handoffs, an event log, and a generated compliance report at the end of the pipeline.

My role

Solo: product concept, visual direction, interaction design, and the React/TypeScript implementation — including the three.js globe, the pixel-art agent sprites, and the data model behind the mock SOC. Built in evenings over two weeks, with Claude Code as a pair.

The three surfaces

Captured from the running prototype. Click any screen to view it full size.

Global threat map — 3D globe with live attack arcs, top sources and targets, and a live event feed — Threat Map — the ambient view. A 3D globe carries the attack arcs; severity, rate and threat level sit in one strip up top; the live feed scrolls on the right.

Agentic AI network — six specialist agents drawn as pixel-art rooms with an orchestrator — AI Agents — six specialists (threat hunter, forensics, intel, responder, compliance, report writer) drawn as rooms, so a multi-agent pipeline becomes something you can watch work.

Incident response queue with severity filters, status chips and a detail drawer — Incidents — the working view. Severity filters, MTTR at a glance, and a detail drawer with MITRE mapping, affected hosts and escalation actions.

The design decisions behind it

A SOC interface is judged in the worst five minutes of an analyst's week. Every decision below is about that five minutes.

Density with a strict hierarchy

Analysts scan, they don't read. Threat level, rate and blocked percentage live in one persistent strip; the globe is ambient context; the feed is the only thing that moves. Nothing below the strip ever asks for attention it hasn't earned.

Severity is a language, not a decoration

One colour scale — critical through low — is used identically by the globe arcs, the feed dots, the filter chips and the incident rows. If a colour appears, it means severity; nothing else on the platform is allowed to speak in those hues.

An AI pipeline you can watch

Multi-agent systems fail in trust before they fail in output. Drawing the six agents as rooms — with visible handoffs, an event log, and a final report — turns an opaque pipeline into something an analyst can audit at a glance. This is the lesson from my day job, restated in public.

Playfulness only where stakes allow

The pixel-art agents are deliberately warm — AI colleagues, not black boxes. The incident queue, where real decisions happen, allows itself none of that. Knowing where the play is allowed to live is the design judgment this page exists to show.

AI in the build

The prototype is also a record of how I work with AI now: Claude Code as a pair for implementation, an internal prompting guide I wrote so teammates could build pages the same way, and an in-product assistant with a provider fallback chain. The agent pipeline it visualises is the same pattern I lead at work — LangGraph/CrewAI orchestration turned into interfaces analysts trust.

Status & honesty

CyberGuard is a prototype and says so: mock data, fictional brand, no real telemetry. What it demonstrates is real — the information hierarchy, the state design, the three.js work, and the fact that one person designed and shipped all of it.

Next case study: Panik! by SGAG