Producto
MyPortfolio
Un portafolio bilingüe, prerenderizado y con una vista para cada rol
Este sitio es un portafolio bilingüe en React y TypeScript con páginas prerenderizadas, una vista por rol, una página para cada proyecto y un asistente que responde en el navegador.
De qué se trata
Este sitio es mi hoja de vida en forma de producto. Cada vista por rol es una URL prerenderizada con su propio texto, su orden de secciones y sus cifras, para que quien lo lea encuentre primero lo que busca.
Todo lo que dice tiene una fuente. Las cifras salen del código, de GitHub o de la configuración de los sistemas, y docs/content.md registra cómo y cuándo se midió cada una.
Qué hace
- Prerenderizado estático de cada vista y cada proyecto, con SEO por ruta, datos estructurados, sitemap e imágenes de Open Graph.
- Cada sección carga su código y su texto por separado, con presupuestos que CI verifica para el JavaScript de arranque, el peso de cada chunk y lo que necesita el primer pintado.
- Seis vistas por rol que reescriben el texto, reordenan las secciones y resaltan lo que importa a cada perfil.
- Las cifras de GitHub salen, en cada build de CI, de las estadísticas que mi repositorio de perfil genera a diario.
- Imagen de Nginx sin privilegios en GHCR, desplegada con Docker Compose, y verificaciones de producción con Playwright y Lighthouse después de cada despliegue.
- Un asistente que responde preguntas sobre mi perfil buscando en el mismo contenido del sitio, sin llamar a ningún servicio externo.
Cómo funciona
Del contenido a la página
El contenido tipado se prerenderiza en el build; el navegador hidrata cada sección por separado.
Contenido
- Datos con su fuente
- Texto en español e inglés por rol
- Estadísticas diarias de GitHub
Build
- Vite y TypeScript
- Prerenderizado de cada ruta
- Presupuestos de JavaScript, CSS y HTML
Navegador
- Secciones que cargan por separado
- Seis vistas por rol
- Asistente local
Entrega
- Imagen de Nginx sin privilegios en GHCR
- Docker Compose en el servidor
- Playwright y Lighthouse contra producción
Decisiones y sus costos
Prerenderizar en vez de un servidor
Una aplicación de React que se arma en el navegador llega vacía hasta que corre su JavaScript.
Cada sección en su propio chunk
Con todas las secciones en un solo archivo, el JavaScript de arranque se pasaría de su presupuesto.
Un asistente sin servicios externos
Un asistente conectado a un servicio externo podría contradecir la página y le enviaría las preguntas a terceros.
Stack
Elige una tecnología para ver qué proyectos la usan.