SergioJA Platform — Plataforma web a medida en monorepo

SERGIOJA is a custom web platform: a production monorepo with a 3D face, portfolio, SEO blog and its own API. What it is: the personal digital ecosystem of Sergio Jáuregui, with brand, portfolio, bilingual blog and private admin panel, on its own backend and database. The problem: bringing into one ecosystem the brand, a portfolio with real projects, a blog that can rank in search engines and a panel to manage the content, without relying on templates. Because the site itself serves as proof of technical judgement, every decision had to be reviewable in the code. Who it is for: professionals who want their own ecosystem, and agencies or consultancies that need to assess end-to-end technical judgement. What it includes: - Interactive 3D face with modal shortcuts as the entry point. - Portfolio with an interactive terminal, mini-games and projects served by the API. - Bilingual ES/EN SEO blog on the same visual identity. - Private admin panel with login and CRUD for projects, categories and content. - Own API, PWA and a multi-domain Docker deployment. Key technical decisions: - Next.js 14 with the App Router in all four frontends (portfolio, 3D face, admin and blog). The portfolio and the blog render on the server with ISR: the portfolio home is revalidated every 60 seconds, and the profile and project pages every 300. - Immediate invalidation instead of waiting for the TTL. Every project change in the API calls a secret-protected endpoint that runs revalidateTag('projects'); the blog does the same with the blog tag. If the environment variables for that channel are missing, invalidation is silently disabled and only the TTL remains, which is worth checking when deploying. - Admin authentication with JWT in httpOnly cookies: a 15-minute access token and a 7-day refresh token stored in the database, so it can be revoked. - Images stored in the database as base64, not on disk. This means the database backup also includes the images. Thumbnails are served resized as WebP with sharp and an in-memory cache. - Hybrid rate limiting: per user when there is a session; otherwise per IP combined with a hash of browser headers (User-Agent, Accept-Language and others). - ES/EN internationalisation, with Spanish without a prefix and English under /en, hreflang tags and alternates in the sitemap. - Shared design tokens: a single TypeScript file generates the CSS variables and the Tailwind preset used by the four frontends. - Deployment: GitHub Actions builds the five Docker images, loads them onto the VPS and runs the deployment. The server compiles nothing, and the final step checks that all five domains respond with HTTP 200. Discarded alternatives: while refactoring the design system, LazyMotion was evaluated to reduce framer-motion's weight. It was discarded because framer-motion already loads in the first render of the three apps through its above-the-fold animations, so the saving was practically zero. The real deferred loading was applied to the terminal games with next/dynamic. Measured results: the project pages show the site's Lighthouse scores: accessibility 100, SEO 100 and performance 67. Performance is the open point and the figure to improve. What it offers an agency: an end-to-end product in a monorepo, with 3D, four frontends, its own API, bilingual SEO and a Docker deployment, with the caching, authentication and deployment decisions explained in the code itself and in its documentation.