Portfolio

Strona internetowa - LoremPizza

Jest to jedna z pierwszych stron internetowych wykonana jeszcze na starych zasadach układania elementów - display:float. Pochodzi z pierwszych kroków mojej nauki gdzie zdecydowałem się na naukę frontendu. Oczywiście jest tam wiele do poprawy, ale stanowi ona wartość sentymentalną i przypomina mi gdzie w swojej nauce byłem kiedyś, a gdzie znajduję się obecnie. Strona wykonana w HTML i CSS. Mimo, iż wykonana na starych zasadach jest w pełni responsywna.

Gra w czystym JS - Fight Game

Fight Game to gra napisana w tzw. Vanilla JS. Gra posiada podstawowe udźwiękowienie, którym można sterować. Gracz wybiera swoją postać i zaczyna rozgrywkę przy czym komputer losuje swoją postać. Postaci mają do dyspozycji atak zwykły, atak specjalny, atak unikatowy, a także ograniczoną liczbę miktur leczniczych. Każdy ruch zapisywany jest w rejestrze walki. W projekcie zadbano też o tryb jasny/ciemny oraz o udźwiękowienie muzyczne.

Prosty clone Allegro

Projekt napisany w ramach nauki frontu i rozmieszczania elementów na stronie. Odwzorowuje znany serwis trasnakcyjny, oczywiście nie w 100%. W projekcie wykorzystano HTML, CSS(SCSS) i JS. W panelu głównym są kategorie produktów, bloki reklamowe a także sterowany banner. Po przejściu w kategorię wyświetlone zostaną produkty przypisane do tych kategorii. Po przejściu w daną kategorię, listują się nam produkty z nią związane. Projekt w pełni responyswny.

Mini aplikacja w React - RecipesApp

Aplikacja napisana na potrzeby rekrutacji, gdzie w krótkim okresie czasu moim zadaniem było napisanie aplikacji do zarządzania przepisami kulinarnymi. Funkcjonalność grała główną rolę, a wygląd był na drugim planie. W tym projekcie wykorzystano React, a także nakłądkę na język JavaScript - TypeScript, a także bibliotekę React Router.

Strona internetowa - LoremPhoto

Strona internetowa napisana z myślą o dalszej nauce frontendu. Przeglądając serwis awwwards.com szukałem inspiracji do wykonania strony. Projekt zrealizowany w HTML, CSS(SCSS) i JS. Tematyka przewodnia to fotografia i film. W pełni resposywna, posiadająca ciekawe animacje kamer w headerze oraz bombelkowe rozchodzenie się przycisku do sprawdzenia oferty.

Sklep internetowy - GaliaAM

Ten projekt jest nieco z innej beczki. Zostałem poproszony o postawienie sklepu z akcesoriami meblowymi włączając w to system płatności. Wykorzystałem do tego Wordpressa(WooCommerce) z gotowym motywem, kodując przy tym wygląd w plikach HTML I CSS, a także wykorzystując podstawy języka PHP do uruchomienia płatności w sklepie.

Projekt własnego chatbota (Wirtualnego Asystenta)

Wykonałem projekt własnego chatbota w React, TypeScript, Python, Rasa i Websockets. Projekt częściowo oddaje to czym obecnie się zajmuję. Wirtualny asystent dostępny jest na tej stronie w prawym dolnym rogu. Sprawnie odpowiada na pytania o swoim twórcy czyli o mnie ;). Można zapytać go zatem o moje umiejętności czy doświadczenie. Potrafi także opowiadać dowcipy. Nie wierzysz? Zapytaj go sam!

Jeśli na stronie chatbot byłby w ciągłym ładowaniu należy chwilkę poczekać, gdyż serwer w Pythonie i serwer rasowy są postawione na darmowym hostingu, który co jakiś czas z wiadomoch względów się wyłącza.

Aplikacja do zarządzania finansami

Aplikacja wykonana na potrzeby projektu do pracy inżynierskiej. Jest to system zarządzający finansami gospodarstwa domowego użytkownika. Zawiera relacyjną bazę danych MySQL, backend napisany w Node.js, we frameworku express.js i front w React.js. Użytkownik może się zarejestrować, logować do aplikacji, dodawać przychody i rozchody, losowac cytaty motywujące, a także sprawdzać statystki z miesięcy bądź roku korzystając z bibliteki chart.js.

Strona internetowa - Forest Website

Strona internetowa napisana w trakcie kursu. Z otrzymanego widoku dla urządzeń dekstopowych w pliku pdf, należało zakodować stronę w pełni responyswną o tematyce parku z ofertą dla zwiedzających z własną podstroną ofert, a także z własną podstroną kontaktową z formularzem kontaktowym i mapą. Oprócz HTML, CSS(SCSS) i JS cały projekt opraty był na Gulpie, metodologii BEM i plikach *kit dla zautomatyzowania procesu tworzenia strony.

Strona internetowa - Salon Auril

Strona internetowa napisana dla klienta z branży kosmetycznej. Projekt zrealizowany w HTML, CSS(SCSS) i JS. Strona w pełni responywna przybliża informacje o salonie i jego ofercie. W projekcie każda usługa ma swoją podstronę z opisem. Projekt z początków mojej drogi we frontendzie, który może i nie jest idealny ale dał mi wiele.

Strona internetowa - LoremTransport

Strona internetowa napisana w ramach konkursu instruktora kursów, z których pobierałem naukę. Celem było wybranie tematyki i napisanie responyswnej strony internetowej. Wykorzystano HTML, CSS(SCSS) i JS. Ostatecznie na kilkadziesiąt prac zająłem 3 miejsce. Tematyka strony oparta jest firmę przewozową ludzi, rzeczy oraz zwierząt.

Wizytówka

Właśnie znajdujesz się na tej stronie. Strona ma na celu przybliżyć moją osobę, umiejętności i wykonane projekty.

Aplikacja do zamawiania jedzenia w React

W aplikacji możemy się zarejestrować i posiadać własne konto, na które możemy się zalogować. Na koncie mamy możliwość jego ustawień oraz wgląd w zamówienia. Jedzenie można zamówić także bez logowania. Produkty dodawane są do koszyka z możliwością konfiguracji. Koszta zliczane są w sposób dynamiczny. W projekcie wykorzystano bardzo popularny mechanizm sesji. Całość stworzona jest poprzez React z globalnym stanem dzięki bibliotece Redux-toolkit, routingiem w React Router, a także Node.js + express z relacyjną bazą danych MySQL.

Strona internetowa dla klienta z branży kosmetologicznej.

Nowoczesna, profesjonalna oraz responsywna strona internetowa dla klienta z branży kosmetologicznej. Wykonana w HTML, CSS(SCSS), JS, Gulp wraz z metodologią BEM. Karty ofertowe zawierają niezwykle ciekawy efekt motyla co dodaje stronie charakteru. Sekcja kontaktu znajduje się na osobnej podstronie wraz z mapą. Każdy zabieg, który oferuje klient posiada własną podstronę z obszernym wyjaśnieniem opisu zabiegu, przebiegu zabiegu oraz przygotowaniem do zabiegu. Do slidera z opiniami klientów, któzy dokonali zabiegu, wykorzystana zostałą biblioteka Swiper.

Sklep w React.js

Projekt sklepu w React zrodził się podczas uczestnictwa w jednym z kursów o React. Wystepuje tu dość mocna inspiracja dziełem autorów, natomiast wykonanie takiego sklepu za pomocą podstawowych technik Reacta oraz biblioteki React Router to było dla mnie za mało. Co prawda podpatrzyłem strukturę projektu, wygląd widoków w Figmie ale postanowiłem wiele dołożyć od siebie i pójść o krok dalej. W pobieraniu i wysyłaniu danych wspomogłem się biblioteką React Tanstack Query. Dane te są ulokowane w bazie w SupaBase.

Dla formularza skorzystałem z React-Hook-Form + yup, a powiadomienia dla różnych akcji zrobiłem przez Portale. W stylowaniu postawiłem na CSS Moudules w połączeniu z SCSS. W ramach nauki korzystałem także z Typsctript nad którym zamierzam spędzić więcej czasu i zapewne poprawić ten projekt pod tym względem.
Głowny widok w sklepie oferuje produkty bestsellerowe w zależności od wybranej płci, dalej możemy wybierać kategorię, podkategorię, korzystać z breadcrumbs, wspomagać się paginacją przy większej ilości produktów, przechodzić na dany produkt, dodawać i usuwać go z listy ulubionych, dodawać i usuwać z koszyka gdzie zliczanie kosztów dzieje się w sposób dynamiczny, zmieniać walute dla całej aplikacji aż wreszcie przejść do kasy i po wypełnienu formularza dokończyć zakup produktu. Produkty ulubione i z koszyka trzymane sa w localStorage.

Aplikacja do ofert pracy

Aplikacja jest obecnie w przygotowaniu i będzie dostępna wkrótce!

Aplikacja klubu sportowego

Aplikacja jest obecnie w przygotowaniu i będzie dostępna wkrótce!

Aplikacja w Next.js

Aplikacja jest obecnie w przygotowaniu i będzie dostępna wkrótce!