Website Development for Finalv1
Leonardo Leal
The client
Finalv1 is a brand design studio, run by Jason McCall. Its clients include Dribbble, R/GA and Baskin Robbins.
The brief
Jason had the new site fully designed in Figma, at four screen sizes, with the motion described in comments on the file. The plan was to build it in Framer. The old site ran on WordPress.
The Finalv1 home, with the blackletter wordmark over the first projects.
Code instead of a site builder
I suggested building it in code instead:
No monthly platform fee for as long as the site exists.
The code, the CMS and the hosting belong to the studio, with nothing to rent and nothing to be locked into.
It went from yes to live in twelve days. The five projects of the old site kept their addresses, so the links already out there kept working.
The design, exactly as drawn
The Figma file has the site at four widths: 420, 764, 1392 and 2070 px. Instead of four style sheets, every size on the page is written in pixels of the closest frame and scales around it. The site matches each frame exactly and moves smoothly in between, so the sizes between the four frames are covered too.
Display type grows with the screen.
Small text, like labels, lists and the nav, keeps a fixed reading size.
The home at the four widths of the Figma file, side by side.
The Planwisely project page on a phone.
The home on a phone, in dark mode.
Motion from the design comments
Jason described the motion in 50 comments on the Figma file. Each one was built and then checked on the site, one by one. When he pointed to another website as a reference, I measured it in the browser and matched it.
The opening follows his animation: a line of light opens, the F rises and leaves through the top, and the page comes in already moving, with no pause in between. It plays once, on the first visit, and a slow connection never holds the black screen.
The nav hides on the way down and comes back on the way up.
On hover, the number of a project tile turns into "View".
Two dots at the top switch the whole site between light and dark, colours and dots in one move, and the site remembers the choice.
Smooth scrolling, and a fade between pages.
All of it turns off for visitors whose system asks for reduced motion.
Light and dark, switched from the two dots.
The work is never cropped
On a portfolio, the work comes first. Every tile takes the proportion of its own image. The fixed box in the layout would have cut 8% off each cover. Videos follow the same rule: the site reads the size of each file and gives it its own shape.
Light and fast
Images come from the CMS in the lightest format each browser accepts, AVIF where it can and WebP otherwise, at the width the layout needs, and only when they are about to appear.
The image quality was set by measuring the same cover at four levels. Past 90, only the file grew.
Pointing at a project already loads the first photo of its page.
The site is plain static files on Cloudflare.
Lighthouse on the live site, in the week of launch: 97 for performance on desktop, and 100 for accessibility, best practices and SEO.
Titles, descriptions, canonical URLs, Open Graph, structured data, the sitemap and a real 404 are generated on every build. A check runs before each deploy, and a build that fails it publishes nothing.
The studio publishes on its own
Projects, images, videos and text come from Sanity. When Jason publishes, the site rebuilds and goes live by itself, and a badge in the panel goes from "Updating the site…" to "On the site". If an update would break the site, it does not go out, and the previous version stays.
The About icons are his to change too. Each one is uploaded once, in black, and the site inverts it for the dark theme. The panel came with a written guide and short video guides.
The About icons, flipping through the studio's set.
Launch
The domain, the DNS and the email moved from GoDaddy to Cloudflare in a set order, and the new email forwarding was tested on both addresses.
Image links from the old WordPress site redirect to the same images on the new CDN.
Stack
Astro, as static output
Tailwind CSS v4 and TypeScript
GSAP and Lenis for motion
Sanity as the CMS, with a deploy on every publish
Cloudflare for hosting, DNS and email routing
Adobe Fonts, from the studio's own kit
Scope
Development, from the studio's Figma to launch: front end, motion, CMS, hosting, the move of the domain and email, performance and technical SEO. Design by Finalv1. Live at finalv1.com since September 2026.
Skills
Web Developer · Front-end Developer · Creative Developer · Astro Developer · Sanity Developer
Tools
Astro · Sanity · GSAP · Tailwind CSS · Cloudflare · Figma · TypeScript
Like this project
Posted Oct 18, 2026
Development of the Finalv1 website, from the studio's own Figma to launch in twelve days.
Likes
0
Views
2
Timeline
Sep 17, 2026 - Sep 29, 2026
