Strona - Wizytówka

Projekt został stworzony w trakcie kursu programowania webowego CodersCamp. Celem projektu było stworzenie strony - wizytówki z zastosowaniem HTML i CSS. Strona stanowi portfolio opisujące moje umiejętności i projekty związane z programowaniem. Stronę można zobaczyć pod linkiem https://robert-czwartosz.github.io/CodersCamp2020.Project.HTML-CSS.BusinessCard/.

Spis treści

1. Zawartość repozytorium
2. Zastosowane technologie
3. Funkcjonalności
   1. Animacja keyframes
   2. Sticky navbar
   3. Możliwość pobrania mojego CV
   4. Lista umiejętności podzielona na kategorie
   5. Lista projektów udostępnionych na GitHubie
   6. Formularz
   7. Responsive Web Design

Zawartość repozytorium

• index.html - treść strony w HTML
• style.css - arkusz styli opisujący wygląd poszczególnych elementów strony
• CV_Robert_Czwartosz.pdf - moje CV w formacie .pdf
• katalog fontello - zawiera pliki umożliwiające dodanie ikonek
• katalog screenshots - zawiera pliki z grafikami użytymi w niniejszym opisie

Zastosowane technologie

• HTML
• CSS
• Fontello
• Responsive Web Design
• GitHub Pages

Funkcjonalności

Animacja keyframes

Na początku strony widać animację wykonującą się w nieskończonej pętli.

Sticky navbar

Po przesunięciu w dół pasek nawigacji zostaje "przyklejony" do górnej części okna przeglądarki.

Możliwość pobrania mojego CV

Po kliknięciu w przycisk "Moje CV" zostaje otwarty w nowej karcie przeglądarki plik .pdf zawierający CV.

Lista umiejętności podzielona na kategorie

Każda kategoria zawiera obramowanie o unikalnym kolorze, listę umiejętności oraz listę projektów z nią powiązanych. Po kliknięciu w projekt następuje przeniesienie do danego projektu w sekcji Projekty.

Lista projektów udostępnionych na GitHubie

Każdy projekt zawiera czas wykonywania, opis, listę zastosowanych umiejętności/narzędzi (kolor obramowania wskazuje na kategorię do której dana umiejętność/narzędzie należy) oraz przycisk odsyłający do odpowiedniego repozytorium na GitHubie. Po kliknięciu w umiejętność/narzędzie następuje przeniesienie do kategorii do której należy dana umiejętność/narzędzie. Po kliknięciu w przycisk "Zobacz projekt" zostaje otwarte repozytorium danego projektu w nowej karcie w przeglądarki.

Formularz

Wysłanie formularza powoduje jedynie przeładowanie strony, dlatego nie jest możliwy kontakt poprzez formularz. W pobliżu formularza znajdują się ikonki po kliknięciu których w nowej karcie otwarty zostaje mój profil na LinkedIn lub GitHubie.

Responsive Web Design

Zastosowanie Responsive Web Designu sprawia, że strona poprawnie się wyświetla na dowolnym ekranie oraz nie pojawia się poziomy pasek przewijania.

Wygląd strony na laptopie

Wygląd strony na tablecie

Wygląd strony na telefonie