Latest Work

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.

Screenshot: Team-Andro Styleguide - Text Formatting
The Team-Andro styleguide serves as documentation of design guidelines and code modules, the picture shows an example of the default text formatting.

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.

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.

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.

Screenshot: Fitmart shop - product page
For the Fitmart online shop, a custom responsive Layout has been developed. The picture shows an example of a product page.

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.