Cómo Construí Este Portfolio
Un análisis profundo de la arquitectura detrás de este portfolio: ruteo con Edge Proxy, renderizado de experiencia dual, el pipeline 3D y decisiones de rendimiento.
Ruteo de Experiencia Dual
El sitio opera bajo una única URL pero sirve dos experiencias completamente diferentes. Un Edge Proxy intercepta cada request, lee los headers de User-Agent y Client Hints, y realiza un rewrite invisible hacia la ruta Heavy (3D escritorio) o Light (móvil minimalista). El acceso directo a rutas internas está bloqueado — el proxy redirige al root del locale.
SEO & Servicio Dinámico
Ambas experiencias consumen exactamente la misma capa de datos, garantizando paridad de contenido. El header Vary: User-Agent notifica a los motores de búsqueda del servicio dinámico. El HTML semántico (encabezados, texto, enlaces) es idéntico entre versiones — solo difiere el renderizado de medios.
Pipeline 3D & Rendimiento
La experiencia Heavy usa React Three Fiber con escenas generadas proceduralmente — sin assets .glb pesados. Un PerformanceMonitor ajusta adaptativamente el DPR. La ruta Light nunca importa código de Three.js, asegurando cero overhead de WebGL en móvil.
Next.js 16 & el Renombramiento del Proxy
Next.js 16 introdujo un cambio de ruptura: middleware.ts fue renombrado a proxy.ts, y la función exportada cambió de middleware() a proxy(). El proxy ahora usa el runtime de Node.js por defecto en lugar de Edge. Nuestra única función proxy encadena tres responsabilidades — detección de idioma (preferencia por cookie → negociación Accept-Language), clasificación de dispositivo (Client Hints → fallback User-Agent), y el rewrite invisible que inserta el segmento de experiencia después del locale en la ruta URL.
Estrategia de Internacionalización
El sistema de i18n opera en dos capas. El proxy resuelve el idioma del usuario mediante una cookie NEXT_LOCALE (configurada por el selector de idioma) con fallback a Accept-Language, por defecto español. La capa de datos usa un tipo LocalizedText ({ en: string; es: string }) para cada campo visible al usuario, asegurando que ambas experiencias Heavy y Light rendericen contenido bilingüe idéntico. El header Vary: User-Agent, Accept-Language, Device-Memory informa a CDNs y motores de búsqueda que las respuestas varían según dispositivo, idioma y capacidad de hardware.
Experience: HEAVY (3D Desktop)