Zadanie rekrutacyjne Landing Page

Sprawdź wersję Demo tutaj

Opis:

Landing page stworzony w HTML, CSS, Tailwind, JavaScript jako część zadania rekrutacyjnego, którego celem było wdrożenie statycznej strony na podstawie mockupu przygotowanego w Figmie. Od siebie dodałem kilka animacji w AOS oraz wykorzystałem bibliotekę Swiper do stworzenia karuzeli zdjęć.

Techstack:

• HTML
• CSS
• Tailwind
• JavaScript

Narzędzia:

• Eslint
• Prettier
• AOS
• Swiper
• Vite
• Netlify

Funkcjonalności:

• Deployment landing page na Netlify
• Zaprojektowanie opengraph image
• Implementacja opengraph dla mediów społecznościowych
• Rozwinięte metatagi pod SEO
• Responsywność na wszystkie urządzenia: mobilne, tablety, ekrany 4k
• Animacje
• Wdrożenie interaktywnych zakładek dla wyświetlania osobnych sliderów dla poszczególnych rodzajów samochodów
• Optymalizacja obrazków do formatu WebP
• Optymalizacja obrazków poprzez technikę lazy loading
• Karuzela zdjęć z wykorzystaniem biblioteki Swiper
• Rozwijalne artykuły w dolnej sekcji strony kiedy tekst jest zbyt długi
• Dialog Alert z polityką prywatności

Bugi:

• Właściwość gap-12 nie działa dla kontenera zawierającego przyciski do nawigacji pomiedzy sliderami

ScreenShots:

Jak uruchomić projekt lokalnie:

Sklonuj repozytorium

git clone https://github.com/rafal19987/Recruitment-Task-CarsSpot-Landing-Page-HTML-Tailwind-JavaScript-Vite.git

Przejdź do folderu

cd Recruitment-Task-CarsSpot-Landing-Page-HTML-Tailwind-JavaScript-Vite

Zainstaluj dependencies

npm install

Uruchom środowisko developerskie

npm run dev

Przejdź pod adres http://localhost:5173/