---
title: New Website 2020
slug: new-website-2020
date: 2020-07-07
author: Stefan Imhoff
description: "Finally, after 3 years with 250 hours of work, I finished my longest-running project: A new design and code for my website. Everything is new. I created over 1,400 files with 29,000 lines of code."
cover: /assets/images/cover/new-website-2020.webp
tags: ["code", "design", "japan", "personal"]
series: new-website-2020
---

Finally, after **3 years** with **250 hours** of work, I finished my longest-running project: A _complete new_ design and code for my website. Everything is new. I created over **1,400** files with **29,000** lines of code.

There are _multiple_ reasons it took me a while: I created not only a new design, with a light and dark theme, screen size-dependent grid, and typography. I developed it with a new technology stack, including the static-site generator [Gatsby](https://www.gatsbyjs.org/), [TypeScript](https://www.typescriptlang.org/), [Styled Components](https://styled-components.com/), [MDX](https://mdxjs.com/), [GraphQL](https://graphql.org/), and [CSS Grid Layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout).

<Image
  caption="Light Version Homepage"
  src="/assets/images/posts/homepage-light.webp"
  alt="Light Version Homepage"
/>

<Image
  caption="Dark Version Homepage"
  src="/assets/images/posts/homepage-dark.webp"
  alt="Dark Version Homepage"
/>

I always take the opportunity to learn new things while working on personal projects. This time I intentionally picked TypeScript, even though I knew it would slow me down. I wanted to learn it beyond basic training and theory, which is possible while doing it.

I had worked with CSS Grid Layout before, but never with this level of complexity. Likewise, I wrote Unit Tests for every component and screen to get faster with React [Testing Library](https://testing-library.com/) and [Jest](https://jestjs.io/).

The inspiration and design phase took a long time. I had to read many books, study styles, designs, and art to select the direction I was aiming for.

## Journal

For my [Journal](/journal/), previously called articles, a blog I write since 2006, I re-checked the text of every essay I wrote before and improved the quality of the images.

## New Pages

I created new pages for parts of my website that previously didn’t exist or were not displayed properly.

### Projects & Showcases

For the first time, the website has a [Projects](/projects/) section showing my work, with further showcases for selected projects.

### Haiku

My Haiku (short Japanese poems) collection was previously loveless, dumped on a single page without proper context. After the relaunch, I dedicated a whole section to the [Haiku](/haiku/), including English translations.

<Image caption="Haiku" src="/assets/images/posts/haiku.webp" alt="Haiku" />

### Sketchnotes

I had a collection of my Sketchnotes hosted on a subdomain on Tumblr and wanted to move it back to my website and created my own [Sketchnotes](/sketchnotes/) section.

### The Traditional Color of Japan

A few years back I created a small project, creating an ASE file out of Traditional Colors of Japanese mentioned in a book with the same title. This project got [an own page](/traditional-colors-of-japan/) showing all colors and the books these are from.

<Image
  caption="The Traditional Colors of Japan"
  src="/assets/images/posts/colors-of-japan.webp"
  alt="The Traditional Colors of Japan"
/>

The entire project stretched for three years because I didn’t work continuously on the website, and sometimes didn’t do something for multiple months.

## Making-Of Series

But finally, the website is completed, and I deserve a long summer break without screen time. But I plan to release a series of Making-of posts I wrote over the next weeks. It will include a look into my thoughts and inspiration process, the design and development of the website.

## Stay Updated

If you want to be updated, you can follow my [RSS/Atom Feed](https://www.stefanimhoff.de/index.xml).

I set up a [Now](/now/) page, based on the idea of [Derek Silvers](https://sivers.org/), who created a [movement](https://nownownow.com/) when he started his page. The Now page shows what I’m doing right now and will be updated irregularly.

## Feedback Welcome

You can always send me a message or feedback, all possibilities to contact or connect me can be found on my [About](/about/) page. I don’t track anything anymore and know nothing any longer about visitors to my website. Blissful ignorance from my side to all this data-driven, growth-driven, customer-satisfaction-driven development.

## Source Code

If you’re interested in the code you don’t have to wait until I release the essay, the [source code](https://github.com/kogakure/website-gatsby-stefanimhoff.de) is publicly available on GitHub.
