// ============================================================ // APP — AI chat interface that renders portfolio as widgets // ============================================================ const { useState, useEffect, useRef, useMemo } = React; const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "theme": localStorage.getItem("theme") || "light", "accent": "#c03010" } /*EDITMODE-END*/; // ----- Projects data ----- const PROJECTS = { "Don't Look Away": { title: "Don't Look Away", tag: "PASSION · VR", year: "'23", icon: "moon", bg: "#151414", fg: "#e8e5de", desc: "A VR survival horror game. Enemies freeze only while you look at them — glance away and they advance.", href: "case-studies/dont-look-away.html" }, "ESUS Calc": { title: "ESUS Calculator", tag: "PASSION · TOOL", year: "'23", icon: "bolt", bg: "#f2efe8", fg: "#0f0f0f", desc: "A UX research calculator for a lazy, stubborn UX designer. Tallies ESUS scores, copy-pastes to Notion.", href: "case-studies/esus-calc.html" }, "Chalan Che'lu": { title: "Chalan Che'lu Mart", tag: "PASSION · GAME", year: "'22", icon: "star", bg: "#c03010", fg: "#fef9e8", desc: "A top-down mini-market game set on Guam, built with pixel art and an open-source engine.", href: "case-studies/chalan-chelu.html" }, "Design System": { title: "Enterprise Design System", tag: "DISNEY · EDL/EDS", year: "'24", icon: "figma", bg: "#1a1a28", fg: "#e8e5de", desc: "Figma-based design system powering experiences across Disney's media supply chain.", href: "case-studies/design-system.html" }, "Media Tagging": { title: "Media Metadata Tagging", tag: "DISNEY · ENTERPRISE", year: "'23", icon: "play", bg: "#0f1e14", fg: "#e8e5de", desc: "An enterprise tool to tag, annotate, and prep media for distribution across proprietary streaming platforms.", href: "case-studies/media-tagging.html" } }; // ----- Prompt responses ----- const PROMPT_LIBRARY = [ { id: "intro", match: ["who are", "who's", "hello", "introduce"], prompt: "Who are you?", thinking: ["Warming up…", "Pulling bio…"], reply: ({ time }) => <> Hi, I'm Lianna Lamorena — a UX & Product Designer with 9 years designing enterprise, finance, and entertainment software. I'm currently open to senior / staff / design-lead roles.
Chat with MINI-LI below to ask anything about me and my work.
}, { id: "work", match: ["work", "projects", "portfolio", "case", "shown", "built"], prompt: "Show me your work", thinking: ["Sorting by recency…", "Loading case studies…"], reply: () => <> Here's a timeline of everything I've shipped and made for fun. The top row is a compressed view; full case studies below. }, { id: "experience", match: ["résumé", "resume", "cv", "work history", "career history", "companies", "where have you worked"], prompt: "What's your experience?", thinking: ["Parsing résumé…", "9 years · compiling…"], reply: () => <> Nine years across enterprise design — currently at Disney leading AI adoption and evolving the Enterprise Design Language. Previously led UX for developer experience & cloud infra at American Express. }, { id: "stack", match: ["stack", "expertise", "skills"], prompt: "What's your expertise?", thinking: ["Sifting domains…"], reply: () => <> Nine years means I've gone deep in a lot of rooms. Here's the menu: }, { id: "contact", match: ["contact", "hire", "email", "reach", "message", "in touch", "work together"], prompt: "How do I reach you?", thinking: ["Opening channels…"], reply: ({ time }) => <> Easiest is email — I usually reply within a day. I'm in Seattle (PST), currently {time}. }]; // ----- Building blocks ----- function Reply({ children }) { return (
{children}
); } function AIReply({ text }) { return (
{text}
); } function Grid({ cols = 2, gap = 12, children }) { return (
{children}
); } // ----- Thinking scribble ----- function Thinking({ label }) { return (
{label}
); } // ----- User prompt bubble ----- function UserBubble({ text }) { return (
{text}
); } // ----- Header ----- function Header({ time, theme, onToggleTheme }) { return (
L
Lianna Lamorena
· UX/Product
); } // ----- Main App (unused — Root renders AppInner) ----- function AssistantLabel({ name = "MINI-LI" }) { return (
L
{name}
); } function Composer({ value, onChange, onSubmit, suggestions, onPick, busy }) { return (
{/* Suggestions */}
{suggestions.map((s, i) => )}
{/* Input */}
{e.preventDefault();onSubmit();}} style={{ display: "flex", alignItems: "center", gap: 10, padding: "8px 10px 8px 18px", background: "var(--card)", borderRadius: 999, border: "1px solid var(--rule)", boxShadow: "0 8px 32px -12px rgba(0,0,0,.12)" }}> onChange(e.target.value)} placeholder="Ask about my work, experience, how to reach me…" disabled={busy} style={{ flex: 1, border: 0, background: "transparent", fontFamily: "var(--mono)", fontSize: 13, color: "var(--ink)", outline: "none", padding: "8px 0" }} />
answers sourced from my personal documentation · may make mistakes · built with care
); } // ----- Tweaks panel ----- function Tweaks({ tweaks, setTweak }) { const { TweaksPanel, TweakSection, TweakRadio, TweakColor } = window; if (!TweaksPanel) return null; return ( setTweak("theme", v)} options={[{ value: "light", label: "Light" }, { value: "dark", label: "Dark" }]} /> setTweak("accent", v)} />
{["#c03010", "#0a66c2", "#2e7d32", "#6a2da8", "#111111", "#e09a00"].map((c) =>
); } // Root function Root() { const [tweaks, setTweak] = window.useTweaks(TWEAK_DEFAULTS); useEffect(() => { document.documentElement.setAttribute("data-theme", tweaks.theme || "light"); }, [tweaks.theme]); useEffect(() => { document.documentElement.style.setProperty("--accent", tweaks.accent || "#c03010"); }, [tweaks.accent]); return ( <> ); } function AppInner({ tweaks, setTweak }) { // live clock const [now, setNow] = useState(new Date()); useEffect(() => { const t = setInterval(() => setNow(new Date()), 1000 * 30); return () => clearInterval(t); }, []); const timeStr = useMemo(() => { const h24 = now.getHours(); const m = now.getMinutes(); const ampm = h24 >= 12 ? "pm" : "am"; const h12 = h24 % 12 || 12; return `${h12}:${String(m).padStart(2, "0")} ${ampm}`; }, [now]); const [messages, setMessages] = useState([]); const [input, setInput] = useState(""); const [busy, setBusy] = useState(false); const scrollRef = useRef(null); const bootedRef = useRef(false); function scrollToBottom() { requestAnimationFrame(() => { window.scrollTo({ top: document.body.scrollHeight, behavior: "smooth" }); }); } function findResponse(text) { const low = text.toLowerCase(); const ordered = [...PROMPT_LIBRARY.slice(1), PROMPT_LIBRARY[0]]; for (const p of ordered) { if (p.match.some((k) => low.includes(k))) return p; } return null; } async function submitAI(text, thinkingId) { try { const res = await fetch("/api/chat", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ message: text }), }); const { reply } = await res.json(); setMessages((m) => m.filter((x) => x.id !== thinkingId).concat({ id: Date.now() + 2, role: "ai", text: reply ?? "I had trouble with that. Try rephrasing?", })); } catch { setMessages((m) => m.filter((x) => x.id !== thinkingId).concat({ id: Date.now() + 2, role: "ai", text: "Sorry, I had trouble connecting. Try again in a moment.", })); } setBusy(false); setTimeout(() => scrollToBottom(), 60); setTimeout(() => scrollToBottom(), 300); } function submit(text, forcedRespId, silent = false) { if (!text.trim() || busy) return; const resp = forcedRespId ? PROMPT_LIBRARY.find((p) => p.id === forcedRespId) || findResponse(text) : findResponse(text); if (!silent) { const userMsg = { id: Date.now(), role: "user", text }; setMessages((m) => [...m, userMsg]); } setInput(""); setBusy(true); scrollToBottom(); const thinkingId = Date.now() + 1; if (!resp) { setMessages((m) => [...m, { id: thinkingId, role: "thinking", label: "Thinking…" }]); scrollToBottom(); submitAI(text, thinkingId); return; } const thinkingLabels = resp.thinking || ["Thinking…"]; let step = 0; setMessages((m) => [...m, { id: thinkingId, role: "thinking", label: thinkingLabels[0] }]); scrollToBottom(); const iv = setInterval(() => { step++; if (step < thinkingLabels.length) { setMessages((m) => m.map((x) => x.id === thinkingId ? { ...x, label: thinkingLabels[step] } : x)); } }, 700); const totalDelay = Math.max(900, thinkingLabels.length * 700 + 300); setTimeout(() => { clearInterval(iv); setMessages((m) => m.filter((x) => x.id !== thinkingId).concat({ id: Date.now() + 2, role: "assistant", respId: resp.id })); setBusy(false); setTimeout(() => scrollToBottom(), 60); setTimeout(() => scrollToBottom(), 300); }, totalDelay); } useEffect(() => { if (bootedRef.current) return; bootedRef.current = true; setTimeout(() => submit("Who are you?", "intro", true), 400); }, []); const suggestions = PROMPT_LIBRARY.slice(1).map((p) => p.prompt); return ( <>
{ const next = (tweaks.theme || "light") === "dark" ? "light" : "dark"; localStorage.setItem("theme", next); setTweak("theme", next); }} />
{(() => { let assistantCount = 0; return messages.map((msg) => { if (msg.role === "user") return ; if (msg.role === "thinking") return (
); if (msg.role === "ai") { const name = assistantCount++ === 0 ? "LIANNA" : "MINI-LI"; return (
); } const resp = PROMPT_LIBRARY.find((p) => p.id === msg.respId); if (!resp) return null; const name = assistantCount++ === 0 ? "LIANNA" : "MINI-LI"; return (
{resp.reply({ time: timeStr })}
); }); })()} {!busy && messages.length > 1 && }
submit(input)} suggestions={suggestions} onPick={(s) => submit(s)} busy={busy} /> ); } ReactDOM.createRoot(document.getElementById("root")).render();