Als ich beschloss, meine eigene Website LeonsGPT zu erstellen, dachte ich, es würde ein Kinderspiel werden. Immerhin hatte ich bereits Erfahrung mit WordPress und Elementor. Doch wie sich herausstellte, war der Weg von der Idee zur fertigen Website steiniger als erwartet. In diesem ersten Blog-Beitrag möchte ich euch mitnehmen auf meine Reise voller unerwarteter Herausforderungen und kreativer Lösungen.
Das Fundament: WordPress und Elementor
Meine Entscheidung, WordPress als Content-Management-System und Elementor als Page Builder zu nutzen, basierte auf meiner beruflichen Erfahrung. Ich dachte, das würde mir einen Vorsprung verschaffen. Allerdings stellte sich schnell heraus, dass die kostenlose Version von Elementor bei weitem nicht so flexibel ist wie die Premium-Variante, die ich von der Arbeit kannte.
Diese Einschränkung zwang mich dazu, kreativ zu werden. Ich experimentierte mit verschiedenen kostenlosen Plugins wie Royal Addons und entwickelte sogar einige eigene Plugins mit Hilfe von KI. Es war eine steile Lernkurve, aber sie half mir, meine Fähigkeiten zu erweitern und tiefere Einblicke in die Funktionsweise von WordPress zu gewinnen.
Layout und Design: Ein Kampf mit Flexbox
Das minimalistische Design, das ich mir vorstellte, erwies sich als überraschend komplex in der Umsetzung. Die Entscheidung zwischen CSS Grid und Flexbox war nur der Anfang. Nach einigem Experimentieren entschied ich mich für Flexbox, um die Website in zwei Hauptspalten zu unterteilen
Die scheinbar einfache Struktur erforderte viel Feintuning und custom CSS. Jeder Pixel musste stimmen, um das clean Design zu erreichen, das mir vorschwebte. Es war ein ständiger Balanceakt zwischen Ästhetik und Funktionalität.
Die linke Spalte: Meine digitale Visitenkarte
Die linke Spalte sollte meine digitale Visitenkarte werden. Hier platzierte ich meine Vorstellung mit meinem Namen als H1, Social Media Icons und eine Newsletter-Anmeldung. Besonders stolz bin ich auf die Newsletter-Anmeldebox mit ihrem Gradient-Rahmen und der Flipbox-Funktionalität.
Die Umsetzung des Hover-Effekts, bei dem sich die gesamte Box dreht, war eine echte Herausforderung. Ich wollte, dass der Effekt nur ausgelöst wird, wenn man über bestimmte Bereiche hovert, nicht aber über Links oder Elemente mit eigenen Animationen. Die Feinabstimmung dieser Interaktionen erforderte viel Geduld und noch mehr CSS.
Skills und Lebenslauf: JavaScript to the Rescue
Der Lebenslauf-Bereich stellte mich vor besondere Herausforderungen. Ich wollte scrollbare Bereiche für Skills und Berufserfahrungen, deren Höhe sich dynamisch an den verfügbaren Platz anpasst. Da meine JavaScript-Kenntnisse begrenzt sind, nutzte ich hier die Hilfe von KI, um die notwendigen Skripte zu erstellen.
Besonders komplex war die Umsetzung des interaktiven Lebenslaufs mit einem Zeitstrahl und aufklappbaren Boxen für die einzelnen Berufsstationen. Da es kein passendes Elementor-Widget gab, musste ich hier komplett eigenen Code schreiben. Es war zeitaufwändig, aber das Ergebnis macht mich stolz.
Die rechte Spalte: Ein Potpourri an Funktionen
Die rechte Spalte teilte ich in zwei Bereiche: oben ein Platzhalter für zukünftige React.js-Projekte und eine Lesezeichen-Sektion, unten der Blog-Bereich.
Für die Lesezeichen-Funktion entwickelte ich ein eigenes Plugin. Benutzer können Websites hinzufügen und in Kategorien einteilen. Die Umsetzung des “Notizblock-Looks” für die Website-Liste war eine weitere Design-Herausforderung, die viel CSS-Feintuning erforderte.
Das responsive Design für diesen komplexen Aufbau stellte mich vor zusätzliche Herausforderungen. Jedes Element musste sich nahtlos an verschiedene Bildschirmgrößen anpassen, ohne dabei an Funktionalität oder Ästhetik einzubüßen.
Der Blog-Bereich: Customizing bis ins Detail
Überraschenderweise erwies sich die Erstellung des Blog-Bereichs als eine der größten Herausforderungen. Ohne Elementor Premium musste ich viel custom CSS schreiben, um das gewünschte Design für die Blog-Teaser zu erreichen. Die Implementierung des Hover-Effekts mit dem eingeblendeten Icon erforderte zusätzliches JavaScript.
Das Erstellen eines funktionierenden Blog-Artikel-Templates war aufgrund von Plugin-Konflikten besonders knifflig. Ich musste Inhalte mehrfach hin und her kopieren, bis ich ein stabiles Setup gefunden hatte. Es war ein Prozess voller Versuch und Irrtum, der meine Problemlösungsfähigkeiten auf die Probe stellte.
Fazit und Ausblick
Die Entwicklung von LeonsGPT war eine Reise voller unerwarteter Wendungen und Lernerfahrungen. Was als einfaches Projekt begann, entwickelte sich zu einer tiefgreifenden Exploration von Web-Technologien. Jede Herausforderung brachte mich dazu, neue Fähigkeiten zu entwickeln und kreative Lösungen zu finden.
Für die Zukunft plane ich, die Website mit weiteren interaktiven Elementen und nützlichen Anwendungen zu erweitern. Als nächstes Projekt steht ein SVG-Ersteller auf meiner Liste. Ich freue mich darauf, diese neuen Herausforderungen anzugehen und dabei weiter zu lernen und zu wachsen.