Portfolio
A few examples for projects I (co-)developed
Product Configurators
Gloment
Project Description:
This website is based on Shopify and was more or less blank when I joined the project. It used a very rudimentary base theme that I modified heavily to achieve the look it has now. Amongst other things this involved creating a completely new product overview page.
But the core of this entire project is the poster configurator. It enables the user to create their own motivational poster and then order it in print or for download. Besides this core functionality it is also capable to load a set of questions based on the currently viewed product and to use the user's answers to these questions to generate an example text.
Unfortunately the company doesn't seem to exist anymore and their domain has been sacked by some shady people who now use it to host potentially malicious content, so I removed the link here.
CaroKissen
Project Description:
This website already existed when I came in. My task was to create a new page that would serve as a product configurator where visitors can design their own product variants, queue them up and then place an order for all products at once. I also optimzed the site's overall responsive behavior.
Websites
Musenchor
Project Description:
This website was all done by me, based on the Bootstrap font-end framework. I designed the look, built and styled the markup and applied custom JavaScript to it. The backend is an alpha version of my own content management system called "DXC", that I began working on in 2010.
The most important features of this are within the closed members area so you won't be able to check them out by visting the website, but the screenshot gallery of this entry shows most of them.
Artistraum
Project Description:
This website was completely created by me, with the front-end based on Twitter Bootstrap and the CMS Concrete5 serving as the backend. The design specs were pretty loose, the page was supposed to look plain and simple so nothing distract from the text content so that's how I built it. The most interesting feature is located on the appointments page: A customized JS plugin displays the contents of a public Google calender directly on the page itself.
Laden 3.0
Project Description:
The entire front-end development For this web portal of an aspiring young company was done by me, based on a design they provided.
No Hatespeech
Project Description:
This website with its very... special look was designed by the client to appear as provocative as possible with its bright colors and large letters. Despite the seemingly crude and simple looks, the website actually contains quite a few sophisticaed custom JavaScript functionalities created by me, for example the automatic sub-menu generation on the knowledge page.
christian-plaep.de
Project Description:
I took care of the entire front-end development of the website of Christian Plaep, a freelance expert for media relations, strategy consulting and coaching. The design provided by the client was very slim but came with its pitfalls, as I had to ensure that the background image was always positioned so that the face would remain visible on all devices.
Unfortunately the website is no longer reachable nowadays.
Web Applications
Shadow Emprises
Project Description:
Shadow Emprises is a PWA (Progressive Web App). That means this website comes with an optional installation routine that allows it to be added to the home screen of compatible devices to be able to use it just like a normal app, even offline.
The non-commercial project is a helper tool for the tabletop role playing game "Shadowrun" and its primary focus is to make playing the game more convenient as well as more transparent when played via online channels. Not only does it remove the need to roll a dozen or more dice for a check (the noise of which can be very disturbing for other players in the audio conference). It also enables the user to copy the summary and evaluation of the roll to the clipboard with a single click, thus providing a convenient way to announce the result via chat.
I developed this tool, because another one that my online "Shadowrun" group used at the time went offline in 2019 and we were looking for alternatives. Fortunately this happened at a time where I discovered Svelte and was eager to create a full-fledged project with it anyway. It also provided the perfect opportunity to dig into the subject of PWAs and WebWorkers.
I was blown away by how fast and uncomplicated projects can be realized with Svelte: I watched a 45-minutes long tutorial about the basics of Svelte and could start immediately. After 3 hours I had a working prototype ready. Most of the functionality and styling was done after a weekend. And after spending another maybe 16 hours (split up over the course of roughly 1.5 weeks during my spare free time in the evenings), on optimization, additions and final touches, it was finished. All due to the power of Svelte, so I highly recommend that every developer who reads this should give it a try.
DSA-Reisechronik
Project Description:
This web application allows the user to place markers on a map, each of which representing a stop on a journey with an associated journal entry. The map view can be manipulated as is to be expected from larger map applications: Moving and zooming of the viewport are both possible.
I created this web application as a private experiment to gain new knowledge. The idea for it was born when my old pen and paper RPG group (for which I created the website that the web app is now a part of a few years ago), after a few years apart, met up again to discuss starting a new campaign. We decided to play the "Phileasson Saga", a 12-chapter-long mega-campaign for "The Dark Eye" which is at its core an homage to Jules Verne's famous novel "Around the world in 80 days", as the main plot is a race around the continent "Aventuria" which has to be completed within 80 weeks.
After we came to that decision, the game master approached me with a proposal: As I created the journal functionality of the old website, he asked if it was possible to also include a functionality to mark the points of this long journey on a map. That sounded like an interesting challenge, so I eagerly accepted.
Older projects
the Noobz
Project Description:
This is the very first complete and official website I ever created.
This was back in 2007, right after receiving my diploma degree, when I wanted to create something that I could present as my portfolio when applying for my first job as a web developer. As it just happened, "the Noobz" (a band I was friends with) just had a falling out with their former webmaster and approached me when they needeed a new web presence.
By the standards from back then it was pretty much state-of-the-art but is of course incredibly outdated nowadays. HTML5 and CSS3 were completely unusable and all the more sophisticated design elements had to be built via the extensive usage of background images. So I went to town (and admittedly a bit overboard) with my student's license for photoshop. I even included a completely unnecessary hidden feature to change the website's color scheme.
The most important feature of this is its backend.
As the hoster of the band wasn't even providing a database, I was faced with the challenge to implement basic content management functionalities without one.
So I did a lot of reasearch on PHP's SimpleXML library and created a very basic CMS entirely built on the concept of reading from and writing to XML files located in a publically inaccessible folder on the server.
In the following years I re-used some parts of this system until I rebuilt the whole thing into a much more fleshed-out CMS for the next version of the website.
In my leisure time I worked a bit more on it and nowadays the system is named DXC. At the moment I'm writing this it is in a total overhaul phase somewhere between Alpha 2.x and 3.0.
the Noobz (v2)
Project Description:
In the year 2010 I decided that it was finally time to put all the theoretical knowledge I had aquired regarding HTML5 and CSS3 to practical use. Unfortunately I wasn't able to da that at work as the company I worked for at that time had only two active web portals to maintain and none of them was so new that it already implemented those techniques. So, as I was a bit unhappy with the look of the old Noobz website, I decided to make that the target of my experiments.
Basically the entire design of that page formed in my head while re-reading a list of all the features that were now possible. And the details formed themselves while running live experiments in the browser.
Except for responsive design functionality - which wasn't really a thing back then - and native media players - those weren't advanced and supported enough at the time - this site features almost the entire palette of modern browser features:
Dynamic graphics via canvas elements, rounded corners which have always been very much to my liking, color gradients, animations, transformation, shadows...
All kinds of things that web developers had been longing for for years - in which they were forced to work with crude hacks - were now possible. And ironically, most of it is not asked for anymore these days, as flat design became the new ideal of designers world-wide, all following the creed: "Perfection is not reached when there is nothing left to add, but when there's nothing left to throw out". Life can be very strange at times... but back to topic.
Of all of the site's features I was especially proud of the in my opinion very unique main menu functionality and the playful visuals of the contact form and the guest book. So much so that I created a version 2 of its contact form functionality to be used this website.
Interestingly, this new version never replaced the old one, as the band disbanded shortly before the work on the v2 website was completed. But since the band used to be absolutely amazing in my eyes, I couldn't just let their legacy die and I kept on paying the monthly fee for the domain to be able to keep both versions running on my server.
If you have read everything up until this point and still have a little more time on your hands, I strongly encourage you to visit the v2 website's media section and listen to the music provided there. If you're even remotely interested in good rock music you will not regret it.
Are you asking yourself why there aren't that many examples on this page?
Most of my current work (and all of my old work when I was an employee) is done under an NDA, so I can only reference projects here for which the client gave me explicit permission to do so.
So, the project examples listed here are actually just reflecting a very small part of my work.