Poster primero
La composición comienza con un poster estable y predecible. WebM se usa cuando está disponible, con MP4 como fallback explícito para navegadores que no carguen el códec principal.
- poster
- WebM
- MP4
Notas de ingeniería
Cómo se construye esta landing.
Una página editorial sobre las decisiones detrás de esta experiencia: medios progresivos, navegación contextual, contenido localizado y una rutina de calidad antes de publicar.
Progressive enhancement en el hero
El video enriquece la presentación sin ser la única forma de entender la página.
Movimiento bajo control
El scrub sigue la posición del scroll, los loops entran solo cuando hacen falta y la preferencia de movimiento reducido detiene los medios en runtime.
- scroll
- reduced motion
- visibilitychange
Una interfaz que hace visible el estado
Trabajos, Sobre y Contacto funcionan como paneles compartibles, navegables y cerrables.
Deep links previsibles
Cada panel tiene su propio hash. Esto mantiene el contexto en el historial y permite compartir directamente la zona de Trabajos sin crear una pantalla paralela.
- #work
- #about
- #contact
Foco y contexto
Al abrir un panel, el foco entra en el contenido, Tab permanece dentro del diálogo, Escape lo cierra y el fondo queda inerte mientras la decisión está en curso.
- focus trap
- inert
- aria-modal
Contenido localizado y verificable
La experiencia mantiene la misma estructura en tres idiomas sin convertir la traducción en copia automática.
Un contrato, tres voces
Los diccionarios de PT-BR, EN y ES comparten una misma forma tipada. Así, una nueva etiqueta no llega a producción en un idioma y desaparece silenciosamente en los demás.
- PT-BR
- EN
- ES
Evidencia antes que adjetivos
Los casos y las notas usan enlaces públicos y decisiones que pueden comprobarse en el código. No se inventan métricas para llenar espacio editorial.
- public work
- evidence
- honest copy
Quality gate
Publicar solo después de revisar lo esencial.
Cada cambio sigue la misma secuencia local antes de llegar al repositorio: tipos, reglas, tests y build de producción.
- 01Type-check
- 02Lint
- 03Vitest
- 04Next build
Estas notas describen decisiones ya presentes en el código. No son métricas de rendimiento ni una promesa de disponibilidad.