# Przepis na styl PORTFOLIO

Styl do portfolio fotografów, grafików, ilustratorów i małych studiów. Ogromna nazwa w wąskim kroju szeryfowym, reszta złożona drobnym krojem maszynowym, a prace stoją w kolumnach, które przy przewijaniu jadą z różną prędkością.

Ten plik to przepis na wygląd strony internetowej dla agenta, który pisze kod: Claude Code'a, Codexa, Cursora albo podobnego. Nie ma w nim treści, tylko wygląd: kroje, kolory, siatka, elementy, zdjęcia i ruch.

## Jak z niego korzystasz

Przeczytaj cały przepis, zanim cokolwiek zmienisz. Potem sprawdź, w której sytuacji jesteś:

- **Strona już istnieje.** Zmieniasz wyłącznie wygląd. Treść i działanie strony zostają nietknięte, a zasady są niżej, w części „Treść zostaje”.
- **Strony jeszcze nie ma.** Budujesz ją od razu w tym stylu. Teksty, zdjęcia, ceny i dane kontaktowe bierzesz od użytkownika. Jeśli czegoś brakuje, wstawiasz tekst zastępczy w nawiasie kwadratowym, na przykład [adres], i nie zmyślasz faktów.

Zanim zaczniesz, napisz użytkownikowi w kilku krótkich punktach, co zmienisz, i poczekaj na zgodę. Liczby w przepisie (stopnie pisma, odstępy, czasy ruchu) są ustawione pod typowy landing. Przy bardzo długich tekstach albo nietypowych sekcjach dopasuj je tak, żeby styl dalej był rozpoznawalny. Przepis to szkic stylu, a nie sztywna instrukcja: jeśli użytkownik chce innych kolorów albo innego kroju, zmieniasz je tak, jak prosi, a resztę przepisu stosujesz dalej.

## Treść zostaje

Te zasady obowiązują zawsze, kiedy przebudowujesz stronę, która już istnieje.

- Każde słowo zostaje takie samo: nagłówki, akapity, ceny, przyciski, menu, stopka, teksty alternatywne zdjęć, tytuł strony i opisy dla wyszukiwarek. Nie poprawiasz, nie skracasz, nie tłumaczysz i niczego nie dopisujesz.
- Sekcje zostają w tej samej kolejności. Linki, formularze, koszyk, skrypty analityczne, piksele reklamowe i wtyczki działają tak samo jak wcześniej.
- Zdjęcia zostają te same. Wolno je przyciąć, zmienić proporcje kadru i nałożyć traktowanie opisane w tym przepisie, ale nie podmieniasz ich na inne i nie generujesz nowych.
- Zmieniasz krój, kolory, odstępy, rozmieszczenie elementów wewnątrz sekcji, wygląd przycisków, kart i pól formularzy oraz ruch.
- Jeśli jakiś element stylu wymaga treści, której na stronie nie ma (na przykład styl przewiduje liczby w nagłówku, a strona ich nie ma), pomijasz ten element zamiast dopisywać treść. Treści nie przenosisz też między sekcjami, żeby wypełnić element stylu.
- Jeśli na stronie jest coś, czego styl zakazuje (na przykład emoji albo strzałki w przyciskach), to zostaje, bo jest treścią. Możesz to wyciszyć wyglądem, a o usunięcie pytasz użytkownika.
- Numery porządkowe sekcji (01, 02…) wolno dodać jako element wyglądu, w CSS (licznik i `::before`), a nie w HTML. Wolno też dodać napisy sterujące, których wymaga obsługa strony na telefonie, na przykład „Menu” i „Zamknij”. Nazw sekcji, etykiet pól ani innych słów, których na stronie nie było, nie dodajesz.
- Działanie strony też zostaje: rozwijane pytania startują w tym samym stanie co wcześniej, formularz wysyła się tak samo i pokazuje te same komunikaty. Opisane w przepisie komunikaty i stany startowe stosujesz tylko przy nowej stronie.
- Przed zmianami zrób kopię plików strony obok jej folderu, a nie w nim, żeby nie zepsuć ścieżek względnych. Po zmianach wyciągnij cały widoczny tekst z wersji przed i po (najprościej skryptem, który zbiera tekst ze wszystkich podstron) i porównaj obie wersje. Przy porównaniu wyłącz `text-transform`, zamień twarde spacje na zwykłe i zwiń wszystkie odstępy do pojedynczych spacji, bo inaczej wersaliki i spacje z przepisu wyjdą jako fałszywe różnice. Różnica ma wynosić zero znaków, a wynik porównania pokazujesz użytkownikowi.

## Kroje: skąd je wziąć

Wszystkie kroje z tego przepisu są darmowe, także do użytku komercyjnego, i mają polskie znaki. Pobierz je z Google Fonts w formacie WOFF2, razem z zestawem znaków latin-ext, i podepnij z serwera strony zamiast ładować z serwerów Google. Strona otwiera się wtedy szybciej, a przeglądarka odwiedzającego nie wysyła jego adresu IP do Google, co w Unii bywa problemem przy RODO. Przy krojach ze zmienną wagą albo szerokością pobierz plik zmienny, a przy krojach z rozmiarem optycznym wariant z osią opsz, bo inaczej część wag i ustawień z przepisu nie zadziała.

## Charakter

Pierwsze skrzypce grają prace. Typografia jest cicha, drobna i maszynowa, z jednym wyjątkiem: nazwa autora albo studia jest ogromna i stoi na całą szerokość ekranu. Strona cały czas żyje, ale ruch wynika z przewijania, więc działa tak samo na telefonie, bez najeżdżania kursorem.

## Kroje

- Nazwa, tytuły prac i duże zdania: **Instrument Serif**, 400 i kursywa.
- Wszystko inne (menu, opisy, metadane, przyciski, stopka): **Fragment Mono**, 400, 13 px.

## Kolory

```css
:root {
  --tlo: #f1f1ef;
  --tekst: #111111;
  --tekst-2: #6d6d66;   /* 4,6:1 na tle */
  --linia: #d6d6d0;
}
```

Strona nie ma własnego koloru akcentu, bo kolor dają prace. Jedyny wyjątek to sekcja z pojedynczą pracą na cały ekran: jej tło ma kolor tła zdjęcia (mediana pikseli przy krawędziach zdjęcia), więc praca zlewa się z sekcją.

## Siatka i odstępy

- Margines boczny 32 px na laptopie i 16 px na telefonie. Treść rozlewa się na całą szerokość okna, bez wąskiej kolumny pośrodku.
- Odstęp między pracami 24 px w pionie i w poziomie.
- Siatka prac ma trzy kolumny na laptopie, dwie na tablecie i jedną na telefonie.

## Typografia

- Nazwa w hero: Instrument Serif tak duży, żeby litery stały od marginesu do marginesu, interlinia 0.8, odstęp liter −0.02em. Rozmiar wynika z długości nazwy i liczysz go skryptem z obrysu liter.
- Tytuły prac pod pracą na cały ekran: Instrument Serif 28 px, nazwa klienta kursywą. Pod pracami w siatce stoi sama linia mono.
- Metadane i opisy: Fragment Mono 13 px, interlinia 1.5. Wersaliki tylko w etykietach, z odstępem liter 0.06em.
- Numery prac zawsze trzycyfrowe: 001, 002, 003.

## Elementy

- **Nawigacja:** na laptopie jedna linia mono na samej górze, na telefonie dwie (nazwa i licznik, pod nimi linki). Nazwa po lewej, linki po prawej, a pośrodku licznik pracy widocznej na ekranie („007 / 024”), który zmienia się przy przewijaniu. Bez tła, biały tekst z `mix-blend-mode: difference`, żeby był czytelny na każdym zdjęciu.
- **Hero:** ogromna nazwa na dole pierwszego ekranu, nad nią jedna linijka mono o tym, czym zajmuje się autor i skąd jest. Nad nazwą płynie w pętli poziomy pas miniatur prac, wysoki na 28vh.
- **Siatka prac:** zdjęcia w oryginalnych proporcjach, bez przycinania do jednego formatu. Pod każdym w jednej linii mono: numer, tytuł, klient i rok. Kolumny przy przewijaniu jadą z różną prędkością (wartości w części „Ruch”). Krótsze kolumny stoją na środku wysokości najdłuższej, żeby pod nimi nie zostawała pustka, a sekcja ma u góry i u dołu około 120 px zapasu na przesunięcie kolumn.
- **Indeks:** po lewej wąska tabela mono ze wszystkimi pracami (numer, tytuł, klient, rok; każdy wiersz w jednej linii, linia 1 px między wierszami), obok na resztę szerokości pionowa galeria tych samych prac. Sekcja przykleja się do ekranu (`position: sticky`) na czas przewijania galerii: tor sekcji ma wysokość ekranu plus 36% wysokości ekranu na każdą pracę poza pierwszą. Przewijanie przesuwa galerię o jedną pracę na krok, a w tabeli ciemnieje wiersz pracy, która stoi na środku galerii. Praca na środku stoi płasko, w swoich proporcjach, najwyżej na 56% wysokości i 72% szerokości galerii. Nad nią i pod nią widać po dwie kolejne prace, pochylone jak na wewnętrznej ściance bębna: krawędź dalej od środka jest bliżej oka, więc pochylona praca wygląda jak trapez szerszy od zewnątrz. Prace nie nachodzą na siebie, bo położenia liczysz na ekranie od środka na zewnątrz: bliższa krawędź każdej pracy stoi 12 px od dalszej krawędzi poprzedniej. Przy prawej krawędzi galerii, na wysokości jej środka, stoją jedna nad drugą dwie kwadratowe strzałki 40 px (w górę i w dół, ramka 1 px w kolorze linii, bez tła), które przewijają stronę o jeden krok. Kliknięcie w wiersz tabeli albo w pochyloną pracę przewija do tej pracy.
- **Praca na cały ekran:** co kilka prac jedna sekcja z pojedynczą pracą na środku, na tle w kolorze tła zdjęcia, z tytułem w Instrument Serif pod spodem. Ta praca nie powtarza się w siatce, a krawędzie zdjęcia wtapiasz w tło miękką maską na około 9% szerokości, bo winieta w zdjęciu inaczej odcina prostokąt.
- **Studio i kontakt:** krótki tekst o autorze w Instrument Serif 40 px (na telefonie 32 px), a niżej klikany adres e-mail dopasowany do szerokości treści, na telefonie łamany po @.

## Zdjęcia

- Bez zaokrągleń, ramek i cieni.
- Każde zdjęcie w swoich proporcjach. Prac na różnych tłach nie ujednolicasz filtrem.
- Zanim zdjęcie się wczyta, jego miejsce ma kolor tła zdjęcia, a nie szary prostokąt.

## Ruch

- Kolumny siatki przesuwają się w pionie zależnie od przewijania: środkowa o `scroll × 0.12` (zostaje w tyle, czyli jedzie wolniej), prawa o `scroll × −0.06` (jedzie trochę szybciej). Przesunięcie wynosi zero, kiedy góra siatki stoi na górze ekranu, i jest wygładzone w `requestAnimationFrame` (zbliżanie do celu o 0.1 odległości na klatkę przy 60 kl./s). Na tablecie dwie kolumny: 0 i 0.12.
- Wejście zdjęcia: maska od dołu `clip-path: inset(100% 0 0 0)` do `inset(0)` i jednocześnie skala obrazu w masce z 1.12 do 1.0, 1200 ms, `cubic-bezier(.16, 1, .3, 1)`.
- Pas miniatur w hero płynie w pętli bez szwu (lista zdublowana), około 40 px na sekundę. Przewijanie strony przyspiesza go na chwilę, a po 600 ms wraca do zwykłej prędkości.
- Galeria w indeksie: pierwszy sąsiad pochylony o 80°, dalsi o 84°, a kąt narasta miękko (smoothstep). Pierwszy sąsiad cofa się w głąb o wysokość pracy ze środka, każdy kolejny o 1,1 tej wysokości, a `perspective` galerii wynosi pięć wysokości pracy ze środka. Położenie galerii idzie za przewijaniem z wygładzeniem jak kolumny siatki (0.12 odległości na klatkę), a w każdym kroku praca na środku chwilę stoi: przez pierwsze i ostatnie 18% kroku galeria się nie rusza, pomiędzy jedzie miękko. Prace dalej niż dwie od środka gasną, od trzeciej znikają, a górna i dolna krawędź galerii przechodzi w tło maską na 7% wysokości.
- Licznik w nawigacji pokazuje ostatnią pracę, której środek minął środek ekranu, a w indeksie pracę na środku galerii.
- Przy ograniczonym ruchu kolumny i pas stoją, zdjęcia są widoczne od razu, a galeria w indeksie przeskakuje o całą pracę, bez wygładzenia.

## Telefon

- Jedna kolumna prac, bez różnych prędkości.
- Hero bez pustych pól: pas prac stoi tuż pod nawigacją i wypełnia miejsce aż do linijki o autorze, a nazwa zostaje na dole pierwszego ekranu.
- Nazwa w hero dalej na całą szerokość.
- W indeksie (do 899 px szerokości, czyli też na tablecie) galeria stoi na górze przyklejonej sekcji, na całą szerokość, a praca na środku może zająć 86% szerokości. Pod galerią tabela działa jak bęben wyboru: widać trzy wiersze, aktywny zawsze w środku, i przesuwają się razem z galerią. Tytuł i klient stoją w jednej linii, klient dostaje wielokropek, jeśli się nie mieści. Strzałki stoją w linii z etykietą sekcji, po prawej.

## Czego nie robić

- Kursora w kształcie kółka z napisem „view” i ruchu, który działa tylko po najechaniu myszą.
- Siatki równych kwadratów i kart z cieniem. W 3D obraca się tylko galeria w indeksie.
- Nagłówka „Cześć, jestem…”, pasków umiejętności w procentach i rzędu szarych logotypów klientów.
- Krojów Inter, Space Grotesk i Syne.

## Kontrola na koniec

- Obejrzyj stronę na szerokości 390 px (telefon) i 1440 px (laptop), od góry do dołu, z przewijaniem. Nic nie wystaje poza ekran w poziomie, a żaden tekst nie nachodzi na inny.
- Polskie znaki w nagłówkach są w tym samym kroju co reszta słowa. Jeśli „ą” albo „ł” wygląda inaczej, plik kroju nie ma zestawu latin-ext.
- Przy systemowym ustawieniu „ogranicz ruch” animacje się wyłączają, a cała treść jest widoczna od razu.
- Zwykły tekst ma kontrast co najmniej 4,5:1 do tła, a duże nagłówki co najmniej 3:1. Kolory z przepisu są dobrane pod te progi, ale jeśli na stronie stoją na innym tle niż w przepisie, sprawdź je jeszcze raz.
- Nawigacja, która stoi nad treścią, nie liczy się jako tekst nachodzący na inny, o ile w każdym miejscu jest czytelna.
- Na telefonie kolumny nie przesuwają się względem siebie, a strona przewija się płynnie.
- Nazwa w hero mieści się w jednym wierszu na każdej szerokości od 360 px.
- Prace w galerii indeksu nie nachodzą na siebie przy żadnym położeniu przewijania, także w połowie kroku, a galerię przesuwa zwykłe przewijanie strony, bez przechwytywania kółka myszy i gestów.
- Przy przebudowie porównanie tekstu przed i po daje zero różnic.