mirror of
https://github.com/kogakure/website-astro-stefanimhoff.de.git
synced 2026-02-03 12:05:28 +00:00
87 lines
3.1 KiB
Plaintext
87 lines
3.1 KiB
Plaintext
---
|
||
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>
|
||
|
||
</DisplayBox>
|
||
|
||
<DisplayBox>
|
||
|
||
</DisplayBox>
|
||
|
||
## Homepage
|
||
|
||
|
||
|
||
|
||
|
||
## Subpages
|
||
|
||
|
||
|
||
<div class="projects-detail-medium">
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
<div class="projects-detail-medium">
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|