Complete performance overhaul and modernization of a professional VFX supervisor's portfolio website, achieving a 45% improvement in Lighthouse score while integrating a headless CMS for easy content management.
Transformed a slow, hard-coded portfolio into a high-performance, CMS-powered website with a 69% reduction in bundle size and professional content management capabilities.
Role: Full-stack Developer & Performance Engineer
Timeframe: October 2025 (1 week)
The client's portfolio suffered from severe performance issues with a Lighthouse score of 55, caused by 22 unoptimised images (5-10MB total), 250KB of MUI/Emotion libraries used for a single hook, and hard-coded content requiring developer updates. The site needed to showcase high-quality VFX work while loading quickly and enabling independent content management.
Started with comprehensive performance analysis identifying critical bottlenecks. Replaced all native img tags with Next.js Image component for automatic WebP/AVIF conversion, lazy loading, and responsive sizing integrated with Sanity CDN. Removed MUI and Emotion entirely, replacing the single useMediaQuery hook with a custom 1KB implementation that eliminated 250KB of dependencies. Integrated Sanity CMS with custom schemas for Films, About, and Contact, embedding the Studio at /studio route. Implemented ISR with 60-second revalidation for near-instant content updates. Migrated to Next.js 15 App Router with Server Components for static content and Client Components only where necessary.
Achieved 82% improvement in Lighthouse score (55 to 100) and 69% reduction in bundle size (360KB to 110KB). Dramatically improved LCP through image optimisation and reduced TTI by 30-40%. Client can now independently manage film gallery, bio, and contact information through intuitive CMS interface with changes appearing live within 60 seconds. Maintained full TypeScript strict mode compliance and WCAG accessibility standards throughout optimisation process.
Built on Next.js 15 App Router with React Server Components for static content and selective Client Components for interactive elements. Sanity serves as headless CMS with custom schemas, embedded Studio at /studio, and type-safe queries with ISR revalidation. Images delivered through Sanity CDN with automatic optimisation via Next.js Image component (WebP/AVIF, lazy loading, priority hints). Custom lightweight hooks replace heavy third-party dependencies. Font loading optimised with display: swap and selective weight loading.
Used Claude in Cursor extensively for architecture planning, generating comprehensive implementation roadmap with phased approach. AI assisted in creating Sanity schemas, TypeScript types, and type-safe query functions. Generated optimisation strategies based on performance analysis and recommended targeted improvements. Created client-facing documentation (SANITY_SETUP.md, QUICK_START.md) and ensured accessibility compliance and modern Next.js patterns throughout development.
Add Google Analytics for client insights, implement video showreel support in Sanity schema, expand film entries with role/year/studio metadata, and add client-side search and filtering by genre/year. Consider dark mode implementation and automated Lighthouse CI in deployment pipeline.