Entwickeln, testen, verbessern

Komplette Entwicklung einer Unternehmenswebsite für GM Microcementos, ein Unternehmen, das sich auf die Anwendung von Mikrozement spezialisiert hat. Professionelle Website mit 15 optimierten Seiten, die auf Leistung, SEO und außergewöhnliche Benutzerfreundlichkeit ausgerichtet sind. Enthält einen Budgetrechner, eine filterbare Projektgalerie, erweiterte Formulare und ein minimalistisches Designsystem. Modulare Architektur mit über 100 wiederverwendbaren Komponenten und optimiert für Core Web Vitals.

Webplattform für die Academia CEJ, eine auf Prüfungen für den öffentlichen Dienst spezialisierte Akademie in Málaga. Vollständig responsive Website mit Blog, virtuellem Campus, Wissenstest, Einschreibesystem und Kursverwaltung. Entwickelt mit Next.js 14, React 18, Tailwind CSS, Framer Motion und Docker.

Entwicklung der Unternehmensseite von Dimap, einer modernen Anwendung auf der Basis von Next.js 15, React 19, Redux Toolkit und TailwindCSS, mit Schwerpunkt auf optimaler Leistung und reibungslosem Ablauf. Das Projekt umfasst Service-Seiten, Blog, Unternehmensbereiche und Lead-Tracking-Formulare, die alle auf einer modularen Architektur und hochgradig optimiertem Laden mit SSG, Lazy Loading und ClientLoader aufbauen.

DevCrate ist eine Plattform zum Auffinden von Entwicklungsressourcen (Tools, Bibliotheken, Assets, Dokumentationen und Herausforderungen). Haben Sie nicht auch schon einmal eine Ressource für Ihr Projekt oder einfach nur eine Inspiration gebraucht und sich durch eine Unzahl von Seiten gewühlt? Aus diesem Grund habe ich diese Plattform ins Leben gerufen: um die Ressourcen, die ich im Laufe der Jahre entdeckt habe, zu organisieren und nicht zu verlieren, und um sie schnell zu finden, ohne auf verstreute Lesezeichen angewiesen zu sein. Sie umfasst eine erweiterte Suche, Filter nach Tags und einen Verwaltungsbereich zur Verwaltung aller Inhalte. Sie erlaubt auch Vorschläge aus der Community, um nützliche Tools zu sammeln. Es wurde mit Next.js, React, TypeScript und MongoDB erstellt, mit sicherer Authentifizierung und einer modernen, auf shadcn/ui basierenden Schnittstelle.

Cmd+kit ist ein wiederverwendbares Befehlspalettensystem für Webprodukte, das eine schnelle Suche, Tastaturnavigation und Aktionsausführung über eine einheitliche und zugängliche Schnittstelle ermöglicht. Es ist so konzipiert, dass es sich leicht in verschiedene Stacks mit offiziellen Adaptern für React, Vue, Preact und Astro integrieren lässt, während die gleiche Basis des Verhaltens und der visuellen Anpassung beibehalten wird. Es enthält eine vollständige Dokumentation und eine interaktive Spielwiese für die Konfiguration von Themes, die Befehlsstruktur und den Export von einsatzbereitem Code. Es kann mit npm, pnpm, yarn oder bun installiert werden, je nach Projektablauf.

CLI-Toolkit + Bibliothek, die in npm veröffentlicht wird und es ermöglicht, API-Verträge in einer einzigen typisierten JSON-Datei zu definieren und automatisch gemeinsame TypeScript-Typen, Angular-Client, Laufzeitvalidierung mit Zod und Controller für NestJS zu generieren. Eliminiert Out-of-Sync zwischen Frontend und Backend, vermeidet doppelten Code und erkennt brechende Änderungen durch Vertrags-Snapshots. Enthält Mock-Generierung für Tests und eine modulare Architektur, die auf mehreren wiederverwendbaren Paketen basiert.

Rekonstruktion des offiziellen Apple-Hero-Bereichs für die AirPods Pro 2, mit Schwerpunkt auf fortgeschrittenen Animationen mit GSAP und ScrollTrigger. Ich implementierte eine Sequenz von 65 Canvas-gerenderten Bildern, die mit dem Scrollen synchronisiert sind, ergänzt durch sanfte Übergänge, dynamische Navigation und visuelle Effekte, die vom Originalerlebnis von Apple inspiriert sind. Ein Projekt zur Verfeinerung leistungsstarker Webanimationen.

Entwicklung einer Echtzeit-Objekterkennungs-PWA mit Angular 19 und TensorFlow.js. Enthält PWA-Konfiguration, Integration von TensorFlow.js zur Objekterkennung, Live-Bilderfassung und -verarbeitung, Optimierung mit Web Workers und Lazy Loading, Offline-Speicherung mit IndexedDB und Bereitstellung auf mobilen Geräten.

Übungsprojekt zum Erlernen von Three.js und TresJS mit 3D-Modellen. Interaktive Webanwendung zur Anpassung eines Stehschreibtischs mit verschiedenen Oberflächen- und Farboptionen. Enthält 3D-Ansicht mit Orbital-Steuerelementen, 3D-Modelle von Laptop, Kopfhörern und Zierpflanze. Passen Sie die Schreibtischoberfläche an und wählen Sie Farben für Zubehör mit Echtzeit-Vorschau. Entwickelt mit Vue 3, TresJS (Three.js-Integration mit Vue), TypeScript, Vite und UnoCSS.

Grand Theft Auto VI Landing Page Klon, ausschließlich für Bildungszwecke und zur Demonstration von Webentwicklungsfähigkeiten erstellt. Moderne Website mit responsivem Design optimiert für alle Desktop-Auflösungen (1024px - 4K). Enthält Dropdown-Menü mit erweiterten Animationen mit GSAP, dynamisches Charakter- und Orts-Präsentationssystem mit Bildern, interaktive Trailer-Sektion mit Vorschauen und Download-Sektion mit animierten Karten. Gemeinnütziges Bildungsprojekt entwickelt mit Astro, Tailwind CSS und JavaScript.

Kleines Projekt zum Üben mit Strapi als CMS und Backend. Es ist mit React/Next.js, TypeScript und Tailwind CSS entwickelt. Obwohl in der Demo Mock-Daten verwendet werden, enthält der Code die echte Strapi-Integration zum Abrufen und Verwalten von Inhalten.

Echtzeit-Chat-Projekt mit produktionsorientierter Backend-Architektur. Es nutzt Node.js + Express und Socket.IO fuer bidirektionale Kommunikation, mit zwei Speicher-Modi: In-Memory (mock) und optional persistenter Speicherung mit Supabase. Das Frontend (Vite) kann im Demo- oder Live-Modus laufen, und die Loesung ist schichtbasiert aufgebaut (Konfiguration, HTTP, Realtime, Domain und Storage), um Wartbarkeit, Tests und Skalierbarkeit zu verbessern.

HTML5-Implementierung des klassischen Super Mario Bros., erstellt mit Phaser 3.55.2 für Bildungszwecke, basierend auf der Arbeit von Decapapi. Das Projekt stellt das 2D-Plattformer-Erlebnis mit einer modularen Architektur für Animationen, Blöcke, Strukturen, Entitäten, Spielersteuerungen und HUD sowie Extras wie die Screenshot-Erfassung mit html2canvas wieder her. Es unterstützt die Webbereitstellung und lokale Entwicklung mit Vite und macht Tests und Open-Source-Beiträge unter der MIT-Lizenz unkompliziert.

Paint Win 95' bildet das klassische Microsoft-Paint-Erlebnis mit einer retro Windows-95-Oberfläche und modernem Web-Verhalten nach. Es enthält Zeichen- und Auswahlwerkzeuge, eine Primär-/Sekundärfarbpalette, einen Rückgängig/Wiederholen-Verlauf, Arbeits-Zoomstufen, das Öffnen lokaler Bilder, PNG-Export sowie Unterstützung für Maus-, Tastatur- und Touch-/Stift-Eingaben über Pointer Events.

Bookshop View Transitions ist eine React- + Vite-Demo, die sich auf die Umsetzung flüssiger Übergänge zwischen Seiten mit der View-Transitions-API konzentriert und gemeinsame Animationen zwischen Elementen (Titel, Cover und Navigation) enthält, um eine visuell durchgehende Navigation zu erreichen.

TikTok-Klon, erstellt mit React, TypeScript und Vite, mit mobile-first Ansatz. Enthält einen vertikalen Feed mit automatischer Wiedergabe, Following/For You-Navigation, interaktive Aktionen (Like, Kommentare, Speichern, Teilen), Friends/Inbox/Profile-Seiten und Upload mit Veröffentlichung im Feed. Läuft mit servicebasierter Architektur (standardmäßig Mock mit localStorage-Persistenz) und bereitet Supabase für eine echte Backend-Verbindung vor.

Open-Source-Projekt, inspiriert vom klassischen Breakout, entwickelt mit Astro und Spiellogik in TypeScript auf Canvas. Enthält eine Schwierigkeitsauswahl direkt im Canvas, anpassbare und progressive Ballgeschwindigkeit, Ziegel mit variabler Haltbarkeit und Schadenszuständen, Tastatursteuerung sowie Neustart nach Game Over.

Bei diesem Projekt habe ich mit einem Team zusammengearbeitet, um eine Plattform für den Verkauf von Qualitätsprodukten und den lokalen Handel von Grund auf zu entwickeln. Wir haben vom Konzept bis zur Praxis gearbeitet und sowohl das Back-End als auch das Front-End entwickelt. Neben verschiedenen Technologien haben wir Integrationen wie jwt für die Kontrolle von Benutzerkonten und Login, ein Dashboard für die Kontrolle aller Daten... Funktionalitäten wie die Möglichkeit, sich mit verschiedenen sozialen Netzwerken anzumelden, das Anlegen eines Kontos als Benutzer, um Produkte zu kaufen oder als Unternehmen, um sie hinzuzufügen, Karten des nächstgelegenen Ortes, an dem das betreffende Produkt gefunden werden kann, und vieles mehr. Aus Gründen der Vertraulichkeit wird der Code nicht angezeigt.