Proyectos8 de octubre de 2026joel-portfolio.fernandooviedo.site
Joel Almeida - Portfolio editorial para un fotógrafo de moda y música
Un sitio que diseñé y construí para Joel, fotógrafo y realizador audiovisual que hasta entonces solo tenía Instagram. Tapas, editoriales y música en vivo contados como una historia por scroll, con Astro, GSAP y Lenis y sin framework de UI en el navegador.
Joel Almeida (@soyjoelalmeida) es fotógrafo y realizador audiovisual. Hace editoriales de moda, tapas de revista (Revista CARAS), backstage y música en vivo (K4OS), trabaja en Buenos Aires y Mendoza, y viaja a cualquier punto de Argentina. Hasta este sitio, su trabajo vivía en Instagram: un feed donde una tapa, un backstage y un recital conviven sin orden ni contexto. Es un proyecto para cliente: hice el diseño y el desarrollo de punta a punta.
Qué construí
Un portfolio de una sola página. Un slideshow de 8 fotos en el hero, con epígrafe y control de pausa. Debajo, una historia por scroll en 7 capítulos - Caras, Live, Charlotte, Camila, Santiago, After Dark y Studio - y un índice de trabajos con selector Lista/Grilla. Tema oscuro y claro, y el header se esconde al bajar para que las fotos se queden con la pantalla. El contenido está en español.
Decisiones de diseño
Editorial suizo-minimalista, y las fotos llevan la página. Una sola tipografía, Archivo Variable, con el nombre en peso 900 y ancho 125. Un solo momento rojo fuerte: el nombre del hero, y nada más compite con él. Grano estático, radio cero. El trabajo se cuenta en capítulos en lugar de volcar una grilla de miniaturas: cada capítulo es una producción o un cuerpo de obra, así que el visitante lee una historia antes de explorar.
Decisiones de ingeniería
Un lightbox que se abre desde la foto. Al hacer clic, la foto se transforma en el lightbox con la API View Transitions. Si el navegador no la soporta, o la persona prefiere menos movimiento, se abre sin animación.Atrás cierra el overlay. El botón Atrás del navegador cierra el lightbox o el menú en lugar de salir de la página, que es lo que se aprieta en un celular.Imágenes. Un pipeline con sharp genera AVIF con fallback WebP en anchos de 360, 640, 960 y 1280, así cada dispositivo descarga el tamaño que necesita.Sin framework de UI en el navegador. Astro renderiza la página y el cliente solo ejecuta GSAP y Lenis (scroll suave). Google Analytics (GA4) se carga recién cuando la página terminó de cargar y el navegador está libre.Seguridad y entrega. Content Security Policy con hashes de scripts. El contenedor es nginx-unprivileged sin root, con imágenes base fijadas por digest, desplegado en Dokploy. La fuente Archivo está autoalojada. Para buscadores: JSON-LD (WebSite, Person, ImageGallery), imagen OG generada, sitemap y robots.
