Web Full Stack: performance, 3D y data
Una colección de soluciones web que muestra versatilidad técnica ante distintos desafíos de negocio. Desarrollada en estrecha colaboración con diseñadoras gráficas para traducir fielmente requerimientos de UI/UX a código funcional, abarcando desde plataformas de alto rendimiento optimizadas para SEO (Core Web Vitals), pasando por experiencias inmersivas con visualización 3D industrial, hasta sistemas de gestión de contenido (CMS) para el sector académico.
Caso 1: Optimización y SEO (Iniciativa Social)
El reto: desarrollar una plataforma informativa de alto alcance para concientizar sobre normativas civiles en la CDMX. La prioridad era la accesibilidad en dispositivos móviles con conexiones inestables.
La solución Zero-JS: implementé una arquitectura de 'Islas' con Astro v5, enviando 0kb de JavaScript al cliente para el renderizado inicial. Esto garantizó una carga instantánea.
Resultado: se alcanzó una calificación de 98/100 en Performance y un posicionamiento orgánico inmediato gracias a una estrategia de SEO técnico, Canonical URLs y optimización de imágenes WebP automatizada.
Caso 2: Experiencia industrial inmersiva (Manufactura)
El Reto: Modernizar la presencia digital de una empresa de tanques industriales, pasando de un catálogo estático a una experiencia interactiva que mostrara la superioridad técnica del producto.
Ingeniería 3D: Desarrollé una SPA (Single Page Application) con React y Three.js (Fiber) para integrar modelos 3D interactivos de los tanques. El desafío fue evitar el bloqueo del renderizado.
Optimización: Configuré `Code Splitting` manual en Vite y carga diferida (Lazy Loading) para los recursos pesados, logrando una experiencia visual impactante sin sacrificar la usabilidad en móviles.
Caso 3: Periodismo de datos y CMS (Académico)
El Reto: centralizar la divulgación científica y sociológica de la universidad, integrando análisis de tendencias en tiempo real dentro de la plataforma web.
Integración Cloud: diseñé un flujo de trabajo híbrido. Por un lado, un CMS personalizado para la gestión editorial; por otro, una integración con Google Cloud Platform y Python que recolectaba tendencias de noticias, visualizándolas mediante mapas interactivos y dashboards de Power BI embebidos directamente en el sitio.
Esto permitió a los editores ayudar a sus publicaciones en datos cuantitativos sobre temas de interés social en México.
Caso 4: Portafolio personal (Performance Engineering & UI/UX)
El Reto: Diseñar y desarrollar desde cero una página web personal que no solo exhibiera mis proyectos con un diseño UI/UX limpio y minimalista, sino que también sirviera como prueba tangible de mis habilidades en optimización web y arquitectura de software.
Arquitectura y Optimización: Construí el sitio utilizando Astro, React y Tailwind CSS bajo una estricta Arquitectura de Islas. Para garantizar tiempos de carga ultrarrápidos, tomé decisiones técnicas: refactoricé la carga de JavaScript, migré animaciones pesadas a CSS nativo y a la API Intersection Observer, y apliqué hidratación diferida en los componentes interactivos para no bloquear el hilo principal (Main Thread).
Resultado: Una reducción drástica del Total Blocking Time (TBT) en dispositivos móviles, bajando el tiempo de carga interactiva de 7 a 1.5 segundos. El sitio logró una auditoría de Performance y SEO de 95+, demostrando que es posible tener una experiencia inmersiva y animada sin sacrificar la velocidad ni la accesibilidad.