Product
MyPortfolio
A bilingual, prerendered portfolio with a view for every role
This site is a bilingual React and TypeScript portfolio with prerendered pages, a view per role, a page for every project and an assistant that answers in the browser.
What it is about
This site is my resume built as a product. Each role view is a prerendered URL with its own copy, section order and figures, so whoever reads it finds what they are looking for first.
Everything it says has a source. The figures come from the code, from GitHub or from the systems' configuration, and docs/content.md records how and when each one was measured.
What it does
- Static prerendering of every view and every project, with per-route SEO, structured data, a sitemap and Open Graph images.
- Each section loads its code and its copy separately, under budgets that CI checks for the startup JavaScript, the weight of each chunk and what the first paint needs.
- Six role views that rewrite the copy, reorder the sections and bring forward what each profile looks for.
- The GitHub figures come, on every CI build, from the stats my profile repository generates every day.
- An unprivileged Nginx image on GHCR, deployed with Docker Compose, and production checks with Playwright and Lighthouse after every deployment.
- An assistant that answers questions about my profile by searching the site's own content, without calling any outside service.
How it works
From content to page
The typed content is prerendered at build time; the browser hydrates each section on its own.
Content
- Facts with their source
- Spanish and English copy per role
- Daily GitHub stats
Build
- Vite and TypeScript
- Prerendering of every route
- JavaScript, CSS and HTML budgets
Browser
- Sections that load on their own
- Six role views
- Local assistant
Delivery
- Unprivileged Nginx image on GHCR
- Docker Compose on the server
- Playwright and Lighthouse against production
Decisions and their costs
Prerendering instead of a server
A React app built in the browser arrives empty until its JavaScript runs.
Each section in its own chunk
With every section in one file, the startup JavaScript would go over its budget.
An assistant without outside services
An assistant wired to an outside service could contradict the page and would send the questions to third parties.
Stack
Pick a technology to see the projects that use it.