solomonneas/soc-showcase

# 🛡️ SOC Showcase **S3 Stack 安全运维工具包的交互式作品集网站。** SOC Showcase 是一个基于 React 的作品集，通过动画数据流管道、案例研究演练、交互式架构图和工具目录来展示完整的 S3 Stack。五种视觉变体让你只需单击即可切换整个外观。  ## 功能特性 - **工具目录** - 浏览所有 S3 Stack 工具，包含技术栈、功能和状态指示器 - **案例研究** - 带有时间线和指标的逐步事件响应演练 - **架构图** - AI、MCP 和安全工具层的交互式分层视图 - **数据流管道** - 展示数据如何在 SOC Stack 中流动的动画可视化 - **5 种视觉变体** - 每种变体都有其独特的布局、配色方案和排版 - **动画过渡** - 基于 Framer Motion 的页面过渡和滚动触发动画 - **应用内文档** - 内联渲染的架构和配置文档 - **响应式设计** - 桌面端和移动端布局 ## 快速开始 ``` git clone https://github.com/solomonneas/soc-showcase.git cd soc-showcase npm install npm run dev ``` 打开 **http://localhost:5175** ## 技术栈 | 层级 | 技术 | 用途 | |-------|-----------|---------| | **Framework** | React 19 | 组件 UI | | **Language** | TypeScript 5 | 类型安全 | | **Styling** | Tailwind CSS 3 | 实用优先 CSS | | **Animation** | Framer Motion 11 | 页面过渡和滚动效果 | | **Routing** | React Router 7 | 客户端导航 | | **Icons** | Lucide React | 统一的图标集 | | **Bundler** | Vite 6 | 开发服务器和构建 | ## 板块 每种变体通过五个页面板块渲染相同的数据： | 板块 | 内容 | |---------|---------| | **Hero** | 带有动画标语和行动号召的介绍 | | **About** | S3 Stack 及其用途概述 | | **Tools** | 带有类别过滤器的所有 SOC 工具卡片网格 | | **Cases** | 带有时间线和结果指标的详细案例研究 | | **Pipeline** | 贯穿检测管道的逐步数据流 | | **Architecture** | AI、MCP 服务器和安全工具的分层图 | ## 5 种变体 | 变体 | 风格 | |---------|-----------| | **v1** | 深色专业风，带有蓝色点缀 | | **v2** | 简洁明亮主题，带有卡片布局 | | **v3** | 终端灵感风，黑底绿字 | | **v4** | 军事指挥风，带有橄榄绿和琥珀色 | | **v5** | 赛博朋克风，带有霓虹点缀和毛玻璃效果 | 所有变体共享相同的数据层（`src/data/`）和类型定义。 ## 项目结构 ``` 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 ``` ## 文档 | 文档 | 用途 | |----------|---------| | [ARCHITECTURE.md](docs/ARCHITECTURE.md) | 系统设计、组件布局、数据流 | | [CONFIGURATION.md](docs/CONFIGURATION.md) | 自定义指南、主题变体、工具集成 | ## 许可证 MIT。详见 [LICENSE](LICENSE)。

标签：AD攻击面, Framer Motion, MIT开源, React, Syscalls, Tailwind CSS, TypeScript, UI组件库, Vite, 主题切换, 作品展示, 前端工程化, 动效设计, 单页应用, 安全工具集, 安全插件, 安全案例, 安全运营中心, 数据流向图, 架构图, 网络安全, 网络映射, 自动化攻击, 隐私保护