Redesign & Styleguide
The Team-Andro platform consists of several applications, tied together with a single sign-on. The rather outdated layout should be redesigned in a modern but timeless fashion. In the process of the redesign I wanted to lay a maintainable, modular groundwork for the front-end code that could be used in all applications.
-
I wrote the briefing document (view as PDF) for the design competition at 99designs.com and played an essential part in the design decisions. The result was delivered as several photoshop files, covering some parts of the website. I used these as a starting point for the development and further design of the UI.
-
I developed the style guide to be used as documentation both for the essential parts of the design and the modular building blocks of the front-end code. It is built as a living style guide from comments in the SCSS files and is permanently updated and revised in the development process.

Development of a Video Platform
The Team-Andro video platform is used both for videos produced by Team-Andro and videos uploaded by the users of the community.
In 2016 it was decided to replace the outdated video software (still including a flash-based video player) with custom made software and an HTML5 video player.
-
I advocated for and established the use of the Symfony framework with Doctrine & Twig and developed all the major parts of the software in PHP.
-
I developed every part of the front-end in HTML, CSS and JavaScript (with jQuery)—from concept to the tooling (SASS & Grunt) up to nearly every single line of the code.
-
Except for the parts of the layout that were designed in the before mentioned design competition (mainly header and footer areas), I designed and build the User Interface of the video platform.
-
The home page of the video platform shows some hand-selected videos in a carousel and lists of new and featured videos in a grid. Screenshot Source: Home page Team-Andro videos -
The videos are displayed in a customized player based on video.js. Users can leave comments and rate the video. Screenshot Source: Video page of Team-Andro videos -
Each user has their own profile page with all their own videos and playlists they can edit when logged in. Screenshot Source: Profile page of Team-Andro videos
Relaunch of an Image Gallery
The Team-Andro gallery is based on the Coppermine Photo Gallery and has seen several custom overhauls. Most of the images in the gallery are uploaded by reporters covering bodybuilding competitions, but also every user in the community can upload their images.
-
In 2018, I have rewritten large parts of the PHP codebase, e. g. the upload and edit sections and the user profiles.
-
I have redesigned and rewritten nearly the whole front-end and UI based on the style guide. The touch-friendly fullscreen view of the images and the management area where images can be sorted and edited were the most challenging tasks.
-
The home page of the gallery shows the latest photo albums in a grid display at the top and categorized lists of all recent albums below Screenshot Source: Home page of the Team-Andro gallery -
The video shows the editing of an image album on a desktop computer and ends with the fullscreen display of some images. -
This video starts with editing and sorting of images on a mobile phone and then shows the touch-friendly fullscreen mode for comfortable image viewing. During the video, the smartphone deliberately has been rotated from portrait to landscape view.
E-Commerce - Responsive Shops
The Team-Andro platform is funded by the sale of supplements and fitness gear in the Team-Andro shop. The shop software is integrated in the platform, the shop is operated by the Fitmart GmbH.
-
In 2013/14, I have built the Team-Andro shop with Oxid. I developed several modifications, modules and a custom responsive layout.
-
In 2015/16 I developed the Team-Andro partner shop Fitmart. It uses the same foundation of modules and a base theme, but has some additional modules and a customized responsive layout based on a theme (chosen by the client) for another shop system.

Miscellaneous
-
For the Team-Andro forum running on phpBB3, I have developed several modifications, e. g. sign in with Facebook, a custom subscription system and a “Log Wizard” for the online coaching programs.
-
I integrated web push notifications into the Team-Andro platform. Registered users can subscribe to several notifications, e. g. for news on their forum subscriptions, on new videos, new articles etc. A custom service worker script (a PWA feature) and an extension of the phpBB notification system handle the push subscription for capable desktop and mobile browsers. The push notifications are sent via a custom node.js-server using the web-push library.
-
I established Git as version control system for the development at Team-Andro. It is currently used with the branching model based on Vincent Driessen's work (Gitflow Workflow).
Responsive Web Sites
For several projects, I was responsible for the full realisation: conception, design and development. Sometimes a CMS was used, sometimes static HTML with CSS & JavaScript was enough.
Since responsive design became a thing, every project I have built has been responsive. Some older projects were switched after being online for several years, often with a very tight budget.
-
For the tax consulting agency Paul H.P. Knipping in Munich, I developed a small responsive web site based on the existing logo design and letterhead. Screenshot Source: steuerkanzlei-knipping.de -
For Katja Kirste, an communications advisor, I have built an online portfolio based on Drupal. Layout and typography were developed in cooperation. Screenshot Source: katjakirste.de -
For moewo.de—an agency for furnished apartements in Bayreuth, Germany—I was responsible for conception, design and development (with Drupal). The responsive layout was integrated some years later. Screenshot Source: moewo.de