Tworzyć, testować, ulepszać

Kompleksowy rozwój korporacyjnej platformy internetowej dla GM Microcementos, firmy specjalizującej się w zastosowaniu mikrocementu. Profesjonalna witryna z 15 zoptymalizowanymi stronami, skoncentrowana na wydajności, SEO i wyjątkowym doświadczeniu użytkownika. Zawiera kalkulator budżetu, filtrowaną galerię projektów, zaawansowane formularze i minimalistyczny system projektowania. Modułowa architektura z ponad 100 komponentami wielokrotnego użytku i zoptymalizowana pod kątem Core Web Vitals.

Platforma internetowa dla Academia CEJ, akademii specjalizującej się w egzaminach służby cywilnej w Maladze. W pełni responsywna strona internetowa z blogiem, wirtualnym kampusem, testem wiedzy, systemem zapisów i zarządzaniem kursami. Stworzona przy użyciu Next.js 14, React 18, Tailwind CSS, Framer Motion i Docker.

Opracowanie strony korporacyjnej Dimap, nowoczesnej aplikacji opartej na Next.js 15, React 19, Redux Toolkit i TailwindCSS, skoncentrowanej na zapewnieniu optymalnej wydajności i płynnego działania. Projekt obejmuje strony usług, blog, sekcje korporacyjne i formularze śledzenia leadów, wszystkie zbudowane w oparciu o modułową architekturę i wysoce zoptymalizowane ładowanie przy użyciu SSG, Lazy Loading i ClientLoader.

DevCrate to platforma do odkrywania zasobów programistycznych (narzędzi, bibliotek, zasobów, dokumentacji i wyzwań). Czy nie potrzebowałeś kiedyś zasobów do swojego projektu lub po prostu inspiracji i skończyłeś przeglądając niezliczone strony? Właśnie dlatego stworzyłem tę platformę: aby uporządkować i nie zgubić żadnych zasobów, które odkryłem przez lata, oraz aby móc je szybko znaleźć bez polegania na rozproszonych zakładkach. Obejmuje ona zaawansowane wyszukiwanie, filtry według tagów i obszar administracyjny do zarządzania całą zawartością. Pozwala również na sugestie od społeczności, aby nadal gromadzić przydatne narzędzia. Jest zbudowany z Next.js, React, TypeScript i MongoDB, z bezpiecznym uwierzytelnianiem i nowoczesnym interfejsem opartym na shadcn/ui.

Cmd+kit to system palet poleceń wielokrotnego użytku dla produktów internetowych, zaprojektowany w celu zapewnienia szybkiego wyszukiwania, nawigacji za pomocą klawiatury i wykonywania akcji ze spójnego i dostępnego interfejsu. Został zaprojektowany z myślą o łatwej integracji z różnymi stosami z oficjalnymi adapterami dla React, Vue, Preact i Astro, przy jednoczesnym zachowaniu tej samej podstawy zachowania i dostosowywania wizualnego. Zawiera pełną dokumentację i interaktywny plac zabaw do konfigurowania motywów, struktury poleceń i eksportowania gotowego do użycia kodu. Może być instalowany za pomocą npm, pnpm, yarn lub bun w zależności od przepływu każdego projektu.

Zestaw narzędzi CLI + biblioteka opublikowana w npm, która umożliwia definiowanie kontraktów API w pojedynczym typowanym pliku JSON i automatyczne generowanie współdzielonych typów TypeScript, klienta Angular, walidację runtime za pomocą Zod i kontrolerów dla NestJS. Eliminuje brak synchronizacji między frontendem a backendem, unika duplikowania kodu i wykrywa zmiany poprzez migawki kontraktów. Obejmuje generowanie makiet do testowania i modułową architekturę opartą na wielu pakietach wielokrotnego użytku.

Rekonstrukcja oficjalnego hero Apple dla AirPods Pro 2, skoncentrowana na opanowaniu zaawansowanych animacji z GSAP i ScrollTrigger. Zaimplementowałem sekwencję 65 obrazów renderowanych w Canvas, zsynchronizowaną ze scrollem, wraz z płynnymi przejściami, dynamiczną nawigacją i efektami wizualnymi inspirowanymi oryginalnym doświadczeniem Apple. Projekt nastawiony na doskonalenie wydajnych animacji webowych.

Tworzenie PWA do wykrywania obiektów w czasie rzeczywistym z użyciem Angular 19 i TensorFlow.js. Obejmuje konfigurację PWA, integrację TensorFlow.js do wykrywania obiektów, przechwytywanie i przetwarzanie obrazów na żywo, optymalizację przy użyciu Web Workers i Lazy Loading, przechowywanie offline w IndexedDB oraz wdrażanie na urządzeniach mobilnych.

Projekt ćwiczeniowy do nauki Three.js i TresJS z modelami 3D. Interaktywna aplikacja webowa pozwalająca personalizować biurko regulowane (standing desk) z różnymi opcjami wykończeń i kolorów. Zawiera widok 3D z kontrolami orbitalnymi, modele 3D laptopa, słuchawek i rośliny dekoracyjnej. Personalizuj wykończenie biurka i wybieraj kolory akcesoriów z podglądem w czasie rzeczywistym. Opracowany z Vue 3, TresJS (integracja Three.js z Vue), TypeScript, Vite i UnoCSS.

Klon landing page Grand Theft Auto VI stworzony wyłącznie w celach edukacyjnych i demonstracji umiejętności rozwoju stron internetowych. Nowoczesna strona z responsywnym designem zoptymalizowanym dla wszystkich rozdzielczości desktop (1024px - 4K). Zawiera rozwijane menu z zaawansowanymi animacjami używając GSAP, dynamiczny system prezentacji postaci i lokalizacji z obrazami, interaktywną sekcję zwiastunów z podglądami i sekcję pobierania z animowanymi kartami. Niekomercyjny projekt edukacyjny opracowany z Astro, Tailwind CSS i JavaScript.

Niewielki projekt nastawiony na ćwiczenie pracy ze Strapi jako CMS-em i backendem. Został zbudowany w React/Next.js, TypeScript i Tailwind CSS. Chociaż demo korzysta z danych mockowanych, w kodzie zaimplementowano prawdziwą integrację ze Strapi do pobierania i zarządzania treścią.

Projekt czatu w czasie rzeczywistym z architektura backendu ukierunkowana na produkcje. Wykorzystuje Node.js + Express oraz Socket.IO do komunikacji dwukierunkowej, z dwoma trybami przechowywania: in-memory (mock) i opcjonalna persystencja w Supabase. Frontend (Vite) moze dzialac w trybie demo lub live, a rozwiazanie ma architekture warstwowa (konfiguracja, HTTP, realtime, domena i storage), co ulatwia utrzymanie, testowanie i skalowanie.

Implementacja HTML5 klasycznej gry Super Mario Bros zbudowanej przy użyciu Phasera 3.55.2 do celów edukacyjnych, w oparciu o pracę decapapi. Projekt odtwarza platformówkę 2D z modułową architekturą animacji, bloków, struktur, bytów, elementów sterujących gracza i HUD-u, a także dodatkami, takimi jak przechwytywanie zrzutów ekranu za pomocą html2canvas. Obsługuje wdrażanie sieci i rozwój lokalny za pomocą Vite, dzięki czemu testowanie i udostępnianie kodu open source w ramach licencji MIT jest proste.

Paint Win 95' odtwarza klasyczne doświadczenie Microsoft Paint z retro interfejsem w stylu Windows 95 i nowoczesnym działaniem w przeglądarce. Zawiera narzędzia do rysowania i zaznaczania, paletę kolorów podstawowy/pomocniczy, historię cofania/ponawiania, poziomy przybliżenia roboczego, otwieranie lokalnych obrazów, eksport do PNG oraz obsługę myszy, klawiatury i dotyku/rysika przez Pointer Events.

Bookshop View Transitions to demo w React + Vite skupione na wdrażaniu płynnych przejść między stronami z użyciem API View Transitions, w tym współdzielonych animacji między elementami (tytuł, okładka i nawigacja), aby uzyskać wizualnie ciągłą nawigację.

Klon TikToka zbudowany w React, TypeScript i Vite, zaprojektowany w podejściu mobile-first. Zawiera pionowy feed z automatycznym odtwarzaniem, nawigację Following/For You, interaktywne akcje (like, komentarze, zapisywanie, udostępnianie), strony Friends/Inbox/Profile oraz upload z publikacją w feedzie. Działa w architekturze usługowej (domyślnie mock z persystencją w localStorage) i ma przygotowane Supabase do realnego połączenia backendowego.

Projekt open source inspirowany klasycznym Breakoutem, zbudowany w Astro z logiką gry w TypeScript na Canvas. Zawiera wybór poziomu trudności w samym canvasie, regulowaną i progresywną prędkość piłki, klocki o zmiennej wytrzymałości ze stanem uszkodzenia, sterowanie klawiaturą i restart po Game Over.

W tym projekcie pracowałem razem z zespołem nad stworzeniem od podstaw platformy do sprzedaży wysokiej jakości produktów i lokalnego handlu. Pracowaliśmy od podstaw z koncepcją do praktyki, tworząc zarówno back-end, jak i front-end. Oprócz różnych technologii włączyliśmy integracje, takie jak jwt do kontroli kont użytkowników i logowania, pulpit nawigacyjny do kontrolowania wszystkich danych... Funkcjonalności, takie jak możliwość logowania się za pomocą różnych sieci społecznościowych, tworzenie kont jako użytkownik w celu zakupu produktów lub jako firma w celu ich dodania, mapy najbliższego miejsca, w którym można znaleźć dany produkt, między innymi. Ze względów poufności kod nie jest wyświetlany.