Start

CODING

After I got into design, photography and film, the projects kept getting more.
So I asked myself: Where do I showcase my work, so that others can see them?

I tried myself in Homepage-Builders of various kinds but got frustrated pretty quickly as they did not give me the freedom to design my website like I wanted to.

As I always do when I look for a different approach to a problem, I opened Youtube, and started to write my first lines of code. That was my start into Frontend Web Development.
I started to really like React as it made sense to me right away to approach website and app-development component-based.
From there I first focussed on developing with the react-framework GatsbyJS.
After I deployed my first website with Gatsby I was blown away by the fast speed, that is made possible by using static site rendering.

Currently I am learning React Native and Flutter to get my hands on mobile development.

Sustragil

For Sustragil, a BASF venture, I designed and developed a one-pager to showcase their data product for supply chain management in the chemical industry.
I put a particular focus on a highly customised header animation that touches the aspects of data, digital product, chemistry and supply chain.
Not only on initial page load but all through the page I placed small animations that underpin the site’s text content.
I had to study the product in depth to break down its core functions into 3 steps.
Aligned vertically below each other these steps use the strong vertical orientation of the page to guide the visitor through the product.

The finished website can be seen here

excyted.io

For the creative technology studio excyted I designed and developed the website.
As it is a creative company which states that it “turns ideas into eye-popping reality” I wanted to craft a design that emphasises the creative aspect and that stands out by being highly customised and individual to every section. To satisfy the technology characteristic of the agency I decided to go for a dark design with a shining cool blue and magenta as secondary colours. Lines and dots shall give the site a digital feel. While being more functional in pages such as the team and services page, I decided to go for a very emotional feel on the landing page. I wanted it to be loaded with dynamic, interactive animations and movements to underpin the hybrid, “exciting” characteristic of the website-/video-studio.
After having done some first wireframes of the site I started right away with a design in Figma to get a feel for the brands web appearance.

I made rapid progress with the design as I felt very comfortable with the dynamic animation approach on the landing page as well as with the modern feel of a dark and minimal color design.
While working on the mock-up of the whole page I continually gathered feedback. I think it is a very important part, as you can get lost quickly with your own designs details that do not lead to any valuable outcome for the visitor of the site.
With the implemented feedback I was ready to develop the site. I then, coded the website with the Javascript-Framework GatsbyJS. It gives me full control over the site, static rendering and a big community in the React world, where the framework evolved. All the animations on the site are either coded completely from scratch or I used react-packages such as React-Parallax that make it easier to add animations, that react to the scroll position of the user.

The finished website can be seen here

My Corona Knowledge Web-App

While staying at home due to the Covid-Virus I came up with the idea of getting a little bit more into FullStack-Development. I wanted to build and deploy an app that addresses the Covid-Virus.
There were some many good articles floating around the internet that I wanted to collect them. Not just articles I came across but my friends found as well.
So why not build a small application, were we can collect them all together?
The app only needs three functions:
1. Register a user
2. Create an entry that links to the article
3. Display the list of all posted entries.

I used MongoDB as a database, NodeJS and Express for my server setup and ReactJS as my frontend library and put two long nights into coding.

See the result here: KnowRona-App

#GegenDasVirus

During the beginning of the Coronacrisis in Germany I enjoyed the advantage of the internet by connecting to Jonathan on Twitter. I saw a post where he was looking for Web Developers in order to work on a project together. The goal of the project was to address the quarantine-problem elder people in the risk group have. They are exposed to a much higher risk of getting infected when leaving their homes to go shopping or to get other matters done.
The project was super simple. Build a PDF-Generator that members of a house or neighbours can use in order to offer the people in need of help their support. As quickly and as simple as possible.
The project was organized via Discord and some hours after Jonathans initial post we were several people dividing up the work via voice chatting.
I learned that people can organise themselves in a very efficient and fast way when the situation exerts pressure.

www.edyoucated.org

In my internship at edyoucated I amongst other tasks designed, developed and deployed their website.

I pre-designed the website in Figma.
A collaborative interface design tool which let’s me communicate back and forth with the team easily in order to make adjustments, iterations, corrections and implement new design ideas really quickly.
Everyone could attach comments to each and every tiny piece of the UI so that corrections were done in the blink of an eye.

Figma also comes with an amazing prototyping feature. Connecting the pages and linking them to each other is super easy.
The finished prototype almost feels like a ready to use website as you can click around pretty much like you would, when using the real website in the browser.
Having said that it is just a click dummie, the development of the final website was still to come.

After having set up everything design wise I coded the website.
GatsbyJS was the framework of my choice. It’s a javascript front-end framework based on React. It’s super convenient to quickly realize a component based approach. Page routing and layout components were done in day.

As a CSS-Framework I got my hands on tailwind for the first time.
An amazing utility-first framework that allows almost total styling freedom whereas other frameworks such as Bootstrap CSS rely on predefined classes and components.

www.mukkefuck.com

For the StartUp Mukkefuck I designed the landing page.
I decided to go for a one pager.
While doing this project I totally fell in love with Materialize.css. A CSS-Framework for an absolute quick win. Adjustments to the styles are quite difficult, it is not that flexible but it is super easy to start with and deliver in this case a one-pager in no time.

XPERT Chatbot

In my internship at Zweitag I developed a chatbot app..
We were a team of five interns with various backgrounds and we merged together perfectly.

A typical MVC app has a model (datalayer), view(the presentation of the data) and a controller (the logic and controlling of the data).

Milla was the soul behind all the designs. She sketched wireframes, designed mockups and created the corporate identity. So she did all the important work for setting up a good looking design and view.

Daria and Maxi worked at the interface between database(model) and backend(controller).

Leonard was the owner of the backend and architecture of the app and I respectively for the frontend.

While focussing on designing epics, features and user stories in the first two weeks we parallel got a slight grasp on Ruby on Rails.
A web-application framework based on the language Ruby that makes connecting model, view and controller a breeze.

From week 3 on we implemented the architecture and all the features and designs and developed the app.
The app is a slack-integrated chatbot that can be used internally in corporations to answer specific company related questions that arise in company’s everyday processes.