// SAFE direction: refined evolution of the current portfolio.
// Keeps the dark hero + light body + pill nav + stacked cards DNA,
// but adds: hero agent chat, Now section, testimonials, real case-study
// hover expansion, tighter tag system, and "vibe-coded" identity as first-class.
const SafePortfolio = () => {
const [active, setActive] = React.useState("hero");
return (
Hi, I'm Aditya.
I design agentic experiences
with agentic tools.
9 years designing technically-dense enterprise UX at
Salesforce and Tableau. Now vibe-coding AI-first prototypes as a daily design medium — because the clarity it creates is the whole point.
);
const Dot = ({ color }) => (
);
const ctaPri = {
display: "inline-flex", alignItems: "center", gap: 10,
background: "linear-gradient(135deg,#491cff 0%,#7b4dff 100%)",
color: "#fff", fontSize: 15, fontWeight: 700,
padding: "14px 28px", borderRadius: 100, textDecoration: "none",
boxShadow: "0 8px 32px rgba(73,28,255,0.4)",
};
const ctaSec = {
display: "inline-flex", alignItems: "center", gap: 10,
color: "rgba(255,255,255,0.8)", fontSize: 15, fontWeight: 600,
padding: "13px 24px", borderRadius: 100, textDecoration: "none",
border: "1.5px solid rgba(255,255,255,0.2)",
};
// ─── AGENT CHAT ───────────────────────────────────────────────────────────
const SUGGESTIONS = [
"Show me Aditya's best AI work",
"Why should we hire for a Staff role?",
"What does 'vibe-coded' mean here?",
"Summarize 9 years in one paragraph",
];
const CANNED_REPLIES = {
"Show me Aditya's best AI work":
"The Personalization Core Platform at Salesforce — 0→1, four years, shipped across Marketing Cloud. I designed recommendations, decisioning, experimentation, and engagement signals end-to-end. Project Nexio (Tableau Pulse generative insights) is a close second — that's where I started treating AI trust as a first-class interaction problem.",
"Why should we hire for a Staff role?":
"Three reasons. One: I've owned 0→1 in AI/ML UX at enterprise scale for four years. Two: I bridge ML research and usable product — PMs and research credit me for that translation. Three: I vibe-code my own prototypes, so design reviews happen against working systems, not static screens.",
"What does 'vibe-coded' mean here?":
"I use Claude + Cursor as design tools, not dev tools. This whole portfolio was built that way. It lets me prototype interactions in hours instead of weeks, and it means design critique can happen against real, running UX. This is how I work now, and I think it's how the next generation of design teams will work.",
"Summarize 9 years in one paragraph":
"I started in advertising and digital media — fast, measurable, stakeholder-heavy work. An M.S. in HCI at DePaul took me into product. Since then: nine years at Salesforce and Tableau on AI-powered enterprise surfaces — personalization, data storytelling, experimentation, and generative insight discovery. Systems thinking, measurement maturity, and cross-functional leadership are what I bring to every team.",
};
const AgentChat = () => {
const [messages, setMessages] = React.useState([
{ role: "agent", text: "Hi — I'm the agent that reads Aditya's résumé. Ask me anything, or tap a suggestion below." },
]);
const [input, setInput] = React.useState("");
const [typing, setTyping] = React.useState(false);
const [suggestions, setSuggestions] = React.useState(SUGGESTIONS);
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("");
setSuggestions(s => s.filter(x => x !== q));
setTyping(true);
let reply = CANNED_REPLIES[q];
if (!reply && typeof window.claude?.complete === "function") {
try {
reply = await window.claude.complete({
messages: [{
role: "user",
content:
"You are an agent embedded in Aditya Yellamraju's portfolio. Aditya is a Senior Product Designer, 9 years, Salesforce + Tableau, specialty in AI/ML UX, data storytelling, experimentation, and personalization. He vibe-codes his own prototypes with Claude + Cursor and is open to Staff/Lead roles. Answer in 2-3 sentences, first person as the agent (not as Aditya). Question: " + q,
}],
});
} catch {}
}
if (!reply) reply = "I can tell you about Aditya's work at Salesforce / Tableau, his AI/ML UX experience, or what 'vibe-coded' means in practice. Try one of the suggestions.";
// small fake-typing delay for canned replies
await new Promise(r => setTimeout(r, 550));
setTyping(false);
setMessages(m => [...m, { role: "agent", text: reply }]);
};
return (
Advertising taught me to ship. HCI taught me to systematize. AI is teaching me to vibe-code.
I started in advertising and digital media — fast, measurable, stakeholder-heavy. That foundation made the transition to product natural: outcomes mindset, instrumentation, iteration. An M.S. in HCI from DePaul deepened it.
Today I design enterprise AI systems — and prototype them with AI. Claude and Cursor sit next to Figma in my workflow. The irony isn't lost — but the clarity it creates is the whole point.