El proyecto
Marcos Vidal cubre eventos deportivos, equipos y clubes y reportajes fortográficos para atletas en España. Necesitaba un portfolio que estuviera a la altura de sus imágenes: rápido, inmersivo y sin distracciones.
Decisiones de diseño
El reto era construir algo que compitiera visualmente con la fotografía, no contra ella. Paleta monocromática con un único acento de color, tipografía de contraste alto y galerías a sangre completa. Sin ruido.
- Bebas Neue para titulares — impacto editorial sin depender de Google Fonts (autohosteado)
- Grids asimétricos — cada evento tiene su propia composición para romper la monotonía de los listados
- Transiciones de página — fade-in suave con Intersection Observer nativo
Stack técnico
- Astro 6 con adaptador SSR para Netlify — base sólida para integrar CMS en fase siguiente
- SCSS con tokens de diseño y mixins — sin frameworks CSS, control total sobre cada píxel
- Content Collections — los eventos se gestionan desde Markdown; preparado para migrar a Sanity
- Fonts autohosteadas en
.woff2— Bebas Neue, Questrial y Abel sin peticiones externas
Rendimiento
Lighthouse 100 en las cuatro métricas (Performance, Accessibility, Best Practices, SEO). Sin sacrificar la carga visual: imágenes en formato moderno, fuentes preloadeadas, zero layout shift.
Próximo paso
Fase 4 pendiente: integración con Sanity CMS para que el fotógrafo gestione sus propios eventos sin tocar código.