Capabilities
- Zero JavaScript
Frontend
Astro
Tailwind
CSSTesla Landing Page
CompletedA rebuild of Tesla's homepage using Astro and Tailwind. More than a visual clone, it's an exercise in how far you can get without JavaScript: full-screen section scrolling and a header that changes colour with whatever sits behind it, both done in pure CSS. The result is a landing that reaches the browser with essentially no bundle.
The challenge
The original landing relies on section-by-section scrolling and a header that changes colour depending on what's underneath it. Both are usually done with scroll listeners and observers; the point here was to get them with CSS alone.
Screenshots
Desktop 
Mobile
Architecture
Architecture diagram for Tesla Landing Page
Implementation
Section scrolling without JavaScript
Full-screen movement between sections is handled with mandatory CSS scroll snap — not a single scroll listener or carousel library.
Header that adapts to its section
The header text colour changes with whatever section sits behind it, leaning on currentColor to inherit from each block instead of computing it at runtime.
Zero JavaScript by default
Astro renders everything to static HTML and only hydrates what genuinely needs it, so the page reaches the browser with essentially no bundle.
Laid out with Tailwind
The whole visual system — type, spacing, overlays on the background imagery and responsive behaviour — built with Tailwind utilities.