SergioJA Platform — Plataforma web a medida en monorepo

SERGIOJA es una plataforma web a medida: un monorepo en producción con cara 3D, portfolio, blog SEO y API propia. Qué es: el ecosistema digital personal de Sergio Jáuregui, con marca, portfolio, blog bilingüe y panel privado, sobre backend y base de datos propios. El problema: reunir en un solo ecosistema la marca, un portfolio con proyectos reales, un blog que posicione en buscadores y un panel para gestionar el contenido, sin depender de plantillas. Como el propio sitio sirve de prueba de criterio técnico, cada decisión tenía que poder revisarse en el código. Para quién: profesionales que quieren un ecosistema propio, y agencias o consultoras que necesitan evaluar criterio técnico de extremo a extremo. Qué incluye: - Cara 3D interactiva con accesos modales como puerta de entrada. - Portfolio con terminal interactivo, mini-juegos y proyectos servidos por API. - Blog bilingüe ES/EN de captación SEO con la misma identidad visual. - Panel admin privado con login y CRUD de proyectos, categorías y contenidos. - API propia, PWA y despliegue dockerizado multidominio. Decisiones técnicas: - Next.js 14 con App Router en los cuatro frontends (portfolio, cara 3D, administración y blog). El portfolio y el blog renderizan en servidor con ISR: la home del portfolio se revalida cada 60 segundos y el perfil y las fichas de proyecto cada 300. - Invalidación inmediata en lugar de esperar al TTL. Cada cambio de proyecto en la API llama a un endpoint protegido por secreto que ejecuta revalidateTag('projects'); el blog hace lo mismo con la etiqueta blog. Si faltan las variables de entorno de ese canal, la invalidación se desactiva en silencio y queda solo el TTL, algo que conviene vigilar al desplegar. - Autenticación del panel con JWT en cookies httpOnly: un token de acceso de 15 minutos y un token de refresco de 7 días, guardado en base de datos para poder revocarlo. - Imágenes guardadas en la base de datos como base64, no en disco. Así la copia de seguridad de la base de datos incluye también las imágenes. Las miniaturas se sirven redimensionadas en WebP con sharp y una caché en memoria. - Rate limiting híbrido: por usuario cuando hay sesión; si no, por IP combinada con un hash de cabeceras del navegador (User-Agent, Accept-Language y otras). - Internacionalización ES/EN con el español sin prefijo y el inglés en /en, con etiquetas hreflang y alternativas en el sitemap. - Tokens de diseño compartidos: un único fichero TypeScript genera las variables CSS y el preset de Tailwind que usan los cuatro frontends. - Despliegue: GitHub Actions construye las cinco imágenes Docker, las carga en el VPS y ejecuta el despliegue. El servidor no compila nada, y el paso final comprueba que los cinco dominios responden con HTTP 200. Alternativas descartadas: al refactorizar el sistema de diseño se evaluó LazyMotion para reducir framer-motion. Se descartó porque framer-motion ya entra en el primer render de las tres apps por sus animaciones visibles al cargar, así que el ahorro era prácticamente nulo. La carga diferida real se aplicó a los juegos del terminal con next/dynamic. Resultados medidos: las fichas muestran las puntuaciones de Lighthouse del sitio. Accesibilidad 100, SEO 100 y rendimiento 67. El rendimiento es el punto pendiente y el dato que hay que mejorar. Qué aporta a una agencia: un producto de extremo a extremo en un monorepo, con 3D, cuatro frontends, API propia, SEO bilingüe y despliegue dockerizado, y con las decisiones de caché, autenticación y despliegue explicadas en el propio código y en su documentación.