Landing page - La Matera

Rediseño completo de la web de un restaurante argentino en la ciduad de Guadalajara

Ver Sitio Web

Descripción General del Proyecto

La Matera es una landing page desarrollada para un restaurante argentino en Guadalajara, diseñada para ofrecer una experiencia digital inmersiva que refleje la calidez y autenticidad de la cocina argentina.

Este fue mi primer proyecto utilizando un Framework de Frontend. Lo desarrollé con mucha dedicación y esfuerzo, sirviendo como base para explorar y fortalecer mis conocimientos básicos de HTML, CSS y JavaScript. Durante el desarrollo, me enfrenté a diversos desafíos de responsividad, mientras que el diseño fue evolucionando orgánicamente sin una planificación previa - una lección importante sobre la necesidad de planear adecuadamente. De igual forma nacio con el deseo de aportar valor al establecimiento donde he colaborado localmente y al cual le tengo mucho aprecio.

El proyecto se enfoca en crear una interfaz intuitiva y ha demostrado ser una herramienta valiosa para el personal.

Astro Three.js Tailwind CSS Responsive Design

Tecnologías usadas

  1. Astro Framework: Utilizado para crear una aplicación web estática optimizada, aprovechando la facilidad que es trabajar con Astro para este tipo de proyects donde se optimiza mucho el uso de JavaScript

  2. JavaScript: Para implementación de funcionalidades dinámicas como la aleatoriedad de particulas de humo y manejo de interacciones del usuario.

  3. Three.js: Biblioteca de JavaScript para la creación de gráficos 3D en el navegador. Utilizada para implementar los efectos de humo y la atmósfera en la landing page.

  4. Diseño Responsivo: Implementación de una interfaz adaptable que garantiza una experiencia óptima en todos los dispositivos, desde móviles hasta pantallas de escritorio, adaptando un diseño diferente para cada uno de ellos.

Lo que Aprendí

Desarrollo Frontend

  • • Uso de Astro para implementación de una landing page estatica
  • • Introduccion a Three.js para efectos 3D en aplicaciones web
  • • Estilos dinamicos y Responsive

UX/UI Design

  • • Diseño de interfaces que reflejan la identidad de marca del restaurante
  • • Creación de experiencias inmersivas con efectos visuales sutiles
  • • Implementación de navegación intuitiva para menús digitales

Implementación Técnica

Efecto de Humo con Three.js

El efecto de humo se implementó utilizando un sistema de partículas en Three.js, creando 100 partículas que se mueven de forma aleatoria para simular humo real. 

  //   const NUM_OF_PARTICLES = 100;

    for (let p = 0; p < NUM_OF_PARTICLES; p++) {
      const particle = new THREE.Mesh(smokeGeo, smikeMaterial);

      particle.position.set(
        Math.random() * 500 - 250,
        Math.random() * 500 - 250,
        // REDUCIR LAS PARTICULAS O AUMENTAR LA CANTIDAD 
        Math.random() * 1100 - 90
      );

      particle.rotation.z = Math.random() * 60;
      scene.add(particle);
      smokeParticles.push(particle);
      function animateSmoke(){
          requestAnimationFrame(animateSmoke);
          particle.rotation.z += 0.008;
           particle.position.y += 0.001;
           particle.position.x += 0.001;
      } 
      animateSmoke();
    }