Portafolio: Cyberpunk

Portafolio de desarrollo interactivo con una estética de glitch digital y terminal FUI (Interfaz de Usuario Futurista), desarrollado con Next.js 16, React 19 y física personalizada de GSAP/Canvas

DEMO EN VIVO • REPOSITORIO DE GITHUB (Acceso Privado)

Descripción General

• Rol: Creador, Desarrollador Full-Stack Solo e Ingeniero Creativo
• Tecnologías: Next.js 16 (App Router), React 19, TypeScript, Tailwind CSS 4, GSAP, WebGL (Three.js), Web Audio API (Text-to-Speech), Google Generative AI SDK, next-intl (localizando completamente el contenido en inglés, tagalo, alemán, español, francés, árabe, coreano, japonés y chino)
• Resultado Clave: Cobertura de portafolio 100% interactiva con navegación chatbot dinámica impulsada por voz y tiempos de carga inferiores a un segundo
• Resumen: Un portafolio digital premium y exhibición de ingeniería creativa diseñado con una estética de glitch digital. Cuenta con conversación de voz interactiva con IA, transiciones físicas de ondas basadas en canvas y experiencias de desplazamiento suaves para demostrar un diseño de alto nivel y dominio del frontend.

El Problema

• Desafío: Los portafolios estándar son estáticos, aburridos y no demuestran capacidades reales de integración de IA y desarrollo full-stack. El objetivo era crear un sitio web personal inmersivo y altamente interactivo que sirva como una prueba de concepto viviente para animaciones complejas, diseños, gestión de estados y herramientas de IA en tiempo real sin comprometer el rendimiento ni la accesibilidad.
• Audiencia: Reclutadores, gerentes de ingeniería, clientes potenciales y desarrolladores que buscan profundidad técnica, gusto por el diseño premium y una arquitectura de software sólida.
• Restricciones: Mantener animaciones fluidas a 60 fps y un alto rendimiento (tiempos de carga inferiores a un segundo) en dispositivos móviles mientras se ejecutan simulaciones de canvas basadas en web, un visor de modelos 3D y un chatbot de IA personalizado con transmisión en tiempo real.

Enfoque y Decisiones

• Arquitectura: Next.js App Router para rutas internacionalizadas renderizadas en el Edge, junto con un contexto global de React para los estados del tema, la música y el chatbot.
• Decisiones Clave:
  • Arquitectura Multilingüe: Se construyó un marco i18n sólido utilizando next-intl para localizar el enrutamiento, los metadatos de la página, las instrucciones del chat y las estructuras de documentos del proyecto (con páginas localizadas completas en 9 idiomas).
  • Transiciones basadas en Canvas: Se integró una distorsión de onda de ruido Perlin personalizada en lugar de transiciones CSS simples para crear un efecto de onda digital táctil en las transiciones de página.
  • Síntesis Vocal y Chatbot de IA: Se configuró el SDK de Google Generative AI con colas de síntesis de voz personalizadas, utilizando enrutamiento Edge para transmitir respuestas rápidamente.
  • Capas de Z-Index: Se estableció un contexto de apilamiento z-index estricto de 15 niveles para evitar conflictos de diseño e interacción entre superposiciones, cursores personalizados y escenas 3D.
• Compromisos: Se decidió utilizar superposiciones de CSS y efectos ligeros de canvas 2D en lugar de pesados recursos 3D para mantener el paquete de página inicial al mínimo y velocidades de carga por debajo de 100 ms.
• Flujo de Datos: Entrada del usuario -> Manejador de ruta de Next.js -> Google Generative AI -> Transmisión de texto -> Cola de síntesis de voz -> Reproductor de audio web personalizado.

Resultados Clave e Impacto

• Resultado: Se lograron animaciones fluidas a 60 fps en todos los dispositivos, un tiempo hasta el primer byte (TTFB) inferior a 100 ms y un asistente de voz bilingüe completamente interactivo.
• Rendimiento Lighthouse: Puntuación perfecta de 100/100/100/100 en Lighthouse en todas las categorías principales (Rendimiento, Accesibilidad, Buenas Prácticas y SEO).
• Cumplimiento de Seguridad: Puntuación perfecta de 100/100 en auditorías de verificación de seguridad a través de la evaluación isagentready de Cloudflare.
• Comparación: Actualizado desde el primer portafolio subóptimo del creador, Portfolio: Glass, a una terminal interactiva personalizada, lo que resultó en una mayor retención de usuarios y consultas técnicas directas.
• Impacto: Capacidad demostrada en la creación de interfaces de usuario modernas y complejas y arquitecturas full-stack de nivel de producción.

Inmersión Técnica profunda

• Detalles Destacados: Filtro de línea de exploración de pantalla CRT personalizado, seguimiento de cursor personalizado receptivo, visualizador de audio dinámico y enrutamiento personalizado multilingüe next-intl.
• Verificación: Verificado mediante auditorías de Lighthouse, comprobaciones de accesibilidad (relaciones de contraste >= 4.5:1) y emulación móvil en dispositivos de gama baja.
• Optimizaciones: Patrones remotos de imágenes de Next.js configurados, carga diferida de recursos de canvas de Three.js y estilos de Tailwind optimizados para minimizar el CSS no utilizado.
• Calidad del Código: Configuración estricta de ESLint, tipado estricto con TypeScript y componentes modulares autónomos.
• Enlaces: Consulte package.json, next.config.ts y app/data.ts.

Reflexiones

• Qué hacer diferente: Optimizar aún más los modelos 3D o implementar shaders personalizados para las ondas de fondo para reducir la sobrecarga de la CPU en dispositivos móviles.
• Éxitos: Se entregó una estética de diseño unificada donde la banda sonora, los gráficos y las interacciones del chatbot funcionan de manera impecable y conjunta.
• Lecciones: Administrar animaciones complejas junto con APIs de IA en tiempo real requiere un aislamiento cuidadoso del estado asíncrono en React.

Mis Contribuciones

• Arquitectura Frontend: Diseñé e implementé el shell de la interfaz de usuario principal, incluidos los cursores personalizados, HUDs, bento grids y el proveedor de música.
• Integración del Chatbot de IA: Programé el chatbot de voz con síntesis de voz, instrucciones del sistema y contexto con detección de idioma.
• Ajuste de Animación: Orquesté las líneas de tiempo de GSAP ScrollTrigger y las sincronicé con las transiciones de distorsión de onda del canvas.

Arquitectura del Proyecto

Esta aplicación sigue un patrón modular basado en características de Next.js App Router con carpetas de rutas localizadas.

• Estructura por Capas: Los componentes del servidor manejan los parámetros de localización y el enrutamiento estructural, mientras que los componentes del cliente renderizan widgets interactivos.
• Módulos de Características:
  • components/sections/: Secciones de diseño (Hero, About, Projects, Skills, Contact).
  • components/ui/: Nodos interactivos de la interfaz de usuario (ASCIIText, CustomCursor, MusicPlayer, VerticalHUD).
• Gestión del Estado: La API de Contexto de React controla el estado global de reproducción de audio, la selección de temas y los estados de idioma.
• Refactorización y Mejoras: Configuración actualizada a Next.js 16 con Turbopack para un reemplazo de módulos en caliente (HMR) casi instantáneo durante el desarrollo.

Estructura de Rutas Compiladas (App Router)

La aplicación se compila en la siguiente estructura de rutas estáticas (○) y dinámicas (ƒ) (excluyendo rutas de proyectos de portafolio individuales):

• Infraestructura de PWA y SEO (○ Estático):
  • /_not-found — Manejador 404 global estático.
  • /manifest.webmanifest — Manifiesto de aplicación web.
  • /robots.txt y /sitemap.xml — Directorios de rastreadores.
• Enrutamiento Bilingüe (ƒ Dinámico):
  • /[locale] y /[locale]/[...rest] — Contenedor de diseño con detección de idioma usando next-intl.
• Protocolo de Contexto de Modelo (MCP) y Agentes de IA (ƒ Dinámico):
  • /.well-known/mcp.json y /openapi.json — Esquemas de capacidades del servidor legibles por máquinas.
  • /.well-known/agent-skills/ — Directorios de habilidades (por ejemplo, SKILL.md) para la integración de IA.
  • /api/mcp y /api/mcp/sse — Puntos finales de comunicación SSE (Server-Sent Events) para clientes agentes.
• Chatbot de IA Generativa y Sistema de Medios (ƒ Dinámico):
  • /api/chat y /api/chat/health — Manejadores de rutas de transmisión que respaldan el procesador de voz del chatbot de IA.
  • /api/music y /api/music/health — Enrutamiento del controlador de transmisión de audio.
• Exportadores de Contexto para LLM (ƒ Dinámico):
  • /llms.txt y /llms-full.txt — Exportaciones de texto eficientes en tokens de hechos del portafolio, contexto y credenciales optimizadas para la lectura de LLM.

Vista Previa de la Demo

• Página de Inicio con Glitch Digital: Vista inmersiva de inicio que muestra tipografía que cumple con los estándares, superposiciones de escaneo CRT y lecturas de estado en vivo.
• Chatbot de IA Interactivo: Bot conversacional situado en la parte inferior derecha que actualiza dinámicamente el estado del diseño y reproduce comentarios de voz.
• Diseños Bento Grid: Diseños de panel limpios y de alta densidad que muestran habilidades, cronogramas y certificaciones.

Nota de Alojamiento:
El proyecto está activo y alojado en Vercel en franzdomingo.dev. Tenga en cuenta que esta base de código en sí es el proyecto de portafolio; actualmente está viendo y ejecutando este mismo proyecto.