// Page sections const { useState: useS, useEffect: useE, useRef: useR, useMemo: useM } = React; // ========== LOADING SCREEN ========== const LoadingScreen = ({ onComplete }) => { const [count, setCount] = useS(0); const [word, setWord] = useS(0); const words = ["Design", "Build", "Verify", "Ship"]; useE(() => { const start = performance.now(); const dur = 2400; let raf; const tick = (t) => { const p = Math.min((t - start) / dur, 1); setCount(Math.floor(p * 100)); if (p < 1) raf = requestAnimationFrame(tick); else setTimeout(onComplete, 350); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, [onComplete]); useE(() => { const id = setInterval(() => setWord((w) => (w + 1) % words.length), 700); return () => clearInterval(id); }, []); return (
Booting · Portfolio Build 2026.04
SB · Ann Arbor, MI
{words.map((w, i) => ( {w}. ))}
{String(count).padStart(3, "0")}
); }; // ========== HERO ========== const Hero = ({ onNav, onContact }) => { const roles = ["RTL Designer", "Hardware Engineer", "5G PHY Architect", "GPU Systems Hacker", "Founder"]; const [r, setR] = useS(0); useE(() => { const id = setInterval(() => setR((x) => (x + 1) % roles.length), 2000); return () => clearInterval(id); }, []); return (
Portfolio · Vol. 2026

Swapnil
Bhole .

A {roles[r]}{" "} working at the seam of silicon, signals, and systems.

Master’s student in ECE at the University of Michigan. Six years at C-DOT designing 5G/LTE systems from RTL to firmware. Four IEEE publications.

onNav("work")}>See works Reach out Download CV ↓
{/* Tech stat strip */}
{[ { k: "BASE", v: "Ann Arbor" }, { k: "FOCUS", v: "Hardware · RTL · ML Sys" }, { k: "PUBS", v: "4 IEEE" }, ].map((c) => (
{c.k}
{c.v}
))}
); }; // ========== PROJECT CARD ========== const ProjectCard = ({ p, onOpen, span }) => { const Visual = VISUALS[p.visual] || VISUALS.rtl; const [hover, setHover] = useS(false); const aspect = span === "lg" ? "16 / 9" : span === "md" ? "4 / 3" : "1 / 1"; return ( ); }; // ========== WORKS SECTION ========== const Works = ({ onOpen }) => { const [filter, setFilter] = useS("all"); const filters = [ { id: "all", label: "All" }, { id: "Computer Architecture", label: "Architecture" }, { id: "GPU / ML Systems", label: "GPU / ML" }, { id: "5G / FPGA / SoC", label: "5G / RTL" }, { id: "Wireless / ML", label: "Wireless" }, { id: "Embedded / IoT", label: "Embedded" }, { id: "Founder · Semifinalist", label: "Founder" }, ]; const projects = filter === "all" ? PROJECTS : PROJECTS.filter((p) => p.tag === filter); // For bento — assign spans to first 6, rest are "sm" const spans = ["lg", "md", "md", "lg", "sm", "sm"]; return (
GitHub} /> {/* Filter bar */}
{filters.map((f) => ( ))}
{/* Bento grid */}
{projects.map((p, i) => { const span = spans[i] || "sm"; const cols = span === "lg" ? "span 7" : span === "md" ? "span 5" : "span 4"; return (
); })}
); }; // ========== PROJECT MODAL ========== const ProjectModal = ({ p, onClose }) => { useE(() => { if (!p) return; const onKey = (e) => e.key === "Escape" && onClose(); document.body.style.overflow = "hidden"; window.addEventListener("keydown", onKey); return () => { document.body.style.overflow = ""; window.removeEventListener("keydown", onKey); }; }, [p, onClose]); if (!p) return null; const Visual = VISUALS[p.visual] || VISUALS.rtl; return (
e.stopPropagation()} style={{ background: "var(--surface)", border: "1px solid var(--stroke-hi)", borderRadius: 24, maxWidth: 980, width: "100%", overflow: "hidden", boxShadow: "0 30px 80px -20px oklch(0 0 0 / 0.7)" }}>
{p.tag} {p.year}

{p.title}

{p.summary}

{p.detail}

{p.metrics.map((m) => (
{m.k}
{m.v}
))}
Stack
{p.stack.map((s) => {s})}
{p.link && View on GitHub}
); }; // ========== EXPERIENCE ========== const Experience = () => (
{EXPERIENCE.map((e, i) => (
{e.period_short}
{e.where}

{e.role}

{e.org}

{e.detail}

{e.tags.map((t) => {t})}
))}
); // ========== PUBLICATIONS ========== const Publications = () => (
); // ========== SKILLS ========== const Skills = () => (
{SKILLS.map((g, i) => (
{String(i + 1).padStart(2, "0")} ·

{g.group}

{g.items.map((it) => {it})}
))}
); // ========== STATS ========== const StatsSection = () => (
{STATS.map((s, i) => (
{s.k}
{s.v}
))}
); // ========== CONTACT / FOOTER ========== const Contact = ({ onContact }) => { const marqueeText = "AVAILABLE FOR FULL-TIME · STEM-OPT ELIGIBLE · BUILDING IN ANN ARBOR"; return (
{/* Marquee */}
{Array.from({ length: 8 }).map((_, i) => ( {marqueeText} · ))}
Let’s build

Have a hard
problem?

Hardware design, RTL verification, signal-processing pipelines, GPU acceleration, or just want to talk shop — drop a line.

{CONTACT.email}
{/* Footer bar */}
Available for full-time · Summer/Fall 2026
GitHub LinkedIn Resume ↓
© 2026 Swapnil Bhole · Built in HTML/JS · No frameworks were harmed in the making of this site
); }; Object.assign(window, { LoadingScreen, Hero, Works, ProjectModal, Experience, Publications, Skills, StatsSection, Contact });