/* global React, ReactDOM, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakToggle, HoverPeek */ const { useState, useEffect } = React; const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "palette": "warm", "headlineMood": "serif", "showBadge": true, "animateOnLoad": true }/*EDITMODE-END*/; const PALETTES = { warm: { peach: "#F8C495", lilac: "#C7C2F0", sky: "#B8DBEC", bg: "#EFE6D6", hero: "#F6EFE0", ink: "#163A2E", sun: "#F8E45A" }, cool: { peach: "#FFB4B4", lilac: "#9FB7E8", sky: "#A6E0D2", bg: "#E8ECEF", hero: "#F2F4F6", ink: "#1A2240", sun: "#FFD86B" }, bold: { peach: "#F4A26B", lilac: "#B8A9F0", sky: "#7CC5D9", bg: "#1A1A18", hero: "#22221F", ink: "#F4ECDC", sun: "#F8E45A" }, }; /* global Nav */ const NAV_HREFS = { "Home": "index.html", "Case Studies": "work.html", "About": "about.html" }; function navChange(item) { if (item !== "Home") window.location.href = NAV_HREFS[item]; } // ---------- Sticker Badge ---------- function Badge({ visible }) { return (
Open to chat
); } // ---------- Inline mini pill (for the subline) ---------- function InlinePill({ tone = "dark", icon, children, href }) { const Tag = href ? "a" : "span"; return ( {icon ? {icon} : null} {children} ); } // ---------- Card deck ---------- // leftPct = horizontal anchor (0 = left of deck, 1 = right of deck) // yOffset = vertical bob, rotate = tilt, z = stacking order const CARDS = [ { id: "recent", color: "peach", title: "Use Cases", body: "See how I solve problems for the companies I work with. Fair warning: the case studies run long. There's a TL;DR at the end.", cta: "View Use Cases", ctaHref: "work.html", rotate: -8, z: 1, leftPct: 0.18, yOffset: 14, }, { id: "photo", color: "photo", title: null, body: null, cta: null, rotate: -3, z: 2, leftPct: 0.40, yOffset: 38, }, { id: "indie", color: "lilac", title: "Creating Content", body: "This year I set a resolution to make educational reels about the small things we never stop to notice. Two million views later, it seems to be working.", cta: "View page", ctaHref: "https://www.instagram.com/omniahmadmajid/", rotate: 4, z: 3, leftPct: 0.60, yOffset: 28, }, { id: "talks", color: "sky", label: null, title: "Ayn by Dal", body: "I'm currently a product designer at Dal, where we're building Ayn — an all-in-one KYC and compliance platform.", cta: "Visit Dal's website", ctaHref: "https://getdal.sa", rotate: 9, z: 4, leftPct: 0.82, yOffset: 14, }, ]; function Card({ data, hovered, anyHovered, onHover, onLeave, animateOnLoad }) { const isMe = hovered === data.id; const dim = anyHovered && !isMe; // yOffset = how far above the deck baseline this card sits (positive = up) const baseTransform = `translateY(${-data.yOffset}px) rotate(${data.rotate}deg)`; const hoverTransform = `translateY(${-data.yOffset - 22}px) rotate(${data.rotate * 0.35}deg) scale(1.04)`; const dimTransform = `translateY(${-data.yOffset + 6}px) rotate(${data.rotate}deg) scale(0.985)`; return (
onHover(data.id)} onMouseLeave={onLeave} > {data.color === "photo" ? (
Ahmad Majid
) : ( <> {data.label !== null && data.label && {data.label}}

{data.title}

{data.body}

{data.ctaHref ? ( {data.cta} ) : ( )} )}
); } function CardDeck({ animateOnLoad }) { const [hovered, setHovered] = useState(null); const anyHovered = !!hovered; return (
{CARDS.map(c => ( setHovered(null)} animateOnLoad={animateOnLoad} /> ))}
); } // ---------- Hero ---------- function Hero() { const [t, setTweak] = useTweaks(TWEAK_DEFAULTS); const [mounted, setMounted] = useState(false); useEffect(() => { const id = requestAnimationFrame(() => setMounted(true)); return () => cancelAnimationFrame(id); }, []); const palette = PALETTES[t.palette] || PALETTES.warm; // apply palette to CSS vars useEffect(() => { const root = document.documentElement; root.style.setProperty("--bg", palette.bg); root.style.setProperty("--hero-bg", palette.hero); root.style.setProperty("--ink", palette.ink); root.style.setProperty("--peach", palette.peach); root.style.setProperty("--lilac", palette.lilac); root.style.setProperty("--sky", palette.sky); root.style.setProperty("--sun", palette.sun); }, [t.palette]); const headlineClass = "hero__headline hero__headline--" + t.headlineMood; return ( <>