Wielostronicowa witryna B2B — projekt własny · 2026
NewLab Systems
To projekt demonstracyjny zrealizowany z własnej inicjatywy. NewLab Systems to prawdziwa firma z okolic Poznania; witryna nie została przez nią zamówiona i nie jest jej oficjalną stroną.
Przebudowałem witrynę dystrybutora diagnostyki molekularnej jako ćwiczenie projektowe i front-endowe, wybierając temat, w którym odbiorca jest techniczny, a poprzeczka wiarygodności wysoko. To siedem ręcznie napisanych stron dzielących jeden arkusz stylów i jeden skrypt, z przełącznikiem polski/angielski, animacją hero na canvasie i interaktywnym panelem do przeglądania zawartości testów diagnostycznych. Nie ma frameworka ani kroku budowania — pliki są serwowane dokładnie tak, jak zostały napisane.
- 7
- Stron
- 2
- Języki
- 0
- Kroków budowania
Cel
Na czym polegał problem
- Poćwiczyć projektowanie dla wyspecjalizowanego odbiorcy B2B, gdzie czytelnikiem jest osoba kupująca do laboratorium, a tekst musi być precyzyjny, a nie perswazyjny.
- Zbudować naprawdę dwujęzyczną witrynę — kupujący są polscy, producent międzynarodowy — bez sięgania po framework.
- Utrzymać całość jako pliki statyczne, żeby zobaczyć, co takie ograniczenie zmusza do zrobienia porządnie.
Moja rola
Wszystko: struktura, projekt graficzny, teksty w obu językach, wykonanie front-endu i konfiguracja wdrożenia.
Co zbudowałem
- Siedem stron — strona główna, produkty, strona testu HPV, współpraca z producentem, technologia, o firmie i kontakt — dzielących jeden arkusz stylów i jeden skrypt.
- Przełącznik polski/angielski obejmujący każdy tekst na stronie, łącznie z etykietami wykresów i statystyk, z wyborem zapisanym w localStorage, więc przetrwa nawigację.
- Animowane pole cząsteczek w kształcie helisy DNA w sekcji hero, rysowane na elemencie canvas.
- Interaktywny panel multipleks pozwalający filtrować kategorie i panele diagnostyczne oraz sprawdzić, które cele wykrywa każdy test.
- Znak firmowy odtworzony jako osadzony, przezroczysty SVG, dzięki czemu pozostaje ostry w każdym rozmiarze.
- Konfiguracja wdrożenia, która wymusza ponowną walidację współdzielonych zasobów przy każdym żądaniu i trzyma wewnętrzne notatki robocze poza publiczną witryną.
Ekrany
Narzędzia
Front end
- HTML
- CSS
- JavaScript
- Canvas API
- Osadzony SVG
Podejście
- Bez frameworka
- Bez kroku budowania
- Współdzielone zasoby
- localStorage
Wdrożenie
- Netlify
- Reguły przekierowań i nagłówków cache
Wyzwania
Decyzje warte wyjaśnienia
Jeden skrypt dla stron, które nie mają wspólnych elementów
Każda strona ładuje ten sam plik JavaScript, ale helisa istnieje na jednej stronie, a panel multipleks na innej. Zasada, którą przyjąłem, brzmi: skrypt nigdy nie może zakładać, że element istnieje — każde wyszukanie jest zabezpieczone i wycofuje się, gdy celu nie ma. Bez tej zasady jeden brakujący element rzuca wyjątek i kładzie nawigację razem z przełącznikiem języka.
Przełącznik języka, który przetrwa nawigację
Na witrynie wielostronicowej bez frameworka oczywiste rozwiązanie resetuje język do polskiego przy każdym kliknięciu, przez co strona sprawia wrażenie zepsutej dla anglojęzycznego czytelnika. Zapisanie wyboru w localStorage i przywrócenie go przy ładowaniu to niewielki fragment kodu, który decyduje o różnicy między działającą funkcją a ozdobną.
Współdzielone zasoby i nieaktualny cache
Arkusz stylów i skrypt zachowują te same nazwy plików między wdrożeniami, więc powracający użytkownik może zostać z zapisanym w cache arkuszem i zobaczyć stronę w połowie zaktualizowaną — co przydarzyło mi się lokalnie podczas pracy. Konfiguracja wdrożenia wymusza teraz ponowną walidację tych zasobów przy każdym żądaniu. Kosztuje to jedno 304 i gwarantuje, że nikt nie zobaczy zepsutej wersji.
Osadzanie kontra współdzielenie
CSS i JS były pierwotnie osadzone w każdej stronie. Przy mniej więcej 63% objętości pliku oznaczało to około 237 KB powielone na sześciu stronach i sześć kopii każdej przyszłej zmiany. Przeniesienie ich do wspólnych plików było słuszną decyzją, ale to właśnie ona stworzyła dwa powyższe problemy.
Czego się nauczyłem
- Ograniczenie „bez kroku budowania” zabiera siatkę bezpieczeństwa i zmusza do myślenia wprost o kolejności ładowania, cache’owaniu i defensywnym wyszukiwaniu elementów, zamiast ufać, że bundler się tym zajmie.
- Konfiguracja i dokumentacja są częścią dostarczanego produktu. Reguła cache i przekierowanie ukrywające wewnętrzne notatki to tyle samo tego projektu, co układ strony.
- Pisanie tekstów technicznych dla odbiorcy, który wie więcej od ciebie, jest najpierw zadaniem researchowym, a dopiero potem pisarskim.
Kod źródłowy
Repozytorium jest prywatne. Chętnie udostępnię je na życzenie.
Następny projekt
Stravo Media
Niezależna działalność, pod którą mieści się reszta tej pracy — pozycjonowanie oferty, strona, proces sprzedaży i system, który to wszystko obsługuje.