mirror of
https://github.com/kogakure/website-astro-stefanimhoff.de.git
synced 2026-02-03 20:15:27 +00:00
85 lines
5.1 KiB
Plaintext
85 lines
5.1 KiB
Plaintext
---
|
||
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."
|
||
tags: ["code", "design"]
|
||
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).
|
||
|
||
<Figure caption="Light Version Homepage">
|
||
<Image src="/assets/images/posts/homepage-light.webp" alt="Light Version Homepage" />
|
||
</Figure>
|
||
|
||
<Figure caption="Dark Version Homepage">
|
||
<Image src="/assets/images/posts/homepage-dark.webp" alt="Dark Version Homepage" />
|
||
</Figure>
|
||
|
||
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.
|
||
|
||
<Figure caption="Haiku">
|
||
<Image src="/assets/images/posts/haiku.webp" alt="Haiku" />
|
||
</Figure>
|
||
|
||
### 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.
|
||
|
||
<Figure caption="The Traditional Colors of Japan">
|
||
<Image src="/assets/images/posts/colors-of-japan.webp" alt="The Traditional Colors of Japan" />
|
||
</Figure>
|
||
|
||
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 & Styleguide
|
||
|
||
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. All my components can be viewed on my [Styleguide](https://styleguide.stefanimhoff.de/) created with [Storybook](https://storybook.js.org/).
|
||
|
||
<Banner>
|
||
If you want to see the design of this website, it is still hosted on
|
||
[v3.stefanimhoff.de](https://v3.stefanimhoff.de/) but doesn’t get any more updates.
|
||
</Banner>
|