saschaklatt.dev

Concept, design and development of my own freelance portfolio website
Screenshot of the website saschaklatt.dev on different devices.

About the project

A few words about my own portfolio website.

What you see here is actually the 4th version of the website since I started freelancing in 2019. I started with a fairly bad looking design and improved it step by step until I ended with what you see right now.

So far I use this website as my digital business card and to present my projects. I also plan to start a blog where I will tell about my work and my experiences.

Development process

As a first step, I created wireframes in Adobe XD, which I then converted into final designs. Based on that, I programmed the website with Gatsby and TypeScript.

The content of the first versions was managed with simple Markdown files. But after working with some headless CMS in other projects, I decided to go a step further and integrate one here as well. The first attempt was to use Storyblok and I really liked editing with the live editor.

After getting annoyed with Gatsby's complex build process, I decided to migrate the project to Next.js, which made retrieving data much easier.

Working with Storyblok was fine, but sometimes the editor just crashed or felt a bit buggy. I also found that the official code samples are written in a programming style that I didn't really agree with. You also have to transfer additional code needed for the live editor to the production website.

Then I stumbled across Sanity, which I immediately fell in love with. Their query language GROQ is just fantastic, much more flexible than GraphQL, and it saved me a lot of data parsing because you can structure your response data extremely flexible right away. I replaced Storyblok with Sanity, it took me some work, but now I'm really happy.

For tracking traffic, I use Matomo in cookieless mode to support GDPR guidelines without having to display a cookie banner, which is nice.

tech stack

  • React, Next.js

  • CSS Modules

  • Sanity CMS

  • D3.js

responsibilities

  • Concept

  • Design

  • Development

  • Content creation