Case study
Portfolio dla malarki olejnej
Minimalistyczna przestrzeń, gdzie obrazy mówią same za siebie — bez tłoku, bez dekoratywnych nadmiarów. Strona zaprojektowana pod artystkę, nie pod algorytm.
Wyzwanie
Z czym przyszedł klient
Alina Hus maluje powoli, warstwami — pejzaże Wisły, Stare Miasto, cykle emocjonalne. Portfolio miało oddać tę samą poetykę: przestrzeń, spokój, skupienie na obrazie. Problem z portfolio artystycznych stron: albo są zbyt generyczne (WordPress + Elementor = każdy), albo przesadnie ozdobne (efekty zasłaniają dzieła). Wymóg twardy: obrazy muszą wyglądać jak obrazy — pełnoekranowy lightbox z zoom, precyzyjne kadrowanie w miniaturach bez obcinania kompozycji, bardzo szybki czas ładowania żeby artysta mógł pokazywać stronę z telefonu na targach.
Podejście
Jak to rozwiązaliśmy
Next.js 16 z App Routerem i static exportem (output: 'export') — zero runtime serwera, deploy na Cloudflare Pages. Tailwind CSS v4 z @theme {} dla spójnego systemu kolorów (ink/paper/ash/slate/mist). Galeria oparta na yet-another-react-lightbox z pluginami Zoom + Captions — biały lightbox zamiast domyślnego czarnego (CSS custom properties YARL). Obrazy przetworzone przez Pillow: PNG → WebP, pełne 1400px/q85 + thumbnails orientacyjne (640px landscape / 400px portrait). Hero z najważniejszą pracą (Wisła II, 100×140cm) — responsywne srcset 1100w/1400w + imagesrcset na preloadzie w postbuild.mjs, dzięki czemu mobile pobiera 28 KB zamiast 101 KB. Schema.org Person wstrzyknięty przez postbuild do każdego HTML. PSI 91 mobile (bottleneck: React runtime = 27 KB nieusuwalnych, TBT 30ms, CLS 0).
Rezultaty
Co udało się osiągnąć
PSI 91
mobile — bottleneck: React runtime (unavoidable)
28 KB
hero image na mobile (było 101 KB)
CLS 0
zero przesunięć layoutu
TBT 30ms
Total Blocking Time
Zakres prac
Co zbudowaliśmy
Galeria z lightboxem + zoom
yet-another-react-lightbox z Zoom + Captions. Biały motyw przez CSS custom properties. Każdy obraz z tytułem, rokiem, techniką i rozmiarem pod spodem.
Responsywne obrazy WebP
Pillow: PNG → WebP, orientacyjne thumbnails (640px landscape / 400px portrait). Hero z srcset 28 KB / 101 KB — mobile pobiera 3.5× mniej.
Trzy cykle twórcze
Pejzaże polskie / Tożsamość / Varia — każdy z własną podstroną /prace/[slug] generowaną statycznie z gallery-data.ts.
postbuild.mjs — static optimizations
Polyfill stripping, CSS inline, LCP preload z imagesrcset/imagesizes, Schema.org Person injection. Brak runtime serwera.
Tailwind v4 design system
@theme {} z tokenami ink/paper/ash/mist. WCAG AA kontrast (slate #706C69, 4.9:1). Playfair Display + Inter.
SEO full stack
Canonical, sitemap.xml, robots.txt, llms.txt, favicon SVG, meta title 50-60 znaków, description 120-160 znaków, Schema.org Person.
Stack technologiczny
Z czego jest zbudowane
Czas realizacji
ok. tydzień
Twój projekt może być następny. Wyślij brief — przygotujemy konkretną propozycję w jeden dzień roboczy.
Wyceń podobny projektInne realizacje
Może Cię zainteresować
Strona dla firmy outsourcingowej IT z kalkulatorem pakietu, formularzem audytu i blogiem eksperckim.
Second Life IT — outsourcing IT dla firm
Next.js 14 · Tailwind · GSAP
Strona własnej agencji web — pełen lejek od strategii po wdrożenie, cennik widełkowy, kalkulator brief.
BuildLab — strona własnej agencji
Next.js 14 · Tailwind · GSAP
Butikowy sklep e-commerce z hand-woven torebkami z naturalnych włókien — editorial design bez frameworków.
INARD — luxury hand-woven bags
Vanilla HTML · CSS · JSTwój projekt może być następny
Masz pomysł? Zrealizujemy go.
Niezależnie czy potrzebujesz nowej strony, sklepu czy modernizacji — wyślij brief i porozmawiajmy.