{/* Nav */}

{isMobile && ( <>

{isTerminal ? "~/shantanu" : "SD"}

)} {!isMobile && (

)}

{/* Mobile menu overlay */} {isMobile && menuOpen && (

{NAV_ITEMS.map(n => { const id = n.toLowerCase(); return ( ); })}

)} {/* Scroll container — single continuous gradient spans all sections */}

{/* Hero */}

{isTerminal ? : }

{/* About */}

{isTerminal ? "// about" : "About"}

{ABOUT.map((p, i) => (

{p}

))}

{/* Experience */}

{isTerminal ? "// experience" : "Experience"}

{/* Projects */}

{isTerminal ? "// projects" : "Projects"}

{/* Skills */}

{isTerminal ? "// skills" : "Skills"}

{/* Contact */}

{isTerminal ? "// get in touch" : "Get in touch"}

I'm always up for a coffee chat about forecasting, experimentation, or which orchestration tool hurts the least this week.

Send a message

{/* Particles over everything on terminal variant (subtle) */} {isTerminal && (

)} {/* Cursor follower */} {/* Back to top */} {tweaksOpen && setTweaksOpen(false)} />} {/* Theme switch circular reveal (transform-based, GPU-composited) */} {themeAnim && (

{ setTweaks(t => ({ ...t, mode: themeAnim.target })); setThemeAnim(null); }} style={{ position: "absolute", left: themeAnim.x, top: themeAnim.y, width: 100, height: 100, marginLeft: -50, marginTop: -50, borderRadius: "50%", background: themeAnim.bg, transform: `scale(${themeAnim.scale})`, transition: "transform .6s cubic-bezier(.4,0,.2,1)", willChange: "transform", }} />

)}

); // ── inline sub-components (closures over pal / isTerminal) ── function ClassicHero({ isMobile }) { return ( <>

Available for new work

{OWNER.name}

{OWNER.role} · {OWNER.location}

{OWNER.tagline}

Say hi

); } function TerminalHero({ isMobile }) { return (

shantanu@portfolio — zsh

./say-hi

); } function SocialLink({ kind, label }) { const href = kind === "mail" ? `mailto:${OWNER.email}` : kind === "github" ? OWNER.githubUrl : OWNER.linkedinUrl; const I = Icon[kind]; return ( { e.currentTarget.style.color = "var(--accent)"; e.currentTarget.style.borderColor = "var(--accent)"; e.currentTarget.style.transform = "translateY(-2px)"; }} onMouseLeave={(e) => { e.currentTarget.style.color = "var(--muted)"; e.currentTarget.style.borderColor = pal.cardBorder; e.currentTarget.style.transform = "none"; }} > {label && {label}} ); } } // ───────────────────────────────────────────────────────────── // Terminal typing effect // ───────────────────────────────────────────────────────────── function TerminalLines() { const lines = [ { p: "$", t: `whoami`, kind: "cmd" }, { t: `${OWNER.name}`, kind: "out" }, { t: `${OWNER.role} · ${OWNER.location}`, kind: "out-muted" }, { p: "$", t: `cat about.md`, kind: "cmd" }, { t: `"${OWNER.tagline}"`, kind: "out" }, { p: "$", t: `./contact --open`, kind: "cmd" }, ]; // line = which line we're on, ch = chars revealed of the active line const [line, setLine] = useState(0); const [ch, setCh] = useState(0); const done = line >= lines.length; useEffect(() => { if (done) return; const cur = lines[line]; if (ch < cur.t.length) { // Commands type char-by-char; outputs stream faster (already "printed") const speed = cur.kind === "cmd" ? 55 : 14; const t = setTimeout(() => setCh(ch + 1), speed); return () => clearTimeout(t); } // Line finished: pause (longer after a command, as if executing) then advance const pause = cur.kind === "cmd" ? 300 : 140; const t = setTimeout(() => { setLine(line + 1); setCh(0); }, pause); return () => clearTimeout(t); }, [line, ch, done]); const caret = ( ); return (
{lines.map((l, i) => { if (i > line) return null; const isActive = i === line; const text = isActive ? l.t.slice(0, ch) : l.t; return (
{l.p && {l.p}} {text} {isActive && caret}
); })} {done && caret}
); } // ───────────────────────────────────────────────────────────── // Timeline // ───────────────────────────────────────────────────────────── function Timeline({ items, rootRef, isTerminal, isMobile }) { if (isMobile) { // Single column, icon on the left return (

{items.map((item, i) => { const I = item.kind === "edu" ? Icon.cap : Icon.briefcase; return (

); })}
); } return (
{/* center line */}
{items.map((item, i) => { const right = i % 2 === 1; const I = item.kind === "edu" ? Icon.cap : Icon.briefcase; return (

{!right && }

{right && }

); })}
); } function TimelineCard({ item, isTerminal, align }) { return (

{item.date}

{item.role}

{item.company} · {item.loc}

{item.desc}

); } // ───────────────────────────────────────────────────────────── // Projects carousel — one full-size card visible at a time, arrows + dots // ───────────────────────────────────────────────────────────── function ProjectsBento({ rootRef, isTerminal, isMobile }) { const [idx, setIdx] = useState(0); const trackRef = useRef(null); const n = PROJECTS.length; const go = (d) => setIdx((i) => (i + d + n) % n); // keyboard nav when carousel is focused useEffect(() => { const el = trackRef.current; if (!el) return; const onKey = (e) => { if (e.key === "ArrowRight") go(1); if (e.key === "ArrowLeft") go(-1); }; el.addEventListener("keydown", onKey); return () => el.removeEventListener("keydown", onKey); }, []); return (
{/* Viewport */}
{/* Track */}
{PROJECTS.map((p, i) => ( { e.currentTarget.style.borderColor = "var(--accent)"; e.currentTarget.style.boxShadow = "0 20px 50px rgba(0,0,0,.35)"; }} onMouseLeave={(e) => { e.currentTarget.style.borderColor = "var(--cardBorder)"; e.currentTarget.style.boxShadow = "none"; }} >

{isTerminal ? `proj_${String(i + 1).padStart(2, "0")} / ${String(n).padStart(2, "0")}` : `Project ${String(i + 1).padStart(2, "0")} / ${String(n).padStart(2, "0")}`}

{p.title}

{p.desc}

{p.stack.map((s) => ( {s} ))}
))}

{/* Arrows */} {/* Dots */}
{PROJECTS.map((_, i) => (

); } function carouselArrowStyle(side, isMobile) { const base = { position: "absolute", width: 44, height: 44, borderRadius: 999, background: "var(--card)", color: "var(--zoneBInk)", border: "1px solid var(--cardBorder)", cursor: "pointer", fontSize: 22, lineHeight: 1, display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "inherit", boxShadow: "0 6px 18px rgba(0,0,0,.25)", transition: "background .2s, color .2s, border-color .2s", zIndex: 5, }; if (isMobile) { return { ...base, bottom: -56, [side]: "calc(50% - 60px)", transform: side === "right" ? "translateX(60px)" : "translateX(-60px)", }; } return { ...base, top: "50%", [side]: -22, transform: "translateY(-50%)", }; } // ───────────────────────────────────────────────────────────── // Skills // ───────────────────────────────────────────────────────────── function SkillsBlock({ rootRef, isTerminal, isMobile }) { return (
{Object.entries(SKILLS).map(([group, items], gi) => (

{isTerminal ? `// ${group.toLowerCase()}` : group}

{items.map((s) => ( { e.currentTarget.style.borderColor = "var(--accent)"; e.currentTarget.style.transform = "translateY(-2px)"; }} onMouseLeave={(e) => { e.currentTarget.style.borderColor = "var(--cardBorder)"; e.currentTarget.style.transform = "none"; }} >{s} ))}

))}
); } // ───────────────────────────────────────────────────────────── // Shared style helpers // ───────────────────────────────────────────────────────────── function headingStyle(isTerminal, isMobile) { return { fontSize: isMobile ? (isTerminal ? 26 : 32) : (isTerminal ? 36 : 44), fontWeight: isTerminal ? 600 : 800, margin: 0, textAlign: "center", letterSpacing: isTerminal ? 0 : -1.2, }; } function ctaStyle() { return { display: "inline-flex", alignItems: "center", gap: 8, background: "var(--accent)", color: "var(--accentInk)", padding: "12px 22px", borderRadius: 999, textDecoration: "none", fontWeight: 600, fontSize: 14, fontFamily: "inherit", border: "none", cursor: "pointer", transition: "transform .2s, box-shadow .2s", boxShadow: "0 8px 20px rgba(0,0,0,.25)", whiteSpace: "nowrap", }; } window.Portfolio = Portfolio;