Programiści mają zły nawyk budowania szwajcarskich scyzoryków, podczas gdy potrzebują jedynie ostrego ostrza. Sięgamy po ciężkie frameworki frontendowe, zanim napiszemy pierwszą linię kodu HTML. Doklejamy biblioteki animacji, narzędzia do zarządzania stanem i potężne potoki budowania (build pipelines), które wystarczyłyby do prowadzenia małej firmy. Potem zastanawiamy się, dlaczego nasze strony portfolio potrzebują trzech sekund na renderowanie, dlaczego nawigacja nie działa na urządzeniach mobilnych i dlaczego managerowie rekrutacyjni opuszczają stronę, zanim w ogóle zobaczą projekty, nad którymi spędziliśmy miesiące.
W moim najnowszym portfolio wybrałem inną drogę. Odszedłem od ekosystemu nieskończonych zależności i zbudowałem całą stronę przy użyciu semantycznego HTML-a i czystego CSS. Bez frameworków JavaScript. Bez kroków budowania. Bez zewnętrznych silników animacji. Tylko sama platforma, układ obsługiwany przez CSS Grid i Flexbox oraz filozofia projektowania, która traktuje szybkość i przejrzystość jako kluczowe funkcje, a nie dodatki.
Efekt jest lekki, szybki i profesjonalny. Oto dokładnie, jak do tego podszedłem.
Zacznij od fundamentów
Większość nadmiarowego projektowania (over-engineering) zaczyna się od fundamentów. Portfolio nie musi być aplikacją typu single-page application (SPA). Musi wyświetlać Twoją pracę, informować, jak się z Tobą skontaktować i nie przeszkadzać użytkownikowi. Użyłem semantycznego HTML-a, ponieważ przeglądarka już wie, jak renderować nav, article i footer. Używając odpowiedniego elementu do odpowiedniego zadania, zyskujesz dostępność (accessibility), widoczność w wyszukiwarkach i responsywność praktycznie za darmo. Piszesz też mniej kodu. div z pięcioma atrybutami ARIA to tylko gadatliwa imitacja przycisku button. Całkowicie tego uniknąłem.
Do układu CSS Grid i Flexbox są w zupełności wystarczające. Grid obsługuje strukturę makro: ogólne sekcje strony, galerię projektów, wyrównanie głównych bloków. Flexbox zarządza mikrointerakcjami: linkami nawigacyjnymi wewnątrz kapsuły, centrowaniem tekstu w kartach czy wypychaniem stopki na dół okna przeglądarki. Razem zastępują każdy powód, dla którego w 2018 roku mógłbyś chcieć zaimportować framework siatki dwunastokolumnowej. Kod pozostaje czytelny. Plik CSS pozostaje mały.
Kolor, typografia i umiar
Chciałem, aby portfolio budziło spokój w momencie załadowania. Tło wykorzystuje jasną bazę z subtelnymi gradientami radialnymi. Nic agresywnego. Gradient ma niską przezroczystość, tworząc miękką głębię, która sprawia, że strona nie wydaje się płaska, nie krzycząc jednocześnie o uwagę. Ładuje się natychmiast, ponieważ to czysty CSS. Nie ma obrazów typu hero do kompresowania, żadnych fallbacków WebP do zarządzania ani bibliotek JavaScript do leniwego ładowania (lazy-loading), które trzeba by konfigurować.
Typografia nadaje charakter. Połączyłem font Outfit z Ovo. Outfit, geometryczny bezszeryfowy krój, obsługuje cały tekst interfejsu: etykiety nawigacji, tekst przycisków, treść główną i szczegóły meta. Jest wyraźny na ekranach i czytelny nawet w małych rozmiarach. Ovo, szeryfowy krój o średnim kontraście, służy nagłówkom i głównym tytułom. To połączenie nadaje stronie spokojny, redakcyjny charakter. Wygląda na zaprojektowaną, a nie tylko nałożoną na gotowy motyw. Co najważniejsze, oba fonty ładują się z jednego wywołania usługi fontów lub z plików hostowanych lokalnie. Nie ma przesunięć układu (layout shift), migotania nieformatowanego tekstu ani skryptów zmieniających grubości liter po początkowym renderowaniu.
Pływające menu w formie kapsuły
Nawigacja to miejsce, w którym portfolio często zapada się pod własnym ciężarem. Pełnoekranowe menu nakładkowe, skomplikowane skrypty animacji i ikony hamburgera, które wymagają czterdziestu linii JavaScriptu, aby przełączyć klasę. Nie chciałem niczego z tego.
Zbudowałem pływające menu w formie kapsuły z efektem glassmorfizmu. Jest to pojedynczy poziomy kontener o zaokrąglonych krawędziach, umieszczony na stałe (fixed) blisko górnej części okna przeglądarki. Glassmorfizm wynika z półprzezroczystego koloru tła i właściwości backdrop-filter: blur(). Menu unosi się nad treścią, nie zasłaniając jej, zapewnia natychmiastowy dostęp do każdej sekcji i płynnie zwija się na mniejszych ekranach bez konieczności całkowitego przeprojektowania. Efekt wygląda nowocześnie, ponieważ to przeglądarka zajmuje się kompozycją, a nie biblioteka canvas.