A design system in pure CSS
Colors, spacing and type all resolve to CSS tokens, no framework underneath. GSAP 3, ScrollTrigger and Lenis handle motion on top of that base.
in productionbernardoiannini.com2026
bernardoiannini.com · This Site
This portfolio is a static site written by hand in vanilla HTML, CSS and JavaScript, with no frameworks anywhere in the stack. Every visual decision lives in a custom design system driven by CSS tokens, and the motion layer runs on GSAP 3 with ScrollTrigger and Lenis smooth scrolling.
HTML5CSS3JavaScript (vanilla)GSAP 3ScrollTriggerLenisNode.jsMarkdownSupabaseVercel
About the project
This portfolio is a static site written by hand in vanilla HTML, CSS and JavaScript, with no frameworks anywhere in the stack. Every visual decision lives in a custom design system driven by CSS tokens, and the motion layer runs on GSAP 3 with ScrollTrigger and Lenis smooth scrolling. Remove GSAP and the site still works from end to end.
The EN/PT switch is an i18n engine written from scratch: the entire site changes language without reloading the page. The Newsroom is compiled at build time by a Node script that turns Markdown into static pages, managed through a local admin panel backed by Supabase. Deploys are fully static on Vercel, with sitemap, aria attributes and reduced-motion support.
Video coming soon
How it was built
Two languages, zero reloads
The EN/PT engine was written by hand: one click swaps every string on the site without reloading the page, no i18n library involved.
Markdown in, static pages out
A Node build compiles the Newsroom from Markdown into plain static pages. Posts are managed in a local admin panel backed by Supabase.
Fully working with motion off
Disable GSAP and every page keeps working: motion is an extra layer, never a dependency. Reduced-motion respected, on a fully static Vercel deploy.
cat specs.txt
Designed, built and shipped live by Bernardo Iannini
Get in touch