const S = SITE_DATA; // ─────────────── NAV ─────────────── function NavBar({ dark, onToggleDark }) { const [scrolled, setScrolled] = React.useState(false); React.useEffect(() => { const on = () => setScrolled(window.scrollY > 60); window.addEventListener('scroll', on, { passive: true }); return () => window.removeEventListener('scroll', on); }, []); return ( ); } // ─────────────── HERO ─────────────── function Hero({ dark }) { const y = useScrollY(); const p = Math.min(1, y / 600); // mouse-reactive tilt on the content block (rAF-throttled to avoid re-render storm) const [tilt, setTilt] = React.useState({ x: 0, y: 0 }); React.useEffect(() => { let raf = 0, tx = 0, ty = 0, pending = false; const on = (e) => { const w = window.innerWidth, h = window.innerHeight; tx = (e.clientX / w - 0.5) * 8; ty = (e.clientY / h - 0.5) * 8; if (!pending) { pending = true; raf = requestAnimationFrame(() => { pending = false; setTilt({ x: tx, y: ty }); }); } }; window.addEventListener('mousemove', on); return () => { window.removeEventListener('mousemove', on); cancelAnimationFrame(raf); }; }, []); // live clock const [now, setNow] = React.useState(() => new Date()); React.useEffect(() => { const id = setInterval(() => setNow(new Date()), 1000); return () => clearInterval(id); }, []); // rotating "now running" phrases — matches the figurines on screen const RUNNING_PHRASES = [ 'building scalable web applications', 'designing REST APIs', 'optimizing backend performance', 'solving complex engineering problems', 'developing full-stack solutions', 'shipping production-ready features', ]; const [phraseIdx, setPhraseIdx] = React.useState(0); React.useEffect(() => { const id = setInterval(() => setPhraseIdx((i) => (i + 1) % RUNNING_PHRASES.length), 2800); return () => clearInterval(id); }, []); // word strip const WORDS = [ 'FULL STACK', 'SOFTWARE', 'REACT', 'NODE.JS', 'PYTHON', 'TYPESCRIPT', 'API DEVELOPMENT', 'SYSTEM DESIGN', 'FULL STACK', 'SOFTWARE', 'DOCKER', 'OPEN SOURCE' ]; return (
{/* code rain backdrop */}
{/* META TOP */}
SYS · ONLINE / {now.toLocaleTimeString('en-US', { hour12: false })} IST
RESUME↗ {/* TERMINAL PROMPT (oversized) */}
~ /rahul ▸ build agentic_
{/* GIANT EDITORIAL HEADLINE */}

NAME Rahul Raj
ROLE {S.role}
STACK {S.stack}
BASED {S.location}
{/* WORD STRIP — bottom marquee */}
{[...WORDS, ...WORDS].map((w, i) => ( ✦{w} ))}
{/* BOTTOM-RIGHT HUD */}
NOW {RUNNING_PHRASES[phraseIdx]}
SCROLL
); } // CodeRain — falling glyph columns (canvas-free, pure CSS) function CodeRain() { const columns = 28; const glyphs = '01∆◆◇○●▢▣▲▼←→↑↓§¶≈≠≡∞∇∂'.split(''); return (
{Array.from({ length: columns }).map((_, i) => { const col = []; const len = 14 + (i % 4) * 4; for (let j = 0; j < len; j++) { col.push(glyphs[(i * 13 + j * 7) % glyphs.length]); } return (
{col.map((g, j) => ( {g} ))}
); })}
); } // ─────────────── MARQUEE ─────────────── function Marquee() { const items = [ 'React', 'Next.js', 'Node.js', 'Express.js', 'TypeScript', 'JavaScript', 'Python', 'PHP', 'MongoDB', 'PostgreSQL', 'MySQL', 'Docker', 'Git', 'Linux', 'REST APIs', 'OpenAI API', 'Tailwind CSS', 'AWS' ]; const row = [...items, ...items, ...items]; return (
{row.map((t, i) => ( ● {t} ))}
); } // ─────────────── ABOUT ─────────────── function About() { return (
// shipped 2026 // remote ok



Software engineer specializing in full-stack development and AI integration. I craft scalable applications that leverage modern technologies to solve real-world problems.

Currently building scalable web applications, designing robust backend systems, and crafting intuitive user experiences with clean, maintainable code

{[ { n: 20, suf: '+', l: 'API integrations' }, { n: 40, suf: '%', l: 'Manual work cut' }, { n: 98, suf: '%', l: 'Workflow success' }, { n: 5, suf: '', l: 'Projects shipped' }, ].map((s, i) => (
{s.l}
 ))}
); } function SectionHeader({ num, label, right, bleed, bleedStyle }) { // bleed: text to render as a huge type-bleed label above the section header // bleedStyle: 'solid' | 'outline' return ( <> {bleed ? (
{bleed}
) : null}
{num}
{right}
); } function Stamp({ children, style }) { return
{children}
; } // ─────────────── FEATURED WORK ─────────────── function Featured() { const [active, setActive] = React.useState(0); const p = S.featuredProjects; return (
all projects →} />
{p.map((proj, i) => ( setActive(i)} active={active === i} /> ))}
); } function ProjectRow({ p, i, onHover, active }) { const [ref, shown] = useReveal({ threshold: 0.2 }); return (
0{i + 1}
{p.period}

{p.title}

{p.tagline}
{p.tags.slice(0, 4).join(' · ')}
 ); } // Abstract animated artwork per project id function ProjectArtwork({ id }) { if (id === 'mesh') { return ( {/* Background */} {/* Connection Lines */} {[ "M40 35 L100 25", "M100 25 L160 40", "M40 35 L65 82", "M65 82 L135 90", "M135 90 L160 40", "M100 25 L100 60", "M100 60 L135 90", ].map((d, i) => ( ))} {/* Network Nodes */} {[ [40, 35], [100, 25], [160, 40], [65, 82], [100, 60], [135, 90], ].map(([x, y], i) => ( ))} {/* Floating chat bubbles */} {[ [78, 50], [120, 72], [82, 95], ].map(([x, y], i) => ( ))} ); } if (id === 'paperbox') { return ( {/* Background */} {/* Connecting Lines */} {[ "M100 60 L45 30", "M100 60 L155 30", "M100 60 L45 92", "M100 60 L155 92", ].map((d, i) => ( ))} {/* Center Folder */} {/* Floating Paper Cards */} {[ [32, 18], [150, 18], [32, 78], [150, 78], ].map(([x, y], i) => ( {/* Text lines */} ))} {/* Sparkles */} {[ [66, 26], [132, 24], [66, 95], [132, 95], ].map(([x, y], i) => ( ))} ); } if (id === 'lunara') { return ( {/* Space Background */} {/* Moon */} {/* Craters */} {/* Orbit */} {/* Orbiting Star */} {/* Constellation */} {[ [130, 28], [150, 42], [172, 26], [164, 70], [184, 82], ].map(([x, y], i) => ( ))} {/* Shooting Star */} {/* Twinkling Stars */} {[ [26, 22], [90, 20], [112, 94], [178, 56], [42, 96], [186, 18], ].map(([x, y], i) => ( ))} ); } if (id === "pantsnpleats") { return ( {/* Background */} {/* Animated Connection Lines */} {[ "M100 60 L52 28", "M100 60 L148 28", "M100 60 L52 92", "M100 60 L148 92", ].map((d, i) => ( ))} {/* Center Commerce Hub */} {/* Cart */} {/* Product Card */} {/* Wishlist */} {/* Payment */} {/* Analytics */} {/* Floating Particles */} {[ [28, 20], [170, 24], [174, 98], [24, 96], [178, 58], [22, 58], ].map(([x, y], i) => ( ))} {/* Rotating Ring */} ); } return
; } // Abstract animated artwork for "More Projects" cards — keyed by title function MoreProjectArt({ title, idx }) { // Deep Facial Verification — siamese face match grid if (title.includes('Facial')) { return ( {/* two face boxes with feature points */} {[40, 130].map((cx, k) => ( {Array.from({ length: 8 }).map((_, i) => { const px = cx + 6 + (i % 4) * 9; const py = 38 + Math.floor(i / 4) * 18 + (i % 3) * 4; return ; })} ))} {/* connecting lines (siamese) */} {Array.from({ length: 5 }).map((_, i) => ( ))} SIM 0.97 ); } if (title.includes('Weather App')) { return ( {/* Background */} {/* Cloud */} {/* Rain */} {[104, 116, 128].map((x, i) => ( ))} {/* Location Pin */} {/* Floating Weather Particles */} {[ [35, 90], [65, 82], [145, 25], [170, 55], ].map(([x, y], i) => ( ))} ); } if (title.includes("MY")) { return ( {/* Background */} {/* Orbital Rings */} {/* Moon */} {/* Orbiting Celestial Object */} {/* Constellation */} {[30,48,70,86,72].map((x, i) => { const y = [30,42,26,38,56][i]; return ( ); })} {/* Shooting Star */} {/* Twinkling Stars */} {[ [18,18], [52,92], [128,20], [176,42], [168,96], [22,82], [182,16], [146,86], ].map(([x,y], i) => ( ))} ); } if (title.includes('Disaster')) { return ( {[20, 35, 50].map((r, i) => ( ))} {/* sweep line */} {/* incident dots */} {[[70, 40], [140, 80], [120, 35]].map(([x, y], i) => ( ))} ); } // Omarchy — terminal lines if (title.includes('Omarchy')) { return ( {[ '$ omarchy --launch', '> menu: [apps]', '> menu: [system]', '> menu: [power]', '$ _', ].map((txt, i) => ( {txt} {i === 4 ? : null} ))} ); } // — abstract typography portfolio if (title.includes('rahul')) { return ( rahul rahul // PERSONAL · 2026 ); } // n8n Workflow — node graph if (title.includes('n8n')) { return ( {/* nodes */} {[[30, 60], [80, 35], [80, 85], [130, 60], [170, 60]].map(([x, y], i) => ( ))} {/* connecting wires */} {[ ['M 40 60 Q 60 60 70 35', 0], ['M 40 60 Q 60 60 70 85', .3], ['M 90 35 Q 110 35 120 60', .6], ['M 90 85 Q 110 85 120 60', .9], ['M 140 60 L 160 60', 1.2], ].map(([d, delay], i) => ( ))} ); } // RAG Playground — document chunks + retrieval if (title.includes('EDU')) { return ( {/* document chunks */} {Array.from({ length: 12 }).map((_, i) => { const col = i % 4; const row = Math.floor(i / 4); const x = 20 + col * 22; const y = 22 + row * 24; const highlighted = i === 2 || i === 6 || i === 9; return ( {highlighted ? : null} {/* lines inside chunk */} ); })} {/* query node */} Q {/* retrieval lines */} {[[60, 30], [128, 54], [82, 78]].map(([x, y], i) => ( ))} ); } // fallback — animated gradient with glyph (current behavior) return ( {title.charAt(0)} ); } // ─────────────── ALL PROJECTS GRID ─────────────── function AllProjects() { return (
{S.otherProjects.length + S.featuredProjects.length} total} />
{S.otherProjects.map((p, i) => (
{p.period}
{p.title}
{p.tagline}
{p.tags.slice(0, 3).map(t => {t})}
))}
); } // ─────────────── EXPERIENCE ─────────────── function CompanyLogo({ src, name }) { const [ok, setOk] = React.useState(true); const initials = name.split(/\s+/).slice(0, 2).map(w => w[0]).join('').toUpperCase(); if (!src || !ok) { return
{initials}
; } return {`${name} setOk(false)} />; } function Experience() { return (
{S.experience.map((e, i) => { const hasRoles = Array.isArray(e.roles) && e.roles.length > 0; return (
{e.period}

{e.company}

{e.type}{e.location ? ` · ${e.location}` : ''}
{hasRoles ? (
    {e.roles.map((r, j) => (

  • {r.role}

    {r.period}
    {r.highlights && r.highlights.length > 0 && (
      {r.highlights.slice(0, 5).map((h, k) =>
    • {h}
      • )}
    )}
    • ))}
) : ( <>

{e.role}

    {(e.highlights || []).slice(0, 5).map((h, j) =>
  • {h}
    • )}
)} {e.tags && e.tags.length > 0 && (
{e.tags.map(t => {t})}
)}
); })}
); } // ─────────────── SKILLS ─────────────── function Skills() { const groups = Object.entries(S.skills); return (
// production-tested
{groups.map(([group, items], i) => (
{group}
{items.map(it => ( {it} ))}
))}
); } // ─────────────── WRITING ─────────────── function Writing() { return (
all posts →} />
{S.posts.map((p, i) => ( {p.isNew && NEW}
{p.date}
{p.title}
{p.excerpt}
read →
 ))}
); } // ─────────────── EDUCATION + CERTS ─────────────── function EduCerts() { return (
Education
{S.education.map((e, i) => (
{e.period}
{e.degree}
{e.school}
{e.note}
 ))}
Certifications
{S.certifications.map((c, i) => (
{c.date}
{c.title}
{c.issuer}
 ))}
); } // ─────────────── CONTACT ─────────────── function Contact() { return (
08 Contact



→
Elsewhere
{S.socials.map((s, i) => ( {s.label} {s.url.replace('https://', '').replace('mailto:', '')} ↗ ))}
© 2026 · {S.name}
Built with care · coffee · ◆
); } // ─────────────── HERO V6 — Vortex / Viktor Oddy style ─────────────── function HeroV6() { // marquee thumbs — pulled from your project tags / featured projects const PROJECTS = S.featuredProjects.concat(S.otherProjects.slice(0, 5)); const THUMBS = PROJECTS.map((p, i) => ({ title: p.title, tags: (p.tags || []).slice(0, 3).join(' · '), hue: [22, 260, 188, 12, 320, 80, 200, 40][i % 8], glyph: ['◆','◇','○','●','▲','▼','■','□'][i % 8], })); const row = [...THUMBS, ...THUMBS]; // parallax for the social/avatar block const [scrollY, setScrollY] = React.useState(0); React.useEffect(() => { let raf = 0; const on = () => { cancelAnimationFrame(raf); raf = requestAnimationFrame(() => setScrollY(window.scrollY)); }; window.addEventListener('scroll', on, { passive: true }); return () => { window.removeEventListener('scroll', on); cancelAnimationFrame(raf); }; }, []); return (
{/* Logo / wordmark */}
Narra Reddy
{/* tagline (mono) */}
The studio practice of NSKR
{/* main heading — sans + serif italic mix */}

Build the next wave, the agentic way.

{/* Body copy — three short paragraphs */}

I spent the last two years inside production AI workflows — from real‑time pose detection to e‑commerce automations that saved teams 15+ hours every week.

The studio is deliberately small. I lead the engineering on every project, backed by the open‑source tooling I trust: n8n, LangChain, Python, and a pile of MCP tools.

Projects start at a focused two‑week sprint.

{/* CTA pair */}
Start a chat View projects
{/* tiny availability row */}
Open for projects · {S.location}
{/* infinite marquee strip */}
{row.map((t, i) => (
{t.glyph}
{t.title} {t.tags}
))}
{/* bottom-left mini stat block */}
7+
years writing
production code
); } Object.assign(window, { NavBar, Hero, HeroV6, HeroV7, Marquee, About, Featured, AllProjects, Experience, Skills, Writing, EduCerts, Contact }); // ─────────────── HERO V7 — Olivia/Vortex bold orange ─────────────── function HeroV7() { const SKILLS = [ 'React', 'Node.js', 'MongoDB', 'OpenAI', 'React Native', 'TypeScript', 'PostgreSQL', 'Socket.IO', 'Python', 'MySQL', 'Docker', 'AWS', 'Express.js', 'Ollama', 'Git', 'JavaScript', ]; const row = [...SKILLS, ...SKILLS]; const [boost, setBoost] = React.useState(false); const [videoOk, setVideoOk] = React.useState(true); const [menuOpen, setMenuOpen] = React.useState(false); React.useEffect(() => { document.body.style.overflow = menuOpen ? 'hidden' : ''; return () => { document.body.style.overflow = ''; }; }, [menuOpen]); const closeMenu = () => setMenuOpen(false); // staged intro: 0=initial, 1=headline, 2=watermark, 3=portrait, 4=ambient (mono blocks) const [stage, setStage] = React.useState(0); React.useEffect(() => { const t1 = setTimeout(() => setStage(1), 250); // headline rises const t2 = setTimeout(() => setStage(2), 1050); // watermark blooms const t3 = setTimeout(() => setStage(3), 1850); // portrait slides in const t4 = setTimeout(() => setStage(4), 2350); // mono blocks + marquee return () => { clearTimeout(t1); clearTimeout(t2); clearTimeout(t3); clearTimeout(t4); }; }, []); // JS-driven marquee — integer-pixel positions per frame = no subpixel shimmer const trackRef = React.useRef(null); const boostRef = React.useRef(false); React.useEffect(() => { boostRef.current = boost; }, [boost]); React.useEffect(() => { const track = trackRef.current; if (!track) return; let raf = 0; let pos = 0; // current translateX in px (negative) let halfWidth = 0; // width of one duplicated half let lastT = performance.now(); const baseSpeed = 60; // px/sec const boostSpeed = 160; // px/sec const measure = () => { halfWidth = track.scrollWidth / 2; }; measure(); const ro = new ResizeObserver(measure); ro.observe(track); const tick = (now) => { const dt = Math.min(0.05, (now - lastT) / 1000); lastT = now; const speed = boostRef.current ? boostSpeed : baseSpeed; pos -= speed * dt; if (halfWidth > 0 && -pos >= halfWidth) pos += halfWidth; track.style.transform = `translate3d(${Math.round(pos)}px, 0, 0)`; raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => { cancelAnimationFrame(raf); ro.disconnect(); }; }, []); return (
◆ RAHUL
// HIRE ME ↗
PROJECTS BLOG ABOUT RESUME ↗ // HIRE ME ↗
Rahul

DEVELOPER

// AUTOMATIONS THAT SHIP
WHILE YOU SLEEP
// I'M RAHUL — A SOFTWARE DEVELOPER
BUILDING SCALABLE APPLICATIONS
· OPEN TO PROJECTS.
setBoost(true)} onMouseLeave={() => setBoost(false)} >
{row.map((s, i) => ( {s} ))}
); } function PortraitPlaceholder() { // Stylized silhouette — head, headphones/glasses, shoulders return ( ); }