Portafoliochevron_rightCHUZO

CHUZO

CHUZO es un proyecto digital desarrollado a medida para una banda de culto de la escena underground de Montreal (Canadá). El objetivo principal de la web fue construir su centro de operaciones digital (Hub Oficial) para centralizar el lanzamiento de sus producciones discográficas (como su EP M.T.M.D. — Maximum Threshold, Minimum Decay), la comercialización directa de merchandising exclusivo, la publicación de fechas de gira por Norteamérica y la captación de promotores mediante un canal de contratación formal (Booking).

El sitio web no es una plantilla genérica de música, sino una extensión visceral de la identidad de la banda: fusiona una estética brutalista industrial (oscura, agresiva y de alto contraste) con una arquitectura web ultra rápida, accesible y orientada a la conversión de oyentes casuales en compradores de vinilos, camisetas y entradas a conciertos.

psychology

El Desafío

Equilibrio entre Estética Extrema y Experiencia de Usuario (UI/UX):

El grindcore y la música extrema exigen un lenguaje visual sucio, analógico y ruidoso. El reto principal fue plasmar esa estética agresiva (noise, tipografías de escala brutal, contrastes punzantes en #FF8500 y negro #111111) sin sacrificar la legibilidad, la jerarquía de contenidos ni la usabilidad en dispositivos móviles.

Interactividad y Multimedia de Alto Rendimiento sin Cargar la Web:

La banda requería una experiencia interactiva inmersiva: video en segundo plano a pantalla completa, galería de fotos en vivo en bucle continuo, reproductor modal (Lightbox) y animaciones visuales temáticas (como un vinilo que sale de su funda). El desafío radicaba en implementar todo esto sin penalizar los tiempos de carga (Core Web Vitals) ni depender de frameworks pesados que ralentizaran la navegación en conexiones móviles.

Bilingüismo Cultural y Geográfico (EN / FR):

Estando afincados en Montreal (Québec), era imperativo ofrecer una experiencia bilingüe nativa e impecable. El sitio debía permitir a los promotores y seguidores locales interactuar en francés (/fr/), manteniendo la misma fluidez y paridad funcional para la audiencia internacional y norteamericana en inglés.

Canalización Comercial Directa y Libre de Comisiones:

La banda no requería un e-commerce sobredimensionado y costoso de mantener, sino un flujo de compra ágil que redirigiera a sus seguidores a su canal verificado en Bandcamp, además de un sistema confiable de recepción de solicitudes de booking con respuesta en menos de 48 horas.

lightbulb

La Solución

A. Rendimiento Extremo con Arquitectura "Zero-Dependency" (Vanilla Stack)

Cero Frameworks Innecesarios: Se prescindió de librerías sobredimensionadas (como React o jQuery) a favor de HTML5 semántico, CSS3 puro y JavaScript nativo (ES6+). Esto garantiza tiempos de carga casi instantáneos (First Contentful Paint < 0.8s), bajo consumo de memoria y compatibilidad total entre navegadores.

Textura de Ruido Procedural (SVG Filter): En lugar de cargar imágenes pesadas de texturas grunge, se generó un filtro de ruido analógico ligero mediante una directiva SVG incrustada (feTurbulence), logrando el efecto granulado sobre el fondo con coste cero en transferencia de datos.

B. Microinteracciones y Efectos Visuales Avanzados

Animación Analógica de Vinilo (Pure CSS): En la sección de discografía y portadas de discos, se diseñó un efecto interactivo donde, al hacer hover sobre la portada (.album-card), la funda exterior se desplaza hacia la izquierda mientras un disco de vinilo realista con galleta central naranja emerge suavemente a la derecha utilizando transiciones aceleradas por GPU con curvas de Bézier elásticas (cubic-bezier(0.175, 0.885, 0.32, 1.275)).

Galería Infinita y Lightbox Nativo: Módulo de galería con carrusel infinito en loop (scroll keyframes), efecto de desaturación a color en hover y un visor Lightbox modal programado en Vanilla JS que soporta navegación táctil y atajos de teclado (Esc, ArrowLeft, ArrowRight).

Background Video Hero via YouTube Iframe API: Integración de video en bucle silenciado y optimizado para cubrir el 100% de la ventana sin barras negras ni controles intrusivos de la interfaz de YouTube, desacoplando el peso del video del hosting propio.

C. Estructura Bilingüe Limpia y Simétrica

Arquitectura Espejo (/ y /fr/): Sistema de conmutación de idioma persistente en la cabecera, con navegación localizada en todos los módulos clave (Discography / Discographie, Events / Événements, Shop / Boutique, Booking).

D. Integración Headless para Booking y Monetización

Gestión Asíncrona de Booking: Formulario interactivo enlazado a un servicio de procesamiento headless (Formspree), que procesa solicitudes de promotores directamente al buzón oficial del grupo sin necesidad de mantener un backend dedicado.

Sincronización Directa con Bandcamp: Fichas de producto con precios en CAD y botones de acción rápida con atributos de seguridad (target="_blank" rel="noopener") dirigidos al catálogo oficial de merchandising físico y digital.