Portfolio & Client Blueprint

The Challenge: From Static to Dynamic

The initial version of HyCoder.com was a hardcoded SvelteKit site. While performant, this architecture was inflexible. Updating content required code changes and a full redeployment, and it didn't represent the dynamic, CMS-driven solutions that are essential for modern client projects.

The Solution: A Headless Architecture with Sanity.io

To solve this, the site was re-architected around a headless CMS. Sanity.io was chosen for its flexibility and real-time content updates. This migration involved modeling all site content as structured data and replacing static components with dynamic ones that fetch data from the Sanity API.

The Optimization Campaign

Achieving a perfect 100 on desktop is common; achieving a 99 on mobile with a rich, dual-font design system requires obsession. Our initial audit showed room for improvement in Largest Contentful Paint (LCP). We executed a four-step engineering campaign to fix it without compromising the new "Architectural" aesthetic.

1. Dual-Font Architecture without the Drag

A common trade-off is "fast vs. beautiful." Most sites stick to one font to save milliseconds. We rejected that compromise. We engineered a way to run Space Grotesk (Display) and Inter (Body) simultaneously while keeping the site blazing fast.

Aggressive Subsetting: We processed the font files to strip unused glyphs (like Cyrillic or Greek characters).

• Inter: Reduced from 344KB to 97KB (-72%).
• Space Grotesk: Reduced to just 22KB.

Zero Shift (CLS 0.008): We calculated precise ascent-override and size-adjust metrics for both fonts. This ensures the system fallback font matches the custom font's spacing perfectly pixel-for-pixel, eliminating the visual "jump" when the font loads.

2. DPR-Aware Image Delivery

Mobile devices often download massive desktop images just to display them on small screens. We refactored our image component to handle Device Pixel Ratio (DPR).

The Fix: We introduced granular width tiers (560px, 640px). An iPhone now downloads an image that matches its exact physical pixels, avoiding the download of a generic 1200px desktop asset.

LCP Priority: We disabled lazy-loading for the Hero image to prioritize it in the critical render path.

3. Intelligent Analytics

Marketing tools usually kill performance. We migrated to a lightweight setup (Plausible) and implemented a Hybrid Deferred Loading strategy. The script only loads when the browser's main thread is idle (requestIdleCallback), guaranteeing it never competes with the site's interactivity (TBT 0ms).

4. The Result

• Mobile Performance: 99/100
• LCP: Stabilized at 2.1s (Green)
• CLS: Reduced to 0.008 (Virtually zero)
• Total Blocking Time: 0ms

Performance by Design: Incremental Static Regeneration (ISR)

A key goal was to achieve maximum performance without sacrificing the ability to easily update content. This site uses a sophisticated hosting architecture called Incremental Static Regeneration (ISR).

How it works for you: Think of it like a coffee shop that always keeps a fresh pot of coffee ready for customers.

1. When the first person requests a page, it's generated and saved (cached) at Vercel's global edge network.
2. Every subsequent visitor gets this super-fast, pre-built page instantly.
3. In the background, the cache automatically checks for new content from the CMS every hour.

This gives you the best of both worlds:

• ✅ Blazing Speed: Your visitors always get an instant response from the cache.
• ✅ Automatic Updates: Content changes you make in Sanity appear on the live site automatically, with no need for a developer or a new deployment.
• ✅ High Reliability: The site remains fast and available even if the CMS is temporarily offline.

This architecture results in top-tier performance metrics, ensuring an excellent user experience and better search engine rankings.

The Results: A Scalable Blueprint

The hycoder.com site is now a fully content-manageable, high-performance application. More importantly, its architecture serves as the official "Blueprint" for all future client projects, guaranteeing a professional, scalable, and maintainable final product.