Prémium Portfólió Weboldal React 19-cel: Marianna Fotográfia Esettanulmány

Projekt háttér: Marianna fotográfus igényei

Marianna esküvői és portré fotográfusként dolgozik Nyíregyházán és Szabolcs-Szatmár-Bereg megye szerte. Korábbi weboldalát egy általános sablonkészítő eszközzel hozta létre, ami egyáltalán nem adta vissza a munkái prémium minőségét — a képek lassan töltöttek be, a galéria mobilon nem működött megfelelően, és nem volt lehetőség online időpont-foglalásra.

Az új portfólió weboldalnak három dologban kellett kiemelkedőnek lennie: vizuális megjelenésben (a fotók legyenek a főszereplők), technikai teljesítményben (100+ kép gyors betöltése), és üzleti funkcionalitásban (online foglalási lehetőség, ami önmagában generálja az érdeklődőket).

Kulcsmutatók

Design kihívások: fotóhoz illő prémium megjelenés

Dark theme — miért és hogyan?

Fotós portfóliókhoz a dark (sötét) háttér szinte kötelező — és nem véletlenül. Sötét háttéren a képek kontrasztja és színtelítettsége élénkebbnek tűnik, a néző szeme a fotókra fókuszál, nem a weboldalra. Ráadásul a dark theme prémium, exkluzív érzést kelt, ami illik a prémium árfekvésű fotós szolgáltatáshoz.

A design kihívás itt nem a „sötét háttér" volt, hanem a tökéletes egyensúly megtalálása a sötétség és az olvashatóság között. A szövegek kontraszt aránya WCAG AA szabvány szerint legalább 4.5:1 kell legyen — amit Marianna oldalán minden szövegelem meghalad.

Tipográfia fotós portfólióhoz

A betűtípus választása ugyanolyan fontos, mint maga a design. Marianna oldalán egy elegáns serif betűtípust (Cormorant Garamond) kombinálunk egy letisztult sans-serif-fel (Inter) — az előbbi prémiumot és személyességet, az utóbbi olvashatóságot és modernséget sugároz. A betűtípusok variable font formátumban töltődnek be, ami minimalizálja a hálózati kérések számát.

Technikai kihívások: 100+ kép villámgyors betöltése

Ez volt a projekt legnagyobb technikai kihívása. Egy prémium fotós portfólió csak akkor működik, ha a képek gyorsan betöltnek — de a minőség nem áldozható fel a sebesség oltárán. A megoldás egy négyréteges képoptimalizálási stratégia.

A blur placeholder különösen fontos a felhasználói élmény szempontjából: ahelyett, hogy üres fehér vagy szürke téglalapok jelennének meg a képek helyén, egy homályos, de azonnal megjelenő miniatűr verzió adja meg a layout struktúráját. Ez eliminálja a Cumulative Layout Shift (CLS) problémát is, ami Lighthouse pontszámra és Google rangsorolásra is közvetlen hatással van.

React 19 újdonságok a projektben

Server Components: nulla kliens JavaScript a galériához

React 19 Server Components segítségével a galéria adatstruktúra (képek listája, kategóriák, metadatok) teljesen szerveren renderelődik, és HTML-ként érkezik a böngészőbe. Ez azt jelenti, hogy a galéria első megjelenéséhez egyetlen sor JavaScript sem szükséges a kliensen — ami radikálisan javítja a First Contentful Paint (FCP) metrikát.

Az interaktív elemek (lightbox nyitás/zárás, kategória szűrés, képváltás) természetesen kliensoldali komponensek — de ezek csak a szükséges minimális JavaScript-et töltik be, és csak akkor, amikor az interakcióra szükség van.

Optimistic Updates a foglalási rendszerben

A React 19 optimistic updates funkcióját a foglalási rendszernél alkalmazzuk. Amikor egy látogató elküldi az ajánlatkérési űrlapot, a felhasználói felület azonnal visszajelez sikerességet — anélkül, hogy megvárná a szerver választ. Ha a szerver oldalon hiba történik, a UI elegánsan visszaállítja az állapotot és hibaüzenetet jelenít meg. Ez a minta 200–500ms-os látszólagos válaszidő javulást eredményez, amit a felhasználók észrevehetően gyorsabbnak érzékelnek.

Képgaléria UX: lightbox, szűrés, preload

A galéria UX tervezésekor három alapelvet követtünk: a kép legyen a főszereplő, a navigáció legyen intuitív, és a következő kép mindig előre betöltve legyen.

Lightbox: Saját fejlesztésű, animált lightbox komponens — nem külső library, ami felesleges JavaScript-et töltene be. A lightbox megnyitásakor a háttér blur effekttel elhomályosodik, az aktuális kép teljes képernyős nézetbe kerül. Billentyűzet navigáció (nyilak, Esc) és touch swipe gesztusok is működnek.

Kategória szűrés: Esküvő / Portré / Esemény / Páros szekciók között animált átmenettel lehet váltani. A szűrés kliensoldali állapotváltozással történik — nincs oldal újratöltés, a váltás azonnali.

Preload stratégia: Lightboxban az aktuális képtől jobbra és balra lévő következő 2-2 kép előre betöltődik a háttérben. Ez azt jelenti, hogy képváltásnál soha nincs várakozás — a kép azonnal megjelenik.

Foglalási integráció: online ajánlatkérés

A foglalási rendszer Marianna egyik legfontosabb üzleti igénye volt. Korábban minden ajánlatkérés e-mailben érkezett, különböző formátumokban — az adatok összegyűjtése manuális munkát igényelt. Az új rendszerrel a látogató a weboldalon tölti ki az összes szükséges információt: fotózás típusa, kívánt dátum, helyszín, csomagtípus, kontakt adatok.

SEO fotósoknak: Google Images és strukturált adatok

Fotós portfólió esetén a Google Images egy alulhasznált, de rendkívül értékes forgalomforrás. A helyes implementációval Marianna képei megjelennek az „esküvői fotós Nyíregyháza", „portré fotós Szabolcs megye" és hasonló keresési eredményekben.

Alt text stratégia: Minden portfólió képnek leíró, kulcsszógazdag alt szövege van — nem „img_1234.jpg", hanem „esküvői fotó Nyíregyháza szabadtéri ceremónia Marianna Fotográfia". Ez szövegkörnyezetet ad a Google bot számára a kép tartalmának megértéséhez.

Strukturált adatok (Schema.org): Az oldalon ImageObject és LocalBusiness schema implementálva van. A LocalBusiness schema tartalmaz nyitvatartást, helyszínt, szolgáltatástípusokat — ez a Google Maps és a helyi kereséseknél is pozitív hatást fejt ki.

Open Graph képek: Minden galéria kategóriának egyedi Open Graph képe van — ha Marianna vagy egy ügyfél megosztja a Portrék aloldalt Facebookon vagy Instagramon, szép, reprezentatív előnézeti kép jelenik meg automatikusan.