---
title: Personal Website & Blog
date: 2021-03-19
format: 50-start
sort: 120
showcase: true
categories: ["Web Design", "Web Development"]
intro: My website and blog first launched in 2006 and is the website you’re looking at. The current design is the 5th iteration.
description: My personal website and blog relaunched in 2020/2021 with Eleventy.
image:
  src: /assets/images/projects/thumbnails/stefanimhoff-v4.webp
  aspectRatio: 1.67
more:
  text: See Showcase of Version 4
  link: /projects/stefanimhoff-v4/
---

<ProjectIntro>
I rebuild my website in 2020, which was one of the biggest personal projects I’ve ever created. The process of researching, designing, and coding the website took me nearly **3 years** with **250 hours** of work. I wrote extensively about the [new website](/new-website-2020/), the [inspiration](/new-website-2020-inspiration/) behind it, the [design](/new-website-2020-design/) process, and the [development](/new-website-2020-development/) process. I wasn’t happy with the technical solution I picked in 2020 which was overengineered and too slow for a personal project. So, in 2021 I changed the static website generator from [Gatsby](https://www.gatsbyjs.org/) to [Eleventy](https://www.11ty.dev/). The [relaunch](http://localhost:8080/new-website-2021/) brought also smaller improvements to the font and simplified the overall website.

- <MoreLink
    href="https://github.com/kogakure/website-gatsby-stefanimhoff.de/"
    text="Source Code Gatsby"
  />
- <MoreLink href="https://github.com/kogakure/website-11ty-stefanimhoff.de/" text="Source Code Eleventy" />
</ProjectIntro>

---

## Color Palette

### Light Design

<ColorStack>
  <ColorSwatch color="#E7E6E4" title="Light Background" />
  <ColorSwatch color="#0E0D0C" title="Light Foreground" />
  <ColorSwatch color="#E60510" title="Accent" />
</ColorStack>

### Dark Design

<ColorStack>
  <ColorSwatch color="#1B1A18" title="Light Background" />
  <ColorSwatch color="#E7E6E4" title="Light Foreground" />
  <ColorSwatch color="#E60510" title="Accent" />
</ColorStack>

## Font

<DisplayBox>
  ![Secuela Variable Italic](/assets/images/projects/kogakure-v9/secuela-variable-regular.svg)
</DisplayBox>

<DisplayBox>
  ![Secuela Variable Italic](/assets/images/projects/kogakure-v9/secuela-variable-italic.svg)
</DisplayBox>

## Homepage

![Homepage Light](/assets/images/projects/stefanimhoff-v4/stefanimhoff-v4-homepage.webp)

![Homepage Dark](/assets/images/projects/stefanimhoff-v4/stefanimhoff-v4-homepage-dark.webp)

## Subpages

![](/assets/images/projects/stefanimhoff-v4/stefanimhoff-v4-about.webp)

<div class="projects-detail-medium">

![](/assets/images/projects/stefanimhoff-v4/stefanimhoff-v4-journal.webp)

![](/assets/images/projects/stefanimhoff-v4/stefanimhoff-v4-essay.webp)

</div>

![](/assets/images/projects/stefanimhoff-v4/stefanimhoff-v4-haiku.webp)

![](/assets/images/projects/stefanimhoff-v4/stefanimhoff-v4-haiku-detail.webp)

<div class="projects-detail-medium">

![](/assets/images/projects/stefanimhoff-v4/stefanimhoff-v4-sketchnotes.webp)

![](/assets/images/projects/stefanimhoff-v4/stefanimhoff-v4-colors-of-japan.webp)

</div>