Portfolio

Siddharta Store

Siddharta

store.siddharta.net/

Since 2004 I'm advising the band Siddharta on all web related things. Now it was time to build them a new online shop.
I build the whole frontend based on Vite with Webpack and React.js. Backend was done by Vasja.

Project Involvement

  • Advising on design, defining design components like headlines, buttons, colors, typography etc.
  • Architecture with Yarn, Vite, Webpack, NPM
  • Developer setup: pre-commit hooks, linters for JS and CSS, Unit Tests
  • React.js app in Typescript with components, react-router, tanstack query for endpoint caching
  • Self-made CSS (no frame-work): SCSS for styling, also using CSS Variables, icon font, mainly using grid and flexbox, 2 breakpoints
  • 2 languages with translation handling
  • Authentication and user/order management
top
Siddharta store front page
Siddharta store front page
Siddharta store product page
Siddharta store product page

Development Dashboard/Monitor

Spoonflower

This is a development monitor based on dashing.io. Most widget are self written in ruby with batman and get data from APIs like New Relic, Github, Google Analytics, Twitter and Aerisweather. It's very flexible and customisable.

Project Involvement

  • raspberry pi setup & maintenance
  • raspberry pi automation (update and start dashboard on pi start)
  • dashing.io setup & Configuration
  • widget development in ruby & JavaScript
  • html/scss development
top
Dashboard Monitor with Raspberry Pi 3
Dashboard Monitor with Raspberry Pi 3
2017 widget use
2017 widget use

Atelier Demani

Marion von Delft

marionvondelft.de
Tags:

Marion wanted an easy portfolio page for herself. Design was done by a friend of mine and I quickly produced a few static pages with clean HTML5 and a few tweaks for better SEO. SASS came in very handy since it saved me some time from redundant work like copy pasting selectors.

Project Involvement

  • HTML5, CSS3, SASS, JQuery
  • pixel perfect implementation
top
Start - Marion von Delft
Start - Marion von Delft
News - Marion von Delft
News - Marion von Delft

CSSOff is a yearly competition for frontend developers to measure their skills and expertise. I participated in 2013 together with 8000 others. The layout was rather complex and more print oriented. It was supposed to be responsive and as a bonus I made it fairly accessible. Since it left open many questions it was easily interpreted in many ways. So also the judges had quite some works this year. As of right now, 6 months after submission, their are no results. UPDATE: 2017 and no results. I guess this is dead. Good practice though.

Project Involvement

  • html5, css3, jquery, javascript
  • Responsive (with 3 breakpoints) and accessible layout
  • pixel perfect implementation
top
CSSOff 2013
CSSOff 2013

Schule Plus - Portal for institutions & their partners

SWiM Media UG

www.schule-plus.de
Tags:

The project started back in 2011 with an idea and developed over 2 years. I teamed up with a designer and backend developer to create the portal for a client who wants to help institutions like schools or universities to find their partners. For example, Companies open their doors for pupils or offer workshops to get to know the work life.

Project Involvement

  • conceived and created the complete frontend - module driven development ala BEM or SMACSS
  • HTML4, CSS3 (progressive enhancement), java script (JQuery)
  • Wide compatibility: from IE7 to the latest Chrome (progressive enhancement), because target group uses rather old browsers
  • Accessibility and non-javascript support
  • Usability advise and design review
  • close work with backend development
top
SchulePlus - start page
SchulePlus - start page
SchulePlus - fields of topics
SchulePlus - fields of topics

Berlin-Brandenburger Sportverein

BBSV e.V.

www.bbsv-sport.de
Tags:

Online representation for german Sports Club in Berlin. Website includes current sports, events and news.

Project Involvement

  • Design, Frontend and Backend creation
  • HTML5, CSS3 (progressive enhancement), javascript (JQuery), wordpress backend and creating own template
  • custom wordpress page includes and highlights
top
BBSV - Start page
BBSV - Start page

This is the portfolio site of the company SWiM Media. It shows what projects they have, who works with them and what they are all about. It's a simple one page with some nice scrolling features.

Project Involvement

  • HTML5, Css3, latest Wordpress with own custom page templates
  • Wide compatibility: from IE7 to the latest Chrome (progressive enhancement)
  • Sticky navigation that locks to the top when scrolling down, slider
  • Backend: created page-tree-logic with child pages to minimize code for client and be more dynamic (One-Pager is made out of more than 25 sub-pages)
top
Swim Bildung Portfolio
Swim Bildung Portfolio

Since 2004 i'm advising the band Siddharta on all web related things. I'm administrating their social networks and also am responsible for the offical home page. In 2011 we relaunched the page for a new album circle.

Project Involvement

  • project management, advisor, administration
  • usability & quality assurance
  • coordination of web team and language management
  • content management
  • online marketing over networks like facebook, myspace etc.
top
Siddharta Offical Page
Siddharta Offical Page

This satellite site advertises a small side project which offers further supportive education for teachers.

Project Involvement

  • complete development & programming & design
  • Used: e107 CMS with custom navigation
  • Custom created template, including javascript buttons, SEO
  • Created custom calendar with sign up function
top
Klasse Lehrer - Fortbildung
Klasse Lehrer - Fortbildung

The final website of my stay abroad in Slovenia was the agency relaunch. Again I used wordpress for an easy-access backend and extended the site with a multi-languages plugin which i customized.

Project Involvement

  • complete development & programming, Design by Vsebina
  • Used: Wordpress CMS extended w/ plugins & customization
  • Custom created template, SEO
  • Multi-language support
top
Vsebina Portfolio
Vsebina Portfolio

As some part of my developer career I started to program for iOS. For the band Siddharta and Elvis Jackson I created a show case app for iPhone and iPod touch. The app is unfortunately no longer available in the app store. Because of this native app development insight i also have great judgment and experience with screen resolution and do and don't in the mobile app world.

Project Involvement

  • complete design, development & programming
  • Used: Object C, Xcode 3.2.2/3.2.3
  • Extras: movement sensor used for hidden item
  • standalone with most of the content offline available.
top
Siddharta iPhone Application
Siddharta iPhone Application

Outfit7 is the creator of the famous iPhone App Talking Tom. They make applications for iPhone, Android, Facebook etc. They hired Vsebina to create their website and find them some kind of corporate identity. As a part of my stay with them i developed this site.

Project Involvement

  • complete development & programming, Design by Vsebina
  • Used: Wordpress extended w/ plugins
  • Custom created template with page inline Next/Back navigation, extra blog integration despite static home page
top
Outfit7 - Start
Outfit7 - Start

IK Svetovanje - book keeping

Vsebina

www.idakavcic.si
Tags:

IK Svetovanje is a wordpress based accountancy site for taxes and advices which was relaunched during my abroad experience in Slovenia.

Project Involvement

  • complete development & programming, Design by Vsebina
  • Used: Wordpress extended w/ plugins
  • Custom created template with sliding content headers (easyslider) and dynammic sliding navigation (lavalamp)
top
IK Svetovanje Davcno Poslovno
IK Svetovanje Davcno Poslovno

Blaž Porenta Portfolio

Veto Group

www.blazporenta.com
Tags:

Blaž Porenta is a well know slovene artist. His specialization are illustration, concept art and graphic design. He is known for large 2D illustrations.

Project Involvement

  • complete development, design & programming
  • Used: Wordpress extended w/ plugins, customized Gallery, Custom created template design and programming
top
Blaz Porenta Start
Blaz Porenta Start

Official Siddharta Myspace

Siddharta

myspace.com/siddharta
Tags:

This was still the time when you could entirely change the myspace layout. Siddharta used it as their main connection to fans before facebook kicked in. So the presence had to be great looking and all info be easy accessible.

Project Involvement

  • Development and custom myspace design to enhance the user experience
  • Example for Online network marketing, wide user reach
  • building network for artist to higher pageranks and reach as many target groups as possible
  • networks, I made good experience with: myspace, facebook, youtube, twitter, last.fm, flickr, purevolume, eventful, ilike, imeem, reverbnation
  • distributers like hootsuite or artisdata
top
Siddharta Myspace
Siddharta Myspace

Studenten Machen Schule

S.W.i.M UG

www.studenten-machen-schule.de
Tags:

"Studenten machen Schule" was a big bigger project for a client who wanted needed a portal for students (future teachers) who offer workshops in schools. The organization organizes everything around it and coordinates the workshops. Offices are in Hamburg, Berlin and Bavaria.

Project Involvement

  • Frontend & Backend Development (e107 CMS); Design by Leonid Fishman
  • Used: full Content Management System e107, template creation, customized navigation & sub navigation, user administration
  • Search engine optimization
  • Created network of sites: Hamburg, Berlin, Brandenburg, Bremen, Bayern, Hessen, Baden-Württemberg, and linked databases and communication of sites
top
Studenten Machen Schule
Studenten Machen Schule

Capstatt

Caprice Birker

capstatt.de
Tags:

Here I used again WordPress to built the foundation of a light website. It's a small design site which presents the works of a designer in knitting and handcraft.

Project Involvement

  • Frontend Development & Backend, Design by Leonid Fishman
  • Wordpress CMS, template customizing, programmed sidebar with shopping cart, all articles, customized navigation showing categories
  • search engine optimization
top
Capstatt - Start
Capstatt - Start

Christian Thiele Portfolio

Christian Thiele

www.christian-thiele.com
Tags:

Christian Thiele needed a small portfolio website for himself. I teamed up with a designer and used again wordpress to built the custom layout.

Project Involvement

  • Development & Backend, Design by Leonid Fishman
  • light Wordpress CMS, shadowbox javascript
  • search engine optimization
top
Christian Thiele - Start
Christian Thiele - Start

Green Solutions

IHK Berlin

Tags:

This was my final project for the education of "Digital & Print Media Design (IHK)". We had to design a page for the fake company Green Solutions. The topic was about alternative energies.

Project Involvement

  • Made around 13 screens including user interaction and forms
  • Final Rating: 96/100 points
  • Detailed concept (german) starting with briefing and target group over navigation plan and layout to typography, color managment and final relalisation plans
  • Additional W3 Modul Databases: creating a database for a quiz, importing & adding data, selection of winners via sql query
top
Green Solutions - Start
Green Solutions - Start

JKA Berlin

Honbu-Dojo „Leiden-kan”

www.jka-berlin.de
Tags:

This site was one of my first custom WordPress websites. I built it for a karate club in Berlin. I designed the layout and built a custom theme. I got deeper involved with WordPress, it's advantages and limits.

Project Involvement

  • Design, Layout, Development, Front- & Backend
  • light Wordpress CMS, random image script, calendar script, build file management plugin
  • search engine optimization
top
JKA Berlin -Start
JKA Berlin -Start
JKA Berlin - Files
JKA Berlin - Files

Highway To Kell Festival

HTK Kell am See

www.highway-to-kell.de
Tags:

This website I created for a small festival in the south of Germany. I designed the site and also built the whole front- and backend.
I remained admin for around 5 years until the festival ended.

Project Involvement

  • Design, Layout, Development, Front- & Backend
  • News backend with database, flash gallery, random image, JavaScripts for enlargement of images & inline divs for reports, php guest book
  • search engine optimization
top
Highway To Kell - Start
Highway To Kell - Start

PapaRoachWeb

Papa Roach

www.paparoachweb.de
Tags:

PapaRoachWeb was the biggest german Papa Roach fan site. I teamed up with a designer and we build this site including one big wbb forum in around 2 months. I was administrating and updating this page around 8 years before I gave it to someone more motivated. I learned and improved my backend and frontend skills.

Project Involvement

  • Development, Front- & Backend, Design: Thomas K.
  • biggest web site in the german speaking area (covering Austria, Switzerland, Germany)
  • custom flash header with navigation
  • 2 languages support
  • special database connected tour list with records of all concerts since 2000 (around 1100)
  • german news pull data from forum; posting news as forum threads
top
PapaRoachWeb Deutsch
PapaRoachWeb Deutsch

PapaRoachUnit

Papa Roach

Tags:

PapaRoachUnit was a fan project for the band Papa Roach. The website became quite propular and had at the end around 10000 registered users. I learned how to administrate big websites and improved my backend skills.

Project Involvement

  • biggest fan site for the band, well know and support by the band
  • full CMS e107, customized template design, special gallery, special last.fm integration (signatures, radio)
  • full user interaction through forum, commenting, submitting of news, interviews, articles, reviews & pictures
  • team administration, website organization, update processes
top
Papa Roach Unit
Papa Roach Unit

Bullet for my Valentine Streetteam

Sony BMG

www.b4mvstreetteam.com
Tags:

This project was initiated through my experience with streetteams and guerilla marketing. The french Sony BMG Label needed a website and help with the organisation for the streetteam of Bullet for my Valentine.

Project Involvement

  • Sony BMG cooperation for guerilla marketing, street team concept
  • Used: full CMS e107, customized template, functions and player
  • members only access with user management
  • offline support through label includes sending stickers, merchandise in general, guest list places etc
top
Bullet For My Valentine Official Streetteam
Bullet For My Valentine Official Streetteam