Projekte8. Oktober 2026joel-portfolio.fernandooviedo.site
Joel Almeida - Redaktionelles Portfolio für einen Mode- und Musikfotografen
Eine Website, die ich für Joel gestaltet und gebaut habe, Fotograf und Filmemacher, der bis dahin nur Instagram hatte. Titelseiten, Editorials und Live-Musik als Scroll-Erzählung, mit Astro, GSAP und Lenis und ohne UI-Framework im Browser.
Joel Almeida (@soyjoelalmeida) ist Fotograf und Filmemacher. Er fotografiert Mode-Editorials, Magazincover (Revista CARAS), Backstage und Live-Musik (K4OS), arbeitet in Buenos Aires und Mendoza und reist überallhin in Argentinien. Bis zu dieser Website lebte seine Arbeit auf Instagram: ein Feed, in dem ein Cover, ein Backstage-Foto und ein Konzert ohne Ordnung und Kontext nebeneinander stehen. Es ist ein Kundenprojekt: Design und Entwicklung habe ich von Anfang bis Ende übernommen.
Was ich gebaut habe
Ein Portfolio auf einer einzigen Seite. Eine Hero-Slideshow mit 8 Fotos, mit Bildunterschrift und Pause-Steuerung. Darunter eine Scroll-Erzählung in 7 Kapiteln - Caras, Live, Charlotte, Camila, Santiago, After Dark und Studio - und ein Werkindex mit Umschalter Liste/Raster. Dunkles und helles Theme, und der Header blendet sich beim Runterscrollen aus, damit die Fotos den Bildschirm behalten. Die Texte sind auf Spanisch.
Design-Entscheidungen
Schweizer, minimalistisch-redaktionell, und die Fotos tragen die Seite. Eine einzige Schrift, Archivo Variable, mit dem Namen in Gewicht 900 und Breite 125. Ein einziger lauter roter Moment: der Name im Hero, und nichts konkurriert damit. Statisches Korn, Radius null. Die Arbeit wird in Kapiteln erzählt statt als Raster aus Vorschaubildern: Jedes Kapitel ist ein Shooting oder ein Werkkomplex, sodass die Besucherin erst eine Geschichte liest, bevor sie stöbert.
Engineering-Entscheidungen
Eine Lightbox, die sich aus dem Foto öffnet. Ein Klick verwandelt das Foto mit der View-Transitions-API in die Lightbox. Wenn der Browser sie nicht unterstützt oder die Person weniger Bewegung bevorzugt, öffnet sie sich ohne Animation.Zurück schließt das Overlay. Der Zurück-Button des Browsers schließt die Lightbox oder das Menü, statt die Seite zu verlassen - das ist es, was man auf dem Handy drückt.Bilder. Eine sharp-Pipeline erzeugt AVIF mit WebP-Fallback in den Breiten 360, 640, 960 und 1280, sodass jedes Gerät die Größe lädt, die es braucht.Kein UI-Framework im Browser. Astro rendert die Seite, und der Client führt nur GSAP und Lenis (Smooth Scroll) aus. Google Analytics (GA4) lädt erst, nachdem die Seite geladen ist und der Browser im Leerlauf ist.Sicherheit und Auslieferung. Content Security Policy mit Script-Hashes. Der Container ist nginx-unprivileged ohne Root, mit per Digest festgelegten Basis-Images, deployt auf Dokploy. Die Schrift Archivo wird selbst gehostet. Für Suchmaschinen: JSON-LD (WebSite, Person, ImageGallery), generiertes OG-Bild, Sitemap und robots.
