// Sections for the full portfolio site — Narra Suryakoushik Reddy (nskr.dev) // Premium cinematic feel, smooth transitions, dark-first with light toggle. 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 = [ 'fine-tuning a RAG pipeline', 'wiring up an MCP tool', 'chasing a bug through 14 n8n nodes', 'teaching an agent to stop apologizing', 'refactoring yesterday\u2019s prompt', 'shipping a side quest', ]; 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 = ['AGENTIC', 'AUTOMATION', 'RAG', 'PIPELINES', 'AI', 'ENGINEERED', 'AGENTIC', 'AUTOMATION', 'RAG', 'PIPELINES', 'AI', 'ENGINEERED']; return (
{/* code rain backdrop */}
{/* META TOP */}
SYS · ONLINE / {now.toLocaleTimeString('en-US', { hour12: false })} IST
RESUME↗ {/* TERMINAL PROMPT (oversized) */}
~ /nskr ▸ build agentic_
{/* GIANT EDITORIAL HEADLINE */}

NAME Narra Suryakoushik Reddy
ROLE {S.role}
STACK n8n · LangChain · Python · RAG
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 = ['n8n', 'LangChain', 'Python', 'RAG', 'MCP', 'FastAPI', 'React', 'PyTorch', 'AWS', 'Docker', 'PostgreSQL', 'Redis', 'TypeScript']; const row = [...items, ...items, ...items]; return (
{row.map((t, i) => ( ● {t} ))}
); } // ─────────────── ABOUT ─────────────── function About() { return (
// shipped 2024 // remote ok



My work lives at the intersection of LLMs, automation, and real-world infrastructure. I turn messy manual workflows into reliable agentic systems — the kind that run while teams sleep.

Currently exploring RAG pipelines, MCP tools, and the craft of making AI agents feel less like demos and more like dependable teammates.

{[ { n: 20, suf: '+', l: 'API integrations' }, { n: 40, suf: '%', l: 'Manual work cut' }, { n: 98, suf: '%', l: 'Workflow success' }, { n: 16, 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 === 'llm-council') { return ( {[ [50, 40, '#a78bfa'], [100, 30, '#22d3ee'], [150, 42, '#f97316'], [100, 80, '#f43f5e'], ].map(([x, y, c], i) => ( ))} ); } if (id === 'dance-pose') { return ( {Array.from({ length: 33 }).map((_, i) => { const x = 100 + Math.cos(i / 33 * Math.PI * 2) * 40 + (i % 7 - 3) * 5; const y = 60 + Math.sin(i / 33 * Math.PI * 2) * 28 + (i % 5 - 2) * 4; return ; })} ); } if (id === 'arise') { return ( {Array.from({ length: 14 }).map((_, i) => ( ))} 96% MATCH ); } 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 ); } // Autonomous Disaster Response Agent — radar pulse 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} ))} ); } // nskr.me — abstract typography portfolio if (title.includes('nskr')) { return ( nskr nskr // PERSONAL · 2025 ); } // 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('RAG')) { 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 = [ 'n8n', 'LangChain', 'Python', 'RAG', 'MCP', 'FastAPI', 'PyTorch', 'TensorFlow', 'Docker', 'AWS', 'LangGraph', 'OpenCV', 'Redis', 'PostgreSQL', 'TypeScript', 'React', 'Bedrock', 'Ollama', ]; const row = [...SKILLS, ...SKILLS]; const [boost, setBoost] = React.useState(false); const [videoOk, setVideoOk] = React.useState(true); // 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 (
◆ NSKR
// HIRE ME ↗
Reddy

AI ENGINEER

// AUTOMATIONS THAT SHIP
WHILE YOU SLEEP
// I'M REDDY — AN AI AUTOMATION ENGINEER
BUILDING AGENTIC SYSTEMS WITH n8n,
LANGCHAIN, PYTHON · OPEN TO PROJECTS.
setBoost(true)} onMouseLeave={() => setBoost(false)} >
{row.map((s, i) => ( {s} ))}
); } function PortraitPlaceholder() { // Stylized silhouette — head, headphones/glasses, shoulders return ( ); }