Portafolio de Desarrollador
Este portafolio comenzó como un sitio escrito a mano en JavaScript vanilla. Se migró en fases planificadas y probadas a React, TypeScript y Tailwind CSS, manteniendo el mismo diseño y convirtiendo cada proyecto en una página real, con su propia dirección, vista previa para compartir y metadatos de búsqueda.
Arquitectura
React Router funciona en modo framework con el renderizado en servidor desactivado: todas las páginas —la de inicio y cada proyecto, en inglés, portugués y español— se prerenderizan como HTML estático durante el build y luego se hidratan en el navegador. No hay un servidor en ejecución que mantener.
El código se organiza por responsabilidad (app, pages, widgets, features, entities, shared), y una prueba hace fallar el build si una capa inferior importa una superior.
Idiomas y SEO
El idioma forma parte de la URL (/, /pt, /es). Cada página tiene su propio título, descripción, dirección canónica, alternativas hreflang, vista previa para redes sociales y datos estructurados, y el sitemap se genera a partir de los mismos datos de las rutas.
Todo el texto vive en archivos JSON tipados: una clave mal escrita falla en la verificación de tipos, y las pruebas garantizan que los tres idiomas tengan siempre la misma estructura.
Seguridad, accesibilidad y rendimiento
Se genera una Content-Security-Policy para cada página con el hash de cada script en línea, de modo que ningún código en línea se ejecuta sin haber sido incluido en el build. Un pequeño script en el head aplica el tema y el idioma guardados antes del primer pintado, sin destellos de tema incorrecto.
Las animaciones respetan la preferencia de movimiento reducido y solo se cargan cuando el navegador está inactivo; la primera visita descarga unos 140 kB de JavaScript. Una suite de Playwright cubre rutas, idiomas, temas, el formulario de contacto y verificaciones automáticas de accesibilidad.