https://github.com/solomonneas/soc-showcase
SOC Stack portfolio showcase with 5 design variants
https://github.com/solomonneas/soc-showcase
blue-team cybersecurity dashboard react security-operations security-tools soc visualization
Last synced: about 1 month ago
JSON representation
SOC Stack portfolio showcase with 5 design variants
- Host: GitHub
- URL: https://github.com/solomonneas/soc-showcase
- Owner: solomonneas
- License: mit
- Created: 2026-02-06T22:21:12.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2026-04-20T22:55:39.000Z (about 1 month ago)
- Last Synced: 2026-04-21T00:38:21.904Z (about 1 month ago)
- Topics: blue-team, cybersecurity, dashboard, react, security-operations, security-tools, soc, visualization
- Language: TypeScript
- Homepage: https://soc-showcase.vercel.app
- Size: 203 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# 🛡️ SOC Showcase
**Interactive portfolio site for the S3 Stack security operations toolkit.**
SOC Showcase is a React-based portfolio that presents the full S3 Stack through animated data flow pipelines, case study walkthroughs, interactive architecture diagrams, and a tools catalog. Five visual variants let you switch the entire look with one click.
---
## Features
- **Tools Catalog** - Browse all S3 Stack tools with tech stack, features, and status indicators
- **Case Studies** - Step-by-step incident response walkthroughs with timelines and metrics
- **Architecture Diagram** - Interactive layered view of the AI, MCP, and security tool layers
- **Data Flow Pipeline** - Animated visualization showing how data moves through the SOC stack
- **5 Visual Variants** - Each variant has its own layout, color scheme, and typography
- **Animated Transitions** - Framer Motion page transitions and scroll-triggered animations
- **In-App Documentation** - Architecture and configuration docs rendered inline
- **Responsive Design** - Desktop and mobile layouts
---
## Quick Start
```bash
git clone https://github.com/solomonneas/soc-showcase.git
cd soc-showcase
npm install
npm run dev
```
Open **http://localhost:5175**
---
## Tech Stack
| Layer | Technology | Purpose |
|-------|-----------|---------|
| **Framework** | React 19 | Component UI |
| **Language** | TypeScript 5 | Type safety |
| **Styling** | Tailwind CSS 3 | Utility-first CSS |
| **Animation** | Framer Motion 11 | Page transitions and scroll effects |
| **Routing** | React Router 7 | Client-side navigation |
| **Icons** | Lucide React | Consistent icon set |
| **Bundler** | Vite 6 | Dev server and build |
---
## Sections
Each variant renders the same data through five page sections:
| Section | Content |
|---------|---------|
| **Hero** | Intro with animated tagline and call-to-action |
| **About** | Overview of the S3 Stack and its purpose |
| **Tools** | Card grid of all SOC tools with category filters |
| **Cases** | Detailed case studies with timelines and outcome metrics |
| **Pipeline** | Step-by-step data flow through the detection pipeline |
| **Architecture** | Layered diagram of AI, MCP servers, and security tools |
---
## 5 Variants
| Variant | Aesthetic |
|---------|-----------|
| **v1** | Dark professional with blue accents |
| **v2** | Clean light theme with card layouts |
| **v3** | Terminal-inspired with green on black |
| **v4** | Military command with OD green and amber |
| **v5** | Cyberpunk with neon accents and glass effects |
All variants share the same data layer (`src/data/`) and type definitions.
---
## Project Structure
```text
soc-showcase/
├── src/
│ ├── data/
│ │ ├── tools.ts # SOC tool catalog
│ │ ├── cases.ts # Case study data
│ │ ├── pipeline.ts # Data flow steps
│ │ ├── architecture.ts # Architecture nodes and edges
│ │ └── themes.ts # Variant theme definitions
│ ├── types/
│ │ └── index.ts # TypeScript interfaces
│ ├── pages/
│ │ ├── DocsPage.tsx # In-app documentation
│ │ └── NotFound.tsx # 404 page
│ └── variants/
│ ├── v1/ # Each variant has:
│ │ ├── Layout.tsx # Main layout wrapper
│ │ ├── Hero.tsx # Hero section
│ │ ├── About.tsx # About section
│ │ ├── Tools.tsx # Tools catalog
│ │ ├── Cases.tsx # Case studies
│ │ ├── Pipeline.tsx # Data flow visualization
│ │ ├── Architecture.tsx # Architecture diagram
│ │ └── styles.css # Variant-specific styles
│ ├── v2/
│ ├── v3/
│ ├── v4/
│ └── v5/
├── docs/
│ ├── ARCHITECTURE.md
│ └── CONFIGURATION.md
├── index.html
├── vite.config.ts
├── tailwind.config.ts
└── package.json
```
---
## Documentation
| Document | Purpose |
|----------|---------|
| [ARCHITECTURE.md](docs/ARCHITECTURE.md) | System design, component layout, data flow |
| [CONFIGURATION.md](docs/CONFIGURATION.md) | Customization guide, theme variants, tool integration |
---
## License
MIT. See [LICENSE](LICENSE) for details.