Fluvial

Fluvial sells natural stone, and the whole site rests on how the stone looks. The designs came to me as a finished Figma file, so my job was translation rather than invention: get it faithful, get it responsive, and build it so the studio could keep adding stock without coming back to me every time.

I set up the project properly before touching a section. Variables, a style system, components, then the CMS. That front-loading is what made the rest of the build fast and what made the QA rounds short.

• A faithful translation of the Figma, not a loose interpretation
• A site that works properly on every screen size, not just desktop
• Stock that can be added and updated without developer involvement
• Motion that supports the photography rather than competing with it
• On-page SEO in place from launch rather than bolted on later

The gallery page needed a toggle that switched between two different views of the same collection. My first instinct was to build two galleries and show one at a time. That works until someone adds a new piece of stock, at which point they have to remember to add it twice, and eventually they will not. A build that depends on the client never making a mistake is a build that breaks.

One collection, one source of truth. I combined Webflow's native tabs with Finsweet Attributes so the tabs handle the view switch and the filter layer handles the content. Adding a new piece of stock means adding one CMS item, and it appears correctly in both views automatically.

The rest of the build followed Client-First naming throughout, so the class system stays readable for whoever picks it up next. GSAP animation was scoped in during the build and kept deliberately subtle, since the photography is the product.

The toggle went through QA unchanged. The client was happy with the result and has since discussed further work with the studio. The site is live.