My Portfolio Website

Some insights about my portfolio website.

When I started to work as freelance software engineer, I also wanted to have my own portfolio website to present the things I've done so far, so that potential customers can get a better picture of me and my work.

Since I also have a lot of fun to bring data to life, I wanted to have some kind of data visualisation on my site. I gave it some thought and came up with the idea to just visualise my work experience in an interactive resumé. After quite some time of fiddling around, sketching, prototyping, throwing everything away and starting from scratch, I finally had a satisfying result where you can explore all the interesting things about me as a programmer, like the frameworks and programming languages I've used, at which time, in which job and at which company, as well as all the fields I've worked in. Even though the data is just estimated, especially in the early years, they give a pretty good impression of my experience as a programmer. It was also really fun to think about the old days, how I started and where my path led me, including all the projects, people and memories related to that.

You can see it action on my about me page.

Engineering details

I designed the user interface was designed with Adobe XD.

The website itself was then built with the React-based static site generator Gatsby, which comes with a great toolset to build fast loading websites. In addition to that, it's just a pleasure to work with. I really enjoyed building an entire website based on React without the necessity of any server code.

All the data viz and charts are made with D3.js in combination with React. Even though D3 is quite challenging sometimes, it's just an amazingly powerful, extensive and versitile library for building any kind of visualisation.

Features

  • Mobile-first layout
  • Fast loading and highly scalable static website
  • Interactive resumé built with D3.js and React

Responsibilities

  • Development of a fast-loading, mobile-first frontend
  • User experience and user interface design
  • Data processing and data visualisation

Tech stack

  • Typescript
  • React
  • Redux
  • Gatsby
  • D3
  • GraphQL
  • CSS Modules
  • JAMstack