diff --git a/src/App.tsx b/src/App.tsx
index 1a60976..77fb731 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,41 +1,13 @@
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' }
-];
+import { CatEasterEgg } from './components/CatEasterEgg';
+import { FooterSection } from './components/FooterSection';
+import { HeroSection } from './components/HeroSection';
+import { LabNotesSection } from './components/LabNotesSection';
+import { NavigationBar } from './components/NavigationBar';
+import { ProjectsSection } from './components/ProjectsSection';
+import { SystemOverviewSection } from './components/SystemOverviewSection';
export default function App() {
const [activeTheme] = useState(() => {
@@ -117,519 +89,31 @@ export default function App() {
- {/* Navigation / Command Bar */}
-
-
-
-
aditya_gupta // sortedcord
+
- {/* Hand-drawn annotation */}
-
-
+ {
+ setHasClickedThemePill(true);
+ setShowThemePillTooltip(true);
+ }}
+ />
-
-
-
- {/* Hero Section */}
-
-
-
-
{
- setHasClickedThemePill(true);
- setShowThemePillTooltip(true);
- }}
- 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"
- >
-
- YOU GET: {activeTheme.name}
-
-
- {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 */}
-
-
-
-
- {/* 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 */}
-
-
- {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 */}
-
+
);
-}
-
-// --- 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
-
-
-
-
-
- )
- },
- {
- 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
-
-
-
- );
}
\ No newline at end of file
diff --git a/src/components/CatEasterEgg.tsx b/src/components/CatEasterEgg.tsx
new file mode 100644
index 0000000..a537367
--- /dev/null
+++ b/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 (
+
+
+
+ ♥
+
+
+
+ ./purr.sh
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
w
+
+
+
+ );
+}
diff --git a/src/components/FooterSection.tsx b/src/components/FooterSection.tsx
new file mode 100644
index 0000000..94443ac
--- /dev/null
+++ b/src/components/FooterSection.tsx
@@ -0,0 +1,15 @@
+export function FooterSection() {
+ return (
+
+ );
+}
diff --git a/src/components/HeroSection.tsx b/src/components/HeroSection.tsx
new file mode 100644
index 0000000..48e321e
--- /dev/null
+++ b/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 (
+
+ );
+}
diff --git a/src/components/InteractiveSystemOverview.tsx b/src/components/InteractiveSystemOverview.tsx
new file mode 100644
index 0000000..0bdc490
--- /dev/null
+++ b/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: (
+
+
+
{'>'}
+
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
+
+
+
+
+
+ )
+ },
+ {
+ 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
+
+ )
+ }
+];
+
+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 (
+
+ {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)}
+ `}
+ >
+
+
+ *
+ {node.title}
+
+ [{node.tty}]
+
+
+
+ {node.content}
+
+
+ {nextModuleIndex < CONTENT_MODULES.length && (
+
+
+ SPLIT_VIEW
+
+
+ )}
+
+ );
+ })}
+
+ );
+}
diff --git a/src/components/LabNotesSection.tsx b/src/components/LabNotesSection.tsx
new file mode 100644
index 0000000..f3da6cb
--- /dev/null
+++ b/src/components/LabNotesSection.tsx
@@ -0,0 +1,41 @@
+import { ChevronRight, Terminal } from 'lucide-react';
+import { LAB_NOTES } from '../data/contentData';
+
+export function LabNotesSection() {
+ return (
+
+
+ lab_notes.txt
+
+
+
+
+ {LAB_NOTES.map((note, i) => (
+
+
+ x
+
+
+
{note.date}
+
+ {note.title}
+
+
+ ))}
+
+
+
+
+
+
+ Observation:
+ All systems operating nominally. Proceeding with hardware teardown sequence 0x4B.
+
+
+
+
+ );
+}
diff --git a/src/components/NavigationBar.tsx b/src/components/NavigationBar.tsx
new file mode 100644
index 0000000..63ee757
--- /dev/null
+++ b/src/components/NavigationBar.tsx
@@ -0,0 +1,22 @@
+import { Github, Mail, Terminal } from 'lucide-react';
+
+export function NavigationBar() {
+ return (
+
+
+
+
aditya_gupta // sortedcord
+
+
+
+
+
+
+ );
+}
diff --git a/src/components/ProjectsSection.tsx b/src/components/ProjectsSection.tsx
new file mode 100644
index 0000000..68d4d24
--- /dev/null
+++ b/src/components/ProjectsSection.tsx
@@ -0,0 +1,49 @@
+import { ExternalLink, Layout } from 'lucide-react';
+import { PROJECTS } from '../data/contentData';
+
+export function ProjectsSection() {
+ return (
+
+
+ recent_projects/
+
+
+ {PROJECTS.map((project, idx) => (
+
+
+
+
+
+
+ {project.icon}
+
+
+
+ {project.title}
+
+
+ {project.category}
+
+
+
+
+
+ {project.desc}
+
+
+
+ {project.tech.map((t) => (
+
+ {t}
+
+ ))}
+
+
+ ))}
+
+
+ );
+}
diff --git a/src/components/SystemOverviewSection.tsx b/src/components/SystemOverviewSection.tsx
new file mode 100644
index 0000000..3ab9279
--- /dev/null
+++ b/src/components/SystemOverviewSection.tsx
@@ -0,0 +1,16 @@
+import { Cpu } from 'lucide-react';
+import { InteractiveSystemOverview } from './InteractiveSystemOverview';
+
+export function SystemOverviewSection() {
+ return (
+
+
+
+ system_overview.sh
+
+ ~ click panes to drill down ~
+
+
+
+ );
+}
diff --git a/src/data/content.ts b/src/data/content.ts
new file mode 100644
index 0000000..e4babce
--- /dev/null
+++ b/src/data/content.ts
@@ -0,0 +1 @@
+export { LAB_NOTES, PROJECTS, type LabNote, type Project } from './contentData';
diff --git a/src/data/content.tsx b/src/data/content.tsx
new file mode 100644
index 0000000..7c5143b
--- /dev/null
+++ b/src/data/content.tsx
@@ -0,0 +1,34 @@
+import { Cpu, Gamepad, Layout } from 'lucide-react';
+
+export const PROJECTS = [
+ {
+ id: 'Krohnkite',
+ title: 'Krohnkite i3',
+ category: 'Window Management',
+ tech: ['Typescript', 'Kwin API', 'QML'],
+ desc: 'A modified stripped down version of Krohnkite that implements i3-style tiling in KDE Plasma (Wayland).',
+ icon: ,
+ },
+ {
+ id: 'leenim',
+ title: 'Leenim',
+ category: 'Desktop Application Development',
+ tech: ['React', 'Rust', 'Tauri', 'Python'],
+ desc: 'A Cross platform Video Editor style application for creating mathematical illustrations with Manim.',
+ icon: ,
+ },
+ {
+ id: 'omnia',
+ title: 'Omnia',
+ category: 'AI-Native Computing Systems',
+ tech: ['Typescript'],
+ desc: 'A game engine specification that defines an AI driven, intent-based architecture for building determinist-first interactive worlds.',
+ icon: ,
+ },
+];
+
+export const LAB_NOTES = [
+ { date: '2026-02-14', title: 'GT730 and handling some Nvidia Voodoo Magic' },
+ { 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' },
+];
diff --git a/src/data/contentData.tsx b/src/data/contentData.tsx
new file mode 100644
index 0000000..11bfe51
--- /dev/null
+++ b/src/data/contentData.tsx
@@ -0,0 +1,49 @@
+import type { ReactElement } from 'react';
+import { Cpu, Gamepad, Layout } from 'lucide-react';
+
+export type Project = {
+ id: string;
+ title: string;
+ category: string;
+ tech: string[];
+ desc: string;
+ icon: ReactElement;
+};
+
+export type LabNote = {
+ date: string;
+ title: string;
+};
+
+export const PROJECTS: Project[] = [
+ {
+ id: 'Krohnkite',
+ title: 'Krohnkite i3',
+ category: 'Window Management',
+ tech: ['Typescript', 'Kwin API', 'QML'],
+ desc: 'A modified stripped down version of Krohnkite that implements i3-style tiling in KDE Plasma (Wayland).',
+ icon: ,
+ },
+ {
+ id: 'leenim',
+ title: 'Leenim',
+ category: 'Desktop Application Development',
+ tech: ['React', 'Rust', 'Tauri', 'Python'],
+ desc: 'A Cross platform Video Editor style application for creating mathematical illustrations with Manim.',
+ icon: ,
+ },
+ {
+ id: 'omnia',
+ title: 'Omnia',
+ category: 'AI-Native Computing Systems',
+ tech: ['Typescript'],
+ desc: 'A game engine specification that defines an AI driven, intent-based architecture for building determinist-first interactive worlds.',
+ icon: ,
+ },
+];
+
+export const LAB_NOTES: LabNote[] = [
+ { date: '2026-02-14', title: 'GT730 and handling some Nvidia Voodoo Magic' },
+ { 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' },
+];
diff --git a/src/theme.css b/src/theme.css
index 15f6cd2..587108c 100644
--- a/src/theme.css
+++ b/src/theme.css
@@ -1,11 +1,6 @@
@import url('https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');
:root {
- /* =========================================
- 🎨 CENTRAL COLOR PALETTE
- Modify these variables to change the theme!
- ========================================= */
-
/* Backgrounds */
--bg-base: #111113;
/* Main page background */