0%
Rocha Visual

ROCHA

Developer · Frontend Engineering · Campaign Platforms

Interfaces · plataformas · experiencias interactivas

Sobre mí y CV
Ciudad de México Desliza o elige una entrada

Developer · Frontend Engineering · UX Engineering

Construyo experiencias digitales desde la interfaz hasta producción.

Desarrollo frontend, plataformas de campaña y experiencias interactivas, combinando UX, debugging y release dentro de proyectos con AirTRFX, Wix, Salesforce Marketing Cloud y Vercel.

Ahora
Developer en Havas Hoy · Cliente principal Volaris
Base
Ciudad de México · Disponible para proyectos remotos
Enfoque
Frontend · Campaign platforms · CRM engineering

00 — Selected Work

Proyectos donde frontend, plataformas y diseño convergen.

Una selección de proyectos por complejidad técnica, restricciones de plataforma y calidad de implementación. Cada tarjeta lleva a su ficha completa más abajo.

01 — Antecedentes · Kinvori · Jun 2023 — Ago 2024

Producción web de alto volumen en Latinoamérica.

La etapa previa a Havas y Volaris. Aquí se formó la velocidad de producción, la consistencia responsive y la costumbre de trabajar dentro de las restricciones de una plataforma.

0+ Proyectos web documentados
0+ Con e-commerce
0 Mercados de Latinoamérica
Sitio de Tigo Cloud Playroom en laptop, tablet y móvil
Sitio de Adriana Echeverría, estudio de fotografía y maquillaje, en tres dispositivos
Tienda Mis Gafas Ya! mostrada en laptop, tablet y móvil
Sitio de Ideco Concrete Studio en laptop, tablet y móvil

Cobertura documentada: Colombia, Honduras, Ecuador, Costa Rica, México, Puerto Rico, Paraguay, Nicaragua y Panamá. Plataforma principal Site.pro, complementada con CSS, librerías y recursos multimedia.

02 — Landings Volaris

Experiencias de campaña, de UX/UI a frontend y release.

Una selección de experiencias donde transformé dinámicas de campaña en interfaces responsive listas para publicación.

01 / 05 · Volaris · 2026

El Piloto de mi Vida

Web app de campaña con frontend en Next.js. Mi alcance cubrió interfaz, integración de cambios, repositorio y release en Vercel; el backend estuvo a cargo de un colaborador.

Rol
Frontend · UI · Integración · Release
Stack
Next.js · TypeScript · Tailwind · Framer Motion · Vercel
Estado
Production
Next.js · TypeScript Stack propio del proyecto

Flujo de usuario y pantallas; backend en colaboración.

Landing de El Piloto de mi Vida con un avión de Volaris y el botón Crear
Hero de Vete a Volar con un avión de Volaris entre nubes al atardecer

02 / 05 · Volaris · 2026

Vete a Volar

Landing de campaña con hero a pantalla completa, animación de entrada y recorrido guiado por scroll hasta la conversión.

Rol
Frontend · UI states · QA · Release
Stack
Wix Studio · Velo · JavaScript · Figma
Estado
Production · campaña estacional de 11 días
0 visitantes únicos
6:46 sesión promedio
0 registros

Campaña de San Valentín. El tráfico se concentró en la ventana de once días que duró la promoción.

03 / 05 · Volaris · 2026

Grandes Nombres

Experiencia de campaña en Wix Studio con interacción visual y formulario público, más el procesamiento posterior de 2,573 registros para limpieza, deduplicación y entrega de información.

Rol
Frontend · Interacción · Procesamiento de datos
Stack
Wix Studio · Velo · JavaScript · Python / pandas
Estado
Production · concurso
0 registros en 4 días

Sin degradación de servicio durante el pico de participación.

Portada de Grandes Nombres con polaroids y nombres escritos a mano
Pantalla de agradecimiento de Ponle tu apodo a un avión con los embajadores de la campaña

04 / 05 · Volaris · Campaign landing

Ponle tu apodo a un avión

Landing de campaña para una dinámica de participación de marca. Mi participación se concentró en frontend e implementación.

Rol
Frontend · Implementación de campaña
Estado
Production · campaña nacional
0 registros

05 / 05 · Volaris × Calimax · 2026

Volaris | Calimax

Landing de registro en Wix Studio con formulario, estados de interfaz y Custom Code para ajustar el comportamiento del widget nativo de Wix Forms.

Rol
Frontend · Custom Code · UI states · QA
Stack
Wix Studio · Velo · JavaScript · Figma
Estado
En producción desde agosto 2026
0 registros
Landing de Volaris y Calimax para ganar un año de vuelos ilimitados registrando tickets
0 registros en producción
0 campañas Volaris
0 meses

Más otras campañas Volaris con 10,000 registros adicionales. Datos a septiembre de 2026.

Hot Tickets

01

Landing bilingüe donde el reto era estilizar los módulos dinámicos de la plataforma sin romper su comportamiento: el buscador, el carrusel de tarifas y las tarjetas de destino los repinta el CMS, así que el Custom Code interviene sobre lo ya montado en vez de reemplazarlo. Incluye debugging de performance en mobile y coordinación con las piezas de CRM de la campaña.

Bilingüe ES/ENMódulos dinámicosCustom CodePerformance
Landing de Hot Tickets de Volaris con el buscador de vuelos y la promoción de verano

Nuevas Rutas

02

Implementación ES/EN de componentes, acordeones y módulos dinámicos, más mejoras de navegación sobre lo que ya existía: una barra de progreso de lectura y un tratamiento visual que ordena el recorrido entre destinos, temporadas y rutas nuevas. Cierra con el flujo de publicación e invalidación de CDN.

NavegaciónBarra de progresoComponentesPublicación / CDN
Sección de temporadas del sitio de Volaris con las tarjetas de destinos

Servicios y membresías Volaris

03

Despliegue del sitio con todos sus componentes y QA de funcionalidad: comportamiento de pestañas, responsive y verificación de que cada servicio enlazara a su landing correcta. Revisar esos enlaces uno por uno es lo que evita que la página se vea bien y lleve a ningún lado.

DespliegueComponentesQA de enlacesResponsive
Sección de servicios de Volaris con las pestañas de asientos, equipaje y mascotas

04 — Salesforce Marketing Cloud

Emails responsive que también funcionan en Outlook.

Maquetación de HTML email en Salesforce Marketing Cloud, con Content Builder, VML/MSO, componentes reutilizables, versiones bilingües y QA cross-client.

Correo de bienvenida de Volaris en español con módulos de servicios y beneficios Bloque de servicios del correo en inglés con equipaje, mascotas y CBX
Bloque informativo del correo con los pasos previos a un vuelo nacional Bloque del correo sobre cómo comprar el cruce Cross Border Xpress
Ver el sistema en Figma Acceso de solo lectura
0 Bloques reutilizables
0 Correos en producción
ES / EN Bilingüe

Qué construyo

01

Librería de 98 bloques de contenido reutilizables, versionados y con nomenclatura propia (cb-), que sostiene 678 correos en producción en español e inglés. Incluye plantillas maestras que el resto del equipo opera de forma autónoma, estructura de A/B testing y compatibilidad cross-client con fallbacks VML/MSO para Outlook.

Dónde está el límite

02

Trabajo sobre templates con lógica AMPscript definida por el equipo CRM, integrando y estilizando los bloques HTML que controlan sus diferentes estados.

05 — Generative Visuals

Una misma dirección visual, adaptada por segmento.

Serie visual para campañas y journeys CRM: variaciones por audiencia, intención y canal, manteniendo consistencia de marca en cada formato.

Sigue bajando

Pieza de altitude by Volaris para segmento Business, con una viajera de negocios en sala de espera Pieza de altitude by Volaris para segmento VFR, con una familia reunida en el aeropuerto
Segmentación CRMVersiones dedicadas por segmento: VFR, Business, Leisure y perfiles derivados. La misma promesa cambia de tono, de casting y de contexto según a quién le habla.
Pieza Hot Tickets en español anunciando hasta 50% de descuento en la promo de verano Versión en inglés de la misma pieza Hot Tickets, adaptada para audiencia bilingüe
Versión por intención de compraAdaptación de los Master Graphics de campaña a cada canal de CRM según el momento del funnel: teaser, hard sell, remarketing y recuperación de carrito.
Pieza de tarifas grupales con 10% de descuento, en inglés, con un grupo de amigos en un resort Versión en español de la pieza de tarifas grupales con 10% de descuento
Piezas publicitariasProducción de imágenes con IA para ilustrar las promociones AON dentro de CRM, cuidando casting, locación y coherencia de marca cuando no hay banco de fotos disponible.
Pieza de remarketing para push notification en inglés, invitando a retomar la reserva Versión en español de la pieza de remarketing con el mensaje ¿Seguimos?
Adaptación de formatoLa misma dirección visual reencuadrada para push notifications y WhatsApp, donde el espacio útil cambia y el mensaje tiene que resolverse en un vistazo.

06 — Lab

Prototipos para probar interacción, lógica y nuevas formas de construir.

Demos, prototipos y pruebas visuales que uso para explorar decisiones antes de llevarlas a proyectos más grandes.

Pantalla de inicio de Tito el Elotito junto a una escena de juego en calle mexicana

McCormick · Interactive 3D

Tito el Elotito

Demo online con gameplay en desarrollo, colisiones, HUD y exploración de UI/UX. El QR y parte del loop físico-digital permanecen en estado demostrativo.

Functional demo JavaScript Three.js WebGL
Tres pantallas del configurador de viaje Volaris con preguntas y resumen de vuelo

Product · UI prototype

Configurador de Viaje Volaris

Mockup funcional para explorar personalización de viaje mediante preguntas, lógica frontend y estados de interfaz.

UI prototype HTML · CSS · JS
Pen de CodePen con una escena Datsun 240Z y su código HTML, CSS y JS Pen de CodePen con un Telecran dibujable hecho en CSS y canvas

Frontend playground

CodePen Experiments

Componentes, microinteracciones y pruebas visuales usadas para explorar ideas de interfaz antes de llevarlas a proyectos más grandes. La portada de este sitio nació ahí.

Ongoing WebGL · Shaders CSS

Capacidades

Capacidades que conectan diseño, frontend y entrega.

Frontend Engineering

Interfaces responsive, componentes e interacción para campañas y productos digitales sostenibles.

Campaign Platform Engineering

Implementación y debugging dentro de AirTRFX, Wix y CMS con reglas propias de publicación.

CRM Engineering

HTML email, SFMC Content Builder, compatibilidad Outlook/VML y QA cross-client antes del envío.

UX / Design Engineering

Figma, sistemas visuales y prototipos pensados desde el inicio para llegar a código con intención y consistencia.

Release & QA

Git/GitHub, Vercel, publicación, debugging y verificación antes y después del release.

Creative Technology

Three.js, prototipos interactivos, shaders y experimentación visual asistida por IA con control de marca.

07 — Selected Design

El diseño sigue siendo parte del sistema.

Una selección breve de sistemas visuales que hoy sostiene mis decisiones de jerarquía, componentes y calidad de implementación.

Construcción del logotipo de Becomo & Asociados con su retícula y proporciones Tarjetas de presentación de Becomo & Asociados en negro y blanco Sitio web de Becomo & Asociados en laptop y móvil

Brand identity

Becomo & Asociados

Identidad de marca y sistema de aplicaciones.

Las tres versiones del empaque Al Jazeera para FIFA 26, con los motivos de México, Estados Unidos y Canadá Detalle del empaque verde con patrón de papel picado mexicano

Packaging design

Al Jazeera — FIFA 26

Diseño de empaque para el Mundial, resuelto en tres versiones de una misma línea gráfica.

Logotipo de Aurora en la pantalla de un punto de venta Pantallas de menú de Aurora sobre una pared de madera Mandil negro con el logotipo de Aurora bordado en naranja

Brand identity

Aurora

Identidad para una garnachería y cervecería, aplicada en pantallas de punto de venta, señalización y uniformes.

Mural Sueño de una tarde dominical en la Alameda Central de Diego Rivera

Motion & audiovisual

Museo Mural Diego Rivera

Producción audiovisual y animación para «Sueño de una tarde dominical en la Alameda Central».

Contacto

¿Construimos algo que tenga que verse bien y funcionar de verdad?

Estoy abierto a colaborar en proyectos frontend, plataformas de campaña y experiencias digitales donde diseño e implementación tengan que avanzar juntos.

Escríbeme

Encuéntrame en

Ubicación
Ciudad de México