DuoBarber Shop to projekt demonstracyjny, czyli strona fikcyjnego barbershopu, którą zbudowałem po to, żeby przećwiczyć konkretne rozwiązania i pokazać je w portfolio. Za nazwą nie stoi prawdziwa firma, więc dane kontaktowe na stronie są przykładowe. Powstała jednostronicowa wizytówka z sekcją o zespole, listą usług i formularzem kontaktowym, napisana w czystym HTML, CSS i JavaScript, bez systemu zarządzania treścią.

Kluczowe funkcje

Założenie było proste. Cała treść mieści się na jednej stronie, a menu prowadzi do kolejnych sekcji.

• Układ jednostronicowy. Wszystko jest na jednej podstronie, a kliknięcie w menu przewija do wybranego miejsca, bez przeładowania strony.
• Menu hamburgerowe na telefonie. Na wąskim ekranie odnośniki chowają się pod ikoną z trzema kreskami, więc nie zasłaniają treści.
• Układ dopasowany do ekranu. Ten sam kod obsługuje telefon, tablet i komputer. Nie ma osobnej wersji mobilnej, którą trzeba by aktualizować podwójnie.
• Płynne przewijanie. Strona przesuwa się do sekcji miękko, zamiast przeskakiwać. Odwiedzający cały czas wie, w którym miejscu się znajduje.
• Sprawdzanie formularza. Skrypt pilnuje, czy pola są wypełnione i czy adres e-mail ma poprawny format, i od razu pokazuje błąd. W tej wersji formularz nie wysyła wiadomości, bo projekt nie ma zaplecza serwerowego.
• Sekcja zespołu i usług. Odwiedzający od razu widzi, kto strzyże i co dokładnie może zamówić.
• Brak bazy danych. Serwer wysyła gotowe pliki, dzięki czemu strona ładuje się szybko i ma bardzo mało miejsc, przez które da się ją zaatakować.

Technologie

Celowo nie użyłem tu żadnego gotowego systemu ani frameworka. Przy tak małej stronie taki dodatek kosztuje więcej pracy i wagi, niż daje pożytku.

• HTML. Szkielet strony. Ustala, co jest nagłówkiem, co listą, a co formularzem.
• CSS i SASS. CSS odpowiada za wygląd. SASS to nakładka na niego, która pozwala trzymać kolory i odstępy w jednym miejscu i zmienić je wszędzie jedną poprawką.
• JavaScript. Bez żadnej biblioteki. Obsługuje menu, przewijanie i sprawdzanie formularza.
• Git. Zapisuje historię zmian w kodzie, więc zawsze da się cofnąć do wcześniejszej wersji.
• GitHub Pages. Darmowy hosting stron statycznych. Wgrany kod od razu staje się działającą stroną w internecie.

Efekt

To jeden z moich wcześniejszych projektów i nie udaję, że jest czymś innym. Firma nie istnieje, grafiki są stockowe, część komponentów pochodzi z kursów, na których się uczyłem. Nie ma tu klienta, wyników sprzedaży ani opinii, którymi mógłbym się pochwalić.

Wartość tej realizacji jest inna. Właśnie na takich stronach zdobyłem wiedzę i doświadczenie, które są dziś bezcenne w pracy dla prawdziwych firm. Wiem, jak ułożyć stronę, żeby nie rozjeżdżała się na telefonie, jak napisać menu bez wtyczki i skąd biorą się problemy z szybkością ładowania. Kiedy w komercyjnym projekcie coś przestaje działać, szukam przyczyny zamiast zgadywać, i właśnie za to odpowiada praca nad takimi projektami.

Kursy, z których korzystałem, prowadzi MMC School i polecam je każdemu, kto chce nauczyć się robić strony od podstaw:
mmcschool.pl

Zobacz stronę na żywo:
rado9206.github.io/barberduoshop