Landing page - La Matera

#UI #3D #Three.js #Frontend #Freelance
Captura de pantalla de La Matera
Captura de pantalla de La Matera

Rediseño web para un restaurante argentino con una experiencia más visual y directa.

La Matera fue mi primer proyecto freelance real: un rediseño completo para un restaurante argentino en Guadalajara. El objetivo era que el sitio transmitiera mejor la personalidad del lugar, mostrara el menú con claridad y facilitara que una persona pudiera reservar o pedir información sin fricción.

Trabajé la experiencia alrededor de la atmósfera del restaurante: un video en el hero, secciones pensadas para antojar los platillos, un menú organizado por categorías y un efecto de humo con Three.js que le da profundidad visual. Fue un proyecto importante porque me obligó a pensar más allá del código: tiempos, expectativas del cliente, contenido y decisiones de diseño.

Tecnologías y decisiones

  1. Astro: Fue la base del sitio por su buen rendimiento para landings y por la facilidad de separar la página en componentes pequeños.

  2. Tailwind CSS: Lo usé para construir dos experiencias responsivas: una versión mobile inspirada en el interior del restaurante y una versión desktop más amplia y visual.

  3. Three.js: Me permitió integrar un efecto de humo con partículas 3D para reforzar la atmósfera del sitio sin depender solo de imágenes estáticas.

  4. Optimización de imágenes: Convertí los recursos visuales a WebP para cuidar los tiempos de carga en una página con mucho material visual.

Qué construí

  • Diseñé un hero con video y CTA directo a WhatsApp para que la intención de reserva estuviera presente desde el inicio.
  • Organicé el menú digital por categorías para que fuera más fácil explorar platillos desde móvil.
  • Adapté un efecto de humo 3D inspirado en la comunidad de Midudev y aprendí a integrarlo sin que compitiera con el contenido.
  • Me llevé una primera experiencia real trabajando con un cliente, ajustando diseño, contenido y funcionalidad a una necesidad concreta.