Case Study
Architected a responsive, accessible landing page with optimised Core Web Vitals scores. Implemented component-driven development with comprehensive test coverage.
Overview
A high-fidelity landing page for a travel platform, built to demonstrate what a polished, performant frontend looks like when accessibility and Core Web Vitals are treated as first-class requirements rather than afterthoughts.
The constraint
Landing pages are often built fast and forgotten. The challenge here was treating it as a production-grade frontend — hitting 95+ across all Lighthouse categories while keeping the component structure clean enough to hand off to another developer.
Highlights
Optimised for all four Core Web Vitals metrics — LCP, FID, CLS, and FCP — achieving 95+ Lighthouse scores across performance, accessibility, best practices, and SEO. Every image was sized, every font was preloaded, and every layout shift was eliminated.
Built with a strict component hierarchy — each section isolated, each component responsible for a single visual unit. This makes the codebase easy to scan and modify without risking unintended side effects across the page.
Full semantic HTML structure, keyboard navigation support, ARIA attributes where needed, and sufficient colour contrast ratios throughout. Accessibility was not retrofitted — it was baked into every component from the start.
Stack
React · TypeScript · Tailwind CSS
The discipline of building to a 95+ Lighthouse score changes how you write frontend code. Performance and accessibility constraints are not restrictions — they are the conditions that produce better engineering.