Portfolio website

Let's talk about my website on my website.

When I started my career as a freelance web developer, I certainly needed a portfolio website. React served me very well in the last couple of years, so I decided to build this page with the React-based static site generator Gatsby. Gatsby heavily optimizes websites for load times by providing great tools for image optimization, content preloading or PWA support, just to name a few. It was fairly easy to convert my website into a PWA (progressive web app), which now allows users to revisit my sites even without having an active internet connection.

Another strength of Gatsby is its ability to fetch content from any CMS or data source. Since I was curious about the JAMstack and Headless CMSs, I decided to use Netlify CMS as content management system and connect it with my Gatsby site. NetlifyCMS follows a quite interesting approach where all content is stored as Markdown files (other formats like YAML or JSON are supported as well) directly within the Git repository. Gatsby then takes these Markdown files and creates static HTML from it. So if you open the generated site in the browser, no server-side action other than serving the static files is necessary, which not only improves load times but also gives you the ability to host it on any server or CDN. No PHP or Node.js is required.

During my last permanent employment as a software engineer at XPURE, I did quite a lot data visualizations with D3 and I wanted my website to reflect this. I thought what could be interesting data about myself that would be worth visualizing... After giving it some thought, I decided to write down all the programming languages, frameworks and libraries I've used over the years and try to remember how instensively I've worked with them. After that, I made some sketches in Affinity Designer and Adobe XD and finally came up with some interactive D3 components that now form my interactive resume.

The radar chart in the header section shows the development areas I worked in. A racing bar chart reveals further details about the usage of programming languages, frameworks or IDEs in the selected year. Below you find a visualization I called "Strands Chart" that shows the usage of programming languages I worked with throughout my career.

You can read more about the Strands Chart in particular in this article. The racing bar chart is inspired by the Youtube video of a good friend and former colleague Murat Kemaldar.

Tech stack

  • React
  • Redux
  • Gatsby
  • D3
  • CSS Modules
  • Formik
  • Netlify CMS
  • Netlify