refactor: some big ass refactor

src/components/CatEasterEgg.tsx

@@ -0,0 +1,92 @@
+import { useEffect, useState } from 'react';
+
+export function CatEasterEgg() {
+    const [reveal, setReveal] = useState(0);
+    const [posX, setPosX] = useState(80);
+    const [showHeart, setShowHeart] = useState(false);
+
+    useEffect(() => {
+        let currentReveal = 0;
+
+        const handleScroll = () => {
+            if (showHeart) return;
+
+            const currentScrollY = window.scrollY;
+            const period = 1200;
+            const peakOffset = 700;
+            const peekWidth = 300;
+
+            const distanceToPeak = Math.abs((currentScrollY % period) - peakOffset);
+
+            let newReveal = 0;
+            if (distanceToPeak < peekWidth) {
+                newReveal = 100 - (distanceToPeak / peekWidth) * 100;
+            }
+
+            if (newReveal === 0 && currentReveal > 0) {
+                setPosX(Math.floor(Math.random() * 80) + 10);
+            }
+
+            currentReveal = newReveal;
+            setReveal(newReveal);
+        };
+
+        window.addEventListener('scroll', handleScroll, { passive: true });
+        handleScroll();
+
+        return () => {
+            window.removeEventListener('scroll', handleScroll);
+        };
+    }, [showHeart]);
+
+    const handleCatClick = () => {
+        if (showHeart || reveal === 0) return;
+        setShowHeart(true);
+        setReveal(100);
+
+        setTimeout(() => {
+            setShowHeart(false);
+            setReveal(0);
+            setTimeout(() => setPosX(Math.floor(Math.random() * 80) + 10), 500);
+        }, 1200);
+    };
+
+    return (
+        <div
+            className="fixed bottom-[-2px] z-50 transition-transform duration-100 ease-out"
+            style={{
+                left: `${posX}%`,
+                transform: `translateY(${150 - (reveal * 1.5)}%)`,
+            }}
+        >
+            <div className="relative group cursor-pointer" onClick={handleCatClick}>
+                <div className={`absolute left-1/2 transform -translate-x-1/2 text-[var(--heart-color)] text-4xl z-50 transition-all duration-700 ease-out pointer-events-none ${showHeart ? '-top-16 opacity-100 scale-110' : 'top-2 opacity-0 scale-50'}`}>
+                    ♥
+                </div>
+
+                <div className="absolute -top-10 -left-20 font-sketch text-xs accent-text -rotate-12 opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap bg-[var(--bg-panel)] px-3 py-1 sketch-border-subtle backdrop-blur-sm shadow-xl">
+                    ./purr.sh
+                </div>
+
+                <div className="absolute -top-2 left-2 w-4 h-5 border-2 border-[var(--cat-stroke)] rounded-t-[12px] bg-[var(--cat-body)] z-10"></div>
+                <div className="absolute -top-2 right-2 w-4 h-5 border-2 border-[var(--cat-stroke)] rounded-t-[12px] bg-[var(--cat-body)] z-10"></div>
+
+                <div className="w-16 h-14 border-2 border-[var(--cat-stroke)] border-b-0 rounded-t-[24px] bg-[var(--cat-body)] flex justify-center pt-5 gap-3 relative z-0">
+                    <div className="absolute -top-3 left-0 w-6 h-7 border-2 border-[var(--cat-stroke)] border-b-0 border-r-0 rounded-tl-full transform rotate-[20deg] bg-[var(--cat-body)] -z-10"></div>
+                    <div className="absolute -top-3 right-0 w-6 h-7 border-2 border-[var(--cat-stroke)] border-b-0 border-l-0 rounded-tr-full transform -rotate-[20deg] bg-[var(--cat-body)] -z-10"></div>
+
+                    <div className="absolute top-7 -left-3 w-4 h-[2px] bg-[var(--cat-stroke)] rounded-full transform rotate-[15deg] opacity-60"></div>
+                    <div className="absolute top-9 -left-3 w-4 h-[2px] bg-[var(--cat-stroke)] rounded-full transform -rotate-[5deg] opacity-60"></div>
+                    <div className="absolute top-7 -right-3 w-4 h-[2px] bg-[var(--cat-stroke)] rounded-full transform -rotate-[15deg] opacity-60"></div>
+                    <div className="absolute top-9 -right-3 w-4 h-[2px] bg-[var(--cat-stroke)] rounded-full transform rotate-[5deg] opacity-60"></div>
+
+                    <div className={`w-3 h-3 rounded-full bg-[var(--cat-eyes)] relative transition-all duration-300 ${showHeart ? 'scale-y-[0.2]' : ''}`}></div>
+                    <div className={`w-3 h-3 rounded-full bg-[var(--cat-eyes)] relative transition-all duration-300 ${showHeart ? 'scale-y-[0.2]' : ''}`}></div>
+
+                    <div className="absolute top-8 left-1/2 transform -translate-x-1/2 w-1.5 h-1 bg-[var(--cat-nose)] rounded-full"></div>
+                    <div className="absolute top-[34px] left-1/2 transform -translate-x-1/2 text-[var(--cat-stroke)] text-[10px] font-bold tracking-tighter">w</div>
+                </div>
+            </div>
+        </div>
+    );
+}

src/components/FooterSection.tsx

@@ -0,0 +1,15 @@
+export function FooterSection() {
+    return (
+        <footer className="border-t-2 border-dashed border-[var(--border-main)] pt-8 pb-12 flex flex-col sm:flex-row justify-between items-center gap-4 text-xs font-mono text-[var(--text-dim)]">
+            <div className="flex items-center gap-2">
+                <span className="font-sketch text-lg transform -rotate-6 block">Aditya Gupta</span>
+                <span>// 2026 // NEW_DELHI</span>
+            </div>
+            <div className="flex gap-4 sketch-border-subtle px-4 py-2 bg-[var(--bg-surface)]">
+                <span>UPTIME: 99.9%</span>
+                <span className="text-[var(--text-dim)]">|</span>
+                <span className="accent-text">NOMINAL</span>
+            </div>
+        </footer>
+    );
+}

src/components/HeroSection.tsx

@@ -0,0 +1,67 @@
+import { Activity, User } from 'lucide-react';
+
+type HeroSectionProps = {
+    activeThemeName: string;
+    hasClickedThemePill: boolean;
+    showThemePillTooltip: boolean;
+    onThemePillClick: () => void;
+};
+
+export function HeroSection({
+    activeThemeName,
+    hasClickedThemePill,
+    showThemePillTooltip,
+    onThemePillClick,
+}: HeroSectionProps) {
+    return (
+        <header className="flex flex-col md:flex-row gap-12 items-center justify-between relative">
+            <div className="space-y-6 max-w-2xl">
+                <div className="relative inline-flex mb-4">
+                    <button
+                        type="button"
+                        onClick={onThemePillClick}
+                        className={`inline-flex items-center gap-2 px-4 py-1.5 sketch-border bg-[var(--bg-surface)] text-xs transform -rotate-1 cursor-pointer select-none ${hasClickedThemePill ? '' : 'animate-bounce'}`}
+                        aria-label="Theme pill"
+                    >
+                        <Activity className={`w-3 h-3 accent-text ${hasClickedThemePill ? '' : 'animate-pulse'}`} />
+                        <span className="font-sketch text-sm">YOU GET: <span className="text-[var(--text-main)]">{activeThemeName}</span></span>
+                    </button>
+
+                    {showThemePillTooltip && (
+                        <div
+                            role="tooltip"
+                            className="absolute left-1/2 top-full mt-2 -translate-x-1/2 whitespace-nowrap px-3 py-1.5 text-xs font-sketch bg-[var(--bg-panel)] text-[var(--text-main)] sketch-border-subtle shadow-lg"
+                        >
+                            HAHA Made you click
+                        </div>
+                    )}
+                </div>
+                <h1 className="text-4xl sm:text-5xl font-bold tracking-tight text-[var(--text-main)] leading-tight">
+                    I engineer <span className="accent-text relative inline-block">
+                        infrastructure
+                        <svg className="absolute w-full h-3 -bottom-1 left-0 accent-text" viewBox="0 0 100 20" preserveAspectRatio="none" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M2,15 Q50,-5 98,15" /></svg>
+                    </span>,<br /> reverse-engineer black boxes,<br /> and build tools.
+                </h1>
+                <p className="text-lg text-[var(--text-muted)] leading-relaxed max-w-xl font-mono text-sm">
+                    Based in New Delhi. Exploring homelab orchestration, low-level input devices, and dynamic theming engines. This is my public scratchpad and systems notebook.
+                </p>
+            </div>
+
+            <div className="relative w-48 h-56 sm:w-64 sm:h-72 shrink-0 sketch-border bg-[var(--bg-panel)] transform rotate-[3deg] hover:rotate-0 transition-transform duration-500 group flex flex-col items-center justify-center mt-8 md:mt-0">
+                <div className="absolute -top-3 -right-4 w-12 h-6 bg-[var(--color-accent-muted)] transform rotate-45 opacity-60 backdrop-blur-sm sketch-border-subtle border-none" />
+                <div className="absolute -bottom-3 -left-4 w-12 h-6 bg-[var(--color-accent-muted)] transform rotate-45 opacity-60 backdrop-blur-sm sketch-border-subtle border-none" />
+
+                <div className="absolute inset-2 border-2 border-dashed border-[var(--border-main)] flex flex-col items-center justify-center text-[var(--text-dim)] group-hover:text-[var(--color-accent)] transition-colors duration-300 group-hover:bg-[var(--color-accent-muted)]/5">
+                    <User className="w-12 h-12 mb-3 opacity-50" />
+                    <span className="font-sketch text-sm">avatar.jpg</span>
+                    <span className="font-mono text-[10px] opacity-40 mt-1">[1024x1024]</span>
+                </div>
+
+                <div className="absolute -bottom-8 -left-12 font-sketch text-xs accent-text -rotate-[15deg] hidden md:flex items-center gap-2 opacity-80">
+                    <span className="whitespace-nowrap">the operator</span>
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="transform -scale-y-100 rotate-45"><path d="M5 12h14" /><path d="m12 5 7 7-7 7" /></svg>
+                </div>
+            </div>
+        </header>
+    );
+}

src/components/InteractiveSystemOverview.tsx

@@ -0,0 +1,197 @@
+import { useState } from 'react';
+
+const CONTENT_MODULES = [
+    {
+        id: 'bio',
+        title: '/home/aditya/bio.txt',
+        tty: 'tty1',
+        content: (
+            <div className="font-mono text-sm sm:text-base text-[var(--text-muted)] leading-relaxed flex-1 space-y-4">
+                <div>
+                    <span className="accent-text font-sketch text-xl mr-2">{'>'}</span>
+                    <span className="text-[var(--text-main)]">whoami</span>
+                    <p className="mt-2 ml-4 border-l-2 border-[var(--border-main)] pl-4 text-[var(--text-main)]">
+                        Aditya Gupta. 20. Based in New Delhi. <br />
+                        I don't just write code; I build and dismantle systems.
+                    </p>
+                </div>
+                <div>
+                    <span className="accent-text font-sketch text-xl mr-2">{'>'}</span>
+                    <span className="text-[var(--text-main)]">cat mindset.md</span>
+                    <div className="mt-2 ml-4 space-y-2 border-l-2 border-[var(--border-main)] pl-4">
+                        <p>Treat the environment as a continuous experiment.</p>
+                        <p className="text-xs text-[var(--text-dim)] mt-2">Split this pane to view technical stack.</p>
+                    </div>
+                </div>
+            </div>
+        )
+    },
+    {
+        id: 'skills',
+        title: 'ls /usr/bin/skills',
+        tty: 'tty2',
+        content: (
+            <div className="font-mono text-xs text-[var(--text-main)] flex-1 content-start">
+                <div className="flex flex-wrap gap-2 mt-1">
+                    {['Rust', 'Go', 'C/C++', 'eBPF', 'Kubernetes', 'TrueNAS', 'Linux/KWin', 'React'].map((skill) => (
+                        <span key={skill} className="px-2 py-1 bg-[var(--bg-surface)] border border-[var(--border-main)] rounded-sm hover:border-[var(--color-accent)] hover:text-[var(--color-accent)] transition-colors cursor-default">
+                            {skill}
+                        </span>
+                    ))}
+                </div>
+                <p className="mt-4 text-[10px] text-[var(--text-dim)] animate-pulse border-t border-dashed border-[var(--border-main)] pt-2">Split for infrastructure status...</p>
+            </div>
+        )
+    },
+    {
+        id: 'homelab',
+        title: 'kubectl get nodes',
+        tty: 'tty3',
+        content: (
+            <div className="font-mono text-[10px] sm:text-xs text-[var(--text-muted)] flex-1 overflow-x-auto">
+                <table className="w-full text-left border-collapse">
+                    <thead>
+                        <tr className="text-[var(--text-dim)] border-b border-[var(--border-main)]">
+                            <th className="pb-1 font-normal">NAME</th>
+                            <th className="pb-1 font-normal">STATUS</th>
+                            <th className="pb-1 font-normal">ROLES</th>
+                        </tr>
+                    </thead>
+                    <tbody className="leading-relaxed">
+                        <tr className="group/row hover:bg-[var(--bg-surface)]">
+                            <td className="pt-1 text-[var(--text-main)]">pve-core</td>
+                            <td className="pt-1"><span className="text-[var(--status-success)]">Ready</span></td>
+                            <td className="pt-1 accent-text">control-plane</td>
+                        </tr>
+                        <tr className="group/row hover:bg-[var(--bg-surface)]">
+                            <td>nas-store</td>
+                            <td><span className="text-[var(--status-success)]">Ready</span></td>
+                            <td>truenas-iscsi</td>
+                        </tr>
+                        <tr className="group/row hover:bg-[var(--bg-surface)]">
+                            <td>edge-rout</td>
+                            <td><span className="text-[var(--status-success)]">Ready</span></td>
+                            <td>ingress-bpf</td>
+                        </tr>
+                    </tbody>
+                </table>
+                <div className="mt-2 flex items-center justify-between">
+                    <div className="flex items-center gap-2">
+                        <span className="w-2 h-2 rounded-full bg-[var(--status-success)]"></span>
+                        <span className="font-sketch text-xs text-[var(--text-dim)]">Healthy</span>
+                    </div>
+                </div>
+            </div>
+        )
+    },
+    {
+        id: 'hardware',
+        title: 'lshw -short | grep input',
+        tty: 'tty4',
+        content: (
+            <div className="font-mono text-xs text-[var(--text-muted)] flex-1">
+                <span className="accent-text font-sketch text-lg mr-2">{'>'}</span>
+                <span className="text-[var(--text-main)]">Hardware focus</span>
+                <ul className="mt-2 ml-2 border-l-2 border-[var(--border-main)] pl-3 space-y-1.5">
+                    <li>MCU: RP2040 (C/Rust)</li>
+                    <li>Matrix: Ortho 40%</li>
+                    <li>Sensor: EMR Stylus</li>
+                    <li>Rate: 1000Hz</li>
+                </ul>
+            </div>
+        )
+    },
+    {
+        id: 'focus',
+        title: 'tail -f /var/log/focus',
+        tty: 'tty5',
+        content: (
+            <div className="font-mono text-xs text-[var(--text-muted)] flex-1">
+                <div className="text-[var(--text-dim)] border-b border-dashed border-[var(--border-main)] pb-1 mb-2">Streaming...</div>
+                <p className="mb-1"><span className="accent-text">[INFO]</span> Analyzing GQL via eBPF</p>
+                <p className="mb-1"><span className="accent-text">[INFO]</span> Wiring custom router</p>
+                <p><span className="text-[var(--text-dim)]">[WAIT]</span> PCB transit delays</p>
+            </div>
+        )
+    }
+];
+
+export function InteractiveSystemOverview() {
+    const [activeNodes, setActiveNodes] = useState([CONTENT_MODULES[0]]);
+    const [nextModuleIndex, setNextModuleIndex] = useState(1);
+
+    const handleSplit = (clickedIndex: number) => {
+        if (nextModuleIndex >= CONTENT_MODULES.length) return;
+
+        setActiveNodes((prev) => {
+            const newNodes = [...prev];
+            newNodes.splice(clickedIndex + 1, 0, CONTENT_MODULES[nextModuleIndex]);
+            return newNodes;
+        });
+        setNextModuleIndex((prev) => prev + 1);
+    };
+
+    const getGridContainerClass = () => {
+        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) => {
+        if (length === 1) return 'sm:col-span-12 sm:row-span-2 min-h-[300px]';
+        if (length === 2) return 'sm:col-span-6 sm:row-span-2 min-h-[300px]';
+        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';
+        }
+        if (length === 4) return 'sm:col-span-6 sm:row-span-1 min-h-[220px]';
+        if (length === 5) {
+            if (index === 0) return 'sm:col-span-7 sm:row-span-2';
+            if (index === 1) return 'sm:col-span-5 sm:row-span-1';
+            if (index === 2) return 'sm:col-span-5 sm:row-span-1';
+            if (index === 3) return 'sm:col-span-6 sm:row-span-1 min-h-[200px]';
+            if (index === 4) return 'sm:col-span-6 sm:row-span-1 min-h-[200px]';
+        }
+        return '';
+    };
+
+    return (
+        <div className={getGridContainerClass()}>
+            {activeNodes.map((node, i) => {
+                const rotation = i % 2 === 0 ? 'rotate-[0.5deg]' : '-rotate-[0.5deg]';
+
+                return (
+                    <div
+                        key={node.id}
+                        onClick={() => 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)}
+            `}
+                    >
+                        <div className="flex justify-between items-center border-b-2 border-dashed border-[var(--border-main)] pb-2 mb-3 shrink-0">
+                            <span className="font-sketch text-xs sm:text-sm text-[var(--text-muted)] lowercase flex items-center gap-1.5 whitespace-nowrap overflow-hidden text-ellipsis">
+                                <span className="text-base accent-text leading-none">*</span>
+                                {node.title}
+                            </span>
+                            <span className="font-sketch text-[10px] sm:text-xs text-[var(--text-dim)] shrink-0 ml-2">[{node.tty}]</span>
+                        </div>
+
+                        <div className="flex-1 overflow-y-auto custom-scrollbar pr-1">
+                            {node.content}
+                        </div>
+
+                        {nextModuleIndex < CONTENT_MODULES.length && (
+                            <div className="absolute inset-0 bg-[var(--color-accent-muted)]/5 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center backdrop-blur-[1px] pointer-events-none">
+                                <span className="font-sketch text-lg sm:text-xl font-bold text-[var(--text-main)] bg-[var(--bg-panel)] px-3 py-1.5 sketch-border transform rotate-[-2deg] shadow-lg">
+                                    SPLIT_VIEW
+                                </span>
+                            </div>
+                        )}
+                    </div>
+                );
+            })}
+        </div>
+    );
+}

src/components/LabNotesSection.tsx

@@ -0,0 +1,41 @@
+import { ChevronRight, Terminal } from 'lucide-react';
+import { LAB_NOTES } from '../data/contentData';
+
+export function LabNotesSection() {
+    return (
+        <section className="space-y-6">
+            <h2 className="font-sketch text-2xl text-[var(--text-main)] border-b-2 border-dashed border-[var(--border-main)] pb-2 flex items-center gap-2">
+                <ChevronRight className="w-5 h-5 accent-text" /> lab_notes.txt
+            </h2>
+            <div className="flex flex-col gap-4 border-l-2 border-dashed border-[var(--border-main)] ml-2 relative">
+                <div className="absolute -left-10 top-0 font-sketch text-xs accent-text -rotate-12 hidden sm:block">
+                    recent
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="ml-2 transform rotate-90"><path d="M5 12h14" /><path d="m12 5 7 7-7 7" /></svg>
+                </div>
+
+                {LAB_NOTES.map((note, i) => (
+                    <div key={i} className="relative pl-6 py-2 group cursor-pointer">
+                        <div className="absolute left-[-9px] top-[14px] w-[16px] h-[16px] flex items-center justify-center bg-[var(--bg-base)] group-hover:scale-125 transition-transform">
+                            <span className="text-[var(--text-dim)] group-hover:text-[var(--color-accent)] font-sketch text-lg leading-none transform -rotate-12">x</span>
+                        </div>
+
+                        <div className="font-mono text-[10px] text-[var(--text-dim)] mb-1">{note.date}</div>
+                        <h3 className="text-sm font-mono text-[var(--text-muted)] group-hover:text-[var(--text-main)] transition-colors leading-relaxed">
+                            {note.title}
+                        </h3>
+                    </div>
+                ))}
+            </div>
+
+            <div className="mt-10 p-5 sketch-border bg-[var(--color-accent-muted)]/5 transform rotate-1">
+                <div className="flex gap-3 items-start">
+                    <Terminal className="w-5 h-5 accent-text mt-1 flex-shrink-0" />
+                    <p className="text-[var(--text-muted)] text-sm font-mono leading-relaxed">
+                        <span className="font-sketch text-lg accent-text block mb-1">Observation:</span>
+                        All systems operating nominally. Proceeding with hardware teardown sequence 0x4B.
+                    </p>
+                </div>
+            </div>
+        </section>
+    );
+}

src/components/NavigationBar.tsx

@@ -0,0 +1,22 @@
+import { Github, Mail, Terminal } from 'lucide-react';
+
+export function NavigationBar() {
+    return (
+        <nav className="flex flex-col sm:flex-row justify-between items-start sm:items-center border-b-2 border-dashed border-[var(--border-main)] pb-4 gap-4">
+            <div className="flex items-center gap-2 text-sm text-[var(--text-muted)] relative group">
+                <Terminal className="w-5 h-5 accent-text transform -rotate-12 group-hover:rotate-12 transition-transform" />
+                <span className="font-sketch text-2xl text-[var(--text-main)] tracking-wide">aditya_gupta <span className="text-[var(--text-dim)]">//</span> sortedcord</span>
+
+                <div className="absolute -top-6 -right-16 font-sketch text-sm accent-text rotate-12 flex items-center gap-1 opacity-80">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="transform -scale-x-100 rotate-45"><path d="M5 12h14" /><path d="m12 5 7 7-7 7" /></svg>
+                    <span>root</span>
+                </div>
+            </div>
+
+            <div className="flex items-center gap-6">
+                <a href="#" className="font-sketch text-lg hover:text-[var(--text-main)] transition-colors flex items-center gap-2 group"><Github className="w-4 h-4 group-hover:-translate-y-1 transition-transform" /> github</a>
+                <a href="#" className="font-sketch text-lg hover:text-[var(--text-main)] transition-colors flex items-center gap-2 group"><Mail className="w-4 h-4 group-hover:-translate-y-1 transition-transform" /> contact</a>
+            </div>
+        </nav>
+    );
+}

src/components/ProjectsSection.tsx

@@ -0,0 +1,49 @@
+import { ExternalLink, Layout } from 'lucide-react';
+import { PROJECTS } from '../data/contentData';
+
+export function ProjectsSection() {
+    return (
+        <section className="md:col-span-2 space-y-6">
+            <h2 className="font-sketch text-2xl text-[var(--text-main)] border-b-2 border-dashed border-[var(--border-main)] pb-2 flex items-center gap-2">
+                <Layout className="w-5 h-5 accent-text" /> recent_projects/
+            </h2>
+            <div className="flex flex-col gap-6">
+                {PROJECTS.map((project, idx) => (
+                    <article
+                        key={project.id}
+                        className={`group relative p-6 bg-[var(--bg-surface)] sketch-border-subtle cursor-pointer overflow-hidden ${idx % 2 === 0 ? 'transform rotate-[0.5deg]' : 'transform -rotate-[0.5deg]'}`}
+                    >
+                        <div className="absolute top-0 left-0 w-full h-1 bg-[var(--border-main)] group-hover:bg-[var(--color-accent)] transition-colors duration-300 opacity-50" />
+
+                        <div className="flex justify-between items-start mb-4">
+                            <div className="flex items-center gap-4">
+                                <div className="p-3 sketch-border-subtle bg-[var(--bg-panel)] text-[var(--text-muted)] group-hover:text-[var(--color-accent)] group-hover:scale-110 transition-all transform -rotate-3">
+                                    {project.icon}
+                                </div>
+                                <div>
+                                    <h3 className="text-[var(--text-main)] font-bold text-lg flex items-center gap-2 font-mono">
+                                        {project.title}
+                                        <ExternalLink className="w-4 h-4 opacity-0 group-hover:opacity-100 transition-opacity accent-text" />
+                                    </h3>
+                                    <span className="font-sketch text-sm text-[var(--text-muted)] accent-text">{project.category}</span>
+                                </div>
+                            </div>
+                        </div>
+
+                        <p className="text-sm text-[var(--text-muted)] mb-5 leading-relaxed font-mono">
+                            {project.desc}
+                        </p>
+
+                        <div className="flex flex-wrap gap-2">
+                            {project.tech.map((t) => (
+                                <span key={t} className="text-xs px-2 py-1 bg-[var(--bg-panel)] sketch-border-subtle text-[var(--text-muted)] font-mono">
+                                    {t}
+                                </span>
+                            ))}
+                        </div>
+                    </article>
+                ))}
+            </div>
+        </section>
+    );
+}

src/components/SystemOverviewSection.tsx

@@ -0,0 +1,16 @@
+import { Cpu } from 'lucide-react';
+import { InteractiveSystemOverview } from './InteractiveSystemOverview';
+
+export function SystemOverviewSection() {
+    return (
+        <section className="space-y-4 relative mt-12 md:mt-0">
+            <div className="flex items-center justify-between border-b-2 border-dashed border-[var(--border-main)] pb-2">
+                <h2 className="font-sketch text-2xl text-[var(--text-main)] flex items-center gap-2">
+                    <Cpu className="w-5 h-5 accent-text" /> system_overview.sh
+                </h2>
+                <span className="font-sketch text-[var(--text-dim)] text-sm animate-pulse">~ click panes to drill down ~</span>
+            </div>
+            <InteractiveSystemOverview />
+        </section>
+    );
+}