Capacidades
- Cero JavaScript
Frontend
Astro
Tailwind
CSSTesla Landing Page
CompletadoReconstrucción de la página de inicio de Tesla usando Astro y Tailwind. Más que un clon visual, es un ejercicio de hasta dónde se puede llegar sin JavaScript: el resultado es una landing a pantalla completa por secciones que envía prácticamente cero código al navegador.
El reto
La landing original depende de scroll por secciones y de un header que cambia de color según lo que tiene debajo. Ambas cosas se suelen resolver con listeners de scroll y observers; la gracia estaba en conseguirlas solo con CSS.
Implementación
Scroll por secciones sin JavaScript
El desplazamiento a pantalla completa entre secciones está resuelto con scroll snap obligatorio en CSS, sin un solo listener de scroll ni librería de carrusel.
Header que se adapta a la sección
El color del texto de la cabecera cambia según la sección sobre la que está, aprovechando currentColor para heredar el color desde cada bloque en lugar de calcularlo en tiempo de ejecución.
Cero JavaScript por defecto
Astro renderiza todo a HTML estático y solo hidrata lo que realmente lo necesita, así que la página llega al navegador prácticamente sin bundle.
Maquetación con Tailwind
Todo el sistema visual —tipografías, espaciados, superposiciones sobre las imágenes de fondo y comportamiento responsive— construido con utilidades de Tailwind.