Skip to main content
v6.27.5

Sticky Navbar, Bundle Optimizations & More

In this release, I focused on performance optimization and making interactions feel more refined across the site.

The navbar now features a sticky latch — snapping into a fixed position as you scroll past the hero, giving navigation a more intentional and polished feel. It stays out of the way when you don't need it and locks in exactly when you do.

Inspired by Gabriel Valdivia's experience migrating away from Framer, I moved to R2 to reduce costs and regain more control over my media pipeline. The migration was the hardest part — not just moving files, but also updating Sanity data and doing a significant refactor of content blocks that were tightly coupled to Cloudflare-specific image and video formats. I took that opportunity to make the code more product-agnostic so those blocks aren't tied to any specific provider. Cloudflare still handles image transformation and blur placeholder generation via srcset, just no longer for storage.

There are occasional image loading inconsistencies I'm still tracking down, could be Next.js, R2 configuration, or something in between — but overall things are in a good place.

This release includes major JavaScript bundle optimizations. The desktop header is now code-split using Next.js dynamic() imports, so mobile devices no longer download or execute the drag system, ResizeObserver loops, or widget animation logic. The interactive code still SSR's for SEO, but the heavy client-side execution is gated to desktop viewports, giving mobile users faster parse times and a better Time to Interactive.Smoother Animations

Mobile header widgets now cascade in with staggered entrance animations featuring subtle 3D perspective effects. All animations respect prefers-reduced-motion for accessibility.

Added 356 lines of centralized spacing rules in typography.css, establishing consistent vertical rhythm across all prose variants. Headings, lists, and blockquotes now follow a unified spacing scale site-wide.

Also in mobile in writing and work detail page, the image and video now edge to edge filling the entire width, not inside the main container. This will look so much neat when reading on mobile.

Screenshot of a blog post by Afnizar Nur Ghifari, featuring text about creating a supportive design community. An image shows a workspace with people collaborating.
  • Work project favicons now use SVG masks instead of CSS border-radius for reliable rounded corner rendering across environments
  • Testimonial accordion auto-pauses when scrolled out of view via IntersectionObserverPagination dots have expanded touch targets using pseudo-elements for better mobile accessibility
  • Avatar widget now loads thumbnail variants for a faster initial renderIncreased Sanity fetch timeout from 5s to 10s to reduce transient failures on slow connections
  • Removed 30+ lines of dead code, including unused image optimization utilities and motion components
  • Simplified image handling by removing redundant Cloudinary/ImageKit transformation logic in favor of consistent R2 URLs