// Variation A — Editorial Index // Asymmetric Swiss editorial: oversized display type, hairline rules, // long-list work section with right-side hover preview pane. const { useState, useRef, useEffect, useMemo } = React; const P = window.PORTFOLIO; function useIsMobile(bp = 768) { const [m, setM] = useState(() => window.innerWidth < bp); useEffect(() => { const h = () => setM(window.innerWidth < bp); window.addEventListener("resize", h); return () => window.removeEventListener("resize", h); }, [bp]); return m; } // --- Image slot — clean labeled placeholder (Swiss "no image yet") ---- // A flat tinted rectangle with a single hairline diagonal and clear // monospace caption. Reads as intentional, not decorative. function ImageSlot({ kind = "ROLE", title = "", meta = "" }) { return (

[{kind}] img · 4:3

{title}

{meta &&

↳ {meta}

}

); } // --- HEADER ---------------------------------------------------------- function HeaderA({ density }) { const isMobile = useIsMobile(); const pad = density === "loose" ? 36 : density === "tight" ? 18 : 24; return (

Sam Awasthi — {!isMobile && ( Portfolio · Index · 2026 )}

{!isMobile && ( )} {isMobile && ( )}

); } // --- HERO ------------------------------------------------------------ function HeroA({ heroVariant }) { if (heroVariant === "marquee") return ; if (heroVariant === "asymmetric") return ; return ; } function HeroEditorial() { const isMobile = useIsMobile(); return (

Introduction

Hi, I'm Sam
Awasthi.

{P.location} · {new Date().getFullYear()}

Growth & GTM operator. Creator with 400k+ followers and 400M+ views. I take a decade of audience-building inside early-stage AI startups and build growth engines from first principles.

Available {P.status}

); } function HeroMarquee() { const phrases = ["Growth", "GTM", "Distribution", "Positioning", "Creator", "Operator", "AI Tools", "First-Principles", "400M+ Views", "400k+ Audience"]; return (

Sam Awasthi

{P.location}

{[...phrases, ...phrases, ...phrases].map((p, i) => ( {p}✦ ))}

{P.bio}

{P.bio2}

); } function HeroAsymmetric() { return (

Subject
Sam Awasthi

Building distribution,
one founder at a time.

{P.bio}

{P.metrics.slice(0, 3).map((m, i) => (

{m.value}

{m.label}

))}

); } // --- METRICS STRIP -------------------------------------------------- function parseMetric(value) { // "400k+" -> { num: 400, suffix: "k+" }, "400M+" -> { num: 400, suffix: "M+" }, "10 yrs" -> { num: 10, suffix: " yrs" }, "80+" -> { num: 80, suffix: "+" } const m = String(value).match(/^([\d,.]+)\s*(.*)$/); if (!m) return { num: null, suffix: value }; const num = parseFloat(m[1].replace(/,/g, "")); return { num: isNaN(num) ? null : num, suffix: m[2] || "" }; } function AnimatedNumber({ value, duration = 1400 }) { const { num, suffix } = parseMetric(value); const [display, setDisplay] = useState(num == null ? null : 0); const ref = useRef(null); const startedRef = useRef(false); useEffect(() => { if (num == null) return; const el = ref.current; if (!el) return; const io = new IntersectionObserver((entries) => { entries.forEach(e => { if (e.isIntersecting && !startedRef.current) { startedRef.current = true; const start = performance.now(); const tick = (t) => { const p = Math.min(1, (t - start) / duration); // easeOutCubic const eased = 1 - Math.pow(1 - p, 3); setDisplay(num * eased); if (p < 1) requestAnimationFrame(tick); else setDisplay(num); }; requestAnimationFrame(tick); } }); }, { threshold: 0.4 }); io.observe(el); return () => io.disconnect(); }, [num, duration]); if (num == null) { return {value}; } // formatting: keep integer for whole numbers, else 1 decimal const isInt = Number.isInteger(num); const formatted = isInt ? Math.round(display).toLocaleString() : display.toFixed(1); return {formatted}{suffix}; } function MetricsStrip() { const isMobile = useIsMobile(); return (

{P.metrics.map((m, i) => (

= 2 ? 20 : 0, borderTop: isMobile && i >= 2 ? "1px solid var(--rule)" : "none", }}>

{i === 0 && (

{m.label}

))}

); } // --- WORK LIST WITH HOVER PREVIEW ----------------------------------- function WorkListA({ items, sectionLabel, kindKey }) { const isMobile = useIsMobile(); const [hover, setHover] = useState(null); const wrapRef = useRef(null); return (

{sectionLabel}

{items.map((item, i) => ( setHover(hover === item.id ? null : item.id)} /> ))}

); } // --- BUILT SECTIONS (Agents + Playbooks under one ③) ---------------- function BuiltSectionsA({ agents, playbooks }) { const isMobile = useIsMobile(); return (

Things I've Built

AI agents · GTM playbooks

); } function BuiltColumn({ id, kicker, label, items, hrefBase }) { return (

{kicker}

{label}

{items.map((item, i) => ( ))}

); } function CompactRow({ item, index, hrefBase }) { const [hover, setHover] = useState(false); const isBuild = item.kind === "Build"; const title = item.title; const sub = isBuild ? item.subtitle : item.org; const meta = item.period || item.year || ""; const href = `${item.id}.html`; return ( setHover(true)} onMouseLeave={() => setHover(false)} style={{ display: "grid", gridTemplateColumns: "32px 1fr 16px", alignItems: "baseline", gap: 16, padding: "20px 0", borderBottom: "1px solid var(--rule)", color: "var(--ink)", textDecoration: "none", fontFamily: "var(--ui)", }}> {String(index + 1).padStart(2, "0")}

{sub} {meta && · {meta}}

→ ); } function WorkRow({ item, index, isOpen, onToggle }) { const isMobile = useIsMobile(); const isBuild = item.kind === "Build"; const isPlaybook = item.kind === "Playbook"; const title = (isBuild || isPlaybook) ? item.title : item.company; const subtitle = isBuild ? item.subtitle : isPlaybook ? `${item.org} · ${item.role}` : item.role; const year = item.period || item.year || ""; // Magnetic hover state const btnRef = useRef(null); const [mag, setMag] = useState({ x: 0, y: 0, hov: false }); const handleMove = (e) => { const el = btnRef.current; if (!el) return; const r = el.getBoundingClientRect(); const cx = r.left + r.width / 2; const cy = r.top + r.height / 2; // normalize -1..1 across width/height const nx = (e.clientX - cx) / (r.width / 2); const ny = (e.clientY - cy) / (r.height / 2); setMag({ x: Math.max(-1, Math.min(1, nx)), y: Math.max(-1, Math.min(1, ny)), hov: true }); }; const handleLeave = () => setMag({ x: 0, y: 0, hov: false }); // Magnitude of movement in px const TITLE_PULL = 10; const PLUS_PULL = 14; return (

); } function RowDetail({ item }) { const isMobile = useIsMobile(); const isBuild = item.kind === "Build"; const isPlaybook = item.kind === "Playbook"; const isRole = !isBuild && !isPlaybook; const previewTitle = (isBuild || isPlaybook) ? item.title : item.company; const previewMeta = isBuild ? item.subtitle : isPlaybook ? item.org : item.period; const bodyText = isBuild ? item.detail : isPlaybook ? item.summary : item.summary; const hasMedia = item.youtube || (!isRole); return (

{!isMobile &&

} {hasMedia && (

{item.youtube ? (