Strona internetowa dla doradcy ubezpieczeniowego — Hanna Mizura, Rybnik

Zastosowane rozwiązania

• Tarcza kompasu jest rysowana w SVG bezpośrednio w kodzie strony: złoty bezel, kremowa tarcza, róża wiatrów i setki kresek skali zrobione jednym okręgiem z przerywaną linią. Zero obrazków do ładowania, ostro na każdym ekranie
• Igła obraca się w CSS z krzywą, która lekko „przestrzeliwuje” cel i wraca, jak prawdziwa igła. Kąt jest liczony narastająco, więc zawsze kręci się najkrótszą drogą i nigdy nie robi pełnego obrotu, żeby przejść z ostatniego etapu na pierwszy
• Dziesięć etapów życia to granatowe medaliony ze złotą obwódką ułożone na okręgu wokół tarczy. Wybrany podświetla się na złoto, a obok wjeżdża panel z opisem, listą pytań „o czym warto pomyśleć” i jednym zdaniem, dlaczego to ważny moment
• Na telefonie medaliony układają się w poziomy slider z przyciąganiem do środka. Przesunięcie palcem samo wybiera etap, który zatrzymał się na środku, więc kompasem da się bawić jednym kciukiem
• Kompas jest dostępny z klawiatury: etapy to zwykłe przyciski ze stanem aria-pressed, a przy włączonej redukcji ruchu animacje są wyłączone
• Identyfikacja oparta na granacie i złocie, Playfair Display w nagłówkach i Inter w tekście. Portret w hero zamiast grafiki stockowej, bo klient kupuje zaufanie do konkretnej osoby
• Krótki skrypt pilnuje polskiej typografii: pojedyncze „i”, „w”, „z” nie zostają same na końcu wiersza
• Statyczne pliki zamiast WordPressa: jeden arkusz stylów, jeden skrypt o wadze 10 kB, brak wtyczek i bazy danych