1 to 1 Design Implementation
The designs came in detail and were executed with equal precision, translating every spacing value, typographic decision, and interactive state from Figma to browser without compromise. The live site and the design file are the same thing. For a brand built on craft, visual inconsistency carries a cost. We ensured there was none.
Immersive Visual Entry & Infinite Scroll
The first thing a visitor encounters is a cinematic splash screen, a bespoke Lottie animation optimised separately for mobile and desktop.
The home page follows as a seamless, auto-scrolling mosaic of projects: an infinite gallery that draws users into the studio's body of work without requiring them to navigate toward it.
Content Architecture Powered by Sanity CMS
The entire site is underpinned by a deeply configured Sanity.io implementation. Every project is structured through it: metadata, image stacks, multimedia assets, descriptive content, and categorical tags are all authored from a single, flexible content environment.
Sanity also powers the site's filtering logic. Tags created within the CMS flow directly into the front-end index, keeping content and presentation in precise alignment at all times. The technology disappears. The studio simply has control.
Context-Aware Layout Controls
The project listing includes a UI control allowing users to cycle through eight distinct layout configurations for project titles, varying indentation, alignment, and positioning. A small feature that reflects a considered understanding of the client.
Performance-Optimised Video
A custom Vimeo component uses IntersectionObserver to play and pause video as it enters and exits the viewport, delivering a browsing experience that performs efficiently without sacrificing media richness.
Navigation Architecture: Intercepting Routes
The Contact and Credits sections open as side-drawers using Next.js parallel and intercepting routes, preserving the user's position on the page while surfacing additional information.
Shareable, URL-Synced Filtering
The project index supports tag-based filtering by category, location, and year. Every filtered state is reflected in the URL, making any view of the portfolio directly shareable with clients or collaborators.
Fully Responsive & Zoom-Resilient
Built mobile-first and validated across phones, tablets, and desktops. Every layout, animation, and interaction was also tested across browser zoom levels (125%, 150%), ensuring the experience holds without layouts breaking.