// Variant A — "Site". Full-width horizontal personal-site layout: // header row (avatar + name pill + role) top-left, bio left / tags right // as floating animated pills, booking pills in same style, dark circle // company bubbles row at the bottom. const { useState: useStateA, useMemo: useMemoA, useEffect: useEffectA } = React; // Tracks whether we're on a narrow (mobile) viewport so the layout can stack. function useIsMobile(bp = 760) { const [m, setM] = useStateA(typeof window !== "undefined" ? window.innerWidth <= bp : false); useEffectA(() => { const on = () => setM(window.innerWidth <= bp); on(); window.addEventListener("resize", on); return () => window.removeEventListener("resize", on); }, [bp]); return m; } function LandingClassic({ theme, page }) { const P = window.PERSON; // Page config controls the booking section: which topics, which calendar, // and whether booking shows at all. Falls back to the CEO page. const PAGE = page || window.PAGE || { showBooking: true, heading: "Book a session with me:", calendar: P.bookingBase, topics: window.TOPICS, }; const TOPICS = PAGE.topics || []; const [openTopic, setOpenTopic] = useStateA(null); const [hoveredTag, setHoveredTag] = useStateA(null); const [submitOpen, setSubmitOpen] = useStateA(false); const isDark = theme.isDark; const accent = theme.accent; const bg = isDark ? "#0e0e10" : "#ffffff"; const fg = isDark ? "#f4f3ee" : "#0e0e10"; const muted = isDark ? "rgba(244,243,238,0.5)" : "rgba(14,14,16,0.5)"; const subtle = isDark ? "rgba(244,243,238,0.78)" : "rgba(14,14,16,0.75)"; const border = isDark ? "rgba(255,255,255,0.09)" : "rgba(0,0,0,0.10)"; const pillBg = isDark ? "rgba(255,255,255,0.04)" : "#fafbfc"; const bubbleBg = isDark ? "#1c1c22" : "#0e0e10"; const bubbleFg = isDark ? "#f4f3ee" : "#ffffff"; const showCompanies = theme.showCompanies !== false; const showTags = theme.showTags !== false; const mobile = useIsMobile(); const RM = PAGE.roadmap; const isRoadmap = !!RM; // Brick-wall layout: tags arranged in rows of 2, alternating row offsets // for an organic "course" pattern. Stable, not systematic. const tagRows = useMemoA(() => { const perRow = 2; const rows = []; for (let i = 0; i < P.tags.length; i += perRow) { rows.push(P.tags.slice(i, i + perRow)); } return rows; }, [P.tags.length]); // Pill — shared button style used for handle, tags, and topics. // Rounded-rectangle with a soft drop shadow (matches the user reference). const Pill = ({ children, onClick, href, target, large, compact, glow, style, dataAttrs = {} }) => { const Tag = href ? "a" : onClick ? "button" : "span"; return ( {children} ); }; return (
{/* ────────────── Header row ────────────── */}
{/* Avatar */} {/* Name block */}

{P.name}
{P.handle}

{P.role} at{" "} {P.roleAt}

{/* ────────────── Roadmap (only on /product-roadmap) ────────────── */} {isRoadmap && (

{RM.title || "Product roadmap"}

 {(RM.submitEmail || RM.submitUrl) && ( setSubmitOpen(true) : undefined} href={RM.submitEmail ? undefined : RM.submitUrl} target={RM.submitEmail ? undefined : "_blank"} style={{ ["--gv-dy"]: "-3px" }} > ＋ {RM.submitLabel || "Submit new feature"} )}

{RM.intro}
{RM.notionUrl ? ( ) : (
Incolla qui il link pubblico del tuo Notion in pages.js → roadmap.notionUrl e la board comparirà qui, sempre aggiornata.
)}
)} {/* ────────────── Bio left / Tags right ────────────── */} {!isRoadmap && (

{P.bio}

 {showTags &&
{tagRows.map((row, rowIdx) => { // Alternating "courses" — even rows flush, odd rows offset // by roughly half a brick. Offset drops on mobile. const rowOffsetX = mobile ? 0 : (rowIdx % 2 === 0 ? 0 : 38); return (
{row.map((t, j) => { const i = rowIdx * 2 + j; const isHov = hoveredTag === i; const label = typeof t === "string" ? t : t.label; return (
setHoveredTag(i)} onMouseLeave={() => setHoveredTag(null)} style={{ position: "relative", zIndex: isHov ? 50 : 1, transform: `translate(${isHov ? 4 : 0}px, ${isHov ? -5 : 0}px)`, transition: isHov ? "transform 380ms cubic-bezier(0.34, 1.56, 0.64, 1)" : "transform 260ms cubic-bezier(0.4, 0, 0.2, 1)", transformOrigin: "left center" }}> {label}
); })}
); })}
}
)} {/* ────────────── Booking ────────────── */} {PAGE.showBooking && (

{PAGE.heading || "Book a session with me:"}

 )} {/* Booking pills — diagonal "brick wall" like the CEO page. Rows are balanced (no lonely trailing single pill) and, on creators/jobs, the whole staggered block is centered in the column. */} {PAGE.showBooking && (() => { // Balance N topics into rows of at most 3, as evenly as possible, // so we never get a trailing row with a single pill (e.g. 7 → 3,2,2; // 4 → 2,2; 6 → 3,3 unchanged so the CEO page looks identical). const n = TOPICS.length; const rowCount = Math.max(1, Math.ceil(n / 3)); const base = Math.floor(n / rowCount); let extra = n % rowCount; const rows = []; let cursor = 0; for (let r = 0; r < rowCount; r++) { const size = base + (extra > 0 ? 1 : 0); if (extra > 0) extra--; rows.push(TOPICS.slice(cursor, cursor + size)); cursor += size; } const centered = !!PAGE.tidyBooking; let idx = 0; return (
{rows.map((rowTopics, rowIdx) => { const isLast = rowIdx === rows.length - 1; const isShortLast = isLast && rowTopics.length < rows[0].length; // Left-aligned brick like the CEO page; the trailing short row // (creators/jobs) is centered under the group instead of // hanging off to one side. On mobile we drop the diagonal // offset and let pills wrap so nothing overflows. const rowOffsetX = mobile ? 0 : (centered && isShortLast) ? 0 : (rowIdx % 2 === 0 ? 0 : 56); return (
{rowTopics.map((t) => { const i = idx++; return ( setOpenTopic(t)} style={{ ["--gv-dy"]: "-3px" }}> {t.title} {t.duration} ); })}
); })}
); })()} {/* ────────────── Companies ────────────── */} {showCompanies && !isRoadmap && <>

Companies I've worked/collaborated with:
{P.companies.map((c, idx) => { const name = typeof c === "string" ? c : c.name; const icon = typeof c === "object" ? c.icon : null; const initial = name.replace(/\s/g, "").slice(0, 1).toUpperCase(); const scale = typeof c === "object" && c.scale || 1; return ( {icon ? {name} : {initial} } ); })}
} {/* ────────────── Footer ────────────── */}
© {P.name} · 2026
{P.socials.map((s) => {s.label} )}
setOpenTopic(null)} theme={theme} calendar={PAGE.calendar} embedUrl={PAGE.embedUrl} /> {isRoadmap && RM.submitEmail && ( setSubmitOpen(false)} theme={theme} config={{ email: RM.submitEmail, endpoint: RM.submitEndpoint, areas: RM.submitAreas }} /> )}
); } window.LandingClassic = LandingClassic;