How I developed this site

Where my 123 messages went

The message counts are verified. Each message was assigned to one area by hand, from the record. Commands I typed into the terminal aren't counted as messages.

1. #1–2 Sep 21

   A site from a Perplexity reference and two resumes

   Build my portfolio website end to end, using the two attached resumes and the reference I created in Perplexity.

   • Make every page clickable and fully responsive.
   • Let visitors view and download my latest resume.
   • Default to a light theme with a dark-mode toggle. Instead of pure white, use a 10% gray background to reduce eye strain.

   I'll connect my own domain once the site is ready.

   Interpretation

   A static, responsive portfolio built from my two Word resumes and the reference I had started in Perplexity. Light theme by default on a 10% gray, with a dark toggle and resume downloads.

   Exploration

   Claude built the home page, a first case study with a clickable prototype and the theme system, then tested them for console errors, overflow and broken links.

   Human decision

   Keep the design simple, with room for three case studies, each with a short recruiter version and a deep dive. I also cut the accordions and the Education box.

   Revision

   Three case study slots, each with a short version and a deep dive. The AI left slots 2 and 3 as “Coming soon” instead of inventing projects.

   Outcome

   First release the same night, after I approved the Vercel sign-in. The first sign-in code had expired.

2. #3 Sep 21

   Judgment over volume

   Here are two more documents for case study 1: a project brief and a full case study.

   • Decide where each one fits, and whether recruiters would want to download it, so the story connects end to end.
   • Don't add them just because I asked. Judge whether they help, and avoid overwhelming readers.
   • If you do add them, place them in the deep dive.

   Interpretation

   I shared three documents for case study 1 and asked for an editorial decision, not an upload.

   Exploration

   The AI weighed each document by its reader: recruiters forward one-pagers, hiring managers save full case studies.

   Human decision

   I accepted the recommendation: publish the summary and the case study, and keep the project brief private (the AI called it “a private planning doc addressed to you”).

   Revision

   The AI regenerated both PDFs from the site pages because the originals had out-of-date links.

   Outcome

   Two downloads. The private document stayed private, and three short ideas from it went into the deep dive.

3. #7–10 Sep 23

   White label first, then my original prototype

   Build case study 2 as a white-label case study.

   • Don't use any real names, photos or the company name from the screenshots I shared.

   Interpretation

   Case study 2, a seat-governance tool I designed, had to be rebuilt with no company identity at all.

   Exploration

   The AI couldn't load my Figma Make prototype (the editor stalled), so it designed its own white-label concept and named it “Atlas”.

   Human decision

   Drop the name “Atlas” and use my original prototype as the basis. Keep the features I liked from the AI's version, but don't overcomplicate the app.

   Revision

   The AI rebuilt my original flows without the logo, company name, real prices or organization stats, and kept three of its own features that I picked.

   Outcome

   Enterprise Tool Governance (my later rename): 14 screens and a clickable prototype, with a scan confirming no company names.

4. #13–14 Sep 24

   Suggest > Ask > Act

   Add agentic AI to the Enterprise Tool Governance case study, using the mental model Suggest > Ask > Act.

   • Design the fallback routes: what happens if an AI approval goes wrong, and how users or admins can bypass the AI and still finish the task.
   • Make the agent act intelligently: if the same person asks for more AI credits within 7 days, it should put the approval on hold or respond accordingly.

   Interpretation

   An AI agent that decides seat requests, bounded by my mental model, with ways out and a memory of repeat requests.

   Exploration

   The AI built a simulated, rules-based agent: confidence limits, hand-off to a person, bypass routes, the 7-day rule, and nine “Test the agent” scenarios.

   Human decision

   My mental model and the 7-day rule became the spine of the case study.

   Revision

   The agent's reasoning and chosen path show on screen, and every number is labeled illustrative.

   Outcome

   41 automated prototype checks passing. This became the site's example of agentic AI.

5. #15 Sep 24

   Stand out, without overclaiming

   Make every case study stand out, without overclaiming.

   • Add an “Outcomes, business impact & learnings” section to each case study.
   • Rename “Recruiter summary” to “Quick peek”, or suggest a better name.
   • Remove my location, add a creative title, and merge my two resumes into one Senior UX Design Leader version.

   My portfolio should stand out and win the job.

   Interpretation

   Add outcomes and impact to concept projects without presenting anything as a measured result.

   Exploration

   The AI labeled impact “Designed, not measured” and “Modeled, not measured”, and drafted learnings (“match autonomy to reversibility”, “design the exit before the entry”) for me to rewrite in my own voice.

   Human decision

   “Quick peek” replaced “Recruiter summary”. I went from two resumes to one, Senior UX Design Leader, and removed my location.

   Revision

   The rename carried through every page, file name and button.

   Outcome

   Every case study says clearly what is real and what is modeled.

6. #18–19 Sep 24

   Case study 3, and a note about confidentiality

   Build case study 3 from my AI Insurance Quote prototype.

   • The idea builds on Gartner's view of how consumers will buy auto, home and business insurance: a price without five pages of forms first.

   Interpretation

   An AI-first insurance quote that starts from one sentence, built from my original prototype.

   Exploration

   The AI rebuilt the prototype white-label, removed the logo and every claim it couldn't verify, and swapped in sample carriers and prices.

   Human decision

   I wrote what the confidentiality note had to say: the real work is under NDA, and these case studies mirror real problems. Later I asked for it to be shorter.

   Revision

   A short note in my voice at the top of the case studies.

   Outcome

   AI Insurance Quote, with a prototype visitors can get a quote from themselves.

7. #20–21 Sep 25

   The process belongs in a deck, not on the page

   Create a design process deck for each case study.

   • Cover discovery, research materials, screenshots, ideas, user flows, journey maps and personas, so reviewers can see how I approached each problem.
   • Don't put all of this on the web: the pages should show only the problem, impact, product and experience.
   • Use landscape slides, like a presentation. Keep my resume as a portrait PDF.

   Interpretation

   Keep the web pages focused, and move the depth into presentation decks.

   Exploration

   The AI wrote and produced three design process decks of 18, 21 and 23 slides: research, personas, journey maps, flows, principles and validation plans.

   Human decision

   Landscape for the case study decks, portrait for the resume.

   Revision

   The web pages were cut back to problem, impact, product and experience.

   Outcome

   Each case study now has a quick peek, a case study and a design process deck. Two days later I made them view only (see #69).

8. #22 Sep 25

   Systems, accuracy and a secure way to share

   Put the site on a solid system, correct the facts and add a secure way to share confidential work.

   • Use a 12-column grid: responsive, mobile friendly and minimal, with columns always evenly distributed.
   • Update the facts everywhere: 10+ designers, and “25+ apps designed and led”.
   • Run an accessibility audit and fix every issue.
   • Add a short contact form (name, email, phone, message; name and email required) with spam protection.
   • Add a password-protected Projects area: visitors request access and receive a one-time password by email that expires after 3 hours.

   Interpretation

   I corrected facts (10+ designers, and how the 25+ apps are described), and asked for structure, accessibility and a secure way to share confidential work.

   Exploration

   The AI moved the layout to a 12-column grid, ran an accessibility audit, added a contact form with bot protection, and designed a Projects area that emails a one-time password and opens a 3-hour session.

   Human decision

   I defined the flow, and asked for a better word than “5 countries”. The AI suggested “three continents”.

   Revision

   Every group of columns shares the grid and the same spacing.

   Outcome

   0 accessibility violations. The contact form and Projects area are built as serverless functions and switch on once their keys are added.

9. #25–26 Sep 25

   The bug that wasn't in the code

   Fix the spacing between boxes across the whole site.

   • Boxes such as The problem and The approach, and Outcomes and Business impact, are touching each other.
   • Give every group of boxes the same spacing everywhere, including the three “How I work with AI” boxes.

   Interpretation

   A visual problem I could see but the AI couldn't reproduce.

   Exploration

   The AI checked its own build and the live site: every group had a 16–24px gap. The cause was my local preview server showing an old copy of the stylesheet.

   Human decision

   One spacing rule for the whole website.

   Revision

   A single 24px gap everywhere, and version stamps that make browsers load the newest styles.

   Outcome

   My eye caught a real inconsistency (the gaps did vary), and the AI's testing found the root cause.

10. #32–33 Sep 25

    Workflow or agent? I brought the research

    Clearly distinguish AI workflows from agentic AI, using this article.

    • Tell me which case study fits which model, and adapt each experience to match.
    • Make every case study answer seven questions: the problem, why it mattered, the research, the constraints, the decisions, engineering's influence, and what changed after launch.
    • These are proof-of-concept demos, so don't overthink or overcomplicate them.

    Interpretation

    Classify the three case studies against a published framework, and answer the seven questions from a second article on every case study.

    Exploration

    The AI read both articles and mapped them. Claims Adjuster Copilot is an AI workflow: fixed steps, and a person approves every payout. Enterprise Tool Governance and AI Insurance Quote are agentic AI.

    Human decision

    I changed the Claims chip to “AI Workflow” and set the roles I'm targeting.

    Revision

    A workflow-versus-agent comparison table, and “the case in seven answers” on each case study.

    Outcome

    The portfolio reads as AI product design, not just UX with AI added.

11. #34–53 Sep 25 and 26

    VEMA: me as a bot

    Build an AI assistant for my portfolio called VEMA: Virtual Engine for Multimodal Assistance.

    • VEMA is a virtual version of me: recruiters and hiring managers can interview it about my experience, skills and roles, and it answers on my behalf.
    • Use your full capabilities in design and engineering to build it.

    Interpretation

    An interview-ready AI twin that answers only from my resume and portfolio, says clearly that it's an AI, and hands off to the real me.

    Exploration

    The AI built quick answers from one knowledge file (these work with no AI key), a Claude-powered mode, voice in and out, and a fun mode.

    Human decision

    A footer line, “Talk to the real Venu Mathukumalli”. The panel blended into the page and had too many outlines, so it was restyled. I suggested a light glow and the idle rainbow. The fun ideas were mine too: an aeroplane, baseball, a dance and a dark overlay. Then I pruned: chess, magic, fireworks, coffee or tea and the rocket went, and later baseball and cricket.

    Revision

    The AI declined to add a copyrighted song (Naatu Naatu). It wrote an original track instead, with a way to add a licensed clip.

    Outcome

    VEMA on every page, with four fun effects and calm versions for visitors who prefer reduced motion.

12. #38, 45, 51, 52, 61 Sep 25 and 26

    The voice took five rounds

    Make VEMA's voice work, and sound human.

    • The voice sounds robotic; make it sound like a real person.
    • Read-aloud isn't working on localhost.
    • The female and male voices still don't read the answers.
    • I still can't hear VEMA on desktop or mobile, although it worked on localhost earlier.

    Interpretation

    My reports were the ground truth. The AI's fixes worked in its test browser but not in mine.

    Exploration

    Tracing speech in a real Chrome window found the causes: Chrome silently drops speech that starts right after a cancel, a “priming” workaround jammed the speech queue, and phones only allow audio that starts from a tap.

    Human decision

    I kept testing on my own laptop and phone until it worked. Later I chose a male voice only.

    Revision

    A rebuilt speech pipeline (speak inside the tap, retry on a device voice, clear hints), plus support for neural voices.

    Outcome

    The honest status: device voices vary, and the human-sounding voice needs a text-to-speech key that isn't set up yet.

13. #54–59 Sep 26

    Start with a bang: the resume reel

    Act as a world-class motion designer and create a 15-second resume reel.

    • Make it dynamic and confident: open with a striking hook in the first second.
    • Move through distinct techniques (typography, shape play, camera moves, color shifts), cut to the rhythm of music.
    • Land on a clean, memorable final frame.
    • Place it as a hero as wide as the content, with rounded corners. At the end it fades, the content moves up, and a small play button lets visitors replay it.

    Interpretation

    My own brief: a motion-graphics hero as wide as the content, with rounded corners, that fades away and leaves a play button behind.

    Exploration

    The AI built a 15-second, 8-scene reel in code, in orange and white on dark ink.

    Human decision

    The text moved too fast to read, so extend it to 30 seconds. Don't show countries. Use a portrait version on phones. Remove the sky-blue background from one frame. Add a wall of brand logos. Turn the reel into the play button.

    Revision

    15 → 30 → 38 → 39 seconds. Light original music that starts muted, a portrait cut for phones, and the case study apps in the spotlight.

    Outcome

    The reel ends by shrinking into the orange play button.

14. #60 Sep 26

    One dot, one story

    Make a rounded orange dot the core brand element.

    • It starts as the logo beside my name, moves into the reel and ends as the play button.
    • The VEMA icon stands on its own, in darker orange gradients.
    • Bring orange into the UI where it helps, such as the calls to action, and adjust the shades so orange and white pass accessibility contrast.

    Interpretation

    A brand system built from a single element.

    Exploration

    The AI found the reel orange (#FF5A1F) failed contrast: 2.5:1 on the gray page and 3.1:1 behind white text. It proposed two shades: #E8501A for graphics (3:1) and #C2410C for buttons with white text (5.2:1).

    Human decision

    The dot story, the dark-orange VEMA icon, and permission to bring orange into the buttons.

    Revision

    In review, the first cut sent the dot straight through the letters of “VENU”. The fix: the dot takes its place first, and the word slams in to meet it.

    Outcome

    The header dot flies into the reel, becomes the full stop, floods the last frame and lands as the play button.

15. #61–70 Sep 26

    Guardrails, trust and control

    Give visitors more from VEMA, and give me more control over my content.

    • Let VEMA answer any question the way Claude would, with guardrails against inappropriate or offensive content, while answering everything about my resume and portfolio.
    • Generate follow-up questions from the conversation, and add “Ask me a design question”.
    • After six questions about me or my work, show “You're hired!”, as if the interview has ended.
    • Restrict copying, and make the case study decks view only.

    Interpretation

    VEMA as a broader assistant and a design knowledge hub, with clear limits, and more control over my own content.

    Exploration

    The AI added a Claude-powered general mode with guardrails and 49 researched design answers. Suggested questions now follow the conversation, and a “You're hired!” moment arrives after six interview questions.

    Human decision

    Restrict copying, make the case study decks view only, add my photo, and fit the reel above the fold on my 13-inch laptop.

    Revision

    The AI said plainly that copy protection only stops casual copying, since screenshots still work. It then showed the decks as slide images and kept the PDF files off the live site.

    Outcome

    My content is harder to lift, and a visitor never has to hunt for the play controls.

16. #71 Sep 27

    This page

    Document how we built this site together, as a transparent source of truth.

    • Show my prompts, the decisions, the corrections and the iterations.
    • Don't claim a token count or total hours unless those numbers can be recovered or reasonably calculated. Invented statistics would undermine the trust this page is meant to create.

    Interpretation

    A source of truth, not a story about AI magic.

    Exploration

    The AI parsed the session logs on my Mac: messages, responses, models, tokens, tool actions, deploys and timestamps.

    Human decision

    Show the process, the failures and the judgment, and label every estimate.

    Revision

    Confidential materials, file names and client-identifying details are left out on purpose.

    Outcome

    The page you are reading.

17. #74–77 Sep 27 and 28

    A design system, and a stop I agreed with

    Refine this page, and document the system behind the site.

    • Include everything in the record: my original screenshots, content and meeting notes. I'll decide later whether it stays public.
    • Move the “How I developed this site” link under the copyright; it takes too much space.
    • Rewrite my prompts in the record clearly and professionally. I typed them on the fly.
    • Create a design system for the site: a UI library, brand colors and theming, with a 60 / 30 / 10 color rule (background, sky blue, orange).
    • Animate the dot beside my name: slow, very subtle, and on a loop.

    Interpretation

    A fuller private record, a cleaner public one, and a reference for the visual system.

    Exploration

    The AI started a private, local-only copy with the original files. Claude Code's permission system blocked it twice as a sensitive action, because it pulled confidential employer material into a new document. The AI stopped instead of finding a way around it.

    Human decision

    I set the 60 / 30 / 10 color rule and the brief for the dot. Whether a fuller record would ever be public stayed my call.

    Revision

    Every prompt in the record was rewritten as a goal plus requirements, with the meaning unchanged. A Design System page joined this one in the footer.

    Outcome

    My longer rewrite of this page's brief (#76) hit the weekly usage limit. The retry the next night (#77) failed because the conversation had grown too long, so the work moved on.

18. #78–88, 102–104 Sep 28 and 29

    From one laptop to GitHub

    Put this project in a new private GitHub repository.

    • Package the code so I can also host it elsewhere or run it locally.
    • Then pull the latest changes from the main branch and redeploy to Vercel.

    Interpretation

    Version history and one source of truth, instead of a folder on my laptop.

    Exploration

    The GitHub command-line tool wasn't installed, so I created the repository on GitHub and signed in from the terminal. It took eight terminal attempts.

    Human decision

    I chose GitHub over the downloadable package (#103).

    Revision

    The AI also packaged the site as downloadable archives with a deployment guide.

    Outcome

    The first commit landed on Sep 28. Two days later I asked for a beta branch for the link I had already shared with companies (#112). Now every push to main updates the live site.

19. #89–101 Sep 28 and 29

    Less, again

    Simplify the site.

    • Narrow the content to 10 columns; keep the header and footer at 12.
    • Remove the resume section, the dance question and the Projects link.
    • Rename Figma Seat Governance to Enterprise Tool Governance, and remove the word “Figma” from the case study. I'll explain the tool in person.
    • Add thumbnails to the case studies, then make them compact: a small image on the left, the text on the right.
    • Make my headshot smaller.

    Interpretation

    A tighter, quieter home page that leaves more for the conversation.

    Exploration

    Claude Haiku 4.5 made these changes. The links were renamed before the files, which broke the Enterprise Tool Governance case study until I reported it (#101).

    Human decision

    Remove the divider lines between sections instead of fighting the gap under the header, and let visitors copy text again while images stay protected (#100).

    Revision

    The headshot went through five rounds of resizing before landing at 200 × 200 px (#111).

    Outcome

    Content in 10 columns, three compact case study cards with thumbnails, and a renamed case study.

20. #111, 114, 125–131 Sep 30 and Oct 1

    No real client names, anywhere

    Remove real client names from the site.

    • Replace real company and client names with aliases: “Northstar”, “Insurance Company” and “Community Housing Services”.
    • Keep real company names only in my Experience section.
    • That includes what visitors see after signing in: no real client names before or after login.
    • Don't change my resume. I'm applying for jobs with it.

    Interpretation

    One naming rule for the whole site, with two deliberate exceptions: the Experience section and the resume.

    Exploration

    The first pass also changed my Experience section, which I reversed (#114). Later sweeps searched every page, script, data file, PDF and file name.

    Human decision

    Aliases everywhere, including the sign-in-only area. Real names only on my resume.

    Revision

    The AI found real names where a visitor never reads but a browser still downloads: VEMA's matching keywords and the internal IDs in the sign-in data. It also removed a client's logo from the reel.

    Outcome

    One naming rule, checked across the whole site, with the resume left exactly as I wrote it.

21. #112–114, 120–124 Sep 30 and Oct 1

    The reel, restored, with a pause button

    Refine the intro reel.

    • Bring back the original sequence, from the hook to the finale, and add a Pause/Play button.
    • Add one more logo so the brand wall has four per row, and hold that frame three seconds longer.
    • When the reel ends, show the play button in the top-right corner.
    • When someone shares my link, show the home page as the preview image, not a case study screen.

    Interpretation

    A reel visitors can stop, and a play button that always lands where they expect it.

    Exploration

    My request to “reverse the content” was read as “play it backwards” (#112), so I asked for the original order back (#113).

    Human decision

    One Pause/Play toggle instead of two buttons, and a play button aligned to the content's right edge (#121–122).

    Revision

    Nova traced the missing play button to code that picked the wrong button (#120), and found that resume never ran and paused scenes kept moving (#123). I noticed the play button covering VEMA's panel (#124).

    Outcome

    A 42-second reel with a working pause, a play button on the grid, and the home page as the preview when the link is shared.

22. #107–109, 130–131 Sep 30 and Oct 1

    VEMA, simpler and clearer

    Make VEMA simpler to use.

    • Close the bot, and the airplane and motorcycle effects, with a click anywhere outside them.
    • Tighten the header: put the sound, new chat and close buttons on the VEMA line.
    • Read every resume and portfolio answer aloud in the male voice, but not the design questions.
    • The pilot's greeting says “Hi recruiters”. Speak to everyone who visits.

    Interpretation

    Fewer clicks, less chrome, and a voice that matches the interview.

    Exploration

    Clicking outside worked for the effects, but the bot sometimes needed two clicks to open again.

    Human decision

    Keep click-anywhere for the effects, and remove it from the bot (#109).

    Revision

    The header's intro went from three lines to two. Only “Tell me about yourself” had spoken on its own; now every resume and portfolio answer does.

    Outcome

    The captain now says “Welcome aboard, everyone!”

23. #120–129 Oct 1

    Claude builds, Nova audits

    Fix these five regressions from the last round.

    • The Design System link in every footer is broken: its tag is missing a “>”.
    • A sentence on the Projects page reads “including the a”.
    • The three “Deep dive” links need names that say which case study they open.
    • Empty footer markup is still on four pages.
    • The reel still loads a client's logo.

    Interpretation

    A second pair of eyes on every round: Claude builds, Nova checks, and I decide.

    Exploration

    These came from one bulk find-and-replace by Claude Haiku 4.5 (#125). The same edit also broke VEMA on every page by putting curly quotes into its code, and reported a cleanup it hadn't done.

    Human decision

    I added Nova, my AI collaborator in Muse, as the auditor, and passed its findings to Claude, round by round.

    Revision

    Claude Opus 5.5 caught the VEMA break with a syntax check and the broken markup with a tag scan, so two of Nova's five findings were already fixed when the report arrived. It also tested Nova's exact pause fix, found two glitches, and changed it (#123). Nova later found that Escape no longer closed VEMA on the live site (#129).

    Outcome

    Three layers of quality checks: the AI's own tests, Nova's inspection, and my testing on my laptop and phone.