feat: Added Expanded Skills

src/components/InteractiveSystemOverview.tsx

@@ -36,9 +36,60 @@ const CONTENT_MODULES = [
         content: (
             <div className="font-mono text-xs text-(--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-(--bg-surface) border border-(--border-main) rounded-sm hover:border-(--color-accent) hover:text-[var(--color-accent)] transition-colors cursor-default">
-                            {skill}
+                    {[
+                        {
+                            label: 'Infra & Self-Hosting',
+                            details:
+                                'Docker, Podman, Traefik, Gitea, Jellyfin, Home Assistant, systemd, Nginx, Linux (Arch), Pacman, SSH, S3-compatible storage, rclone',
+                        },
+                        {
+                            label: 'Desktop & Systems Tooling',
+                            details:
+                                'KDE Plasma, KWin scripting, Wayland, X11, Tauri, Electron, GTK, Qt (QML), PipeWire, PulseAudio, Krunner, supergfxctl, nbfc',
+                        },
+                        {
+                            label: 'Browser Extensions & Web',
+                            details:
+                                'Manifest V3, WebExtensions API, Chrome Extensions API, Firefox Add-ons, React, TypeScript, Vue, REST APIs',
+                        },
+                        {
+                            label: 'Simulation & Design',
+                            details:
+                                'TypeScript, Node.js, structured world state design, deterministic intent systems, JSON schema modeling',
+                        },
+                        {
+                            label: 'Low Level Development',
+                            details: 'Rust, Cargo, Tokio, Serde, Tauri, egui',
+                        },
+                        {
+                            label: 'Automation & Scripting',
+                            details: 'Python, Selenium, BeautifulSoup, Bash, cron',
+                        },
+                        {
+                            label: 'Hardware/Embedded',
+                            details:
+                                'ESP32, Arduino ecosystem, relays, ACPI/EC interaction, eDP controller boards, UART, I2C',
+                        },
+                        {
+                            label: 'Media Data',
+                            details:
+                                'FFmpeg, FLAC, Opus, AAC, AV1, H.264, H.265, SQLite, vector-based indexing',
+                        },
+                        {
+                            label: 'Frontend & AppDev',
+                            details:
+                                'React, TypeScript, Qt/QML, Tauri, VuePress, REST integration',
+                        },
+                    ].map((skill) => (
+                        <span
+                            key={skill.label}
+                            className="relative px-2 py-1 bg-(--bg-surface) border border-(--border-main) rounded-sm hover:border-(--color-accent) hover:text-(--color-accent) transition-colors cursor-default group/skill"
+                        >
+                            {skill.label}
+                            <span className="pointer-events-none absolute left-1/2 top-0 z-50 hidden w-72 -translate-x-1/2 -translate-y-[120%] rounded-md border border-(--border-main) bg-(--bg-panel) px-3 py-2 text-xs leading-relaxed text-(--text-muted) shadow-lg group-hover/skill:block">
+                                <span className="block font-sketch text-(--text-main) text-sm mb-1">{skill.label}</span>
+                                {skill.details}
+                            </span>
                         </span>
                     ))}
                 </div>
@@ -167,7 +218,7 @@ export function InteractiveSystemOverview() {
                         key={node.id}
                         onClick={() => handleSplit(i)}
                         className={`
-              sketch-border bg-[var(--bg-panel)] p-4 relative group overflow-hidden flex flex-col
+                            sketch-border bg-[var(--bg-panel)] p-4 relative group overflow-visible 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)}
@@ -181,7 +232,7 @@ export function InteractiveSystemOverview() {
                             <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">
+                        <div className="flex-1 overflow-visible custom-scrollbar pr-1">
                             {node.content}
                         </div>
 

src/components/ResumeSection.tsx

@@ -9,7 +9,7 @@ export function ResumeSection() {
                 </h2>
             </div>
 
-            <div className="sketch-border-subtle bg-(--bg-surface) p-6 flex flex-col gap-4">
+            <div className="mt-10 p-5 sketch-border bg-(--color-accent-muted)/5 transform rotate-1">
                 <p className="text-(--text-muted) text-sm font-mono leading-relaxed">
                     Grab the latest snapshot of my experience, projects, and research focus.
                 </p>

src/utils.tsx

@@ -0,0 +1,18 @@
+function deterministicIpValue(ip: string, x: number): number {
+    if (!Number.isInteger(x) || x <= 0) {
+        throw new Error("x must be a positive integer");
+    }
+
+    // fnv1a hash
+    let hash = 0x811c9dc5;
+
+    for (let i = 0; i < ip.length; i++) {
+        hash ^= ip.charCodeAt(i);
+        hash = Math.imul(hash, 0x01000193); // 32b multiply
+    }
+
+    const unsignedHash = hash >>> 0;
+
+    // map to range
+    return (unsignedHash % x) + 1;
+}