# Apophis Security Lab

## Project
Red/Blue team home lab with React SOC dashboard. Educational cybersecurity curriculum.

## Dashboard Stack
- **Tech**: React 19, Vite 7, Tailwind CSS v4, Recharts, date-fns
- **Dev**: `cd dashboard && npm run dev` → localhost:5173
- **Paths**: `dashboard/src/components/*.jsx`, `dashboard/src/data/mockData.js`

## Brand (Apophis Networking)
- **Files**: `brandguidelines.md`, `logo.png` (crimson serpent shield)
- **Style**: Tech-Noir, dark backgrounds, sharp corners
- **Rule**: ⚠️ **NEVER use `border-radius`** - 0px only (sharp edges)
- **Colors**: See `brandguidelines.md` for hex values
- **Tailwind**: `ap-red`, `ap-black`, `ap-dark`, `ap-panel`, `ap-silver`, `ap-blue`, `ap-green`, `ap-yellow`, `ap-orange`

## Components

| Component | Purpose |
|-----------|---------|
| `Header.jsx` | Logo, clock, threat level |
| `ThreatFeed.jsx` | Live alert stream |
| `NetworkTraffic.jsx` | Area chart (in/out/blocked) |
| `SystemHealth.jsx` | System status cards |
| `MitreHeatmap.jsx` | ATT&CK coverage grid |
| `TopThreats.jsx` | Top attacker IPs table |
| `IncidentTracker.jsx` | IR pipeline tracker |
| `VulnSummary.jsx` | Vulnerability donut chart |

## Conventions
- **Data**: All mock/simulated (no backend yet)
- **CSS**: Use `.panel`, `.panel-header` classes
- **Severity**: `critical`, `high`, `medium`, `low`, `info`