Projekte
Willkommen auf meiner Projektseite! Hier findest du eine Auswahl meiner bisherigen Arbeiten, die zeigen, was ich als Entwickler leisten kann. Die vorgestellten Projekte veranschaulichen meine Frontend-Webentwicklung Projekte und geben Einblicke in die Technologien und Fähigkeiten, die ich dabei einsetze.
Innovative Lösungen für moderne Herausforderungen
Einblick in meine Frontend-Webentwicklung Projekte
Diese Projektseite bietet dir einen umfassenden Einblick in meine bisherigen Frontend-Webentwicklung Projekte – von funktionalen Webanwendungen bis hin zu kreativen Webseiten mit besonderem Designanspruch. Jedes dieser Projekte zeigt nicht nur, was ich technisch umsetze, sondern auch, wie ich Benutzerführung, Ästhetik und Funktionalität sinnvoll miteinander verbinde.
Dank kontinuierlicher Weiterentwicklung meines Know-hows kommen unterschiedlichste Tools, Bibliotheken und Designansätze zum Einsatz. Dadurch entsteht eine breite Projektpalette, die zeigt, wie flexibel und zielgerichtet ich auf Anforderungen eingehe. Neben Klassikern wie responsiven Landingpages und Blog-Strukturen findest du hier auch dynamische Anwendungen, die mit JavaScript-Frameworks wie Vue.js umgesetzt wurden.
Doch das ist erst der Anfang: Diese Seite wird stetig wachsen, da ich laufend neue Fähigkeiten erlerne, bestehende Techniken vertiefe und neue Themenfelder erschließe. Mein nächstes Ziel ist es, tiefer in moderne Frameworks der Webentwicklung einzutauchen und zusätzlich die Backend-Entwicklung in mein Repertoire aufzunehmen – um künftig noch ganzheitlichere Weblösungen anbieten zu können.
So bekommst du nicht nur einen Einblick in meine bisherigen Arbeiten, sondern auch in meine Entwicklung als Webentwickler.
Liste von Frontend Webentwicklung Projekte
Blog
Blog - Erstellt mit WordPress und Astra Theme
Beschreibung: Ein moderner, responsiver Blog mit dem Astra Theme und WordPress. Der Blog bietet ein einfaches und ansprechendes Design mit einem benutzerfreundlichen Interface.
Funktionen: Einfache Navigation, Kategorien und Tags, Kommentare, soziale Medien Integration.
- Herausforderungen: Anpassung des Astra Themes an spezifische Bedürfnisse, Verbesserung der Ladezeiten.
Linktree
Linktree
Beschreibung: Eine Linktree-ähnliche Seite entwickelt mit WordPress und Astra Theme, um mehrere Links an einem Ort zu präsentieren.
Funktionen: Einfach zu bedienende Oberfläche, Anpassbare Links, Mobile-Optimierung.
- Herausforderungen: Gestaltung eines minimalistisch und ansprechend aussehenden Designs.
Sales Page
Sales Page
Beschreibung: Eine Verkaufsseite entwickelt mit WordPress und Astra Theme, ideal für Produktpräsentationen und Marketing-Kampagnen.
Funktionen: Conversion-optimiertes Layout, CTA (Call to Action) Buttons, Testimonials.
- Herausforderungen: Steigerung der Ladegeschwindigkeit und Conversion-Rate-Optimierung.
Bistro-Ecke
Website mit kostenlose Domain und Hosting
Beschreibung: Ein Beispiel für eine vollständig kostenlose Webseite, erstellt mit dem Webador Website Builder.
Funktionen: Einfaches Drag-and-Drop-Baukastensystem, responsives Design, grundlegende SEO-Funktionen.
- Herausforderungen: Begrenzte Anpassungsmöglichkeiten und Tools im Vergleich zu kostenpflichtigen Plattformen.
Divi Shop
Vino – Webshop für Schönheit & Kosmetik
Beschreibung:
- Vino ist ein innovativer Online-Shop, der für hochwertige Beauty- und Kosmetikprodukte entwickelt wurde. Das Projekt wurde mit WordPress, dem Divi Theme und WooCommerce realisiert und besticht durch ein modernes, ansprechendes Design – sowohl auf Desktop als auch auf mobilen Endgeräten. Die intuitive Navigation und die sorgfältige Produktpräsentation sorgen für eine hervorragende User Experience, die den exklusiven Charakter der Marke widerspiegelt. Von der ansprechenden Darstellung bis zum reibungslosen Bestellprozess steht bei CosmoCharm der Kunde im Mittelpunkt.
Funktionen:
- Responsive Design: Das Layout passt sich flexibel an alle Bildschirmgrößen an, sodass Nutzer auf Smartphones, Tablets und Desktops gleichermaßen ein optimales Einkaufserlebnis genießen können.
- Intuitive Navigation: Klare Strukturierung der Produktkategorien und ein benutzerfreundliches Suchsystem ermöglichen es den Kunden, schnell ihre Wunschprodukte zu finden.
- WooCommerce-Integration: Leistungsstarke E-Commerce-Funktionen wie Warenkorb, Bestellverwaltung und sichere Zahlungsabwicklung stehen im Zentrum des Shops.
- Divi-Theme Individualisierung: Durch den Einsatz des Divi Page Builders wurde ein individuelles Design realisiert, das die Markenidentität unterstreicht und vielseitige Gestaltungsmöglichkeiten bietet.
- Sicherheit & Performance: Optimierte Ladezeiten, regelmäßige Updates und eine durchdachte Sicherheitsarchitektur gewährleisten einen reibungslosen Betrieb und schützen sensible Kundendaten.
Herausforderungen: Die Umsetzung von Vino brachte einige technische und gestalterische Herausforderungen mit sich:
Theme-Anpassung: Die individuelle Gestaltung mit dem Divi Theme erforderte eine enge Abstimmung zwischen Design und Funktionalität, um ein harmonisches Erscheinungsbild zu erzielen – ohne dabei die Performance zu beeinträchtigen.
E-Commerce-Integration: Die nahtlose Integration von WooCommerce in eine maßgeschneiderte Website bedeutete, komplexe Anpassungen vorzunehmen, beispielsweise in der Produktverwaltung und bei der Einrichtung verschiedener Zahlungs- und Versandoptionen.
Sicherheitsaspekte: Um den Schutz sensibler Kundendaten und einen störungsfreien Betrieb zu garantieren, mussten umfangreiche Maßnahmen zur Absicherung sowie regelmäßige Tests durchgeführt werden.
Optimierung der Ladezeiten: Trotz eines anspruchsvollen Designs galt es, den Website-Auftritt so zu optimieren, dass schnelle Ladezeiten und eine flüssige Nutzererfahrung gewährleistet sind.
ToDo App
To-Do App
Beschreibung: Eine To-Do-App, die einfach auf das Handy heruntergeladen werden kann. Entwickelt mit HTML, CSS, JavaScript und Vue.js, um Aufgaben effizient zu verwalten.
Funktionen: Aufgaben hinzufügen/löschen/aktualisieren, Echtzeit-Datenaktualisierung, responsive Design.
- Herausforderungen: Datenpersistenz und Synchronisation über verschiedene Geräte.
Installieren Sie die Todo-App
Für Desktop-Nutzer:
- Öffnen Sie die Todo-App in Ihrem bevorzugten Webbrowser.
- Klicken Sie auf das Symbol “Zur Leseliste hinzufügen” oder auf das Installationssymbol in der Adressleiste Ihres Browsers.
- Folgen Sie den Anweisungen auf dem Bildschirm, um die App auf Ihrem Desktop zu installieren.
- Nach der Installation können Sie die App direkt von Ihrem Desktop aus öffnen und nutzen.
Für Android-Nutzer:
- Öffnen Sie die Todo-App in Ihrem Chrome-Browser.
- Tippen Sie auf das Menü-Symbol (drei Punkte) in der oberen rechten Ecke des Browsers.
- Wählen Sie “Zum Startbildschirm hinzufügen” aus dem Dropdown-Menü.
- Befolgen Sie die Anweisungen, um die App zu Ihrem Startbildschirm hinzuzufügen.
- Nach der Installation können Sie die App direkt von Ihrem Startbildschirm aus starten und verwenden.
DynamicData
Dynamische Tabelle
(Unter meinen Frontend Webentwicklung Projekten zählt DynamicData zu den herausforderndsten, da ich hier eine responsive Website auf Basis von HTML5 Boilerplate in Kombination mit dem Framework Vue.js entwickelt habe)
- Beschreibung: Eine einfache responsive Seite erstellt mit HTML, CSS, JavaScript und Vue.js
- Funktionen: Aufgaben hinzufügen/löschen/aktualisieren, Echtzeit-Datenaktualisierung, responsive Design.
- Herausforderungen: Integration des Vue.js-Frameworks für dynamische Inhalte.
Intranet
Zweck & Nutzung
Dazyhub ermöglicht eine strukturierte, sichere und visuell klare Kommunikation in laufenden Projekten. Kund:innen erhalten personalisierte Seiten mit Zugriff auf:
- Mockups und Designentwürfe
- Links zu Miro-Boards, Notion-Dokumentationen und Bildgalerien
- Projektdateien, PDFs und technische Dokumente
- Individuelle Inhalte wie Briefings, Feedbackrunden oder Übergabeprotokolle
Das System ist so konzipiert, dass es ohne Login öffentlich nutzbar bleibt, aber bei Bedarf über ACL-Regeln gezielt Zugriffsrechte steuert.
Technische Umsetzung
- Modularer Aufbau mit DokuWiki: leichtgewichtig, update-sicher, ohne Datenbank
- Responsive Design für Desktop und Mobilgeräte
- Template-Anpassung für klare UI und Branding
- Integration externer Tools wie Miro, Notion und Piwigo
- ACL-basiertes Rechtemanagement für individuelle Zugriffssteuerung
Dazyhub zeigt die Fähigkeit, robuste Systeme für reale Kundenbedürfnisse zu entwickeln – mit Fokus auf Klarheit, Sicherheit und langfristige Wartbarkeit.
Mockups
Mockups – Visuelle Konzepte & UI‑Prototypen
Unter „Mockups“ präsentiere ich eine Sammlung visueller Entwürfe, die ich für verschiedene fiktive Kundenprojekte erstellt habe. Diese Mockups dienen dazu, Designideen schnell, verständlich und realitätsnah darzustellen – bevor eine technische Umsetzung beginnt. Sie zeigen meinen Ansatz, komplexe Inhalte in klare, moderne und benutzerfreundliche Layouts zu übersetzen.
Enthaltene Mockups
- Restaurant Aurelia – Speisekarte
Ein elegantes, mediterran inspiriertes Layout für eine digitale Speisekarte. Fokus auf Typografie, Struktur und harmonische Farbgestaltung. - Friseursalon Bella – Website‑Konzept
Ein modernes, freundliches Mockup für einen Friseursalon. Enthält Startseite, Leistungsübersicht und visuelle Markenwelt. - DIY‑Haarlack – Blogartikel‑Design
Ein redaktionelles Mockup für einen Beauty‑Blog. Klare Struktur, lesefreundliche Typografie und visuelle Elemente zur Unterstützung des Inhalts. - Acme – Miro App‑Mockup
Ein interaktives Konzeptboard für eine fiktive Kundin der Firma Acme, erstellt in Miro. Enthält User‑Flows, UI‑Elemente, Strukturideen und visuelle Komponenten zur frühen Abstimmung im Designprozess.
Frontend Sandbox
🚧🚧 Frontend Sandbox 🚧🚧
Die Frontend Sandbox ist eine experimentelle Entwicklungsumgebung, in der moderne Webtechnologien wie HTML, CSS, JavaScript, GitHub‑Workflows und verschiedene Frameworks eingesetzt und getestet werden. Das Projekt dient als flexibler Raum für die Erprobung neuer Layout‑Techniken, UI‑Komponenten, Animationen, API‑Anbindungen und zeitgemäßer Frontend‑Patterns.
Die Sandbox befindet sich in aktiver Weiterentwicklung und zeigt einen strukturierten, modularen und performanceorientierten Frontend‑Workflow. Sie bietet einen transparenten Einblick in moderne Entwicklungsprozesse und demonstriert kontinuierliche technische Weiterentwicklung im Bereich der Webentwicklung.
