New Website 2020

4 min read

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 so long: I created not only a completely new design, with light and dark theme, screen size dependent grid and typography, I also developed it with a completely new technology stack, including the static-site generator Gatsby, TypeScript, Styled Components, MDX, GraphQL, and CSS Grid Layout.

Light Version Homepage Dark Version Homepage

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

I had worked with CSS Grid Layout before but never with this level of complexity. I also wrote Unit Tests for every component and screen to get faster with React Testing Library and Jest.

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

Journal

For my Journal, previously called articles, a blog I write since 2006, I also re-checked the text of every article I wrote before and improved the quality of the images.

New Pages

I created some new pages for parts of my website that previously didn’t exist or where not displayed in a proper manner.

Projects & Showcases

For the first time, the website has a Projects section showing my work with further showcases for some of the work.

Haiku

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

Haiku

Sketchnotes

I also had a collection of my Sketchnotes hosted on a subdomain on Tumblr and wanted to move it back to my website and created an own 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 also got an own page showing all colors and the books these are from.

The Traditional Colors of Japan

The whole 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 articles I already 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.

I set up a Now page, based on the idea of Derek Silvers who created a movement 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 page. I don’t track anything anymore so I’m flying completely blind about visitors to my website. Some blissful ignorance from my side to all this data-driven, growth-driven, customer-satisfaction-driven development.

Source Code & Styleguide

If you’re interested in the code you don’t have to wait until I release the article, the source code is publicly available on GitHub. All my components can be viewed on my Styleguide created with Storybook.