35 lines
1.3 KiB
Markdown
35 lines
1.3 KiB
Markdown
|
# 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`
|