DevOps Dark Orange Portfolio & AI Design System

Project Overview

This portfolio website (dishant.me) is a state-of-the-art static web application built with Astro 7.2.2 and TypeScript, showcasing Dishant Pandya’s 8+ years of DevOps, Kubernetes, and Cloud Platform Engineering experience.

The platform was architected using Google Antigravity AI-driven pair programming workflows, maintaining a strict single-source-of-truth design system, automated verification loops, component scope isolation, and zero-downtime Cloudflare static deployments.

---

Key Highlights & Innovations

1. AI-Driven Engineering Excellence (Google Antigravity)

• Built through agentic AI pair programming workflows adhering to strict custom workspace rules (AGENTS.md).
• Automated build validation (npm run build), cache clearing, and regression testing prior to code staging.
• Enforced component scope isolation to guarantee that feature or content updates never mutate global layout styles or design tokens.

2. DevOps Dark Orange Design System

• Built on a curated HSL color palette featuring an obsidian black base background (#050608), high-contrast primary text (#f5f7fa), and vibrant DevOps orange accents (#f97316).
• Features 3-column dense Bento Grid layouts, pill badge tags, Font Awesome 6 icons, and interactive micro-animations.
• Enforces single-source-of-truth CSS custom properties (--ds-bg-card-glass, --ds-backdrop-blur, --ds-accent) driven directly by metadata.ts config.

3. Real-Time Glassmorphism & Ambient Light Mesh

• Hardware-accelerated frosted glass card reflections using CSS -webkit-backdrop-filter and backdrop-filter.
• Fixed background DOM mesh (.ambient-glow-mesh) with glowing ambient gradient orbs (orb-1, orb-2, orb-3) passing light through translucent glass cards.

4. High-Performance Mermaid ELK Architecture Engine

• Integrated Mermaid.js 11 with @mermaid-js/layout-elk for automatic layout calculation of complex multi-cloud and Kubernetes diagrams.
• Interactive toolbar offering full-screen pan & zoom, SVG source copying, custom orange nested subgraph borders, and foreignObject text auto-scaling.
• Automated code sanitization pre-parser preventing invalid diagram header crashes.

5. GitHub & GitLab Flavored Markdown (GFM MDX)

• Structured MDX content collection rendering with GFM list markers (disc, circle, square, decimal), monospace code pill badges, and section headings.
• Clean typography hierarchy tailored for technical writing, architecture specifications, and engineering runbooks.

---

System Architecture Diagram

flowchart TD
    subgraph ClientLayer ["Browser & Client Layer"]
        User["<i class='fas fa-desktop'></i> Visitor / Browser"]:::accent
        Clock["<i class='fas fa-clock'></i> Live Timezone Widget<br/><small>Asia/Kolkata vs Local Auto-Detect</small>"]
    end

    subgraph CDN ["Edge Delivery & Hosting Layer"]
        CFP["<i class='fas fa-cloud'></i> Cloudflare Pages Edge CDN<br/><small>Global Anycast Static Serving</small>"]:::accent
        OGCanvas["<i class='fas fa-image'></i> Dynamic OpenGraph Engine<br/><small>Social Preview Image Generation</small>"]
    end

    subgraph AstroCore ["Astro 7 SSG & Build Engine"]
        direction TB
        
        subgraph DesignSystem ["DevOps Dark Orange Design System"]
          direction LR
          Tokens[":root CSS Design Tokens"]:::boxNode
          Glass["CSS Glassmorphism Engine"]:::boxNode
          Bento["Dense Bento Grid Layout"]:::boxNode
        end

        subgraph Engine ["Core Application Engine"]
          direction LR
          MDX["MDX Content Collections"]:::boxNode
          MermaidELK["Mermaid.js + ELK Layout"]:::accent
          SEO["JSON-LD & Canonical SEO"]:::boxNode
        end
      end

    subgraph AIDevelopment ["AI-Driven Pair Programming"]
        AGY["<i class='fas fa-brain'></i> Google Antigravity AI Agent<br/><small>AGENTS.md Rule Enforcement & Automated Build Verification</small>"]:::accent
    end

    User -->|HTTPS GET| CFP
    User --- Clock
    CFP --> User
    OGCanvas --> CFP

    AGY -->|Build & Validate| AstroCore
    DesignSystem --> Engine
    Engine --> CFP

    classDef accent fill:#1f2630,stroke:#f97316,stroke-width:2px,color:#f97316;
    classDef boxNode fill:#232a33,stroke:#313a44,stroke-width:1.5px,color:#f5f7fa;

---

Architectural Design Pillars

1. Deterministic Single-Source-of-Truth: All glass opacity, blur, and theme settings are bound centrally in metadata.ts, ensuring idempotent design updates across the entire site.
2. Zero-Latency Static Performance: Pre-rendered HTML output with zero client-side framework overhead delivers instant sub-200ms page loads.
3. Structured Search Engine Optimization: Automated Schema.org JSON-LD structured data (Person, WebSite), canonical URL tags, RSS feed aggregators, and dynamic OpenGraph social banners.