// main.jsx — RUNTIME · Intiser Ahmed // On-device inference console portfolio const { useState, useMemo, useEffect, useRef } = React; /* ───── Icons ───── */ const I = { arrow: (s=14) => , ext: (s=12) => , plus: (s=14) => , dl: (s=13) => , list: (s=12) => , grid: (s=12) => , img: (s=26) => , gh: (s=15) => , li: (s=15) => , mail: (s=14) => , }; const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "mode": "paper", "signal": "#c8f24e", "density": "comfortable", "view": "gallery" }/*EDITMODE-END*/; const SIGNALS = ["#c8f24e", "#3fd9d2", "#ff8a3d", "#e85aa0"]; const statusCls = (s) => "s-" + s; /* reveal-on-scroll hook */ function useReveal() { useEffect(() => { const els = document.querySelectorAll("[data-reveal]"); const io = new IntersectionObserver((ents) => { ents.forEach(e => { if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); } }); }, { threshold: 0.12 }); els.forEach(el => io.observe(el)); return () => io.disconnect(); }, []); } /* ───── Status bar ───── */ function StatusBar() { const [clock, setClock] = useState(""); useEffect(() => { const tick = () => { const d = new Date(); const t = d.toLocaleTimeString("en-US", { hour12: false, timeZone: "America/New_York" }); setClock(t + " EST"); }; tick(); const id = setInterval(tick, 1000); return () => clearInterval(id); }, []); return (
IA INTISER AHMED // runtime
STATUS: AVAILABLE FOR HIRE · {clock}
Work Career Contact {I.dl(12)} Résumé
); } /* ───── Graph background ───── */ function GraphBg() { const ref = useRef(null); useEffect(() => { const el = ref.current; if (!el || typeof ForceGraph3D === 'undefined') return; const sig = () => getComputedStyle(document.documentElement).getPropertyValue('--signal').trim() || '#c8f24e'; // LEFT side — Mobile (iOS, Android, Flutter, macOS) on a left arc // RIGHT side — AI/Backend/Cloud/Web/Security on a right arc const MOBILE = [ { label: "iOS", subs: ["GCD · KVO · Memory Mgmt", "Metal GPU · Kernel Opt.", "Core Data Concurrency"] }, { label: "Android", subs: ["Kotlin Coroutines · Flow", "Jetpack Compose", "Kotlin Autofill Service"] }, { label: "Flutter", subs: ["Dart Isolates", "Platform Channels · FFI", "Riverpod · Isar"] }, { label: "macOS", subs: ["AppKit · NSWindow Layers", "SwiftData · Spotlight", "Menu-bar Agent · FSEvents"] }, ]; const AI = [ { label: "AI · ML", subs: ["CoreML · ONNX Conversion", "On-device LLM Inference", "RAG · Fine-tuning"] }, { label: "Backend", subs: ["Go · gRPC · Protobuf", "Postgres · CQRS · DynamoDB", "REST · WebSockets · OAuth2"] }, { label: "Cloud · Infra", subs: ["AWS · DynamoDB · Lambda", "Supabase · Postgres · RLS", "Cloudflare R2 · CDN · Edge Fn"] }, { label: "Web", subs: ["Next.js · React · TypeScript", "FastAPI · Node · WebSockets", "CI/CD · Xcode Cloud · Fastlane"] }, { label: "Security", subs: ["E2EE · AtSign Protocol", "WebRTC · Opus Codec", "Zero-Knowledge · OAuth2 · Autofill"] }, { label: "AI Edge Compute", subs: ["llama.cpp · GGUF Q4_K_M", "Metal MPS · Vulkan Compute", "INT4 Quant · KV-cache · Speculative Decode"] }, ]; const CY = 85; const rx = 90; const ry = 62; const rz = 55; const tilt = Math.PI / 5; const Y_FLOOR = 38; const allNodes = []; const allLinks = []; let id = 0; function placeGroup(stacks, aStart, aEnd) { const ids = []; stacks.forEach((stack, i) => { const a = aStart + (i / Math.max(stacks.length - 1, 1)) * (aEnd - aStart); const px = rx * Math.cos(a); const py = CY + ry * Math.sin(a) * Math.cos(tilt); const pz = rz * Math.sin(a) * Math.sin(tilt); const parentId = id++; ids.push(parentId); allNodes.push({ id: parentId, label: stack.label, val: 10, isParent: true, fx: px, fy: py, fz: pz }); const outX = px, outY = py - CY, outZ = pz; const len = Math.sqrt(outX**2 + outY**2 + outZ**2) || 1; const nx = outX/len, ny = outY/len, nz = outZ/len; const perpX = -nz, perpZ = nx; const subFan = [ { d: 26, p: 0, u: 18 }, { d: 24, p: 20, u: -7 }, { d: 24, p: -20, u: -7 }, ]; stack.subs.forEach((sub, j) => { const off = subFan[j]; const subId = id++; allNodes.push({ id: subId, label: sub, val: 2, isParent: false, fx: px + nx * off.d + perpX * off.p, fy: Math.max(Y_FLOOR, py + ny * off.d + off.u), fz: pz + nz * off.d + perpZ * off.p, }); allLinks.push({ source: parentId, target: subId }); }); }); // connect adjacent parents within the group ids.forEach((pid, i) => { if (i < ids.length - 1) allLinks.push({ source: pid, target: ids[i + 1] }); }); return ids; } // Left arc: mobile nodes span a = 0.75π → 1.25π (left half) const leftIds = placeGroup(MOBILE, Math.PI * 0.75, Math.PI * 1.25); // Right arc: AI nodes span a = -0.35π → 0.35π (right half) const rightIds = placeGroup(AI, -Math.PI * 0.35, Math.PI * 0.35); // Bridge the two groups at top and bottom to frame the photo allLinks.push({ source: leftIds[0], target: rightIds[rightIds.length - 1] }); allLinks.push({ source: leftIds[leftIds.length - 1], target: rightIds[0] }); // Reveal sequence: parent then its 3 subs, then next parent, etc. // allNodes is already ordered [parent0, sub0a, sub0b, sub0c, parent1, …] const w = el.offsetWidth || window.innerWidth; const h = el.offsetHeight || window.innerHeight * 0.88; const Graph = new ForceGraph3D(el) .backgroundColor('rgba(0,0,0,0)') .showNavInfo(false) .enableNodeDrag(false) .enableNavigationControls(true) .nodeVal(n => n.val) .nodeLabel(n => n.label) .nodeColor(() => sig()) .nodeOpacity(0.9) .nodeRelSize(3.5) .linkColor(() => sig()) .linkOpacity(0.2) .linkWidth(0.8) .d3AlphaDecay(0.018) .d3VelocityDecay(0.35) .width(w) .height(h) .cameraPosition({ x: 0, y: 20, z: 230 }, { x: 0, y: CY, z: 0 }) .graphData({ nodes: [], links: [] }); const controls = Graph.controls(); if (controls) { controls.enableZoom = false; controls.enablePan = false; controls.target.set(0, CY, 0); controls.update(); } // Intercept wheel before OrbitControls — forward to page scroll const canvas = Graph.renderer().domElement; const onWheel = (e) => { e.stopImmediatePropagation(); window.scrollBy(0, e.deltaY); }; canvas.addEventListener('wheel', onWheel, { capture: true }); // ── 2D label overlay ── // Project each node's 3D world position → 2D screen coords each frame // and draw text directly on a canvas overlay. No external library needed. const lc = document.createElement('canvas'); lc.style.cssText = 'position:absolute;inset:0;pointer-events:none;z-index:2;'; el.appendChild(lc); const lx = lc.getContext('2d'); const dpr = Math.min(window.devicePixelRatio || 1, 2); function resizeLc() { lc.width = el.offsetWidth * dpr; lc.height = el.offsetHeight * dpr; lc.style.width = el.offsetWidth + 'px'; lc.style.height = el.offsetHeight + 'px'; lx.setTransform(dpr, 0, 0, dpr, 0, 0); } resizeLc(); // Replicates THREE.Vector3.applyMatrix4 + .project(camera) without needing THREE global function projectNode(wx, wy, wz) { const camera = Graph.camera(); const cw = el.offsetWidth, ch = el.offsetHeight; function applyM4(x, y, z, m) { const e = m.elements; const w = 1 / (e[3]*x + e[7]*y + e[11]*z + e[15]); return [(e[0]*x+e[4]*y+e[8]*z+e[12])*w, (e[1]*x+e[5]*y+e[9]*z+e[13])*w, (e[2]*x+e[6]*y+e[10]*z+e[14])*w]; } let [x,y,z] = applyM4(wx, wy, wz, camera.matrixWorldInverse); [x,y,z] = applyM4(x, y, z, camera.projectionMatrix); return { sx: (x+1)/2*cw, sy: (-y+1)/2*ch, behind: z > 1 }; } // Read both ink and signal once per frame so they respond to theme changes const css = () => getComputedStyle(document.documentElement); const ink = () => css().getPropertyValue('--ink').trim() || '#141611'; const ink2 = () => css().getPropertyValue('--ink-2').trim() || '#36392f'; const bgCol = () => css().getPropertyValue('--bg').trim() || '#e9e7df'; let labelAlpha = 0; let labelRaf; function drawLabels() { const cw = el.offsetWidth, ch = el.offsetHeight; lx.clearRect(0, 0, cw, ch); Graph.graphData().nodes.forEach(n => { const { sx, sy, behind } = projectNode(n.x ?? n.fx ?? 0, n.y ?? n.fy ?? 0, n.z ?? n.fz ?? 0); if (behind || sx < 0 || sx > cw || sy < 0 || sy > ch) return; const fs = n.isParent ? 11 : 7; lx.font = `${n.isParent ? '600' : '400'} ${fs}px "Geist Mono",monospace`; lx.textAlign = 'center'; lx.textBaseline = 'middle'; // pill bg for legibility over the 3D scene const tw = lx.measureText(n.label).width; lx.globalAlpha = 0.72 * labelAlpha; lx.fillStyle = bgCol(); lx.fillRect(sx - tw/2 - 5, sy - fs/2 - 3, tw + 10, fs + 6); lx.globalAlpha = (n.isParent ? 1 : 0.85) * labelAlpha; lx.fillStyle = n.isParent ? ink() : ink2(); lx.fillText(n.label, sx, sy); }); labelRaf = requestAnimationFrame(drawLabels); } drawLabels(); // All nodes start at the ring centre and burst outward to their // fx/fy/fz positions — the force simulation drives the flight. // Seed each node near the centre so motion is visible. const launchNodes = allNodes.map(n => ({ ...n, x: (Math.random() - 0.5) * 8, y: CY + (Math.random() - 0.5) * 8, z: (Math.random() - 0.5) * 8, })); Graph.nodeOpacity(0); labelAlpha = 0; Graph.graphData({ nodes: launchNodes, links: allLinks }); // Fade in while nodes are in flight let t = 0; const fadeIn = setInterval(() => { t += 16; const p = Math.min(1, t / 600); const eased = 1 - Math.pow(1 - p, 3); Graph.nodeOpacity(eased * 0.9); labelAlpha = eased; if (p >= 1) clearInterval(fadeIn); }, 16); // Auto-orbit pivoting around the photo let angle = 0, orbiting = true; const orbit = setInterval(() => { if (!orbiting) return; angle += Math.PI / 550; Graph.cameraPosition( { x: 38 * Math.sin(angle), y: 18 * Math.sin(angle * 0.4), z: 230 }, { x: 0, y: CY, z: 0 }, 0 ); }, 16); // Float: nudge each parent node with a unique sine wave so the // graph breathes and feels 3D even when the camera isn't moving. let floatT = 0; const floatNodes = allNodes.filter(n => n.isParent); const floatPhases = floatNodes.map((_, i) => (i / floatNodes.length) * Math.PI * 2); const floatInterval = setInterval(() => { floatT += 0.032; // Mutate positions directly — never call graphData() setter here, // that restarts the simulation every tick and causes label flicker. floatNodes.forEach((fn, idx) => { const ph = floatPhases[idx]; fn.x = fn.fx + Math.sin(floatT + ph) * 5.5; fn.y = fn.fy + Math.cos(floatT * 0.7 + ph) * 4.2; fn.z = fn.fz + Math.sin(floatT * 0.5 + ph + 1) * 5.0; }); }, 32); const onDown = () => { orbiting = false; }; const onUp = () => { orbiting = true; }; el.addEventListener('pointerdown', onDown); el.addEventListener('pointerup', onUp); const onResize = () => { Graph.width(el.offsetWidth).height(el.offsetHeight); resizeLc(); }; window.addEventListener('resize', onResize); return () => { clearInterval(fadeIn); clearInterval(orbit); clearInterval(floatInterval); cancelAnimationFrame(labelRaf); el.removeEventListener('pointerdown', onDown); el.removeEventListener('pointerup', onUp); window.removeEventListener('resize', onResize); if (canvas) canvas.removeEventListener('wheel', onWheel, { capture: true }); try { Graph._destructor && Graph._destructor(); } catch (_) {} el.innerHTML = ''; }; }, []); return