Portfolio
Einige Beispiele für Projekte für die ich (mit) verantwortlich war
Produktkonfiguratoren
Gloment
Projektbeschreibung:
Diese Website basiert auf Shopify und war zu dem Zeitpunkt, als ich in die Entwicklung eingestiegen bin, gerade frisch aufgesetzt worden, mit einem fast vollständig ungestylten Standard-Theme. Dieses habe ich stark angepasst, um den jetzigen Look des Webshops zu erstellen. Unter anderem habe ich dabei auch eine komplett eigenständige Produktübersichtsseite gebaut.
Das Herzstück des Ganzen ist aber der Poster-Konfigurator. Dieser erlaubt es dem Nutzer, eigene Motivationsposter zu kreieren und diese dann zum Druck oder Download zu bestellen. Der Konfigurator bietet neben dieser Kernfunktion auch noch die Möglichkeit, einen je nach Produkt unterschiedlichen Fragenkatalog zu laden und basierend auf den Antworten des Nutzers einen Textvorschlag zu generieren.
Leider scheint die Firma nicht mehr zu existieren und die Domain wurde von zwielichtigen Betreibern aufgekauft, die dort nun potentiell schädliche Inhalte verbreiten. Ich habe den Link hier daher entfernt.
CaroKissen
Projektbeschreibung:
Die Website existierte bereits als ich zum Projekt stieß. Gebaut werden sollte eine neue Seite mit komplexer JavaScript-Funktionalität, die es ermöglicht per Konfigurator eigene Produktvarianten zu entwerfen und diese dann direkt in Auftrag geben zu können. Zudem habe ich das allgemeine Responsive-Verhalten der Website optimiert.
Webseiten/-Portale
Musenchor
Projektbeschreibung:
Diese Webseite wurde komplett von Grund auf von mir erstellt, auf Basis des Frontend Frameworks Twitter Bootstrap. Ich entwarf das Design, baute die HTML-Struktur und stylte sie und fügte dann eigenes JavaScript hinzu. Das Backend ist eine Alphaversion meines eigenen Content Management Systems "DXC", an dem ich seit 2010 hin und wieder in meiner Freizeit arbeite.
Die wichtigsten Funktionen dieser Website befinden sich im Mitgliederbereich und sind daher nicht öffentlich, aber die zu diesem Eintrag gehörende Screenshotgalerie zeigt die meisten davon.
Artistraum
Projektbeschreibung:
Diese Website des Artistraum e.V. i.G. wurde von Grund auf komplett von mir erstellt. Basis für das Frontend ist Twitter Bootstrap und das Backend ist das CMS Concrete5. Die Layoutvorgaben waren recht lose, es sollte schlicht und übersichtlich werden, was ich dann auch so gestaltet habe. Das interessanteste Feature der Website befindet sich auf der Terminseite, wo ich eine stark angepasste Version eines JS-Plugins nutze um den Inhalt eines öffentlichen Google-Kalenders auf der Seite darzustellen.
Laden 3.0
Projektbeschreibung:
Für dieses Webportal eines aufstrebenden mittelständischen Unternehmens übernahm ich die komplette Frontend-Entwicklung, basierend auf den Designs des Kunden.
No Hatespeech
Projektbeschreibung:
Diese Website mit ihrem sehr... speziellen Look wurde vom Kunden mit der Prämisse entworfen, durch grelle Farben und starke Kontraste möglichst provokant zu wirken. Dennoch verbergen sich hinter der so grob und simpel erscheinenden Fassade einige hochkomplexe von mir erstellte JavaScript-Funktionalitäten, welche die Dynamik von bestimmten Bereichen der Seite antreiben, wie z.B. die automatische Generierung einer Unternavigation im Wissensbereich.
christian-plaep.de
Projektbeschreibung:
Für die Website des selbständigen Experten für Media Relations, Strategieberatung & Coaching Christian Plaep übernahm ich die vollständige Frontend-Entwicklung. Das vom Kunden zur Verfügung gestellte Design war sehr übersichtlich gehalten, aber dennoch hatte die Entwicklung ihre Tücken, da darauf geachtet werden musste, dass das Hintergrundbild auf allen Geräten immer so positioniert ist, dass das Gesicht im Bild bleibt.
Leider ist die Website mittlerweile nicht mehr erreichbar.
Web-Applikationen
Shadow Emprises
Projektbeschreibung:
Shadow Emprises ist eine PWA (Progressive Web App). Das bedeutet, dass diese Website über eine optionale Installationsroutine verfügt, mittels derer man sie auf kompatiblen Geräten zum Homescreen hinzufügen und dann wie eine normale App benutzen kann, sogar offline.
Das nicht-kommerzielle Projekt ist ein Würfelwurf-Simulator für das Pen & Paper RPG (Tischrollenspiel) "Shadowrun", welcher primär dazu dient, das Spielen des Spiels über Online-Kanäle einfacher und transparenter zu gestalten. Nicht nur, dass man so nicht mehr über ein Dutzend physische Würfel rollen muss, was bei Audiokonferenzen ein sehr unangenehmes Hintergrundgeräusch für die Mitspieler erzeugt. Das Ergebnis des Wurfs und dessen Auswirkung lässt sich auch mit einem Klick in die Zwischenablage kopieren und so ganz einfach per Chat mit der Gruppe teilen.
Ich habe es entwickelt, da 2019 ein in meiner "Shadowrun"-Gruppe genutztes Web-Tool eines Tages den Geist aufgab und wir eine Alternative benötigten. Zu dem Zeitpunkt hatte ich gerade Svelte für mich entdeckt und wollte sowieso unbedingt ein richtiges Projekt damit umsetzen. Und zeitgleich war es auch die perfekte Gelegenheit, mich in das Thema PWAs und WebWorker einzuarbeiten.
Ich war begeistert wie schnell und unkompliziert sich Projekte mit Svelte umsetzen lassen: Ich sah mir ein 45-minütiges Tutorial-Video über die Grundlagen von Svelte an und fing direkt an zu programmieren. Nach 3 Stunden hatte ich einen lauffähigen Prototypen. Der Großteil der Funktionalität und des Looks standen nach einem Wochenende. Feinschliff, Ausbau sowie Optimierung dauerten dann nochmal ca. 16 Stunden (aufgeteilt auf ein paar kleinere und größere Feierabend-Coding-Sessions im Verlauf der folgenden 1,5 Wochen) und danach war es fertig. Svelte macht's möglich, ich kann also jedem Entwickler nur raten, sich einmal damit auseinander zu setzen.
DSA-Reisechronik
Projektbeschreibung:
Diese Webapplikation erlaubt es, Marker auf einer Karte zu platzieren, von denen jeder einen Punkt auf einer Reiseroute darstellt, zu dem man einen eigenen Tagebucheintrag verfassen kann. Die Kartenansicht kann dabei manipuliert werden wie man es aus komplexeren Anwendungen kennt, unterstützt also das Verschieben und Zoomen des Kartenausschnitts.
Die Webapplikation erstellte ich als ein privates Experiment um meinen Erfahrungsschatz zu erweitern.
Die Idee dazu entstand als meine alte Pen & Paper Rollenspielrunde (für die ich vor einigen Jahren die Website erstellt hatte, in welche die App nun integriert ist) plante, in naher Zukunft wieder gemeinsam spielen zu wollen und wir entschieden uns, die berühmte Phileasson-Saga anzugehen, eine Abenteuerkampagne in 12 Kapiteln die eine Hommage an Jules Vernes "In 80 Tagen um die Welt" darstellt. Hier gilt es, im Zuge eines Wettstreits den Kontinent Aventurien in 80 Wochen komplett zu umsegeln. Der Spielleiter trat kurz nach dem Fassen dieses Entschlusses an mich heran, da ich damals eine Tagebuchfunktion für die alte Website gebaut hatte. Er fragte mich ob es technisch machbar wäre, dies zu ergänzen indem man zusätzlich die Punkte der Reise auf einer Karte markierbar macht. Das war eine interessante Herausforderung, der ich mich gerne gestellt habe.
Ältere Projekte
the Noobz
Projektbeschreibung:
Dies ist die erste vollständige und offizielle Website, welche ich je gebaut habe.
Das war damals in 2007, als ich gerade mein Studium beendet hatte und ein Vorzeigewerk erstellen wollte um bei einer Bewerbung für einen Job als Webentwickler zumindest eine Referenz aufweisen zu können. Da kam es mir gerade recht, dass die befreundete Band "the Noobz" sich mit ihrem alten Webmaster überworfen hatte und einen neuen Webauftritt benötigte.
Nach damaligen Standards war die Website State-of-the-Art, aber ist heutztage natürlich hoffnungslos veraltet. Damals waren HTML5 und CSS3 noch nicht einsetzbar und fast alle extravaganten Designelemente mussten daher mit Hintergrundbildern gelöst werden und so hatte ich meine Studentenlizenz für Photoshop maximal ausgereizt... und es dabei vermutlich ein wenig übertrieben. Die Website verfügt sogar über eine völlig sinnfreie versteckte Funktion um das Farbschema zu ändern.
Das wirklich besondere an der Website ist das Backend. Der Webspace-Hoster der Band war so einfach gestrickt, dass noch nicht einmal eine Datenbank mit im Paket war.
Da aber CMS-Funktionen nötig waren, hatte ich mich in die SimpleXML-Funktionen von PHP eingelesen und eine rudimentäre Inhaltsverwaltung programmiert, die komplett auf auf dem Server liegenden XML-Dateien basierte, die in einem nicht-öffentlichen Verzeichnis lagen und über das Admin-Backend geändert werden konnten.
Im Laufe der folgenden Jahre habe ich Teile davon an anderer Stelle wiederverwendet und für die Nachfolgeseite zu einem wesentlich umfangreicheren CMS ausgebaut. In meiner Freizeit habe ich ab und an daran weiter gebastelt und es trägt mittlerweile den Namen DXC und befindet sich momentan mal wieder im Totalumbau um als Version Alpha 3.0 irgendwann zum Einsatz kommen zu können.
the Noobz (v2)
Projektbeschreibung:
Im Jahre 2010 hatte ich beschlossen, dass so langsam die Zeit reif sei, all meine mir bis dahin angeeigneten theoretischen Kenntnisse in Sachen HTML5 und CSS3 in die Praxis umzusetzen. Zudem wollte ich mein recht gutes Verständnis von jQuery auch noch weiter vertiefen.
Zumindest Ersteres war mir zu diesem Zeitpunkt im Beruf nicht möglich, da ich bei meinem damaligen Arbeitgeber für genau zwei Webplattformen zuständig war und keine davon so neu war, dass sie schon auf diesen Techniken basierte. Da ich mit dem Look der alten Noobz-Website nicht mehr so recht zufrieden war, erkor ich also Diese zum Ziel meiner Experimente.
Im Prinzip ist das komplette Design der Website in meinem Kopf entstanden während ich mir nochmal die Liste aller nun möglichen Features durchgelesen hatte. Die Details nahmen danach durch Live-Experimente im Browser Form an.
Abgesehen von Responsive Design, was damals noch kein wirklich großes Thema war, und nativen Mediaplayern (die damals noch nicht gut genug unterstützt wurden) bietet diese Seite fast die volle Palette an modernen Browser-Features:
Dynamische Grafiken mit Canvas-Elementen, die von mir sehr präferierten abgerundeten Ecken, Farbverläufe, Animationen, Transformationen, Schattenwürfe...
Alle möglichen Dinge, die sich Webentwickler seit Jahren, in denen sie mit kruden Hacks arbeiten mussten, herbei gesehnt hatten, waren nun möglich. Und ironischerweise ist heutzutage kaum noch etwas von all dem gefordert, weil seit ein paar Jahren Flat Design zum neuen Ideal erhoben wurde. Frei nach dem Motto "Perfektion ist nicht dann erreicht wenn man nichts mehr hinzufügen sondern nichts mehr weglassen kann". Das Leben ist manchmal seltsam... aber zurück zum Thema.
Von allen Features dieser Website war ich damals besonders stolz auf die meiner Meinung nach doch ziemlich einzigartige Menüführung und die sehr verspielten visuellen Eigenheiten von Kontaktformular und Gästebuch. So sehr sogar, dass ich eine modernisierte Version 2 der dort verwendeten Kontaktformular-Mechanik erstellte, welche auf dieser Website zum Einsatz kommt.
Interessanterweise hat diese Version der Website letztendlich aber nie die Alte abgelöst, da die Band sich aufgelöst hatte, als die v2-Website fast fertig gestellt war. Da die Band aber in meinen Augen absolut großartig war habe ich beschlossen, die Websites nicht sterben zu lassen und zahle weiterhin die monatlichen Gebühren für die Domain um beide Versionen der Website weiterhin auf meinem Server laufen lassen zu können.
Wenn Sie bis hierhin gelesen haben und sich noch ein wenig mehr Zeit nehmen wollen, so kann ich Ihnen nur wärmstens ans Herz legen die v2-Website zu besuchen und sich die Songs und Musikvideos der Band auf den Medienseiten zu Gemüte zu führen. Wenn Sie auch nur ein wenig mit guter Rockmusik anfangen können, werden Sie es nicht bereuen.
Fragen Sie sich, weshalb hier nur so wenige Projekte aufgeführt sind?
Da ich derzeit sehr oft (und vor meiner Selbstständigkeit sogar ausschließlich) unter NDA arbeite, kann ich hier leider nicht mit allzu vielen Beispielen aufwarten.
Die auf dieser Seite gelisteten Beispiele spiegeln also nur einen sehr geringen Teil meiner Tätigkeiten wider.