/* ===== SELECTED WORK — individual full-height snap sections ===== */ type CaseMedia = "tower" | "jewel" | "hr"; type CaseTone = "dark" | "paper" | "ochre"; type CaseStudy = { idx: string; year: string; title: string; kind: string; desc: string; role: string; stack: string; metrics: Array<[string, string]>; accent: CaseTone; media: CaseMedia; }; const CaseArt = ({ kind, hover }: { kind: CaseMedia; hover: boolean }) => { if (kind === "tower") { return ( {/* moon */} {/* towers */} {/* windows */} {Array.from({ length: 14 }).map((_, r) => Array.from({ length: 4 }).map((_, c) => { const lit = (r * 7 + c * 3) % 5 > 1; return ( ); }) )} {Array.from({ length: 12 }).map((_, r) => Array.from({ length: 3 }).map((_, c) => { const lit = (r + c) % 3 !== 0; return ( ); }) )} {/* chat bubble */} {/* ground */} ); } if (kind === "jewel") { return ( SKU · AU-2401 22K · ₹ 84,200 SKU · DI-0082 VS1 · ₹ 2,14,900 ); } // hr return ( {/* org chart */} CEO ENG DESIGN OPS {/* conversion chart */} CONVERSIONS · QoQ +320% ); }; const caseList: CaseStudy[] = [ { idx: "01", year: "2025", title: "Ramdev Builders", kind: "Real estate · Custom site + AI chatbot", desc: "A construction firm needed a presence that felt as solid as their buildings — plus a 24/7 site concierge. We shipped a bilingual marketing site with an AI assistant trained on 14 active projects.", role: "Design + Build + Chatbot", stack: "Next.js · Sanity · OpenAI", metrics: [["14", "active listings"], ["2.4s", "avg response"], ["8mo", "turnaround"]], accent: "dark", media: "tower", }, { idx: "02", year: "2025", title: "Aureo Jewels", kind: "E-commerce · Saleor headless storefront", desc: "Luxury jewellery brand with 340+ SKUs and complex variant pricing. Built a headless storefront on Saleor with custom admin workflows for karat, stone, and making-charge calculations.", role: "Frontend + Admin Panel", stack: "Saleor · Next.js · Stripe", metrics: [["340", "SKUs modelled"], ["2.1", "AOV multiplier"], ["900", "LCP target ms"]], accent: "paper", media: "jewel", }, { idx: "03", year: "2026", title: "Hirefold HR", kind: "SaaS · Interactive HR consultancy site", desc: "Next-gen HR consultancy wanted a site that felt like a tool, not a brochure. Built with scroll-driven interactions, live ROI calculator, and embedded booking — conversions jumped 3.2×.", role: "Design + Full-stack", stack: "Next.js · Framer Motion · Cal.com", metrics: [["320", "conversion lift %"], ["18", "avg session sec"], ["94", "Lighthouse"]], accent: "ochre", media: "hr", }, ]; // Tick-up counter — animates when element is active const useTickUp = (target: string, active: boolean) => { const [val, setVal] = React.useState(0); React.useEffect(() => { if (!active) return; let start: Nullable = null; const dur = 1100; const from = 0; const to = parseFloat(target) || 0; let raf = 0; const step = (t: number) => { if (!start) start = t; const p = Math.min(1, (t - start) / dur); const eased = 1 - Math.pow(1 - p, 3); setVal(from + (to - from) * eased); if (p < 1) raf = requestAnimationFrame(step); }; raf = requestAnimationFrame(step); return () => cancelAnimationFrame(raf); }, [active, target]); return val; }; const formatMetric = (raw: string, val: number) => { // Preserve formatting: if raw has '+' prefix, '%', decimals, etc. const rawStr = String(raw); if (rawStr.includes(".")) return val.toFixed(1); return Math.round(val).toString(); }; const CaseMetric = ({ raw, label, active }: { raw: string; label: string; active: boolean }) => { const val = useTickUp(raw, active); const display = formatMetric(raw, val); // Detect label hints for suffix let prefix = "", suffix = ""; const lbl = label.toLowerCase(); if (lbl.includes("%") || lbl.includes("lift")) { prefix = "+"; suffix = "%"; } else if (lbl.includes("multiplier")) { suffix = "×"; } else if (lbl.includes("ms")) { suffix = "ms"; } else if (lbl.includes("sec")) { suffix = "s"; } else if (lbl.includes("lighthouse")) { suffix = "/100"; } return (
{prefix}{display}{suffix}
{label.replace(/%|ms| sec|multiplier/gi, "").replace(/\s+/g, " ").trim()}
); }; const SplitCasePanel = ({ c, active, progress }: { c: CaseStudy; i: number; active: boolean; progress: number }) => { // Drive visibility from `active` (clean in/out) and use progress only for parallax const parallaxY = active ? (progress - 0.5) * -30 : 0; return (
PROJECT
{c.idx} / {String(caseList.length).padStart(2, "0")}
YEAR
{c.year}
STATUS
● LIVE
CASE {c.idx} —— {c.kind}

{c.title}

{c.desc}

{c.metrics.map(([k, v]) => ( ))}
Role{c.role}
Stack{c.stack}
Start a project like this
); }; const Cases = () => { const sectionRef = React.useRef(null); const [progress, setProgress] = React.useState([0, 0, 0]); // per-panel progress const [activeIdx, setActiveIdx] = React.useState(0); React.useEffect(() => { const onScroll = () => { const el = sectionRef.current; if (!el) return; const rect = el.getBoundingClientRect(); const vh = window.innerHeight; const total = el.offsetHeight - vh; // scrollable distance while pinned const scrolled = Math.max(0, -rect.top); const t = total > 0 ? Math.min(1, scrolled / total) : 0; // Divide 0..1 into 3 equal segments const segs = caseList.map((_, i) => { const start = i / caseList.length; const end = (i + 1) / caseList.length; if (t <= start) return 0; if (t >= end) return 1; return (t - start) / (end - start); }); setProgress(segs); // active = the panel whose segment contains t (or last segment at end) const idx = Math.max(0, Math.min(caseList.length - 1, Math.floor(t * caseList.length))); setActiveIdx(idx === caseList.length ? caseList.length - 1 : idx); }; window.addEventListener("scroll", onScroll, { passive: true }); onScroll(); return () => window.removeEventListener("scroll", onScroll); }, []); const jumpTo = (i: number) => { const el = sectionRef.current; if (!el) return; const total = el.offsetHeight - window.innerHeight; const target = el.offsetTop + (i / caseList.length) * total + 4; window.scrollTo({ top: target, behavior: "smooth" }); }; return (
{/* LEFT SIDEBAR */} {/* RIGHT STAGE */}
{caseList.map((c, i) => ( ))}
); }; const Stack = () => { const notes = [ { cat: "DESIGN", head: "Figma & Sketch", tools: "Figma · Framer · Mobbin · Dribbble" }, { cat: "FRONTEND", head: "React in my sleep", tools: "Next.js · React · TypeScript · Tailwind · Framer Motion" }, { cat: "BACKEND", head: "Typed to the brim", tools: "Node · Supabase · Postgres · Prisma · tRPC" }, { cat: "CMS / COMMERCE", head: "Headless, mostly", tools: "Sanity · Strapi · Saleor · Shopify · WordPress · Wix Studio" }, { cat: "AUTOMATION", head: "n8n + AI wiring", tools: "n8n · Zapier · OpenAI · LangChain · Pinecone" }, { cat: "THE BORING BITS", head: "Ops & delivery", tools: "Linear · Notion · Vercel · Sentry · Plausible" }, ]; const noteRefs = React.useRef>([]); React.useEffect(() => { const handler = () => { noteRefs.current.forEach((el, i) => { if (!el) return; const rect = el.getBoundingClientRect(); const center = rect.top + rect.height / 2; const offset = (center - window.innerHeight / 2) / window.innerHeight; const drift = (i % 2 === 0 ? -1 : 1) * offset * 20; el.style.setProperty("--drift", `${drift}px`); }); }; window.addEventListener("scroll", handler, { passive: true }); handler(); return () => window.removeEventListener("scroll", handler); }, []); return (
§05

The tools on my desk

Stack · pinned to the wall
{notes.map((n, i) => (
(noteRefs.current[i] = el)} className="sticky-note" style={{ transform: `translateY(var(--drift, 0)) rotate(${(i % 2 === 0 ? -1 : 1) * (0.6 + i * 0.2)}deg)` }}>
{n.cat}

{n.head}

{n.tools}
))}
); }; /* ===== WALL OF WOW — testimonials ===== */ const WallOfWow = () => { const quotes = [ { name: "Priya Nair", role: "Interior Designer, Studio Nair", body: "Aditya built us the site I'd been sketching in my head for years. Everyone who visits says 'wow, who did this?' — that's the whole review.", accent: "ochre", rot: -2, }, { name: "Rohan Mehta", role: "Principal Architect, Form & Function", body: "Rare to find someone who sketches AND ships. He sat in on our studio crits like a designer, then had the thing in production by Friday. Absurd.", accent: "paper", rot: 1.2, }, { name: "Emma Lindqvist", role: "Design Lead (ex-Figma)", body: "Pixel-level taste plus the engineering to back it. I'd put his work next to anything coming out of Stockholm or SF right now.", accent: "dark", rot: -0.8, }, { name: "Kabir Shah", role: "Interior Designer, Atelier Lumen", body: "I'm a designer. I'm allergic to bad websites. Aditya made me one I actually brag about. Clients book consultations from it.", accent: "ochre", rot: 2.4, }, { name: "Mariana Costa", role: "Creative Director, São Paulo", body: "Thoughtful like an editor, fast like a startup engineer. The kind of freelance collaborator you hoard and don't share.", accent: "paper", rot: -1.5, }, { name: "Aarav Kapoor", role: "Founder, Ramdev Builders", body: "Delivered what three agencies couldn't. And the AI concierge he built has genuinely taken work off our plate.", accent: "paper", rot: 0.9, }, ]; return (
§08

Wall of wow

Interior designers · architects · studios
{quotes.map((q, i) => (
"

{q.body}

{q.name.split(" ").map(n => n[0]).join("")}
{q.name}
{q.role}
{[0,1,2,3,4].map(s => ( ))}
))}
{Array.from({ length: 3 }).flatMap((_, i) => [ WOW, ✶, CRAFTED, ✶, SHIPPED, ✶, WORLD-CLASS, ✶, BESPOKE, ✶, ])}
); }; Object.assign(window, { Cases, WallOfWow, Stack });