); const BoldNav = () => ( ); // ─── BOLD HERO: agent as the hero ──────────────────────────────────────── const BoldHero = () => (

9 years of UX, from startups to enterprise AI at Salesforce.
Now vibe-prototyping at the speed of thought.

I'm Aditya — I design core platform and AI experiences for complex systems. These days I vibe-code them too, so design meets engineering the moment an idea lands.

To learn more, talk to an agent that knows Aditya — ask it anything

Just show me the work →

); // A bigger version of the agent chat — full-width, the page itself const SUGGESTIONS_BOLD = [ "What's Aditya's best AI shipping story?", "How does vibe-coding change design reviews?", "Walk me through Tableau Pulse", "Pitch me a reason to hire for Staff", ]; const CANNED_BOLD = { "What's Aditya's best AI shipping story?": "Salesforce Personalization Core Platform — 0→1 over four years, shipped to every Marketing Cloud enterprise customer. He owned the interaction model for how marketers configure ML-driven recommendations without reading an ML paper. The workflow he designed is the one still in production.", "How does vibe-coding change design reviews?": "Instead of reviewing 40 static frames, the team reviews a working prototype. Edge cases, empty states, loading, and error paths all exist. PM asks 'what happens when X' and we click it instead of promising to mock it. Decisions happen in hours, not sprints.", "Walk me through Tableau Pulse": "Pulse is Salesforce's AI-powered business monitoring platform. Aditya led design strategy and 0→1 design for Project Nexio, the generative-AI insight discovery layer. The hard problem: making AI outputs feel trustworthy and actionable for analysts. The shipped flows — Metrics Digest, Pulse Homepage, AI insight flows — are what he validated.", "Pitch me a reason to hire for Staff": "He bridges three rare axes: ML research fluency, enterprise-systems thinking, and vibe-coded prototyping. Most designers have one of those. Staff-level impact comes from multiplying across a team — and Aditya's prototypes become the brief other designers design against.", }; const BigAgentChat = ({ compact }) => { const [messages, setMessages] = React.useState([ { role: "system", text: "agent initialized · reading aditya_yellamraju.résumé · indexing 9 years of work…" }, { role: "agent", text: "Heads up — I'm still in training. Aditya's teaching me everything he knows (9 years of it, so… give him a minute). Soon I'll answer anything about his work, his process, and why he vibe-codes. For now, find him on LinkedIn — he replies faster than I load. 🤖✨" }, ]); const [input, setInput] = React.useState(""); const [typing, setTyping] = React.useState(false); const [sugg, setSugg] = React.useState([]); const scrollRef = React.useRef(null); React.useEffect(() => { if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight; }, [messages, typing]); const ask = async (q) => { if (!q.trim()) return; setMessages(m => [...m, { role: "user", text: q }]); setInput(""); setSugg(s => s.filter(x => x !== q)); setTyping(true); let reply = "Still in training, still can't help you properly — the irony of an AI portfolio with a not-yet-AI agent isn't lost on me. 😅 Aditya's on it. Catch him on LinkedIn meanwhile."; await new Promise(r => setTimeout(r, 700)); setTyping(false); setMessages(m => [...m, { role: "agent", text: reply }]); }; return (

agent.adityay.com — session #7f3a · claude-haiku-4-5 vibe-coded

{messages.map((m, i) => m.role === "system" ?

$ {m.text}

: )} {typing && } />}

{sugg.length > 0 && (

{sugg.map(s => ( ))}

)}

); }; const BoldBubble = ({ role, text }) => (

{role === "agent" && (

)}

{text}

); // ─── VIBE-CODING PROTOTYPES ─────────────────────────────────────────── const VIBE_PROTOS = [ { src: "assets/vibe/proto-1.gif", title: "Salesforce Personalization Campaign", tool: "Claude + Cursor", desc: "The core configuration platform, reimagined marketer-friendly — prototyped and clickable, not static frames." }, { src: "assets/vibe/proto-2.gif", title: "Agentic Web Content Personalization", tool: "Cursor", desc: "The platform applied to a conversational, agentic marketing use case — live and navigable." }, { src: "assets/vibe/proto-3.gif", title: "Agentic Recommendation Filters Creation", tool: "Claude Code", desc: "Part of the recommendations engine — building catalog filters through a natural-language agent." }, ]; const BoldVibeProtos = () => (

Prototypes design meets engineering the moment an idea lands

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

{ e.currentTarget.style.display = "none"; e.currentTarget.nextSibling.style.display = "flex"; }} />

GIF coming

{p.tool} {p.title} {p.desc}

))}

); const BoldAgentDock = () => { const [open, setOpen] = React.useState(false); React.useEffect(() => { const handler = () => setOpen(true); window.addEventListener("open-agent", handler); const key = (e) => { if (e.key === "Escape") setOpen(false); }; window.addEventListener("keydown", key); return () => { window.removeEventListener("open-agent", handler); window.removeEventListener("keydown", key); }; }, []); return ( <> {/* Floating launch button */} {!open && ( )} {/* Panel + backdrop */} {open && (

setOpen(false)} style={{ position: "fixed", inset: 0, zIndex: 400, background: "rgba(10,10,16,0.6)", backdropFilter: "blur(6px)", display: "flex", alignItems: "flex-end", justifyContent: "flex-end", padding: 28, }}>

e.stopPropagation()} style={{ width: "100%", maxWidth: 460, position: "relative", animation: "agentDockIn 0.28s cubic-bezier(0.22,1,0.36,1) both", }}>

)} ); }; const BoldHeroStats = () => (

{/* Top row — 3 hero numbers */}

{[ ["9", "years of UX"], ["2", "0→1 launches"], ["10+", "vibe-coded prototypes"], ].map(([n, l], i) => (

{n}

{l}

))}

{/* Design Expertise row */}

Design Expertise

{[ { t: "Agentic UX", d: "chat, canvases, tool-use" }, { t: "AI / ML UX", d: "models meet workflows" }, { t: "Enterprise SaaS UX", d: "platforms that scale" }, { t: "Data Storytelling UX", d: "insights to action" }, ].map((x, i) => (

0{i+1} {x.t} {x.d}

))}

); // ─── ABOUT ────────────────────────────────────────────────────────────── const BoldAbout = () => (

01 · about

From advertising to{" "} complex systems UX.

I started in advertising and digital media, where the work was fast, measurable, and stakeholder-heavy. Wearing multiple hats — strategy, research, client management, and design execution — trained me to clarify ambiguity, align teams, and ship under real constraints.

That foundation made the transition to product design natural: I brought an outcomes mindset — instrumentation, experiments, iteration — and deepened it with an M.S. in Human-Computer Interaction from DePaul University. Today I apply those skills to enterprise platforms, turning complex AI and data systems into usable workflows that scale.

What you'll see in the work below

{[ { k: "Systems thinking", v: "workflows, state models, guardrails, and scalable patterns" }, { k: "Measurement maturity", v: "success metrics, experimentation, and learning velocity" }, { k: "Cross-functional leadership", v: "tight partnership with PM, Eng, Data Science, and Research" }, ].map((item, i) => (

0{i + 1}

{item.k}

{item.v}

))}

); const SectionKicker = ({ children }) => ( {children} ); // ─── NOW ──────────────────────────────────────────────────────────────── const BoldNow = () => (

02 · now last synced · 2 days ago

{NOW.map((n, i) => (

0{i+1}

{n.label} {n.text}

))}

{/* Featured — Agentblazer Champion (recognition) */}

★ Recognition Salesforce Agentblazer Champion — top-tier status in Salesforce's Agentblazer program, recognizing advanced expertise in building with Agentforce, Data Cloud, and AI on the Salesforce platform.

); // ─── TOOLKIT ────────────────────────────────────────────────────────────── const BoldToolkit = () => (

03 · vibe coding toolkit

AI-fluent design isn't a buzzword. It's my workbench.

Every artifact in this portfolio was built with the tools below. Each one earns its place — I pick the right tool for the moment, not the brand.

{/* Primary toolkit */}

Primary toolkit — daily drivers

{[ { name: "Claude", note: "daily driver — chat, agent, code", logo: "https://cdn.simpleicons.org/anthropic/ffffff" }, { name: "Claude Code", note: "in-IDE pair programmer", logo: "https://cdn.simpleicons.org/anthropic/ffffff" }, { name: "GitHub", note: "version control & deploys", logo: "https://cdn.simpleicons.org/github/ffffff" }, { name: "Gemini", note: "multi-modal exploration", logo: "https://cdn.simpleicons.org/googlegemini/ffffff" }, { name: "Agentforce", note: "Salesforce agentic platform", logo: "https://www.salesforce.com/news/wp-content/uploads/sites/3/2020/08/cropped-Salesforce_Logo_Web_Notext-1.png", filter: "brightness(0) invert(1)" }, ].map((t, i) => (

{t.svg ? t.svg :

e.currentTarget.style.display = "none"} />}

{t.name} {t.note}

))}

{/* Also in rotation */}

Also in rotation

{[ { name: "Cursor", note: "AI-native code editor", logo: "https://cdn.simpleicons.org/cursor/ffffff" }, { name: "Figma Make", note: "AI-powered Figma prototyping", logo: "https://cdn.simpleicons.org/figma/ffffff" }, { name: "ChatGPT", note: "research + copy generation", svg: }, { name: "Google NotebookLM", note: "source-grounded synthesis", logo: "https://cdn.simpleicons.org/google/ffffff" }, ].map((t, i) => (

{(t.logo || t.svg) && (

{t.svg ? t.svg :

e.currentTarget.style.display = "none"} />}

)}

{t.name} {t.note}

))}

); // ─── WORK — full-bleed horizontal scroller with expandable ─────────── const BoldWork = () => { const [expanded, setExpanded] = React.useState(null); return (

04 · work

Five case studies.

click any card to dive in ›

{CASES.map(c => ( setExpanded(expanded === c.slug ? null : c.slug)} /> ))}

); }; const BoldCase = ({ c, expanded, onToggle }) => (

{ if (c.slug === "personalization") { window.location.href = "case-personalization-private.html"; return; } if (c.slug === "recommendations-engine") { window.location.href = "case-recommendations-engine.html"; return; } if (c.slug === "pulse-nexio") { window.location.href = "case-tableau-pulse.html"; return; } if (c.slug === "data-stories") { window.location.href = "case-data-stories.html"; return; } if (c.slug === "experimentation") { return; } onToggle(); }} style={{ border: "1px solid rgba(167,143,255,0.25)", borderRadius: 20, overflow: "hidden", cursor: c.slug === "experimentation" ? "default" : "pointer", background: "rgba(36,36,48,0.75)", transition: "border-color .2s, transform .2s", gridColumn: expanded ? "span 2" : "span 1", display: "grid", gridTemplateColumns: expanded ? "1.2fr 1fr" : "1fr", }} onMouseEnter={e => e.currentTarget.style.borderColor = "rgba(167,143,255,0.55)"} onMouseLeave={e => e.currentTarget.style.borderColor = "rgba(167,143,255,0.25)"}>

{c.year} · {c.company} {c.slug === "experimentation" ? "Coming soon" : c.tags[0]}

{c.title}

{c.blurb}

{expanded && (

Outcome

{c.outcome}

Scope

{c.kicker}

)}

{c.tags.map(t => {t})}

{c.hero ? {c.title}

: }

); // ─── TESTIMONIALS ─────────────────────────────────────────────────────── const BoldTestimonials = () => (

05 · signal

From people I've shipped with.

{TESTIMONIALS.map((t, i) => (

{t.name.split(" ").map(w => w[0]).join("").slice(0,2)}

{t.name}

{t.role}

{t.quote}

))}