🚀 SUDHIR DEVOPS | THE VOID ENGINE

⚡ Next-Generation DevOps Portfolio & Infrastructure Showcase

Architecting high-availability infrastructure with security-first automation protocols and next-gen scaling strategies

🌐 Live Demo • 📖 Documentation • 🛠️ Installation • 🎨 Customization

---

📸 Preview

╔══════════════════════════════════════════════════════════════════════════════╗
║                                                                              ║
║     ██████╗ ██╗   ██╗██╗██╗     ██████╗ ██╗███╗   ██╗ ██████╗                ║
║     ██╔══██╗██║   ██║██║██║     ██╔══██╗██║████╗  ██║██╔════╝                ║
║     ██████╔╝██║   ██║██║██║     ██║  ██║██║██╔██╗ ██║██║  ███╗               ║
║     ██╔══██╗██║   ██║██║██║     ██║  ██║██║██║╚██╗██║██║   ██║               ║
║     ██████╔╝╚██████╔╝██║███████╗██████╔╝██║██║ ╚████║╚██████╔╝               ║
║     ╚═════╝  ╚═════╝ ╚═╝╚══════╝╚═════╝ ╚═╝╚═╝  ╚═══╝ ╚═════╝                ║
║                                                                              ║
║                        ████████╗██╗  ██╗███████╗                             ║
║                        ╚══██╔══╝██║  ██║██╔════╝                             ║
║                           ██║   ███████║█████╗                               ║
║                           ██║   ██╔══██║██╔══╝                               ║
║                           ██║   ██║  ██║███████╗                             ║
║                           ╚═╝   ╚═╝  ╚═╝╚══════╝                             ║
║                                                                              ║
║                    ██╗   ██╗ ██████╗ ██╗██████╗                              ║
║                    ██║   ██║██╔═══██╗██║██╔══██╗                             ║
║                    ██║   ██║██║   ██║██║██║  ██║                             ║
║                    ╚██╗ ██╔╝██║   ██║██║██║  ██║                             ║
║                     ╚████╔╝ ╚██████╔╝██║██████╔╝                             ║
║                      ╚═══╝   ╚═════╝ ╚═╝╚═════╝                              ║
║                                                                              ║
╚══════════════════════════════════════════════════════════════════════════════╝

✨ Features

🎨 Visual Design 🌈 Animated gradient orbs background 🔮 Glassmorphism UI components 💫 3D tilt cards with glow effects 🎭 Holographic reflections 🌌 Dynamic grid overlay ✨ Particle noise texture	⚡ Performance 🚀 60fps smooth animations 🎯 RequestAnimationFrame cursor 📦 Debounced search (200ms) 🔄 Lazy-loaded animations 🎮 GPU-accelerated transforms 📱 Responsive design (mobile-first)
🔍 Functionality 🏷️ Category filter tabs 🔎 Real-time search 📊 Project counter 🎚️ Combined filters 🔗 Smooth scroll navigation 📈 Animated statistics	🛡️ Technical 📄 JSON-based data management 🎨 CSS custom properties 🖱️ Custom liquid cursor 👁️ Intersection Observer API 🔧 Modular JavaScript ♿ Accessibility ready

🛠️ Installation

Quick Start

# Clone the repository
git clone https://github.com/sudhirdevops1/void-engine.git

# Navigate to directory
cd void-engine

# Open in browser (Option 1: Direct)
open index.html

# Open in browser (Option 2: Local Server - Recommended)
npx serve .
# or
python -m http.server 8080
# or
php -S localhost:8080

📁 Project Structure

void-engine/
│
├── 📄 index.html          # Main application file
├── 📊 projects.json       # Project data configuration
├── 📖 README.md           # Documentation
│
└── 📂 assets/             # (Optional) Additional assets
    ├── 🖼️ images/
    └── 🎨 icons/

📖 Documentation

Data Schema

Each project in projects.json follows this structure:

{
    "title": "Project Name",
    "desc": "Brief description of the project",
    "usage": "command --to-run",
    "benefits": ["Benefit 1", "Benefit 2"],
    "tags": ["Tech1", "Tech2"],
    "category": "IaC | Kubernetes | Automation | Security",
    "color": "R, G, B",
    "status": "online | offline | maintenance"
}

🎨 Available Categories

Category	Description	Icon
IaC	Infrastructure as Code	🏗️
Kubernetes	Container Orchestration	☸️
Automation	CI/CD & Automation	⚙️
Security	Security & Compliance	🔒

🌈 Color Reference

// Popular accent colors (RGB format)
"00, 240, 254"    // Cyan
"168, 85, 247"    // Purple
"236, 72, 153"    // Pink
"34, 197, 94"     // Green
"249, 115, 22"    // Orange
"239, 68, 68"     // Red
"59, 130, 246"    // Blue
"255, 215, 0"     // Gold

🎨 Customization

Changing Theme Colors

Edit the CSS variables in index.html:

:root {
    --bg: #000000;              /* Background color */
    --glass: rgba(12, 12, 12, 0.7);  /* Glass effect */
    --border: rgba(255, 255, 255, 0.08);  /* Border color */
    --text-p: #ffffff;          /* Primary text */
    --text-s: #888;             /* Secondary text */
    --accent-1: #00f5d4;        /* Accent cyan */
    --accent-2: #9b5de5;        /* Accent purple */
    --accent-3: #f15bb5;        /* Accent pink */
}

Adding New Projects

Add to projects.json:

{
    "title": "Your Project",
    "desc": "Your amazing project description.",
    "usage": "your-cli --command",
    "benefits": ["Feature 1", "Feature 2"],
    "tags": ["Tag1", "Tag2"],
    "category": "Automation",
    "color": "0, 255, 127",
    "status": "online"
}

Adding New Filter Categories

1. Add button in HTML:

<button class="filter-tab" data-filter="NewCategory">New Category</button>

2. Use the category in your project data:

{
    "category": "NewCategory",
    ...
}

📊 Statistics Section

The stats section displays:

Metric	Description	Target Value
⏱️ Uptime	System availability percentage	99.9%
📁 Projects	Total project count	25
🏆 Certifications	Professional certifications	12
🕐 Support	Availability hours	24/7

🖥️ Browser Support

Browser	Support
	✅ Full Support
	✅ Full Support
	✅ Full Support
	✅ Full Support
	✅ Full Support

📱 Responsive Breakpoints

/* Large Desktop */
@media (max-width: 1400px) { ... }

/* Desktop */
@media (max-width: 1200px) { ... }

/* Tablet Landscape */
@media (max-width: 900px) { ... }

/* Tablet Portrait */
@media (max-width: 768px) { ... }

/* Mobile */
@media (max-width: 480px) { ... }

⚡ Performance Metrics

┌─────────────────────────────────────────────────────┐
│                 LIGHTHOUSE SCORES                   │
├─────────────────────────────────────────────────────┤
│  Performance      ████████████████████░░  95/100   │
│  Accessibility    ███████████████████░░░  90/100   │
│  Best Practices   ████████████████████░░  95/100   │
│  SEO              ████████████████████░░  95/100   │
└─────────────────────────────────────────────────────┘

🔧 Tech Stack

🤝 Contributing

Contributions are welcome! Here's how:

# Fork the repository
# Create your feature branch
git checkout -b feature/AmazingFeature

# Commit your changes
git commit -m 'Add some AmazingFeature'

# Push to the branch
git push origin feature/AmazingFeature

# Open a Pull Request

Contribution Guidelines

• 📝 Write clear commit messages
• 🧪 Test on multiple browsers
• 📱 Ensure mobile responsiveness
• 🎨 Follow existing code style
• 📖 Update documentation

📜 License

MIT License

Copyright (c) 2024 SUDHIRDEVOPS1

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

👤 Author

SUDHIR DEVOPS

"Building the infrastructure of tomorrow, today."

---

⭐ Star this repo if you found it helpful!

⬆ Back to Top

---

_{Built with 💜 by SUDHIRDEVOPS1 • Optimized for High-Refresh Displays}