{"id":49250447,"url":"https://github.com/solomonneas/soc-showcase","last_synced_at":"2026-04-25T00:02:44.829Z","repository":{"id":337076292,"uuid":"1151780655","full_name":"solomonneas/soc-showcase","owner":"solomonneas","description":"SOC Stack portfolio showcase with 5 design variants","archived":false,"fork":false,"pushed_at":"2026-04-20T22:55:39.000Z","size":208,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-04-21T00:38:21.904Z","etag":null,"topics":["blue-team","cybersecurity","dashboard","react","security-operations","security-tools","soc","visualization"],"latest_commit_sha":null,"homepage":"https://soc-showcase.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/solomonneas.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"github":"solomonneas","ko_fi":"solomonneas","buy_me_a_coffee":"solomonneas"}},"created_at":"2026-02-06T22:21:12.000Z","updated_at":"2026-04-20T22:55:44.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/solomonneas/soc-showcase","commit_stats":null,"previous_names":["solomonneas/soc-showcase"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/solomonneas/soc-showcase","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/solomonneas%2Fsoc-showcase","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/solomonneas%2Fsoc-showcase/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/solomonneas%2Fsoc-showcase/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/solomonneas%2Fsoc-showcase/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/solomonneas","download_url":"https://codeload.github.com/solomonneas/soc-showcase/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/solomonneas%2Fsoc-showcase/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32245154,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-24T13:21:15.438Z","status":"ssl_error","status_checked_at":"2026-04-24T13:21:15.005Z","response_time":64,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blue-team","cybersecurity","dashboard","react","security-operations","security-tools","soc","visualization"],"created_at":"2026-04-25T00:02:43.961Z","updated_at":"2026-04-25T00:02:44.817Z","avatar_url":"https://github.com/solomonneas.png","language":"TypeScript","funding_links":["https://github.com/sponsors/solomonneas","https://ko-fi.com/solomonneas","https://buymeacoffee.com/solomonneas"],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/React-19-61DAFB?style=flat-square\u0026logo=react\u0026logoColor=white\" alt=\"React\" /\u003e\n  \u003cimg src=\"https://img.shields.io/badge/TypeScript-5-3178C6?style=flat-square\u0026logo=typescript\u0026logoColor=white\" alt=\"TypeScript\" /\u003e\n  \u003cimg src=\"https://img.shields.io/badge/Tailwind_CSS-3-06B6D4?style=flat-square\u0026logo=tailwindcss\u0026logoColor=white\" alt=\"Tailwind CSS\" /\u003e\n  \u003cimg src=\"https://img.shields.io/badge/Framer_Motion-11-FF0050?style=flat-square\u0026logo=framer\u0026logoColor=white\" alt=\"Framer Motion\" /\u003e\n  \u003cimg src=\"https://img.shields.io/badge/Vite-6-646CFF?style=flat-square\u0026logo=vite\u0026logoColor=white\" alt=\"Vite\" /\u003e\n  \u003cimg src=\"https://img.shields.io/badge/License-MIT-green?style=flat-square\" alt=\"MIT License\" /\u003e\n\n  \u003ca href=\"https://solomonneas.dev/projects/soc-showcase\"\u003e\u003cimg src=\"https://img.shields.io/badge/Portfolio-solomonneas.dev-22c55e?style=flat-square\" alt=\"Portfolio\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n# 🛡️ SOC Showcase\n\n**Interactive portfolio site for the S3 Stack security operations toolkit.**\n\nSOC 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.\n\n![SOC Showcase](docs/screenshots/dashboard.png)\n\n---\n\n## Features\n\n- **Tools Catalog** - Browse all S3 Stack tools with tech stack, features, and status indicators\n- **Case Studies** - Step-by-step incident response walkthroughs with timelines and metrics\n- **Architecture Diagram** - Interactive layered view of the AI, MCP, and security tool layers\n- **Data Flow Pipeline** - Animated visualization showing how data moves through the SOC stack\n- **5 Visual Variants** - Each variant has its own layout, color scheme, and typography\n- **Animated Transitions** - Framer Motion page transitions and scroll-triggered animations\n- **In-App Documentation** - Architecture and configuration docs rendered inline\n- **Responsive Design** - Desktop and mobile layouts\n\n---\n\n## Quick Start\n\n```bash\ngit clone https://github.com/solomonneas/soc-showcase.git\ncd soc-showcase\nnpm install\nnpm run dev\n```\n\nOpen **http://localhost:5175**\n\n---\n\n## Tech Stack\n\n| Layer | Technology | Purpose |\n|-------|-----------|---------|\n| **Framework** | React 19 | Component UI |\n| **Language** | TypeScript 5 | Type safety |\n| **Styling** | Tailwind CSS 3 | Utility-first CSS |\n| **Animation** | Framer Motion 11 | Page transitions and scroll effects |\n| **Routing** | React Router 7 | Client-side navigation |\n| **Icons** | Lucide React | Consistent icon set |\n| **Bundler** | Vite 6 | Dev server and build |\n\n---\n\n## Sections\n\nEach variant renders the same data through five page sections:\n\n| Section | Content |\n|---------|---------|\n| **Hero** | Intro with animated tagline and call-to-action |\n| **About** | Overview of the S3 Stack and its purpose |\n| **Tools** | Card grid of all SOC tools with category filters |\n| **Cases** | Detailed case studies with timelines and outcome metrics |\n| **Pipeline** | Step-by-step data flow through the detection pipeline |\n| **Architecture** | Layered diagram of AI, MCP servers, and security tools |\n\n---\n\n## 5 Variants\n\n| Variant | Aesthetic |\n|---------|-----------|\n| **v1** | Dark professional with blue accents |\n| **v2** | Clean light theme with card layouts |\n| **v3** | Terminal-inspired with green on black |\n| **v4** | Military command with OD green and amber |\n| **v5** | Cyberpunk with neon accents and glass effects |\n\nAll variants share the same data layer (`src/data/`) and type definitions.\n\n---\n\n## Project Structure\n\n```text\nsoc-showcase/\n├── src/\n│   ├── data/\n│   │   ├── tools.ts           # SOC tool catalog\n│   │   ├── cases.ts           # Case study data\n│   │   ├── pipeline.ts        # Data flow steps\n│   │   ├── architecture.ts    # Architecture nodes and edges\n│   │   └── themes.ts          # Variant theme definitions\n│   ├── types/\n│   │   └── index.ts           # TypeScript interfaces\n│   ├── pages/\n│   │   ├── DocsPage.tsx       # In-app documentation\n│   │   └── NotFound.tsx       # 404 page\n│   └── variants/\n│       ├── v1/                # Each variant has:\n│       │   ├── Layout.tsx     #   Main layout wrapper\n│       │   ├── Hero.tsx       #   Hero section\n│       │   ├── About.tsx      #   About section\n│       │   ├── Tools.tsx      #   Tools catalog\n│       │   ├── Cases.tsx      #   Case studies\n│       │   ├── Pipeline.tsx   #   Data flow visualization\n│       │   ├── Architecture.tsx # Architecture diagram\n│       │   └── styles.css     #   Variant-specific styles\n│       ├── v2/\n│       ├── v3/\n│       ├── v4/\n│       └── v5/\n├── docs/\n│   ├── ARCHITECTURE.md\n│   └── CONFIGURATION.md\n├── index.html\n├── vite.config.ts\n├── tailwind.config.ts\n└── package.json\n```\n\n---\n\n## Documentation\n\n| Document | Purpose |\n|----------|---------|\n| [ARCHITECTURE.md](docs/ARCHITECTURE.md) | System design, component layout, data flow |\n| [CONFIGURATION.md](docs/CONFIGURATION.md) | Customization guide, theme variants, tool integration |\n\n---\n\n## License\n\nMIT. See [LICENSE](LICENSE) for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsolomonneas%2Fsoc-showcase","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsolomonneas%2Fsoc-showcase","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsolomonneas%2Fsoc-showcase/lists"}