Skip to content

Projekt osobistego portfolio zbudowany z wykorzystaniem HTML, Javascript we frameworku React oraz SCSS z metodologią BEM. Od strony backendu wykorzystywany jest Node.js we frameworku Express, połączony z bazą danych MongoDB.

Notifications You must be signed in to change notification settings

Mathias007/portfolio

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Mathias Portfolio (Portfolio)

Rozpoczęcie projektu: 29 kwietnia 2021 r.

Celem projektu jest utworzenie profesjonalnej strony autobiograficznej, zawierającej prezentowane w przystępnej formie informacje na temat historii zainteresowań programistycznych, dotychczasowych realizacji (hobbystycznych i komercyjnych), doświadczeń zawodowych i edukacyjnych, a także poznanych technologii. Portfolio powinno zawierać także dane kontaktowe oraz formularz kontaktowy.

Zarówno etapowy sposób tworzenia projektu, jak i wykorzystywane języki, biblioteki i rozwiązania mają charakter podsumowujący dotychczasowe efekty nauki programowania. Dodatkowo portfolio powinno być reużywalne, tj. zdatne do wykorzystania także przez inne osoby do tworzenia własnych stron-wizytówek, jak również przydatne przy tworzeniu innych projektów z uwagi na zastosowanie odpowiednich praktyk programistycznych.

Finalizacja projektu (v. 1.0.0).

W dniu 23 maja 2021 r., tuż przed moimi 26. urodzinami, w internecie zawitała końcowa wersja projektu portfolio (1.0.0). Obecnie znajduje się pod adresem mathias.egildia.pl, posiadającym certyfikat SSL.

Finalnie wyszła z tego pełnoprawna fullstackowa aplikacja, implementująca między innymi React z SCSS po stronie frontendu (w tym wiele ciekawych bibliotek, wymienionych w pliku package.json oraz harmonogramie projektu poniżej) oraz Express i MongoDB w backendzie. Udało się także znaleźć - jak myślę - fajne zastosowanie dla Github API w sekcji poświęconej projektom.

Serwer został przy tym umieszczony na Heroku, co pozwoliło na rozgryzienie specyfiki deploymentu w tym serwisie (cenna wiedza na przyszłość). W przyszłości zostanie jednak umieszczony na zakupionym hostingu, który aktualnie testuję, zawierającym Node.js i wsparcie dla baz nierelacyjnych.

Plany na przyszłość.

W najbliższym czasie zamierzam przenieść wersje demonstracyjne projektów z serwera eGildii Graczy na domenę mathias.net.pl, a także je ewentualnie zaktualizować w miarę potrzeby (niektóre projekty wciąż nie doczekały się preview, co wypada nadrobić).

Odnośnie samej strony portfolio - z pewnością są jeszcze elementy, które można by było zoptymalizować, dlatego przy kolejnych aktualizacjach będę się skupiał raczej na mrówczej pracy z kodem niż na dodawaniu kolejnych zakładek i treści (których ilość wydaje się optymalna). Do rozważenia pozostaje jeszcze m. in. dodanie różnych wersji językowych. Generalnie jednak jestem zadowolony z aktualnego stanu projektu, a zainteresowanych zachęcam do jego wykorzystywaniu do budowania własnych stron typu portfolio.

Dzięki implementacji Github API zawartość portfolio będzie praktycznie stale aktualna. Kolejne projekty będą się bowiem na niej pojawiać w zasadzie automatycznie. Chętnych do ewentualnej współpracy w ramach np. projektów typu open source bądź konkretnych zadań komercyjnych zachęcam do kontaktu - wszystkie dane znajdują się w portfolio :-).

Struktura strony

I. Header.

Nagłówek strony zawiera przede wszystkim jej nawigację (Navigation), złożoną z pojedynczych elementów (NavElement).

II. Main.

Właściwa część portfolio zbudowana jest z bloków (tagi html article), które z kolei dzielą się na mniejsze części składowe. Powtarzalne segmenty bloków (gł. tzw. boxy) są generowane dynamicznie.

  1. Start (Home).
  2. O mnie (About).
  3. Oś czasu (Timeline).
  4. Projekty (Work).
  5. Usługi/Technologie (Services).
  6. Inspiracje (Testimonial).
  7. Kontakt (Contact).

III. Footer.

Stopka strony zawiera informację o autorze oraz wzmiankę nt. praw autorskich (copyright).

Harmonogram prac

Stan na dzień 23 maja 2021 r. (projekt zakończony)

  • 1. Stworzenie struktury portfolio typu Single-Page-App (HTML, CSS, vanilla JavaScript).
  • 2. Przebudowa HTML pod kątem semantyki.
  • 3. Przebudowa klas CSS zgodnie z metodologią BEM.
  • 4. Instalacja React.js (Create React App). Usunięcie zbędnych plików.
  • 5. Prosta implementacja dotychczasowego projektu w aplikacji React (komponent App.js).
  • 6. Utworzenie komponentów funkcyjnych:
    • a) główne części (Header, Main, Footer, Navigation <-> NavElement),
    • b) bloki (tagi article),
    • c) segmenty bloków (heading, boxy, form, inne),
    • d) komponenty uniwersalne (Image, Icon, Button)
      • poprawki składni JSX (typu class -> className),
      • propsy z walidacją, reużywalność komponentów powtarzalnych.
  • 7. Przepisanie CSS na SCSS, podział na pliki według bloków/komponentów.
  • 8. Zastąpienie dotychczasowej logiki JavaScript nową, wykorzystującą m. in. React Hooks.
  • 9. Dodanie ikon (react-font-awesome) oraz Timeline (react-vertical-timeline-component).
  • 10. Dynamiczne generowanie treści na stronie.
    • a) utworzenie plików z danymi (tablice obiektów w katalogu data) - rozwiązanie tymczasowe,
    • b) wykorzystanie ww. plików do generowania komponentów (zastosowanie m. in. metody map() oraz react-html-parser),
    • c) modyfikacje i rozbudowa komponentów,
    • d) aktualizacja styli.
  • 11. Rozważenie implementacji React Router DOM w związku z rozrostem aplikacji.
  • 12. Dodanie *loadera, obsługa lazy-loading i Suspense.
  • 13. Obsługa formularza (implementacja biblioteki emailjs-com) i innych elementów tego rodzaju na stronie.
  • 14. Generalny przegląd i refaktoryzacja kodu.
  • 15. Utworzenie backendu. Niezbędne modyfikacje dostosowawcze po stronie klienta.
    • a) utworzenie bazy danych MongoDB, zawierającej kolekcje danych zbudowanych na bazie plików tymczasowo przechowywanych w katalogu data,
    • b) utworzenie serwera Node.js + Express, połączonego z bazą danych (mongoose),
    • c) stworzenie API i udostępnienie go frontendowi,
    • d) refaktoryzacja backendu, zastosowanie nowoczesnej składni JS z użyciem Babela,
    • d) pobranie i przetworzenie danych z backendu w aplikacji Reacta (wykorzystanie hooków i axios),
    • e) rozważenie implementacji Github API do dynamicznego listowania repozytoriów (w miejsce statycznej tabeli w bazie danych).
  • 16. Finalne poprawki, refactor i optymalizacja.
  • 17. Publikacja (deploy) ostatecznej wersji projektu, w tym wybór hostingu i domeny.

About

Projekt osobistego portfolio zbudowany z wykorzystaniem HTML, Javascript we frameworku React oraz SCSS z metodologią BEM. Od strony backendu wykorzystywany jest Node.js we frameworku Express, połączony z bazą danych MongoDB.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published