Jacek Rudnicki — CV i twórczość

Realizacja w jednym akapicie

To osobisty projekt — strona internetowa mojego taty, prof. dr. hab. n. med. Jacka Rudnickiego: pediatry i neonatologa, profesora Pomorskiego Uniwersytetu Medycznego w Szczecinie, a jednocześnie kompozytora, autora kilkunastu książek i tekstów piosenek. Zadanie było proste do nazwania i trudne do dobrego wykonania: jedna strona typu single-page, która musi pomieścić dorobek naukowy i artystyczny naraz, bez sprawiania wrażenia dwóch sklejonych ze sobą wizytówek.

Jedna osoba, dwa życiorysy

Sekcja CV zaczyna się od czterech chipów — "Pediatra i Neonatolog", "Profesor PUM", "Kompozytor", "Autor i Artysta" — bo żadna pojedyncza etykieta zawodowa nie odda tej kariery. Dalej biografia rozbita na sześć akapitów, każdy o innym aspekcie: wykształcenie i wojskowa akademia medyczna, kierownictwo Kliniki Patologii Noworodka i stypendia zagraniczne, tematyka badawcza (encefalopatia noworodków, komórki macierzyste w neonatologii, relacja medycyny z filozofią i sztuką), książki i teksty piosenek dla kilku zespołów oraz do filmu V.I.P. Juliusza Machulskiego, nagrody muzyczne i rysunki satyryczne w prasie, wreszcie drobne, osobiste detale — długie włosy, bo w czasie studiów w WAM było to niemożliwe; muszka noszona na wzór stryja. To ostatnie zdanie jest tam świadomie: CV, które nie zostawia miejsca na te szczegóły, byłoby po prostu nieprawdziwe dla tej osoby.

Piętnaście książek, zero CMS-a

Każda książka to jeden wpis w tablicy JavaScript — tytuł, okładka, ścieżka do pliku — renderowany jako karta z okładką, która przy najechaniu odsłania odznakę pobierania. Plik pobiera się bezpośrednio (download, target="_blank", rel="noopener noreferrer") prosto z katalogu statycznego. Dodanie kolejnej książki to jeden wiersz w pliku danych i wgranie PDF-a do folderu — żadnej bazy danych, żadnego panelu admina, bo dla strony jednego autora, który sam nie będzie codziennie zarządzał treścią, to byłaby architektura nadmiarowa.

Wykłady, które trzeba było najpierw poskładać

Dwadzieścia trzy prezentacje z wielu lat wykładów — od neonatologii przez socjologię po "Sztukę na dopingu" — w formatach PPTX, PPTM i DOCX. Komponent rozpoznaje typ pliku z samego rozszerzenia ścieżki i przypisuje mu ikonę oraz kolor chipa (pomarańcz dla prezentacji, niebieski dla dokumentów) — żadnego dodatkowego pola z metadanymi, bo rozszerzenie już niesie tę informację. Wyszukiwarka filtruje listę po tytule na żywo (useMemo), a siatka domyślnie pokazuje tylko kilka pierwszych pozycji — liczba zależna od szerokości ekranu (3 na telefonie, 4 na tablecie, 6 na desktopie, przez useMediaQuery z breakpointami MUI) — z przyciskiem "Rozwiń", który mówi wprost, ile pozycji jeszcze czeka. Zwinięcie z powrotem przewija płynnie do góry sekcji, żeby długa lista wykładów nie zostawiała użytkownika zagubionego gdzieś w środku strony.

Galeria jako osobna kolekcja, nie dodatek do CV

Portrety, grafiki i zdjęcia, filtrowane po kategorii przez pojedynczą tablicę allPhotos z polem category na każdym wpisie. Kliknięcie w miniaturkę otwiera pełnoekranowy podgląd przez yet-another-react-lightbox — jedna biblioteka, zero własnego kodu do obsługi klawiatury, gestów czy nawigacji strzałkami, bo to dokładnie ten rodzaj funkcji, którego nie warto pisać od zera dla strony wizytówkowej.

Własny i18n zamiast biblioteki

Trzy języki — polski, angielski, niemiecki — jako jeden zagnieżdżony obiekt JavaScript i prosty kontekst Reacta z funkcją t. Zamiast i18next czy react-intl, kilkadziesiąt linijek własnego kodu, bo strona ma stały, znany z góry zestaw tekstów, a nie ładowane dynamicznie treści. Ciekawy detal: część wartości w tym obiekcie to nie stringi, tylko funkcje — expand przyjmuje liczbę i zwraca gotowy tekst w stylu "Rozwiń (5 więcej)", a noResults przyjmuje wpisaną frazę i zwraca "Nie znaleziono wykładów pasujących do…" — prosty sposób na interpolację bez sięgania po pełny system pluralizacji, którego przy trzech językach i garści dynamicznych komunikatów po prostu nie potrzeba.

Nagłówek, który wie, kiedy się schować

Nawigacja jest przezroczysta na tle pełnoekranowego zdjęcia w hero, ale po przewinięciu (useScrollTrigger z progiem 100px) zyskuje półprzezroczyste ciemne tło i kurczy się z 80 do 60 pikseli wysokości — subtelna, ale świadoma decyzja: nawigacja nie może konkurować wizualnie ze zdjęciem, dopóki użytkownik faktycznie nie zacznie przewijać treści.

Kontakt bez hierarchii ważności

Cztery kanały kontaktu — e-mail, telefon, YouTube, wyszukiwarka publikacji na Empiku — pokazane jako cztery równorzędne, okrągłe ikony, bez podziału na "główny" i "dodatkowe". To celowe: część odwiedzających trafia na tę stronę po przeczytaniu książki i szuka kanału YouTube albo kolejnej publikacji, nie kontaktu biznesowego, więc żaden z tych czterech kanałów nie zasługuje na uprzywilejowane miejsce.

Co z tej realizacji wynika

Najmocniejsza lekcja z tej strony: nie każdy projekt potrzebuje architektury skalowalnej na wyrost. Piętnaście książek i dwadzieścia trzy wykłady jako statyczne pliki w tablicy JavaScript to nie jest uproszczenie z braku czasu — to świadomie dobrany rozmiar rozwiązania do rozmiaru problemu: jeden autor, treść zmieniająca się rzadko, zero potrzeby na CMS czy bazę danych. Rzecz, którą bym powtórzył: zanim sięgniesz po bibliotekę albo wzorzec architektoniczny, zapytaj, czy ten konkretny projekt kiedykolwiek urośnie do rozmiaru, który by go uzasadnił — a jeśli nie, kilkadziesiąt linijek własnego kodu jest lepszą odpowiedzią niż zależność, którą trzeba będzie utrzymywać.