import { useState, useEffect } from 'react'; import { Terminal, Github, Mail, Layout, Cpu, Network, ExternalLink, ChevronRight, Activity, User } from 'lucide-react'; import './App.css'; import { THEMES } from './themes'; // --- MOCK DATA --- const PROJECTS = [ { id: 'kwin-tiling', title: 'KWin Dynamic Tiling Script', category: 'Window Management', tech: ['JavaScript', 'KDE API', 'C++'], desc: 'An i3-style tiling extension for KWin. Replaces standard floating windows with a deterministic BSP (Binary Space Partitioning) tree layout.', icon: }, { id: 'rp2040-firmware', title: 'RP2040 Custom Keyboard & EMR', category: 'Hardware / Firmware', tech: ['C', 'Rust', 'PIO', 'I2C'], desc: 'Custom firmware integrating a standard mechanical key matrix with an experimental EMR stylus digitizer for unified input processing.', icon: }, { id: 'graphql-inspector', title: 'GQL Traffic Interceptor', category: 'Reverse Engineering', tech: ['Go', 'eBPF', 'React'], desc: 'A local network utility utilizing eBPF to silently inspect, decode, and visualize GraphQL traffic between local containers.', icon: } ]; const LAB_NOTES = [ { date: '2026-02-14', title: 'Reverse Engineering TrueNAS Middleware API' }, { date: '2026-01-28', title: 'Why I stopped using Nginx and wrote my own router' }, { date: '2025-12-10', title: 'Injecting dynamic themes via CSS variable mutations' } ]; export default function App() { const [activeTheme] = useState(() => { const idx = Math.floor(Math.random() * THEMES.length); return THEMES[idx]; }); const [mousePos, setMousePos] = useState({ x: 0, y: 0 }); const [hasClickedThemePill, setHasClickedThemePill] = useState(false); const [showThemePillTooltip, setShowThemePillTooltip] = useState(false); // Update CSS variables for dynamic theming useEffect(() => { const root = document.documentElement; // Central palette root.style.setProperty('--color-accent', activeTheme.colors.accent); root.style.setProperty('--color-accent-muted', `${activeTheme.colors.accent}33`); root.style.setProperty('--bg-base', activeTheme.colors.bgBase); root.style.setProperty('--bg-surface', activeTheme.colors.bgSurface); root.style.setProperty('--bg-panel', activeTheme.colors.bgPanel); root.style.setProperty('--text-main', activeTheme.colors.textMain); root.style.setProperty('--text-muted', activeTheme.colors.textMuted); root.style.setProperty('--text-dim', activeTheme.colors.textDim); root.style.setProperty('--border-main', activeTheme.colors.borderMain); root.style.setProperty('--grid-pattern', activeTheme.colors.gridPattern); root.style.setProperty('--status-success', activeTheme.colors.statusSuccess); // Cat root.style.setProperty('--cat-body', activeTheme.colors.bgBase); root.style.setProperty('--cat-stroke', activeTheme.colors.catStroke); root.style.setProperty('--cat-nose', activeTheme.colors.catNose); root.style.setProperty('--cat-eyes', activeTheme.colors.catEyes); root.style.setProperty('--heart-color', activeTheme.colors.heartColor); }, [activeTheme]); // Subtle interactive background effect useEffect(() => { const handleMouseMove = (e: MouseEvent) => { setMousePos({ x: e.clientX, y: e.clientY }); }; window.addEventListener('mousemove', handleMouseMove); return () => window.removeEventListener('mousemove', handleMouseMove); }, []); // Auto-hide the "HAHA Made you click" tooltip useEffect(() => { if (!showThemePillTooltip) return; const t = window.setTimeout(() => setShowThemePillTooltip(false), 1400); return () => window.clearTimeout(t); }, [showThemePillTooltip]); return (
{/* SVG Noise Filter for rough paper texture */}
{/* Blueprint Dot Grid Background */}
{/* Subtle mouse glow */}
{/* Hidden Cat Easter Egg */}
{/* Navigation / Command Bar */} {/* Hero Section */}
{showThemePillTooltip && (
HAHA Made you click
)}

I engineer infrastructure ,
reverse-engineer black boxes,
and build tools.

Based in New Delhi. Exploring homelab orchestration, low-level input devices, and dynamic theming engines. This is my public scratchpad and systems notebook.

{/* Image Placeholder */}
{/* Faux tape in corners */}
avatar.jpg [1024x1024]
{/* Hand-drawn annotation */}
the operator
{/* System Overview Dashboard (Replaced Interactive Tiling Demo) */}

system_overview.sh

~ click panes to drill down ~
{/* Featured Projects */}

architecture_studies/

{PROJECTS.map((project, idx) => (
{project.icon}

{project.title}

{project.category}

{project.desc}

{project.tech.map(t => ( {t} ))}
))}
{/* Lab Notes */}

lab_notes.txt

{/* Hand drawn arrow pointing to notes */}
recent
{LAB_NOTES.map((note, i) => (
{/* Rough Timeline dot */}
x
{note.date}

{note.title}

))}

Observation: All systems operating nominally. Proceeding with hardware teardown sequence 0x4B.

{/* Footer */}
Aditya Gupta // 2026 // NEW_DELHI
UPTIME: 99.9% | NOMINAL
); } // --- INTERACTIVE SYSTEM OVERVIEW COMPONENT --- // Progressively reveals more specific content as panes are "split" const CONTENT_MODULES = [ { id: 'bio', title: '/home/aditya/bio.txt', tty: 'tty1', content: (
{'>'} whoami

Aditya Gupta. 20. Based in New Delhi.
I don't just write code; I build and dismantle systems.

{'>'} cat mindset.md

Treat the environment as a continuous experiment.

Split this pane to view technical stack.

) }, { id: 'skills', title: 'ls /usr/bin/skills', tty: 'tty2', content: (
{['Rust', 'Go', 'C/C++', 'eBPF', 'Kubernetes', 'TrueNAS', 'Linux/KWin', 'React'].map((skill) => ( {skill} ))}

Split for infrastructure status...

) }, { id: 'homelab', title: 'kubectl get nodes', tty: 'tty3', content: (
NAME STATUS ROLES
pve-core Ready control-plane
nas-store Ready truenas-iscsi
edge-rout Ready ingress-bpf
Healthy
) }, { id: 'hardware', title: 'lshw -short | grep input', tty: 'tty4', content: (
{'>'} Hardware focus
  • MCU: RP2040 (C/Rust)
  • Matrix: Ortho 40%
  • Sensor: EMR Stylus
  • Rate: 1000Hz
) }, { id: 'focus', title: 'tail -f /var/log/focus', tty: 'tty5', content: (
Streaming...

[INFO] Analyzing GQL via eBPF

[INFO] Wiring custom router

[WAIT] PCB transit delays

) } ]; function InteractiveSystemOverview() { const [activeNodes, setActiveNodes] = useState([CONTENT_MODULES[0]]); const [nextModuleIndex, setNextModuleIndex] = useState(1); const handleSplit = (clickedIndex: number) => { if (nextModuleIndex >= CONTENT_MODULES.length) return; // Max panes reached setActiveNodes(prev => { const newNodes = [...prev]; newNodes.splice(clickedIndex + 1, 0, CONTENT_MODULES[nextModuleIndex]); return newNodes; }); setNextModuleIndex(prev => prev + 1); }; const getGridContainerClass = () => { // We use a 12-column grid to allow highly precise asymmetrical splits return "grid grid-cols-1 sm:grid-cols-12 gap-3 transition-all duration-500 ease-in-out p-2 auto-rows-[minmax(180px,auto)]"; }; const getNodeClass = (length: number, index: number) => { // 1 Pane: Full width, taller if (length === 1) return "sm:col-span-12 sm:row-span-2 min-h-[300px]"; // 2 Panes: 50/50 split if (length === 2) return "sm:col-span-6 sm:row-span-2 min-h-[300px]"; // 3 Panes: 1 large left (spans 2 rows), 2 stacked on the right if (length === 3) { if (index === 0) return "sm:col-span-8 sm:row-span-2"; if (index === 1) return "sm:col-span-4 sm:row-span-1"; if (index === 2) return "sm:col-span-4 sm:row-span-1"; } // 4 Panes: 2x2 grid if (length === 4) return "sm:col-span-6 sm:row-span-1 min-h-[220px]"; // 5 Panes: Advanced Bento/Tiling layout (expands downward) if (length === 5) { if (index === 0) return "sm:col-span-7 sm:row-span-2"; // Bio: Top left, large if (index === 1) return "sm:col-span-5 sm:row-span-1"; // Skills: Top right if (index === 2) return "sm:col-span-5 sm:row-span-1"; // Homelab: Middle right if (index === 3) return "sm:col-span-6 sm:row-span-1 min-h-[200px]"; // Hardware: Bottom left if (index === 4) return "sm:col-span-6 sm:row-span-1 min-h-[200px]"; // Focus: Bottom right } return ""; }; return (
{activeNodes.map((node, i) => { const rotation = i % 2 === 0 ? 'rotate-[0.5deg]' : '-rotate-[0.5deg]'; return (
handleSplit(i)} className={` sketch-border bg-[var(--bg-panel)] p-4 relative group overflow-hidden flex flex-col transform ${rotation} transition-all duration-500 hover:scale-[1.01] hover:z-10 ${nextModuleIndex < CONTENT_MODULES.length ? 'cursor-crosshair' : 'cursor-default'} ${getNodeClass(activeNodes.length, i)} `} > {/* Top Bar */}
* {node.title} [{node.tty}]
{/* Dynamic Content */}
{node.content}
{/* Hover Overlay indicating split action (only if more modules exist) */} {nextModuleIndex < CONTENT_MODULES.length && (
SPLIT_VIEW
)}
); })}
); } // --- EASTER EGG COMPONENT --- function CatEasterEgg() { const [reveal, setReveal] = useState(0); // 0 (hidden) to 100 (fully visible) const [posX, setPosX] = useState(80); // percentage from left const [showHeart, setShowHeart] = useState(false); useEffect(() => { let currentReveal = 0; const handleScroll = () => { if (showHeart) return; // Prevent scroll from overriding the heart animation const currentScrollY = window.scrollY; // Define the specific "sliver" of scroll where the cat lives const period = 1200; // The pattern repeats every 1200px of scrolling const peakOffset = 700; // The exact scroll Y position where the cat is 100% visible const peekWidth = 300; // How many pixels of scrolling it takes to fully reveal/hide // Calculate how far the current scroll is from the peak visibility point const distanceToPeak = Math.abs((currentScrollY % period) - peakOffset); let newReveal = 0; if (distanceToPeak < peekWidth) { // Linearly map the distance to a 0-100 percentage newReveal = 100 - (distanceToPeak / peekWidth) * 100; } // If it just fully hid, randomize its next horizontal position if (newReveal === 0 && currentReveal > 0) { setPosX(Math.floor(Math.random() * 80) + 10); // Random position between 10% and 90% } currentReveal = newReveal; setReveal(newReveal); }; window.addEventListener('scroll', handleScroll, { passive: true }); handleScroll(); // Check initial position in case the user reloads halfway down return () => { window.removeEventListener('scroll', handleScroll); }; }, [showHeart]); // Depend on showHeart // Handle click: show heart, wait, then hide const handleCatClick = () => { if (showHeart || reveal === 0) return; setShowHeart(true); // Temporarily force it fully visible for the animation setReveal(100); // Wait 1.2s to show the heart, then hide the cat setTimeout(() => { setShowHeart(false); setReveal(0); // Randomize position after hiding setTimeout(() => setPosX(Math.floor(Math.random() * 80) + 10), 500); }, 1200); }; return (
{/* Floating Heart Animation */}
{/* Hand-drawn annotation on hover */}
./purr.sh
{/* Paws */}
{/* Head */}
{/* Ears */}
{/* Whiskers */}
{/* Eyes */}
{/* Nose/Mouth */}
w
); }