frontend

My portfolio had a bare list of projects. I added five capability cards: the CSS grid was solved in twenty minutes. The copy took three rewrites.

TL;DR: The CSS grid for his portfolio's service cards was the easy part, done in 20 minutes with MDN's auto-fill recipe. The hard part was the copy, which took three rewrites to compress into short, blunt descriptions that never truncate. His take: layout is a solved problem, so spend the effort on content, equal heights, and a consistent shadow.

Adding wheel paging to my AI answers popup: a listener that never attached, passive-by-default events, edge detection, and reduced motion.

TL;DR: Building wheel-based answer navigation in a React popup hit two traps: the useEffect ran before the dialog content existed, so the listener attached to a null ref, and wheel listeners default to passive in most browsers, silently neutering preventDefault. Fixing both required dependency-aware attachment and an explicit non-passive listener. Scroll-edge detection plus prefers-reduced-motion CSS handles the rest.

The AI search box now remembers yesterday's questions. The trick: localStorage, a 30-turn cap, and a try/catch that silently surrenders when the browser says no

The homepage blog section used to be three hardcoded cards I edited by hand. Now it fetches the latest posts live, with dates pinned to one timezone.

What commit 70a43a9 taught me about related articles, parallel fetching, a CSS timeline, and a file-tree TOC in a Next.js blog.

Runtime Iconify requests made my blog list icons appear late. I replaced them with server-rendered SVG and fallback icon sets.

Orange looked great in dark mode but washed out in light. A split accent, emerald-600 in light and mint in dark, clears the WCAG contrast bar in both.

Flat gray tag chips all carry equal weight. A 10% primary tint plus a hairline inset ring makes them feel alive and clickable again.

Sidebar headings at 11px uppercase dim gray were the hardest text to read. Switching to 13px bold normal-case plus icons raised contrast and fixed asymmetry.