Highlight - Siddharta Store

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
Siddharta store front page
Siddharta store front page
Siddharta store product page
Siddharta store product page

Highlight - Development Dashboard/Monitor

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
Dashboard Monitor with Raspberry Pi 3
Dashboard Monitor with Raspberry Pi 3
2017 widget use
2017 widget use

Highlight - CSSOff 2013

CSSOff 2013

Unmatchedstyle

codepen.io/LHT/full/0984fcdc32eb6408114d09d335a28f01

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
CSSOff 2013
CSSOff 2013

Highlight - Schule Plus - Portal for institutions & their partners

Schule Plus - Portal for institutions & their partners

SWiM Media UG

www.schule-plus.de

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
SchulePlus - start page
SchulePlus - start page
SchulePlus - fields of topics
SchulePlus - fields of topics

Highlight - Berlin-Brandenburger Sportverein

Berlin-Brandenburger Sportverein

BBSV e.V.

www.bbsv-sport.de

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
BBSV - Start page
BBSV - Start page

Highlight - Swim Bildung

Swim Bildung

SWiM Media UG

www.swim-bildung.de

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)
Swim Bildung Portfolio
Swim Bildung Portfolio

Highlight - Klasse Lehrer

Klasse Lehrer

S.W.i.M UG

www.klasse-lehrer-fortbildung.de

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
Klasse Lehrer - Fortbildung
Klasse Lehrer - Fortbildung

Highlight - Vsebina

Vsebina

Vsebina

www.vsebina.com

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
Vsebina Portfolio
Vsebina Portfolio

Highlight - Outfit7

Outfit7

Vsebina

www.outfit7.com

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
Outfit7 - Start
Outfit7 - Start

Highlight - Blaž Porenta Portfolio

Blaž Porenta Portfolio

Veto Group

www.blazporenta.com

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
Blaz Porenta Start
Blaz Porenta Start

Highlight - Studenten Machen Schule

Studenten Machen Schule

S.W.i.M UG

www.studenten-machen-schule.de

"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
Studenten Machen Schule
Studenten Machen Schule

Highlight - Green Solutions

Green Solutions

IHK Berlin

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
Green Solutions - Start
Green Solutions - Start