// Sections for the full portfolio site — Om Kushwaha (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 TFLite model', 'debugging a WebRTC pipeline', 'pushing to Vercel at midnight', 'teaching the model to stop hallucinating', 'refactoring yesterday’s API', 'shipping a side project', ]; 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 = ['FULLSTACK', 'COMPUTER VISION', 'ML', 'NEXT.JS', 'AI', 'ENGINEERED', 'FULLSTACK', 'COMPUTER VISION', 'ML', 'NEXT.JS', 'AI', 'ENGINEERED']; return (
{/* code rain backdrop */}
{/* META TOP */}
SYS · ONLINE / {now.toLocaleTimeString('en-US', { hour12: false })} IST
RESUME↗ {/* TERMINAL PROMPT (oversized) */}
~ /om ▸ build fullstack_
{/* GIANT EDITORIAL HEADLINE */}

NAME Om Kushwaha
ROLE AI Engineer & Fullstack Developer.
STACK React · Next.js · Node.js · Python
BASED Gujarat, India
{/* 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 items = ['NEXT.JS', 'REACT', 'TYPESCRIPT' , 'POSTGRESQL', 'DOCKER', 'PYTORCH', 'LANGCHAIN', 'RAG', 'MCP', 'N8N', 'PYTHON', 'FASTAPI']; const row = [...items, ...items, ...items]; return (
{row.map((t, i) => ( ● {t} ))}
); } // ─────────────── ABOUT ─────────────── function About() { return (
// shipped 2026 // Remote OK



My work lives at the core of AI engineering, LLM systems, and multi-modal vision models. I ship production-ready AI applications and full-stack platforms — engineered for high performance, zero downtime, and real monetization.

Currently engineering agentic AI workflows, hybrid RAG pipelines, and multi-modal models backed by fast, high-performance products.

{[ { n: 15, suf: '+', l: 'months freelance' }, { n: 40, suf: '%', l: 'Workflow reduction' }, { n: 97, suf: '%', l: 'Workflow Success' }, { n: 10, 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 }) { // OmniVision Pro — webcam + landmark dots if (id === 'omnivision') { return ( {Array.from({ length: 33 }).map((_, i) => { const x = 100 + Math.cos(i / 33 * Math.PI * 2) * 28 + (i % 5 - 2) * 3; const y = 50 + Math.sin(i / 33 * Math.PI * 2) * 18 + (i % 3 - 1) * 3; return ; })} LIVE · MEDIAPIPE · WEBRTC ); } // MyHRTools — dashboard / metrics if (id === 'myhrtools') { return ( {[ [20, 40, 60, '#22c55e'], [45, 25, 75, '#16a34a'], [70, 50, 50, '#22c55e'], [95, 30, 70, '#4ade80'], [120, 45, 55, '#22c55e'], [145, 20, 80, '#16a34a'], [170, 35, 65, '#22c55e'], ].map(([x, y, h, c], i) => ( ))} LIGHTHOUSE 100 · ADSENSE ✓ ); } // TwoFold — realtime social graph if (id === 'twofold') { return ( {[[40,35],[100,25],[160,38],[60,80],[140,75],[100,65]].map(([x,y],i)=>( ))} {['M40,35 L100,25','M100,25 L160,38','M40,35 L60,80','M160,38 L140,75','M60,80 L100,65','M140,75 L100,65'].map((d,i)=>( ))} SOCKET.IO · REAL-TIME ); } return
; } // Abstract animated artwork for "More Projects" cards — keyed by title function MoreProjectArt({ title, idx }) { // ChatBot-AI — message bubbles if (title.includes('ChatBot')) { return ( {[{x:20,y:20,w:120,c:'#3b82f6'},{x:60,y:48,w:100,c:'#22d3ee'},{x:20,y:76,w:110,c:'#3b82f6'}].map((b,i)=>( ))} ~180ms · NLP · REST API ); } // 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('Suryapura Gram Vikas Portal')) { return ( {[[20,22,45,28],[70,22,60,28],[135,22,45,28],[20,56,75,28],[100,56,80,28]].map(([x,y,w,h],i)=>( ))} CIVIC PORTAL · COMMUNITY SERVICES ); } // 6. RokanMitra — AI Civic Assistant & Agentic Workflow if (title.includes('RokanMitra')) { return ( {[[30,50],[90,30],[90,70],[150,50]].map(([x,y],i)=>( ))} {['M 42 50 L 78 30','M 42 50 L 78 70','M 102 30 L 138 50','M 102 70 L 138 50'].map((d,i)=>( ))} AI CIVIC ASSISTANT · LANGCHAIN ); } // 2. MyHRTools — SaaS Metrics & AdSense Dashboard if (title.includes('MyHRTools')) { return ( {[ [20, 40, 60, '#22c55e'], [45, 25, 75, '#16a34a'], [70, 50, 50, '#22c55e'], [95, 30, 70, '#4ade80'], [120, 45, 55, '#22c55e'], [145, 20, 80, '#16a34a'], [170, 35, 65, '#22c55e'], ].map(([x, y, h, c], i) => ( ))} LIGHTHOUSE 100 · ADSENSE ✓ ); } // 3. OmniVision Pro — MediaPipe Landmarks & Camera Stream if (title.includes('OmniVision Pro')) { return ( {Array.from({ length: 33 }).map((_, i) => { const x = 100 + Math.cos(i / 33 * Math.PI * 2) * 28 + (i % 5 - 2) * 3; const y = 50 + Math.sin(i / 33 * Math.PI * 2) * 18 + (i % 3 - 1) * 3; return ( ); })} LIVE · MEDIAPIPE · WEBRTC ); } // Omarchy — terminal lines if (title.includes('Omarchy')) { return ( {[ '$ omarchy --launch', '> menu: [apps]', '> menu: [system]', '> menu: [power]', '$ _', ].map((txt, i) => ( {txt} {i === 4 ? : null} ))} ); } // 4. TwoFold Platform — Real-Time Socket Graph Nodes if (title.includes('TwoFold Platform')) { return ( {[[40,35],[100,25],[160,38],[60,80],[140,75],[100,65]].map(([x,y],i)=>( ))} {['M40,35 L100,25','M100,25 L160,38','M40,35 L60,80','M160,38 L140,75','M60,80 L100,65','M140,75 L100,65'].map((d,i)=>( ))} SOCKET.IO · REAL-TIME AI ); } // 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 →
 ))}
); }*/ // ─────────────── 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 · Om Kushwaha
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, 3)); 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 */}
Om Kushwaha
{/* tagline (mono) */}
The studio practice of OK
{/* main heading — sans + serif italic mix */}

Build the next product, the fullstack way.

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

I spent the last 15+ months inside production web development — from real‑time computer vision to HR SaaS tools that earned Google AdSense approval.

I lead the engineering on every project, backed by the stack I trust: Next.js, React, Node.js, Python, and a growing ML toolkit.

Projects start with a focused sprint. Fast delivery, production quality.

{/* CTA pair */}
Start a chat View projects
{/* tiny availability row */}
Open for work · Gujarat, India
{/* 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 = [ //'Next.js', 'React', 'Node.js', 'TypeScript', 'Python', 'MongoDB', 'LangChain','TensorFlow', 'LLM API Integration', 'Prompt Engineering', 'Scikit-Learn', 'OpenCV', 'MediaPipe', 'Pandas', 'NumPy', 'TFLite', 'Docker','Kubernetes', 'Next.js', 'React', 'Node.js', 'TypeScript', 'Python', 'MongoDB','HTML5', ]; 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 (
◆ OK
// HIRE ME ↗
PROJECTS BLOG ABOUT RESUME ↗ // HIRE ME ↗
Om Kushwaha

AI ENGINEER

// ZERO BLOAT UIs
HIGH-PERFORMANCE LLMs
// I'M OM — AI ENGINEER & FULLSTACK DEV
BUILDING AI AGENTS & RAG PIPELINES WITH
FASTAPI & PYTHON · OPEN TO WORK.
setBoost(true)} onMouseLeave={() => setBoost(false)} >
{row.map((s, i) => ( {s} ))}
); } function PortraitPlaceholder() { // Stylized silhouette — head, headphones/glasses, shoulders return ( ); }