Informational website for a local beauty salon. Created from scratch with a focus on responsiveness, aesthetics, and accessibility.
🔴 Zobacz projekt na żywo (Live Preview): Rosebeauty Website
Rosebeauty to w pełni responsywna, wielopodstronowa strona internetowa stworzona dla salonu kosmetycznego. Projekt został zakodowany od zera, z dbałością o detale, płynne animacje oraz dostępność (zgodność ze standardami WCAG 2.1). Zbudowany w oparciu o czysty kod z wykorzystaniem preprocesora SASS oraz automatyzacji zadań za pomocą środowiska Gulp.
- Pełna responsywność (RWD): Strona automatycznie dostosowuje się do każdego ekranu (desktop, tablet, smartfon). Na urządzeniach mobilnych zaimplementowano interaktywne menu typu "hamburger".
- Płynne animacje: Interfejs ożywiony za pomocą biblioteki AOS (Animate On Scroll).
- Slider opinii: Interaktywna karuzela prezentująca recenzje klientów.
- Mapa: Zintegrowana mapa w sekcji kontaktowej wskazująca lokalizację salonu.
- Baner Cookies: Zaimplementowany mechanizm powiadamiania o plikach cookies.
- Dostępność (A11y): Struktura i stylistyka zoptymalizowana pod kątem wytycznych WCAG 2.1.
- Wysoka wydajność: Dzięki automatyzacji (Gulp), cały kod (HTML/CSS/JS) jest minifikowany, a zdjęcia są kompresowane bez strat na jakości.
- HTML5 (z wykorzystaniem modułowości dzięki
gulp-kit) - CSS3 / SCSS (SASS - zmienne, zagnieżdżenia, mixiny)
- JavaScript (ES6+ kompilowany w locie przez Babel)
- Gulp (Task Runner: automatyzacja zadań, auto-odświeżanie BrowserSync, Autoprefixer, Imagemin)
- AOS (Animate On Scroll)
Projekt wykorzystuje menedżer pakietów npm (Node.js) do obsługi narzędzia Gulp.
- Sklonuj repozytorium na swój komputer:
git clone [https://github.com/EmilRepo/rosebeauty.git](https://github.com/EmilRepo/rosebeauty.git)