Projekte & Arbeiten

Eine Sammlung meiner neuesten Projekte und Entwicklungsarbeiten, die moderne Webtechnologien und innovative Lösungsansätze demonstrieren.

Color Generator
Color Generator

Color Generator

Der Color Generator ist ein moderner Farbgenerator für Designer und Entwickler. Wähle gezielt Farbarten wie Pastell, Lebendig, Neutral oder Dunkel – und erhalte in regelmäßigen Intervallen automatisch neue, perfekt abgestimmte Farben. Mit einem einfachen Druck auf die Leertaste kannst du deine Lieblingsfarben speichern. Zu jeder gespeicherten Farbe wird automatisch eine Farbpalette für Light- und Darkmode generiert. Exportiere deine Paletten direkt in verschiedenen Formaten – zum Beispiel als Tailwind-Konfiguration, CSS-Variablen oder JSON-Datei – und integriere sie nahtlos in dein Projekt. Der Color Generator ist dein intuitives Tool für kreative, konsistente und moderne Farbgestaltung.

ReactTypescriptTailwind CSS
Ems Suntec
Ems Suntec

Ems Suntec

Eine moderne Unternehmenswebsite für einen regionalen Anbieter von Photovoltaik- und Solaranlagen. Die Seite präsentiert das Unternehmen, seine Leistungen und Referenzen in einem klar strukturierten, responsiven Layout. Kernfunktionen sind eine ansprechende Startseite mit Call-to-Action, detaillierte Informationen zum Team und den angebotenen Services sowie ein Kontaktbereich mit allen relevanten Daten. Zusätzlich sind rechtliche Seiten wie Impressum und AGB integriert. Ziel der Umsetzung ist es, Vertrauen aufzubauen, Kundenanfragen zu generieren und die Expertise des Unternehmens im Bereich Photovoltaik hervorzuheben.

ReactTypescriptTailwind CSS
FairNet
FairNet

FairNet

FairNet ist eine zentrale Plattform, die als digitale Dachmarke für verschiedene eigene Projekte dient. Die Website stellt die Vision sowie die Markenstrategie vor und schafft einen einheitlichen Auftritt für unterschiedliche Unterprojekte wie FairFit oder FairCharge. Ziel ist es, Transparenz und Professionalität zu vermitteln und die unterschiedlichen Services von FairNet in einem modernen, klar strukturierten Umfeld zu bündeln.

ReactTypescriptTailwind CSS
FairFit
FairFit

FairFit

FairFit ist ein Vergleichsportal für Sport- und Fitnessangebote. Vereine, Studios und Anbieter können ihre Leistungen eintragen und erhalten eine eigene Seite zur Präsentation. Für Nutzer entsteht so die Möglichkeit, Angebote wie Fitnessstudios, Schwimmbäder oder Fußballvereine zu vergleichen und passende Optionen in ihrer Region zu finden. Kernfunktionen sind ein responsives Dashboard, ein einfaches Anmeldesystem für Anbieter sowie Filter- und Suchfunktionen für Nutzer. Das Projekt ist langfristig als Abo-Modell ausgelegt, um Anbietern zusätzliche Reichweite zu verschaffen.

ReactTypescriptTailwind CSS
Smart Dashboard Template
Smart Dashboard Template

Smart Dashboard Template

Ein modernes, wandmontiertes Dashboard zur Anzeige von Wetterdaten und zur Steuerung von Smart-Home-Geräten. Die Oberfläche ist auf Einfachheit und Übersichtlichkeit ausgelegt und bietet Nutzern jederzeit aktuelle Informationen. Die Wetterdaten werden automatisch alle 10 Minuten aktualisiert. Dank der Swipe-Navigation lassen sich verschiedene Ansichten und Funktionen mühelos wechseln.

ReactReduxWeather API
Pic2Plate
Pic2Plate

Pic2Plate

Eine Web-App, die im Rahmen von Projekttagen am Berufskolleg in Ahaus entwickelt und mit dem 3. Platz ausgezeichnet wurde. Nutzer können ein Bild von Lebensmitteln hochladen, woraufhin eine KI automatisch die enthaltenen Zutaten erkennt. Auf Basis dieser Analyse schlägt die Anwendung passende Rezepte vor, die zudem nach persönlichen Präferenzen (vegetarisch, vegan, glutenfrei etc.) gefiltert werden können. Favorisierte Rezepte lassen sich speichern, um sie schnell wiederzufinden. Ziel ist es, KI-Technologie praxisnah mit dem Alltagsthema Ernährung zu verbinden.

ReactReduxTypescriptChayns Framework
CodeHighlighter
CodeHighlighter

CodeHighlighter

Ein flexibles React-Paket für Syntax-Highlighting, das sich durch anpassbare Themes auszeichnet. Der Code Highlighter erleichtert die Darstellung von Quellcode in Dokumentationen, Blogs oder Lernplattformen. Nutzer können zwischen Dark- und Light-Mode wechseln und gezielt bestimmte Codezeilen hervorheben, um die Lesbarkeit zu verbessern. Das Paket ist modular aufgebaut und lässt sich einfach in bestehende React-Projekte integrieren.

ReactTypescriptStyled Components