Alle Projekte

Entwickeln, testen, verbessern

GM Microcementos Website

GM Microcementos Website

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.

Website der CEJ-Akademie

Website der CEJ-Akademie

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.

DIMAP-Website

DIMAP-Website

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

DevCrate

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

Cmd+Kit

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.

Contract-kit - API-Vertragsgenerator

Contract-kit - API-Vertragsgenerator

Zod SVG Icon

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.

AirPods Pro 2 Website-Klon

AirPods Pro 2 Website-Klon

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.

Objekterkennungs-PWA mit Angular

Objekterkennungs-PWA mit Angular

tensorflow
ionicons-v5_logos

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.

3D Schreibtisch-Konfigurator

3D Schreibtisch-Konfigurator

Ü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.

GTA VI Landing Page Klon

GTA VI Landing Page Klon

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.

Strapi Games Store

Strapi Games Store

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

Echtzeit-Chat

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.

Super Mario Bros 85'

Super Mario Bros 85'

PhaserIcon

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 Windows 95'

Paint Windows 95'

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 Demo

Bookshop View Transitions Demo

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

TikTok-Klon

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.

Atari Breakout Spiel

Atari Breakout Spiel

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.

Agrooe Cashback

Agrooe Cashback

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.

Lerne mich ein bisschen besser kennen

Hallo! Ich bin Fran Full-Stack-Entwickler | Softwareentwickler

Ich habe Erfahrung in der Arbeit mit einer Vielzahl von Webtechnologien. Dennoch liegt mein Schwerpunkt auf der Frontend-Entwicklung.

Schon seit meiner Jugend beschäftige ich mich mit Computern und Mobilgeräten und habe mich sowohl mit ihrer Funktionsweise auf Software- als auch auf Hardware-Ebene auseinandergesetzt. Im Laufe der Jahre habe ich viel gelernt, indem ich einfach herumprobiert und Probleme selbst gelöst habe – eine Erfahrung, die meine Neugier und meine technischen Fähigkeiten gestärkt hat.