May Pro: catálogo de productos para construcción

May Pro fue un sitio creado desde cero para una marca de productos de construcción, como estucos, adhesivos, morteros y otros materiales técnicos. El sitio sigue publicado en dominio propio y forma parte de la etapa en la que ya estaba usando Astro como base principal para sitios comerciales.

También lo recuerdo porque trabajé con una identidad visual en rojo, un color que me gusta usar pero que exige cuidado para no saturar la interfaz. En este caso funcionó bien como acento para llamadas de atención, navegación y detalles comerciales.

Desarrollo y reto técnico

Desarrollé la estructura del sitio, páginas por línea de producto, secciones comerciales, recursos descargables, botón de WhatsApp, mapa personalizado y contenido visual. En lógica de catálogo, May Pro comparte ideas con Tradeco: distintas páginas para líneas como morteros, estucos o adhesivos, fichas técnicas descargables y transiciones visuales entre secciones.

El reto principal estuvo en equilibrar catálogo técnico, rendimiento y presentación visual. Los PDFs eran importantes porque funcionaban como fichas o materiales comerciales para los productos, así que fue necesario integrarlos y comprimirlos para que no hicieran pesada la experiencia.

También trabajé con video dentro del home. Ahí apareció un problema común: el autoplay no se comportaba igual en iPhone, por lo que tuve que ajustar validaciones y configuración de source para que el video funcionara mejor en mobile.

Visualmente, algunas secciones tenían líneas o elementos que debían cruzar entre bloques. Ese tipo de diseño se ve bien en Figma, pero puede ser delicado al llevarlo a código porque no siempre permite separar las secciones de forma limpia. Resolverlo fue parte del trabajo fino de maquetación.

Tecnologías utilizadas

1. Astro.js
2. Tailwind CSS
3. TypeScript
4. View Transitions
5. Swiper
6. Remix Icon

Resultado

El sitio quedó como un catálogo comercial de productos técnicos para construcción, con recursos descargables, navegación por líneas, video, mapa y contacto por WhatsApp. Para mi portafolio, May Pro representa experiencia en sitios de producto técnico donde la claridad comercial, las fichas descargables y el rendimiento importan tanto como la presentación visual.