The official website for DDoSim - an interactive platform for simulating and visualizing Distributed Denial-of-Service (DDoS) attacks in real time across the globe.
DDoSim Site is a modern, performant Next.js application that serves as the landing page and blog platform for the DDoSim project. It provides an engaging user experience with interactive visualizations, educational content, and seamless integration with the DDoSim simulator.
- Interactive Landing Page - Beautiful hero section with 3D globe visualization
- Feature Showcase - Highlight key capabilities of the DDoSim platform
- Blog Platform - Comprehensive cybersecurity articles and DDoS attack guides
- SEO Optimized - Built-in sitemap, robots.txt, and comprehensive metadata
- Analytics Integration - Google Analytics 4 (GA4) support
- Dark Mode - Full dark/light theme support
- Responsive Design - Mobile-first approach with excellent cross-device compatibility
- Performance Optimized - Next.js 16 with React 19 and React Compiler
- Framework: Next.js 16.1.1 (App Router)
- React: 19.2.3
- TypeScript: 5.x
- Styling: Tailwind CSS 4
- UI Components: shadcn/ui with custom components
- Icons: Phosphor Icons
- 3D Visualization: Three.js, React Three Fiber, Three Globe
- Animations: Motion (Framer Motion), Rough Notation
- Content: React Markdown with Mermaid diagram support
- Analytics: React GA4
- Package Manager: pnpm
- Node.js 18+
- pnpm (recommended) or npm/yarn
- Clone the repository:
git clone https://github.com/DDoSimLab/Site.git
cd Site- Install dependencies:
pnpm install- Run the development server:
pnpm dev- Open http://localhost:3000 in your browser.
pnpm build
pnpm startsite/
├── app/ # Next.js app directory
│ ├── blog/ # Blog pages and routes
│ ├── layout.tsx # Root layout with metadata
│ ├── page.tsx # Home page
│ ├── sitemap.ts # Dynamic sitemap generation
│ └── robots.ts # Robots.txt configuration
├── components/ # React components
│ ├── animate-ui/ # Animated UI components
│ ├── blog/ # Blog-specific components
│ ├── layout/ # Header, Footer
│ ├── sections/ # Landing page sections
│ └── ui/ # shadcn/ui components
├── data/ # Static data (blogs, globe config)
├── hooks/ # Custom React hooks
├── lib/ # Utilities and constants
│ ├── constants.ts # Application constants
│ ├── ga.ts # Google Analytics utilities
│ └── utils.ts # Helper functions
└── public/ # Static assets
- HeroSection - Main landing section with CTA
- FeaturesSection - Platform feature highlights
- AboutSection - Mission and vision
- BlogsSection - Recent blog posts showcase
- Globe - Interactive 3D globe visualization
- Highlighter - Text highlighting animations
- BlogContent - Markdown blog post renderer with Mermaid support
The application uses environment variables for configuration. Create a .env.local file if needed:
# Google Analytics (optional)
NEXT_PUBLIC_GA_ID=your-ga-idMost configuration is centralized in lib/constants.ts, including:
- Site URLs and metadata
- Navigation routes
- Text content
- Globe visualization settings
- Blog configuration
The blog system supports:
- Markdown content with frontmatter
- Mermaid diagram rendering
- Search functionality
- Tag-based categorization
- Reading time estimation
- SEO-optimized blog posts
Blog posts are defined in data/blogs.ts and rendered dynamically.
pnpm lintThis project uses Conventional Commits via Commitizen:
pnpm czThe site is optimized for deployment on platforms like Vercel, Netlify, or any Node.js hosting service.
- Live Site: ddosim.live
- Simulator: sim.ddosim.live
- GitHub Repository: DDoSimLab/Site
This project is licensed under the MIT License - see the LICENSE file for details.
Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.
- Built with Next.js
- UI components from shadcn/ui
- Icons from Phosphor Icons
- 3D visualizations powered by Three.js
Made with ❤️ by Jaimin