How I work with AI

All three case studies sat at equal weight. The strongest piece wasn't reading as the primary one — the layout was making a tie I never intended.

Rework the work section so the strongest project gets full-width placement; secondary projects sit in a denser layout below. Make it feel editorial without losing density.

Initial proposal split the second row 50/50. Pushed back: hierarchy has to hold inside the row, not just between rows. Settled on 7/5. Widened the content shell from max-w-3xl to max-w-5xl so the editorial quality could live in negative space.

Reading order is set before the visitor scans: Remitly as one unbroken composition; UoP and MSCI in deliberate asymmetry below. The layout makes the hierarchy claim before the copy has to.

The hero CTA needs to read as crafted — tactile, precise — without becoming a gimmick that distracts from intent.

Build a magnetic 'View case studies' button that feels tactile and precise. The interaction should support intent, not perform craft. Keep it readable, accessible, performant.

First pass pulled at 0.5× and the button felt like it was chasing the cursor — the label drifted off its visual anchor. Cut to 0.35× so the focus ring and hit target stay put. Spring retuned for precise on entry, calm on exit.

The cursor expands to wrap the button at the same moment the button pulls toward the cursor — they meet partway. Responsiveness reads as a property of the interaction, not a performance of it.

Work cards overlay text on unpredictable image backgrounds. WCAG AA is the constraint; a bright, high-detail photo underneath is the real test.

Design the work cards so overlaid text stays legible across any image. Use WCAG AA as the standard, but optimize for the hardest real-world case — a bright, high-detail photo underneath.

First pass passed AA on paper, but the company-name text sat at 4.8:1 — basically the 4.5 floor. Marginal isn't done. Pushed the gradient from black/80 to black/90, lifted category to white/75 and company to white/65. Comfortable margin, not the legal minimum.

Worst-case image stops dictating the design. Hierarchy holds over any project photo without re-testing, and the AA contract is honored with room to spare.

Chat hero needs to expand as the conversation grows without layout shift. The photograph has to feel anchored — depth, not a moving image.

Design the hero so the background image progressively reveals downward as the conversation expands. The image stays anchored — depth and continuity, not layout shift. Cinematic, restrained, deliberate.

Percentage-based backgroundPosition broke the anchor: as the container grew, the image drifted upward. Pushed for a fixed-pixel solution — preload the image, compute the exact pixel equivalent of 40% for the initial height, lock it in. The image stops moving the moment it's measured.

A fixed photographic plate behind a growing aperture. The container grows; the image doesn't. Restraint over animation — the camera doesn't move, the frame opens.

Refine the navigation for my portfolio so it feels simple, calm, and obvious. The user should always know where they are and what to explore next. Prioritize clarity over novelty, and make the nav feel like part of the brand system rather than a generic header.

The biggest miss against the brief was that nothing told you where you were: every label looked identical. So the first change is an active state: pathname match for the build-log route, and an IntersectionObserver scrollspy for the home anchors (Work, About, Contact). The active line sits ~30% down the viewport so the label flips at the moment a section feels 'in view' rather than the instant its top touches the fold. For the brand layer, swapped the wordmark from 'Ann' to 'ann.' (the lowercase plus terminal period gives the nav a voice instead of reading as a generic header). The active-link treatment is a 1.5px underline at 6px offset, using decoration-current so it inherits whatever color the bar is in (white over case-study hero, dark over the rest). No badges, no boxes, no novelty, just a quiet line under whichever label is current.

Help me design a build log page that documents how I built my portfolio with AI tools. Each entry should feel like a design artifact, not just a changelog. I want every card to show the feature, the reasoning behind it, and the prompt/code that made it possible. The experience should reinforce that I use AI thoughtfully as part of my design process, not as a shortcut.

The structural decision is splitting each card into two equal halves: the live demo on the left, the conversation + code on the right. Putting them at the same hierarchy level is what makes the card read as a design artifact rather than a list of commits: the prompt sits co-equal to the output, not as a footnote. For page rhythm, a pin-and-scroll horizontal strip (sticky section, x-translate driven by scroll progress) lets each card hold the full viewport. One artifact at a time, no parallel scanning, with carousel dots as a wayfinding aid. Mobile falls back to a vertical stack, same content hierarchy, just restacked for narrow widths.

Build the projects section. I want a bento grid feel, different card sizes. Click a card to expand it into a full overlay with project details.

I'll use a 12-column CSS grid with alternating 7/5 column splits for the asymmetric bento layout. Framer-motion's layoutId is the right tool for the expand animation: the card and modal share an ID so the element smoothly morphs between states. The backdrop blurs on open; Escape and click-outside both dismiss. Creating components/Projects.tsx.