Emotion Karting

Projekt nowej strony toru kartingowego w Bytomiu – zrobiony z sympatii do toru, w wersji ciemnej i jasnej, ze sportowym pazurem.

  • WordPress
  • Gutenberg

Na dziś projekt w HTML, CSS i JS – na WordPressie stanie, gdy tor zgodzi się na zmianę strony. Kod jest prywatny.

Emotion Karting – pierwszy ekran nowej strony w wersji ciemnej
  • 2motywy – ciemny i jasny, jak w moim portfolio
  • 4widoki – strona główna, aktualności, wpis i wersja z animacjami
  • 6animacji, które bym zostawił – ślady opon, licznik statystyk, wjazd gokartów i inne
  • 3kroje pisma z serwera strony – Barlow, Barlow Condensed i JetBrains Mono, bez Google Fonts

Co zbudowałem

Lubię jeździć gokartami, a na torze Emotion Karting w Bytomiu byłem już wiele razy. Kiedy szukałem gokartów dla firmy, wszedłem na ich stronę i zobaczyłem, że część elementów się nie załadowała. Znam tam kilka osób, więc z czystej sympatii przygotowałem projekt nowej strony – na wypadek, gdyby chcieli się przenieść – i zaproponowałem optymalizację pod Google, taką jak przy ReblyX. Chciałem zachować sportowy pazur toru i wydaje mi się, że się udało.

Najważniejsze cechy

  • Sportowy charakter – mocna typografia, pomarańczowe akcenty i ślady opon w tle
  • Dwa motywy – ciemny i jasny, jak w moim portfolio, żeby każdy mógł dopasować stronę do siebie
  • Cennik, szkółka i aktualności – z osobnym widokiem listy wpisów i pojedynczego wpisu
  • Wersja z animacjami: rysujące się ślady opon, licznik statystyk, wjazd gokartów i odsłanianie sekcji – tylko świateł startowych w hero bym nie zostawił
  • Animacje wyłączają się, gdy ktoś ma w systemie włączone ograniczenie ruchu (prefers-reduced-motion)
  • Czcionki dołączone lokalnie, bez Google Fonts

Przed i po

Przeciągnij suwak – po lewej stara strona, po prawej nowa.

Projekt nowej strony Emotion Karting – pierwszy ekran
Obecna strona Emotion Karting – pierwszy ekran
Przed · obecna stronaPo · mój projekt

Po lewej zrzut obecnej strony z października 2026, po prawej mój projekt w wersji ciemnej.

Jak to wygląda

Zrzuty z projektu – kliknij zrzut, żeby go powiększyć.

  • Strona główna w wersji ciemnej – od hero ze zdjęciem toru do kontaktu
  • Ta sama strona w wersji jasnej
  • Aktualności – lista wpisów toru
  • Pojedynczy wpis z aktualności

1 / 4

Strona główna – wersja ciemna

Strona główna w wersji ciemnej – od hero ze zdjęciem toru do kontaktu

← Wszystkie projekty