frontend

The right context panel dropped its floating-card frame for a single left-border divider, matching the sidebar's design language.

TL;DR: The author changed a right panel from floating card to flush panel by swapping rounded corners and a four-sided border for a single left border. The border's job shifted from frame to divider, not removal. Lesson: when converting a card to a panel, ask what the border should do now.

The unscrolled navbar looked borderless because border-transparent still renders 1px with an invisible color. One-line fix: border-border/60.

TL;DR: The navbar's "missing" border was actually always rendered with border-transparent, reserving its pixel and preventing layout shift on scroll. The fix was one class swap to border-border/60, letting the existing transition handle everything. Lesson: keep elements present and control their color, not their visibility.

Cards that refuse to line up with the navbar logo come down to gutters: every container moved from px-4 sm:px-6 lg:px-8 to px-3 sm:px-4.

TL;DR: A misaligned card row turned out to be a Tailwind gutter mismatch: the main section used px-4 sm:px-6 lg:px-8 while the navbar used px-3 sm:px-4, leaving a 16-pixel difference at large screens. The fix normalized every max-w-6xl and max-w-7xl container to px-3 sm:px-4, giving one source of truth. Lesson: straight-line misalignment usually means two padding systems assumed identical.

Refactoring the navbar and footer from a max-w-6xl pill into full-bleed bars: max-width moves up one level while content stays mx-auto max-w-6xl.

TL;DR: The blog's pill-shaped header and footer became full-bleed bars with semi-transparent backgrounds and backdrop blur. The trick: the outer element spans the whole viewport while inner content stays wrapped in mx-auto max-w-6xl for readability. A permanent border slot that transitions from border-transparent to visible on scroll prevents any layout shift.

A theme override using the background shorthand silently reset background-clip:text from the base rule, so gradient text rendered as a solid color box.

TL;DR: A CSS background shorthand silently reset background-clip:text, turning gradient text into a solid color box. Swapping to the background-image longhand fixed it, since the base rule's clipping stayed intact. Lesson: the background shorthand resets what you don't set, so per-theme visual checks are now mandatory before pushing.

Hardcoded white GitHub and Next.js icons disappeared the moment the light-mode footer card turned solid white. The fix: var(--foreground).

TL;DR: Fixing the footer card to solid white made hardcoded white icons vanish on white. Swapping every #ffffff in Footer.tsx for var(--foreground) lets icons adapt automatically across themes. Same for the neon gradient: added a denser light-mode variant so it stays visible on white.

Cards styled bg-card/20 through /90 nearly vanished in light mode because Tailwind v4's opacity modifier compiles to color-mix with a token variable.

TL;DR: Tailwind's opacity modifier compiles bg-card/50 into a color-mix() blend against the --card CSS variable, so the same class renders differently per theme. Dark mode contrast hid the issue; light mode made white blends at 20–90% opacity melt into the background. The fix: a light-mode CSS override forcing solid card colors, with shadows for depth instead of alpha.

The five latest posts were trapped in a swipe-one-by-one carousel. For navigation content, a plain vertical list is the honest pattern.

TL;DR: The author shipped a carousel for their latest blog posts, then found it tedious to use themselves. The realization: carousels suit fixed showcases like services, but blog lists are navigation, which needs everything scannable at once. They swapped it for a plain vertical list of five titles with dates, no JS or gestures.

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.