Live Demos

These are the interactive patterns I build for my own ops and homelab tooling: timelines, topology views, realtime status cards, and URL-synced controls. Each demo is small on purpose, with notes on what it’s showing and how it’s wired.

ReactSolidJSNext.jsThree.jsD3.jsFramer MotionTanStack Query

Pick a demo

If you only click one, start with Cluster Overview for a quick tour of the card + motion system I reuse across the site.

● Live

Git Tunes

Lab experiment: explore Git history as a timeline and play it back as music. Hosted at git-tunes.flexinfer.ai.

Web AudioGitLabs

● Live

Cluster Overview

Real-time view of the K8s cluster with animated stat cards showing node health, pod distribution, and resource utilization.

ReactFramer MotionLive Data

● Live

CI Pipeline

Horizontal timeline visualization of GitLab CI/CD pipelines with stage-by-stage progress and job status indicators.

ReactGitLab CIReal-time

● Live

Model Gallery

Interactive gallery of running AI/ML models with specs, status indicators, and performance metrics.

ReactLLMInference

◐ Demo

FlexDeck Dashboard

Full-featured SolidJS dashboard with 3D HoloDeck visualization, force-directed topology graphs, and particle-animated CI pipelines.

SolidJSThree.jsD3.js

● Live

News Analyzer

End-to-end data pipeline visualization: scraping local news, extracting content, AI summarization, and delivery through the Kubernetes stack.

ReactCanvasPipeline

● Live

Tech Stack Diagram

Interactive infrastructure diagram showing traffic flow from Cloudflare through NGINX Ingress to services, with GitOps reconciliation path.

ReactSVGInfrastructure

● Live

Harvester Topology

Apple-style scroll-reveal visualization of Dell R730xd hardware, Harvester VMs, and how they form a production K3s cluster.

ReactScroll AnimationInfrastructure

Why Two Frameworks?

I use this portfolio to show the same ideas implemented with two different reactive models. SolidJS powers the high-performance internal dashboard (FlexDeck), while React/Next.js drives this public-facing site where SEO and static generation matter.

Solid

SolidJS - FlexDeck

• Fine-grained reactivity for 60fps animations
• Canvas/WebGL visualizations (Three.js, D3)
• Real-time WebSocket data streams
• No virtual DOM overhead

React

React - This Site

• Server components for SEO
• Static generation for performance
• Rich ecosystem (TanStack Query, Framer)
• Familiar to most reviewers