kogakure/website-astro-stefanimhoff.de
1
0
Fork 0
mirror of https://github.com/kogakure/website-astro-stefanimhoff.de.git synced 2026-02-03 12:05:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: use old paths, but keep new design

Browse Source
This commit is contained in:
Stefan Imhoff
2026-01-25 13:49:33 +01:00
committed by Stefan Imhoff
parent d920cb8197
commit adf4084a42
956 changed files with 944 additions and 922 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
src/components/BasicImage.astro
View File

@@ -1,132 +0,0 @@
---
import { Picture } from 'astro:assets';
import type { ImageMetadata } from 'astro';
import TextLink from './TextLink.astro';
import Link from './Link.astro';
interface Props {
alt?: string;
caption?: string;
class?: string;
decoding?: 'async' | 'sync' | 'auto';
height?: string | number;
href?: string;
loading?: 'lazy' | 'eager';
noMargin?: boolean;
quality?: number;
role?: string;
size?: 'regular' | 'wide' | 'fullsize';
source?: string;
sourceUrl?: string;
src: string;
width?: string | number;
}
const {
alt,
caption,
class: className,
decoding = 'async',
height,
href,
loading = 'lazy',
noMargin,
quality,
size,
source,
sourceUrl,
src,
width,
...props
} = Astro.props;
// Normalize dimensions
const parseDim = (dim: string | number | undefined) => (dim ? Number(dim) : undefined);
const parsedWidth = parseDim(width);
const parsedHeight = parseDim(height);
// Resolve Image Source
let localImage: ImageMetadata | undefined;
let remoteImage: string = src;
// Get all the image metadata
const images = import.meta.glob<{ default: ImageMetadata }>('/src/images/**/*');
if (src.startsWith('/images')) {
const key = '/src' + src;
const loader = images[key as keyof typeof images];
if (typeof loader === 'function') {
const mod = await loader();
localImage = mod.default;
}
}
// Define sizes attribute for responsive images
const sizes = '(max-width: 440px) 100vw, (max-width: 768px) 90vw, (max-width: 1024px) 85vw, 1100px';
// Determine the tag and specific attributes
const ImageWrapper = href ? Link : 'div';
const wrapperProps = href ? { href } : {};
---
<figure
class:list={[
'mis mbe-13 mbs-0 mie-0',
{
'figure-wide': size === 'wide',
'figure-fullsize': size === 'fullsize',
'!mbe-0': noMargin,
},
className,
]}
{...props}
>
<ImageWrapper
class="figure-content flex flex-wrap gap-6 md:flex-nowrap [&_div]:flex-grow"
{...wrapperProps}
>
{
localImage ? (
<Picture
alt={alt ?? ''}
class="rounded-2"
decoding={decoding}
fallbackFormat="webp"
formats={['avif', 'webp']}
height={parsedHeight}
loading={loading}
quality={quality}
sizes={sizes}
src={localImage}
width={parsedWidth}
/>
) : (
<img
alt={alt ?? ''}
class="rounded-2"
loading={loading}
src={remoteImage}
width={parsedWidth}
height={parsedHeight}
/>
)
}
</ImageWrapper>
{
(caption || source) && (
<figcaption class="text-center text-2 mbs-2 [text-wrap:balance]">
{caption}
{caption && source ? '–' : ''}
{source &&
(sourceUrl ? (
<cite>
<TextLink href={sourceUrl}>{source}</TextLink>
</cite>
) : (
<cite>{source}</cite>
))}
</figcaption>
)
}
</figure>

2
src/components/Figure.astro
View File

@@ -10,7 +10,7 @@ const { class: className, caption, size = 'regular', ...props } = Astro.props;
<figure
class:list={[
'rounded-4 bg-white/50 p-8 mbs-0 mie-0 mis-0 dark:bg-black/80',
'rounded-2 mbs-0 mie-0 mis-0',
{ 'figure-wide': size === 'wide', 'figure-fullsize': size === 'fullsize', 'mbe-13': true },
className,
]}

4
src/components/GalleryDetail.astro
View File

@@ -1,5 +1,5 @@
---
import BasicImage from './BasicImage.astro';
import Image from './Image.astro';
import Headline from './Headline.astro';
const { entry } = Astro.props;
@@ -49,7 +49,7 @@ const imageLength = entry.data.images.length;
},
]}
>
<BasicImage alt={entry.data.title} src={src} />
<Image alt={entry.data.title} src={src} />
</div>
))
}

102
src/components/Image.astro
View File

@@ -1,21 +1,99 @@
---
const { class: className, noMargin, src, ...props } = Astro.props;
import TextLink from './TextLink.astro';
import Link from './Link.astro';
interface Props {
alt?: string;
caption?: string;
class?: string;
decoding?: 'async' | 'sync' | 'auto';
fullHeight?: boolean;
fullWidth?: boolean;
height?: string | number;
href?: string;
loading?: 'lazy' | 'eager';
noMargin?: boolean;
role?: string;
size?: 'regular' | 'wide' | 'fullsize';
source?: string;
sourceUrl?: string;
src: string;
width?: string | number;
}
const {
alt,
caption,
class: className,
decoding = 'async',
fullHeight = false,
fullWidth = true,
height,
href,
loading = 'lazy',
noMargin,
role,
size,
source,
sourceUrl,
src,
width,
...props
} = Astro.props;
// Determine the tag and specific attributes
const ImageWrapper = href ? Link : 'div';
const wrapperProps = href ? { href } : {};
---
<div
<figure
class:list={[
'image-shadow mbe-10 mbs-0 [&_img]:!w-full [&_img]:!max-w-none [&_picture]:!w-full [&_picture]:!max-w-none',
{ '!mbe-0': noMargin },
'mis block mbe-13 mbs-0 mie-0',
{
'figure-wide': size === 'wide',
'figure-fullsize': size === 'fullsize',
'!mbe-0': noMargin,
'!h-full': fullHeight,
'!w-full': fullWidth,
},
className,
]}
>
<img
<ImageWrapper
class:list={[
'block h-auto w-full rounded-1 border-1 border-solid border-black/[0.1] bg-black/[0.1] shadow shadow-black/10 dark:border-white/[0.1] dark:opacity-[0.87] dark:shadow-white/10',
'figure-content gap-6 mbs-0 [&_img]:!max-w-none',
{
'[&_img]:!h-full': fullHeight,
'[&_img]:!w-full': fullWidth,
},
]}
decoding="async"
loading="lazy"
src={src}
{...props}
/>
</div>
{...wrapperProps}
>
<img
class:list={['rounded-2 object-cover dark:opacity-[0.87]']}
decoding={decoding}
loading={loading}
src={src}
alt={alt ?? ''}
width={width}
height={height}
{...props}
/>
</ImageWrapper>
{
(caption || source) && (
<figcaption class="text-center text-2 mbs-2 [text-wrap:balance]">
{caption}
{caption && source ? '–' : ''}
{source &&
(sourceUrl ? (
<cite>
<TextLink href={sourceUrl}>{source}</TextLink>
</cite>
) : (
<cite>{source}</cite>
))}
</figcaption>
)
}
</figure>

4
src/components/JournalList.astro
View File

@@ -1,5 +1,5 @@
---
import BasicImage from '../components/BasicImage.astro';
import Image from '../components/Image.astro';
import type { CollectionEntry } from 'astro:content';
interface Props {
@@ -27,7 +27,7 @@ const { entries } = Astro.props;
>
<div class="absolute z-10 h-full w-full">
{data.cover ? (
<BasicImage
<Image
alt={data.title}
class="!m-0 block !h-full w-full object-cover"
role="presentation"

4
src/components/ProjectImage.astro
View File

@@ -1,6 +1,6 @@
---
import type { CollectionEntry } from 'astro:content';
import BasicImage from './BasicImage.astro';
import Image from './Image.astro';
interface Props {
project: CollectionEntry<'projects'>;
@@ -11,7 +11,7 @@ const { project } = Astro.props;
{
project.data.image && (
<BasicImage
<Image
alt={project.data.title}
aria-label={project.data.title}
class="[&_img]:!w-full [&_img]:!max-w-none [&_picture]:!w-full [&_picture]:!max-w-none"

2
src/components/ProjectIntro.astro
View File

@@ -7,6 +7,6 @@ export interface Props {
const { class: className, ...props } = Astro.props;
---
<div class:list={['max-w-[66ch]', className]} {...props}>
<div class:list={[className]} {...props}>
<slot />
</div>

36
src/content/ai-art/after-humanity.mdx
View File

@@ -4,41 +4,41 @@ date: 2023-02-05
sort: 210
coverSize: medium
images:
- src: /images/ai-art/after-humanity/1.webp
- src: /assets/images/ai-art/after-humanity/1.webp
aspectRatio: 1
- src: /images/ai-art/after-humanity/2.webp
- src: /assets/images/ai-art/after-humanity/2.webp
aspectRatio: 1
- src: /images/ai-art/after-humanity/3.webp
- src: /assets/images/ai-art/after-humanity/3.webp
aspectRatio: 1
- src: /images/ai-art/after-humanity/4.webp
- src: /assets/images/ai-art/after-humanity/4.webp
aspectRatio: 1
- src: /images/ai-art/after-humanity/5.webp
- src: /assets/images/ai-art/after-humanity/5.webp
aspectRatio: 1
- src: /images/ai-art/after-humanity/6.webp
- src: /assets/images/ai-art/after-humanity/6.webp
aspectRatio: 1
- src: /images/ai-art/after-humanity/7.webp
- src: /assets/images/ai-art/after-humanity/7.webp
aspectRatio: 1
- src: /images/ai-art/after-humanity/8.webp
- src: /assets/images/ai-art/after-humanity/8.webp
aspectRatio: 1
- src: /images/ai-art/after-humanity/9.webp
- src: /assets/images/ai-art/after-humanity/9.webp
aspectRatio: 1
- src: /images/ai-art/after-humanity/10.webp
- src: /assets/images/ai-art/after-humanity/10.webp
aspectRatio: 1
- src: /images/ai-art/after-humanity/11.webp
- src: /assets/images/ai-art/after-humanity/11.webp
aspectRatio: 1
- src: /images/ai-art/after-humanity/12.webp
- src: /assets/images/ai-art/after-humanity/12.webp
aspectRatio: 1
- src: /images/ai-art/after-humanity/13.webp
- src: /assets/images/ai-art/after-humanity/13.webp
aspectRatio: 1
- src: /images/ai-art/after-humanity/14.webp
- src: /assets/images/ai-art/after-humanity/14.webp
aspectRatio: 1
- src: /images/ai-art/after-humanity/15.webp
- src: /assets/images/ai-art/after-humanity/15.webp
aspectRatio: 1
- src: /images/ai-art/after-humanity/16.webp
- src: /assets/images/ai-art/after-humanity/16.webp
aspectRatio: 1
- src: /images/ai-art/after-humanity/17.webp
- src: /assets/images/ai-art/after-humanity/17.webp
aspectRatio: 1
- src: /images/ai-art/after-humanity/18.webp
- src: /assets/images/ai-art/after-humanity/18.webp
aspectRatio: 1
---

2
src/content/ai-art/ai-taking-over-the-world.mdx
View File

@@ -4,7 +4,7 @@ date: 2022-12-14
sort: 70
coverSize: medium
images:
- src: /images/ai-art/ai-taking-over-the-world/1.webp
- src: /assets/images/ai-art/ai-taking-over-the-world/1.webp
aspectRatio: 1.6
---

20
src/content/ai-art/alien-world.mdx
View File

@@ -3,25 +3,25 @@ title: Alien World
date: 2023-02-11
sort: 40
images:
- src: /images/ai-art/alien-world/1.webp
- src: /assets/images/ai-art/alien-world/1.webp
aspectRatio: 1
- src: /images/ai-art/alien-world/2.webp
- src: /assets/images/ai-art/alien-world/2.webp
aspectRatio: 1
- src: /images/ai-art/alien-world/3.webp
- src: /assets/images/ai-art/alien-world/3.webp
aspectRatio: 1
- src: /images/ai-art/alien-world/4.webp
- src: /assets/images/ai-art/alien-world/4.webp
aspectRatio: 1
- src: /images/ai-art/alien-world/5.webp
- src: /assets/images/ai-art/alien-world/5.webp
aspectRatio: 1
- src: /images/ai-art/alien-world/6.webp
- src: /assets/images/ai-art/alien-world/6.webp
aspectRatio: 1
- src: /images/ai-art/alien-world/7.webp
- src: /assets/images/ai-art/alien-world/7.webp
aspectRatio: 1
- src: /images/ai-art/alien-world/8.webp
- src: /assets/images/ai-art/alien-world/8.webp
aspectRatio: 1
- src: /images/ai-art/alien-world/9.webp
- src: /assets/images/ai-art/alien-world/9.webp
aspectRatio: 1
- src: /images/ai-art/alien-world/10.webp
- src: /assets/images/ai-art/alien-world/10.webp
aspectRatio: 1
---

28
src/content/ai-art/aurora.mdx
View File

@@ -4,33 +4,33 @@ date: 2023-01-14
sort: 120
coverSize: large
images:
- src: /images/ai-art/aurora/1.webp
- src: /assets/images/ai-art/aurora/1.webp
aspectRatio: 0.67
- src: /images/ai-art/aurora/2.webp
- src: /assets/images/ai-art/aurora/2.webp
aspectRatio: 0.67
- src: /images/ai-art/aurora/3.webp
- src: /assets/images/ai-art/aurora/3.webp
aspectRatio: 0.67
- src: /images/ai-art/aurora/4.webp
- src: /assets/images/ai-art/aurora/4.webp
aspectRatio: 0.67
- src: /images/ai-art/aurora/5.webp
- src: /assets/images/ai-art/aurora/5.webp
aspectRatio: 0.67
- src: /images/ai-art/aurora/6.webp
- src: /assets/images/ai-art/aurora/6.webp
aspectRatio: 0.67
- src: /images/ai-art/aurora/7.webp
- src: /assets/images/ai-art/aurora/7.webp
aspectRatio: 0.67
- src: /images/ai-art/aurora/8.webp
- src: /assets/images/ai-art/aurora/8.webp
aspectRatio: 0.67
- src: /images/ai-art/aurora/9.webp
- src: /assets/images/ai-art/aurora/9.webp
aspectRatio: 0.67
- src: /images/ai-art/aurora/10.webp
- src: /assets/images/ai-art/aurora/10.webp
aspectRatio: 0.67
- src: /images/ai-art/aurora/11.webp
- src: /assets/images/ai-art/aurora/11.webp
aspectRatio: 0.67
- src: /images/ai-art/aurora/12.webp
- src: /assets/images/ai-art/aurora/12.webp
aspectRatio: 0.67
- src: /images/ai-art/aurora/13.webp
- src: /assets/images/ai-art/aurora/13.webp
aspectRatio: 0.67
- src: /images/ai-art/aurora/14.webp
- src: /assets/images/ai-art/aurora/14.webp
aspectRatio: 0.67
---

10
src/content/ai-art/bonsai.mdx
View File

@@ -3,15 +3,15 @@ title: Bonsai
date: 2022-12-06
sort: 50
images:
- src: /images/ai-art/bonsai/1.webp
- src: /assets/images/ai-art/bonsai/1.webp
aspectRatio: 1
- src: /images/ai-art/bonsai/2.webp
- src: /assets/images/ai-art/bonsai/2.webp
aspectRatio: 1
- src: /images/ai-art/bonsai/3.webp
- src: /assets/images/ai-art/bonsai/3.webp
aspectRatio: 1
- src: /images/ai-art/bonsai/4.webp
- src: /assets/images/ai-art/bonsai/4.webp
aspectRatio: 1
- src: /images/ai-art/bonsai/5.webp
- src: /assets/images/ai-art/bonsai/5.webp
aspectRatio: 1
---

2
src/content/ai-art/chicken-nugget-woman.mdx
View File

@@ -4,7 +4,7 @@ date: 2023-01-17
sort: 140
coverSize: medium
images:
- src: /images/ai-art/chicken-nugget-woman/1.webp
- src: /assets/images/ai-art/chicken-nugget-woman/1.webp
aspectRatio: 1
---

12
src/content/ai-art/chimera.mdx
View File

@@ -3,17 +3,17 @@ title: Chimera
date: 2023-02-11
sort: 220
images:
- src: /images/ai-art/chimera/1.webp
- src: /assets/images/ai-art/chimera/1.webp
aspectRatio: 1
- src: /images/ai-art/chimera/2.webp
- src: /assets/images/ai-art/chimera/2.webp
aspectRatio: 1
- src: /images/ai-art/chimera/3.webp
- src: /assets/images/ai-art/chimera/3.webp
aspectRatio: 1
- src: /images/ai-art/chimera/4.webp
- src: /assets/images/ai-art/chimera/4.webp
aspectRatio: 1
- src: /images/ai-art/chimera/5.webp
- src: /assets/images/ai-art/chimera/5.webp
aspectRatio: 1
- src: /images/ai-art/chimera/6.webp
- src: /assets/images/ai-art/chimera/6.webp
aspectRatio: 1
---

2
src/content/ai-art/clifton.mdx
View File

@@ -4,7 +4,7 @@ date: 2023-07-03
sort: 390
coverSize: medium
images:
- src: /images/ai-art/clifton/1.webp
- src: /assets/images/ai-art/clifton/1.webp
aspectRatio: 1
---

16
src/content/ai-art/comic-manga.mdx
View File

@@ -4,21 +4,21 @@ date: 2023-05-24
sort: 360
coverSize: medium
images:
- src: /images/ai-art/comic-manga/1.webp
- src: /assets/images/ai-art/comic-manga/1.webp
aspectRatio: 1
- src: /images/ai-art/comic-manga/2.webp
- src: /assets/images/ai-art/comic-manga/2.webp
aspectRatio: 1
- src: /images/ai-art/comic-manga/3.webp
- src: /assets/images/ai-art/comic-manga/3.webp
aspectRatio: 1
- src: /images/ai-art/comic-manga/4.webp
- src: /assets/images/ai-art/comic-manga/4.webp
aspectRatio: 1
- src: /images/ai-art/comic-manga/5.webp
- src: /assets/images/ai-art/comic-manga/5.webp
aspectRatio: 1
- src: /images/ai-art/comic-manga/6.webp
- src: /assets/images/ai-art/comic-manga/6.webp
aspectRatio: 1
- src: /images/ai-art/comic-manga/7.webp
- src: /assets/images/ai-art/comic-manga/7.webp
aspectRatio: 1
- src: /images/ai-art/comic-manga/8.webp
- src: /assets/images/ai-art/comic-manga/8.webp
aspectRatio: 1
---

18
src/content/ai-art/cosmic-horror.mdx
View File

@@ -3,23 +3,23 @@ title: Cosmic Horror
date: 2023-05-24
sort: 260
images:
- src: /images/ai-art/cosmic-horror/1.webp
- src: /assets/images/ai-art/cosmic-horror/1.webp
aspectRatio: 1
- src: /images/ai-art/cosmic-horror/2.webp
- src: /assets/images/ai-art/cosmic-horror/2.webp
aspectRatio: 1
- src: /images/ai-art/cosmic-horror/3.webp
- src: /assets/images/ai-art/cosmic-horror/3.webp
aspectRatio: 1
- src: /images/ai-art/cosmic-horror/4.webp
- src: /assets/images/ai-art/cosmic-horror/4.webp
aspectRatio: 1
- src: /images/ai-art/cosmic-horror/5.webp
- src: /assets/images/ai-art/cosmic-horror/5.webp
aspectRatio: 1
- src: /images/ai-art/cosmic-horror/6.webp
- src: /assets/images/ai-art/cosmic-horror/6.webp
aspectRatio: 1
- src: /images/ai-art/cosmic-horror/7.webp
- src: /assets/images/ai-art/cosmic-horror/7.webp
aspectRatio: 1
- src: /images/ai-art/cosmic-horror/8.webp
- src: /assets/images/ai-art/cosmic-horror/8.webp
aspectRatio: 1
- src: /images/ai-art/cosmic-horror/9.webp
- src: /assets/images/ai-art/cosmic-horror/9.webp
aspectRatio: 1
---

8
src/content/ai-art/cyberpunk-city.mdx
View File

@@ -4,13 +4,13 @@ date: 2022-12-12
sort: 80
coverSize: large
images:
- src: /images/ai-art/cyberpunk-city/1.webp
- src: /assets/images/ai-art/cyberpunk-city/1.webp
aspectRatio: 1.6
- src: /images/ai-art/cyberpunk-city/2.webp
- src: /assets/images/ai-art/cyberpunk-city/2.webp
aspectRatio: 1.6
- src: /images/ai-art/cyberpunk-city/3.webp
- src: /assets/images/ai-art/cyberpunk-city/3.webp
aspectRatio: 1.6
- src: /images/ai-art/cyberpunk-city/4.webp
- src: /assets/images/ai-art/cyberpunk-city/4.webp
aspectRatio: 1.6
---

2
src/content/ai-art/cyberpunk-wizard.mdx
View File

@@ -4,7 +4,7 @@ date: 2022-11-28
sort: 10
coverSize: medium
images:
- src: /images/ai-art/cyberpunk-wizard/1.webp
- src: /assets/images/ai-art/cyberpunk-wizard/1.webp
aspectRatio: 1
---

10
src/content/ai-art/death-of-the-stoic-man.mdx
View File

@@ -3,15 +3,15 @@ title: The Death of the Stoic Man
date: 2023-01-17
sort: 130
images:
- src: /images/ai-art/death-of-the-stoic-man/1.webp
- src: /assets/images/ai-art/death-of-the-stoic-man/1.webp
aspectRatio: 1
- src: /images/ai-art/death-of-the-stoic-man/2.webp
- src: /assets/images/ai-art/death-of-the-stoic-man/2.webp
aspectRatio: 1
- src: /images/ai-art/death-of-the-stoic-man/3.webp
- src: /assets/images/ai-art/death-of-the-stoic-man/3.webp
aspectRatio: 1
- src: /images/ai-art/death-of-the-stoic-man/4.webp
- src: /assets/images/ai-art/death-of-the-stoic-man/4.webp
aspectRatio: 1
- src: /images/ai-art/death-of-the-stoic-man/5.webp
- src: /assets/images/ai-art/death-of-the-stoic-man/5.webp
aspectRatio: 1
---

12
src/content/ai-art/distant-galaxy.mdx
View File

@@ -4,17 +4,17 @@ date: 2022-12-14
sort: 60
coverSize: medium
images:
- src: /images/ai-art/distant-galaxy/1.webp
- src: /assets/images/ai-art/distant-galaxy/1.webp
aspectRatio: 1.6
- src: /images/ai-art/distant-galaxy/2.webp
- src: /assets/images/ai-art/distant-galaxy/2.webp
aspectRatio: 1.6
- src: /images/ai-art/distant-galaxy/3.webp
- src: /assets/images/ai-art/distant-galaxy/3.webp
aspectRatio: 2
- src: /images/ai-art/distant-galaxy/4.webp
- src: /assets/images/ai-art/distant-galaxy/4.webp
aspectRatio: 2
- src: /images/ai-art/distant-galaxy/5.webp
- src: /assets/images/ai-art/distant-galaxy/5.webp
aspectRatio: 2
- src: /images/ai-art/distant-galaxy/6.webp
- src: /assets/images/ai-art/distant-galaxy/6.webp
aspectRatio: 2
---

12
src/content/ai-art/fantasy-world.mdx
View File

@@ -3,17 +3,17 @@ title: Fantasy World
date: 2022-12-01
sort: 30
images:
- src: /images/ai-art/fantasy-world/1.webp
- src: /assets/images/ai-art/fantasy-world/1.webp
aspectRatio: 1
- src: /images/ai-art/fantasy-world/2.webp
- src: /assets/images/ai-art/fantasy-world/2.webp
aspectRatio: 1
- src: /images/ai-art/fantasy-world/3.webp
- src: /assets/images/ai-art/fantasy-world/3.webp
aspectRatio: 1
- src: /images/ai-art/fantasy-world/4.webp
- src: /assets/images/ai-art/fantasy-world/4.webp
aspectRatio: 1
- src: /images/ai-art/fantasy-world/5.webp
- src: /assets/images/ai-art/fantasy-world/5.webp
aspectRatio: 1
- src: /images/ai-art/fantasy-world/6.webp
- src: /assets/images/ai-art/fantasy-world/6.webp
aspectRatio: 1
---

8
src/content/ai-art/female-cyborg.mdx
View File

@@ -4,13 +4,13 @@ date: 2022-12-05
sort: 150
coverSize: large
images:
- src: /images/ai-art/female-cyborg/1.webp
- src: /assets/images/ai-art/female-cyborg/1.webp
aspectRatio: 1.6
- src: /images/ai-art/female-cyborg/2.webp
- src: /assets/images/ai-art/female-cyborg/2.webp
aspectRatio: 1
- src: /images/ai-art/female-cyborg/3.webp
- src: /assets/images/ai-art/female-cyborg/3.webp
aspectRatio: 1
- src: /images/ai-art/female-cyborg/4.webp
- src: /assets/images/ai-art/female-cyborg/4.webp
aspectRatio: 1.6
---

22
src/content/ai-art/flux-dev-lora.mdx
View File

@@ -4,27 +4,27 @@ date: 2025-01-23
sort: 395
coverSize: medium
images:
- src: /images/ai-art/flux-dev-lora/1.webp
- src: /assets/images/ai-art/flux-dev-lora/1.webp
aspectRatio: 1
- src: /images/ai-art/flux-dev-lora/2.webp
- src: /assets/images/ai-art/flux-dev-lora/2.webp
aspectRatio: 1
- src: /images/ai-art/flux-dev-lora/3.webp
- src: /assets/images/ai-art/flux-dev-lora/3.webp
aspectRatio: 1
- src: /images/ai-art/flux-dev-lora/4.webp
- src: /assets/images/ai-art/flux-dev-lora/4.webp
aspectRatio: 1
- src: /images/ai-art/flux-dev-lora/5.webp
- src: /assets/images/ai-art/flux-dev-lora/5.webp
aspectRatio: 1
- src: /images/ai-art/flux-dev-lora/6.webp
- src: /assets/images/ai-art/flux-dev-lora/6.webp
aspectRatio: 1
- src: /images/ai-art/flux-dev-lora/7.webp
- src: /assets/images/ai-art/flux-dev-lora/7.webp
aspectRatio: 1
- src: /images/ai-art/flux-dev-lora/8.webp
- src: /assets/images/ai-art/flux-dev-lora/8.webp
aspectRatio: 1
- src: /images/ai-art/flux-dev-lora/9.webp
- src: /assets/images/ai-art/flux-dev-lora/9.webp
aspectRatio: 1
- src: /images/ai-art/flux-dev-lora/10.webp
- src: /assets/images/ai-art/flux-dev-lora/10.webp
aspectRatio: 1
- src: /images/ai-art/flux-dev-lora/11.webp
- src: /assets/images/ai-art/flux-dev-lora/11.webp
aspectRatio: 1
---

12
src/content/ai-art/futuristic-bedroom.mdx
View File

@@ -4,17 +4,17 @@ date: 2023-06-06
sort: 380
coverSize: large
images:
- src: /images/ai-art/futuristic-bedroom/1.webp
- src: /assets/images/ai-art/futuristic-bedroom/1.webp
aspectRatio: 1.5
- src: /images/ai-art/futuristic-bedroom/2.webp
- src: /assets/images/ai-art/futuristic-bedroom/2.webp
aspectRatio: 1.5
- src: /images/ai-art/futuristic-bedroom/3.webp
- src: /assets/images/ai-art/futuristic-bedroom/3.webp
aspectRatio: 1.5
- src: /images/ai-art/futuristic-bedroom/4.webp
- src: /assets/images/ai-art/futuristic-bedroom/4.webp
aspectRatio: 1.5
- src: /images/ai-art/futuristic-bedroom/5.webp
- src: /assets/images/ai-art/futuristic-bedroom/5.webp
aspectRatio: 1.5
- src: /images/ai-art/futuristic-bedroom/6.webp
- src: /assets/images/ai-art/futuristic-bedroom/6.webp
aspectRatio: 1.5
---

8
src/content/ai-art/gods-of-the-copybook-headings.mdx
View File

@@ -4,13 +4,13 @@ date: 2022-11-28
sort: 20
coverSize: medium
images:
- src: /images/ai-art/gods-of-the-copybook-headings/1.webp
- src: /assets/images/ai-art/gods-of-the-copybook-headings/1.webp
aspectRatio: 1
- src: /images/ai-art/gods-of-the-copybook-headings/2.webp
- src: /assets/images/ai-art/gods-of-the-copybook-headings/2.webp
aspectRatio: 1
- src: /images/ai-art/gods-of-the-copybook-headings/3.webp
- src: /assets/images/ai-art/gods-of-the-copybook-headings/3.webp
aspectRatio: 1
- src: /images/ai-art/gods-of-the-copybook-headings/4.webp
- src: /assets/images/ai-art/gods-of-the-copybook-headings/4.webp
aspectRatio: 1
---

12
src/content/ai-art/irezumi.mdx
View File

@@ -4,17 +4,17 @@ date: 2023-01-17
sort: 110
coverSize: medium
images:
- src: /images/ai-art/irezumi/1.webp
- src: /assets/images/ai-art/irezumi/1.webp
aspectRatio: 1
- src: /images/ai-art/irezumi/2.webp
- src: /assets/images/ai-art/irezumi/2.webp
aspectRatio: 1
- src: /images/ai-art/irezumi/3.webp
- src: /assets/images/ai-art/irezumi/3.webp
aspectRatio: 1
- src: /images/ai-art/irezumi/4.webp
- src: /assets/images/ai-art/irezumi/4.webp
aspectRatio: 1
- src: /images/ai-art/irezumi/5.webp
- src: /assets/images/ai-art/irezumi/5.webp
aspectRatio: 1
- src: /images/ai-art/irezumi/6.webp
- src: /assets/images/ai-art/irezumi/6.webp
aspectRatio: 1
---

14
src/content/ai-art/misty-lake.mdx
View File

@@ -4,19 +4,19 @@ date: 2023-05-03
sort: 90
coverSize: large
images:
- src: /images/ai-art/misty-lake/1.webp
- src: /assets/images/ai-art/misty-lake/1.webp
aspectRatio: 1
- src: /images/ai-art/misty-lake/2.webp
- src: /assets/images/ai-art/misty-lake/2.webp
aspectRatio: 1
- src: /images/ai-art/misty-lake/3.webp
- src: /assets/images/ai-art/misty-lake/3.webp
aspectRatio: 1
- src: /images/ai-art/misty-lake/4.webp
- src: /assets/images/ai-art/misty-lake/4.webp
aspectRatio: 1
- src: /images/ai-art/misty-lake/5.webp
- src: /assets/images/ai-art/misty-lake/5.webp
aspectRatio: 1
- src: /images/ai-art/misty-lake/6.webp
- src: /assets/images/ai-art/misty-lake/6.webp
aspectRatio: 1
- src: /images/ai-art/misty-lake/7.webp
- src: /assets/images/ai-art/misty-lake/7.webp
aspectRatio: 1
---

14
src/content/ai-art/mona-lisa.mdx
View File

@@ -4,19 +4,19 @@ date: 2023-03-14
sort: 250
coverSize: medium
images:
- src: /images/ai-art/mona-lisa/1.webp
- src: /assets/images/ai-art/mona-lisa/1.webp
aspectRatio: 0.67
- src: /images/ai-art/mona-lisa/2.webp
- src: /assets/images/ai-art/mona-lisa/2.webp
aspectRatio: 0.67
- src: /images/ai-art/mona-lisa/3.webp
- src: /assets/images/ai-art/mona-lisa/3.webp
aspectRatio: 0.67
- src: /images/ai-art/mona-lisa/4.webp
- src: /assets/images/ai-art/mona-lisa/4.webp
aspectRatio: 0.67
- src: /images/ai-art/mona-lisa/5.webp
- src: /assets/images/ai-art/mona-lisa/5.webp
aspectRatio: 0.67
- src: /images/ai-art/mona-lisa/6.webp
- src: /assets/images/ai-art/mona-lisa/6.webp
aspectRatio: 0.67
- src: /images/ai-art/mona-lisa/7.webp
- src: /assets/images/ai-art/mona-lisa/7.webp
aspectRatio: 0.67
---

8
src/content/ai-art/mushrooms.mdx
View File

@@ -3,13 +3,13 @@ title: Mushrooms
date: 2023-01-29
sort: 180
images:
- src: /images/ai-art/mushrooms/1.webp
- src: /assets/images/ai-art/mushrooms/1.webp
aspectRatio: 1
- src: /images/ai-art/mushrooms/2.webp
- src: /assets/images/ai-art/mushrooms/2.webp
aspectRatio: 1
- src: /images/ai-art/mushrooms/3.webp
- src: /assets/images/ai-art/mushrooms/3.webp
aspectRatio: 1
- src: /images/ai-art/mushrooms/4.webp
- src: /assets/images/ai-art/mushrooms/4.webp
aspectRatio: 1
---

42
src/content/ai-art/propaganda-poster.mdx
View File

@@ -4,47 +4,47 @@ date: 2023-03-18
sort: 240
coverSize: medium
images:
- src: /images/ai-art/propaganda-poster/1.webp
- src: /assets/images/ai-art/propaganda-poster/1.webp
aspectRatio: 0.67
- src: /images/ai-art/propaganda-poster/2.webp
- src: /assets/images/ai-art/propaganda-poster/2.webp
aspectRatio: 0.67
- src: /images/ai-art/propaganda-poster/3.webp
- src: /assets/images/ai-art/propaganda-poster/3.webp
aspectRatio: 0.67
- src: /images/ai-art/propaganda-poster/4.webp
- src: /assets/images/ai-art/propaganda-poster/4.webp
aspectRatio: 0.67
- src: /images/ai-art/propaganda-poster/5.webp
- src: /assets/images/ai-art/propaganda-poster/5.webp
aspectRatio: 0.67
- src: /images/ai-art/propaganda-poster/6.webp
- src: /assets/images/ai-art/propaganda-poster/6.webp
aspectRatio: 0.67
- src: /images/ai-art/propaganda-poster/7.webp
- src: /assets/images/ai-art/propaganda-poster/7.webp
aspectRatio: 0.67
- src: /images/ai-art/propaganda-poster/8.webp
- src: /assets/images/ai-art/propaganda-poster/8.webp
aspectRatio: 0.67
- src: /images/ai-art/propaganda-poster/9.webp
- src: /assets/images/ai-art/propaganda-poster/9.webp
aspectRatio: 0.67
- src: /images/ai-art/propaganda-poster/10.webp
- src: /assets/images/ai-art/propaganda-poster/10.webp
aspectRatio: 0.67
- src: /images/ai-art/propaganda-poster/11.webp
- src: /assets/images/ai-art/propaganda-poster/11.webp
aspectRatio: 0.67
- src: /images/ai-art/propaganda-poster/12.webp
- src: /assets/images/ai-art/propaganda-poster/12.webp
aspectRatio: 0.67
- src: /images/ai-art/propaganda-poster/13.webp
- src: /assets/images/ai-art/propaganda-poster/13.webp
aspectRatio: 0.67
- src: /images/ai-art/propaganda-poster/14.webp
- src: /assets/images/ai-art/propaganda-poster/14.webp
aspectRatio: 0.67
- src: /images/ai-art/propaganda-poster/15.webp
- src: /assets/images/ai-art/propaganda-poster/15.webp
aspectRatio: 0.67
- src: /images/ai-art/propaganda-poster/16.webp
- src: /assets/images/ai-art/propaganda-poster/16.webp
aspectRatio: 0.67
- src: /images/ai-art/propaganda-poster/17.webp
- src: /assets/images/ai-art/propaganda-poster/17.webp
aspectRatio: 0.67
- src: /images/ai-art/propaganda-poster/18.webp
- src: /assets/images/ai-art/propaganda-poster/18.webp
aspectRatio: 0.67
- src: /images/ai-art/propaganda-poster/19.webp
- src: /assets/images/ai-art/propaganda-poster/19.webp
aspectRatio: 0.67
- src: /images/ai-art/propaganda-poster/20.webp
- src: /assets/images/ai-art/propaganda-poster/20.webp
aspectRatio: 0.67
- src: /images/ai-art/propaganda-poster/21.webp
- src: /assets/images/ai-art/propaganda-poster/21.webp
aspectRatio: 0.67
---

6
src/content/ai-art/roman-stoics.mdx
View File

@@ -4,11 +4,11 @@ date: 2023-07-29
sort: 400
coverSize: large
images:
- src: /images/ai-art/roman-stoics/seneca.webp
- src: /assets/images/ai-art/roman-stoics/seneca.webp
aspectRatio: 1
- src: /images/ai-art/roman-stoics/marcus-aurelius.webp
- src: /assets/images/ai-art/roman-stoics/marcus-aurelius.webp
aspectRatio: 1
- src: /images/ai-art/roman-stoics/epictetus.webp
- src: /assets/images/ai-art/roman-stoics/epictetus.webp
aspectRatio: 1
---

40
src/content/ai-art/simpsons.mdx
View File

@@ -3,45 +3,45 @@ title: The Simpsons
date: 2023-02-13
sort: 160
images:
- src: /images/ai-art/the-simpsons/1.webp
- src: /assets/images/ai-art/the-simpsons/1.webp
aspectRatio: 1
- src: /images/ai-art/the-simpsons/2.webp
- src: /assets/images/ai-art/the-simpsons/2.webp
aspectRatio: 1
- src: /images/ai-art/the-simpsons/3.webp
- src: /assets/images/ai-art/the-simpsons/3.webp
aspectRatio: 1
- src: /images/ai-art/the-simpsons/4.webp
- src: /assets/images/ai-art/the-simpsons/4.webp
aspectRatio: 1
- src: /images/ai-art/the-simpsons/5.webp
- src: /assets/images/ai-art/the-simpsons/5.webp
aspectRatio: 1
- src: /images/ai-art/the-simpsons/6.webp
- src: /assets/images/ai-art/the-simpsons/6.webp
aspectRatio: 1
- src: /images/ai-art/the-simpsons/7.webp
- src: /assets/images/ai-art/the-simpsons/7.webp
aspectRatio: 1
- src: /images/ai-art/the-simpsons/8.webp
- src: /assets/images/ai-art/the-simpsons/8.webp
aspectRatio: 1
- src: /images/ai-art/the-simpsons/9.webp
- src: /assets/images/ai-art/the-simpsons/9.webp
aspectRatio: 1
- src: /images/ai-art/the-simpsons/10.webp
- src: /assets/images/ai-art/the-simpsons/10.webp
aspectRatio: 1
- src: /images/ai-art/the-simpsons/11.webp
- src: /assets/images/ai-art/the-simpsons/11.webp
aspectRatio: 1
- src: /images/ai-art/the-simpsons/12.webp
- src: /assets/images/ai-art/the-simpsons/12.webp
aspectRatio: 1
- src: /images/ai-art/the-simpsons/13.webp
- src: /assets/images/ai-art/the-simpsons/13.webp
aspectRatio: 1
- src: /images/ai-art/the-simpsons/14.webp
- src: /assets/images/ai-art/the-simpsons/14.webp
aspectRatio: 1
- src: /images/ai-art/the-simpsons/15.webp
- src: /assets/images/ai-art/the-simpsons/15.webp
aspectRatio: 1
- src: /images/ai-art/the-simpsons/16.webp
- src: /assets/images/ai-art/the-simpsons/16.webp
aspectRatio: 1
- src: /images/ai-art/the-simpsons/17.webp
- src: /assets/images/ai-art/the-simpsons/17.webp
aspectRatio: 1
- src: /images/ai-art/the-simpsons/18.webp
- src: /assets/images/ai-art/the-simpsons/18.webp
aspectRatio: 1
- src: /images/ai-art/the-simpsons/19.webp
- src: /assets/images/ai-art/the-simpsons/19.webp
aspectRatio: 1
- src: /images/ai-art/the-simpsons/20.webp
- src: /assets/images/ai-art/the-simpsons/20.webp
aspectRatio: 1
---

8
src/content/ai-art/south-park.mdx
View File

@@ -3,13 +3,13 @@ title: South Park
date: 2023-02-22
sort: 230
images:
- src: /images/ai-art/south-park/1.webp
- src: /assets/images/ai-art/south-park/1.webp
aspectRatio: 1
- src: /images/ai-art/south-park/2.webp
- src: /assets/images/ai-art/south-park/2.webp
aspectRatio: 1
- src: /images/ai-art/south-park/3.webp
- src: /assets/images/ai-art/south-park/3.webp
aspectRatio: 1
- src: /images/ai-art/south-park/4.webp
- src: /assets/images/ai-art/south-park/4.webp
aspectRatio: 1
---

2
src/content/ai-art/this-is-john-galt-speaking.mdx
View File

@@ -3,7 +3,7 @@ title: This is John Galt Speaking
date: 2023-04-18
sort: 200
images:
- src: /images/ai-art/this-is-john-galt-speaking/1.webp
- src: /assets/images/ai-art/this-is-john-galt-speaking/1.webp
aspectRatio: 1
---

18
src/content/ai-art/tower-of-babel.mdx
View File

@@ -3,23 +3,23 @@ title: Tower of Babel
date: 2023-01-29
sort: 190
images:
- src: /images/ai-art/tower-of-babel/1.webp
- src: /assets/images/ai-art/tower-of-babel/1.webp
aspectRatio: 1
- src: /images/ai-art/tower-of-babel/2.webp
- src: /assets/images/ai-art/tower-of-babel/2.webp
aspectRatio: 1
- src: /images/ai-art/tower-of-babel/3.webp
- src: /assets/images/ai-art/tower-of-babel/3.webp
aspectRatio: 1
- src: /images/ai-art/tower-of-babel/4.webp
- src: /assets/images/ai-art/tower-of-babel/4.webp
aspectRatio: 1
- src: /images/ai-art/tower-of-babel/5.webp
- src: /assets/images/ai-art/tower-of-babel/5.webp
aspectRatio: 1
- src: /images/ai-art/tower-of-babel/6.webp
- src: /assets/images/ai-art/tower-of-babel/6.webp
aspectRatio: 1
- src: /images/ai-art/tower-of-babel/7.webp
- src: /assets/images/ai-art/tower-of-babel/7.webp
aspectRatio: 1
- src: /images/ai-art/tower-of-babel/8.webp
- src: /assets/images/ai-art/tower-of-babel/8.webp
aspectRatio: 1
- src: /images/ai-art/tower-of-babel/9.webp
- src: /assets/images/ai-art/tower-of-babel/9.webp
aspectRatio: 1
---

10
src/content/ai-art/utopia-dystopia.mdx
View File

@@ -3,15 +3,15 @@ title: Utopia & Dystopia
date: 2023-01-29
sort: 170
images:
- src: /images/ai-art/utopia-dystopia/1.webp
- src: /assets/images/ai-art/utopia-dystopia/1.webp
aspectRatio: 1
- src: /images/ai-art/utopia-dystopia/2.webp
- src: /assets/images/ai-art/utopia-dystopia/2.webp
aspectRatio: 1
- src: /images/ai-art/utopia-dystopia/3.webp
- src: /assets/images/ai-art/utopia-dystopia/3.webp
aspectRatio: 1
- src: /images/ai-art/utopia-dystopia/4.webp
- src: /assets/images/ai-art/utopia-dystopia/4.webp
aspectRatio: 1
- src: /images/ai-art/utopia-dystopia/5.webp
- src: /assets/images/ai-art/utopia-dystopia/5.webp
aspectRatio: 1
---

12
src/content/ai-art/yakuza.mdx
View File

@@ -3,17 +3,17 @@ title: Yakuza
date: 2023-01-06
sort: 100
images:
- src: /images/ai-art/yakuza/1.webp
- src: /assets/images/ai-art/yakuza/1.webp
aspectRatio: 1
- src: /images/ai-art/yakuza/2.webp
- src: /assets/images/ai-art/yakuza/2.webp
aspectRatio: 1
- src: /images/ai-art/yakuza/3.webp
- src: /assets/images/ai-art/yakuza/3.webp
aspectRatio: 1
- src: /images/ai-art/yakuza/4.webp
- src: /assets/images/ai-art/yakuza/4.webp
aspectRatio: 1
- src: /images/ai-art/yakuza/5.webp
- src: /assets/images/ai-art/yakuza/5.webp
aspectRatio: 1
- src: /images/ai-art/yakuza/6.webp
- src: /assets/images/ai-art/yakuza/6.webp
aspectRatio: 1
---

10
src/content/journal/2007/gtd.mdx
View File

@@ -4,7 +4,7 @@ slug: gtd
author: Stefan Imhoff
date: 2007-11-24
description: "I’ve been working with GTD (Getting Things Done) for 1.5 years: An Introduction to Organization and Self-Management with GTD."
cover: /images/cover/gtd.webp
cover: /assets/images/cover/gtd.webp
tags: ["productivity", "self-improvement", "book", "minimalism"]
---
@@ -22,8 +22,8 @@ In any case, I think that one _gets_ the everyday madness governed by Allen’s
## The GTD Basics
<BasicImage
src="/images/posts/gtd-before.webp"
<Image
src="/assets/images/posts/gtd-before.webp"
alt="My desk before"
caption="This is what the inbox looked like before I sorted all loose ends"
/>
@@ -44,8 +44,8 @@ Tasks can be delegated to other people or planned for certain times. If you have
## GTD in Everyday Life
<BasicImage
src="/images/posts/gtd-after.webp"
<Image
src="/assets/images/posts/gtd-after.webp"
alt="My desk afterward"
caption="This is what the inbox looked like after sorting all loose ends"
/>

2
src/content/journal/2007/japanese-colors.mdx
View File

@@ -4,7 +4,7 @@ slug: japanese-colors
author: Stefan Imhoff
date: 2007-12-08
description: Traditional, Japanese colors as a color palette for Photoshop and Illustrator to download (FREE).
cover: /images/cover/japanese-colors.webp
cover: /assets/images/cover/japanese-colors.webp
tags: ["design", "download", "book", "japan", "recommendation"]
---

10
src/content/journal/2007/koi-design.mdx
View File

@@ -4,7 +4,7 @@ slug: koi-design
author: Stefan Imhoff
date: 2007-06-02
description: Irezumi (Japanese tattooing) is an inspiration for my website and the origin of my design.
cover: /images/cover/design-koi.webp
cover: /assets/images/cover/design-koi.webp
tags: ["design", "book", "japan", "personal"]
---
@@ -42,8 +42,8 @@ In addition to gods, mythical creatures, and demons, the most important source o
## Water Margin
<BasicImage
src="/images/posts/suikoden-luta.webp"
<Image
src="/assets/images/posts/suikoden-luta.webp"
alt="Woodblock print of a Chinese Monk"
caption="Motif from Suikoden by Kuniyoshi: Captain Lu-Ta, the flowery monk, smashes a tree with a blow to impress a gang of good-for-nothings."
/>
@@ -58,9 +58,9 @@ The motif I chose for my design shows a koi (carp) trying to swim up the heavy r
Legend has it that a koi, who manages to swim up the magical waterfalls, transforms into a dragon. After another 500 years, he turns into a horned dragon and after 1000 years into a winged dragon. Thus, the next design should show a dragon.
<BasicImage
<Image
size="wide"
src="/images/posts/design-koi.webp"
src="/assets/images/posts/design-koi.webp"
alt="Design: Digital Irezumi"
caption="Koi floating up the Longmen Waterfalls. It contains typical elements such as leaves, flowers, and wave crests (AI upscaled from a pixel image)."
/>

2
src/content/journal/2009/git.mdx
View File

@@ -4,7 +4,7 @@ slug: git
author: Stefan Imhoff
date: 2009-02-10
description: An extensive collection of links to tutorials, tutorials, screencasts, and documentation on Git.
cover: /images/cover/git.webp
cover: /assets/images/cover/git.webp
tags: ["code"]
---

20
src/content/journal/2009/gitweb-theme.mdx
View File

@@ -4,7 +4,7 @@ slug: gitweb-theme
author: Stefan Imhoff
date: 2009-02-19
description: My popular theme for GitWeb to download for free. Now GitWeb looks more similar to GitHub and is not ugly anymore.
cover: /images/cover/gitweb-theme.webp
cover: /assets/images/cover/gitweb-theme.webp
tags: ["download", "design"]
---
@@ -18,28 +18,28 @@ The exact installation instructions are included in the package on GitHub.
## Screenshots
<BasicImage
<Image
caption="Project View"
src="/images/posts/gitweb-theme-projects.webp"
src="/assets/images/posts/gitweb-theme-projects.webp"
alt="Project View"
/>
<BasicImage src="/images/posts/gitweb-theme-summary.webp" alt="Summary" />
<Image src="/assets/images/posts/gitweb-theme-summary.webp" alt="Summary" />
<BasicImage caption="Summary" src="/images/posts/gitweb-theme-commit.webp" alt="Commit" />
<Image caption="Summary" src="/assets/images/posts/gitweb-theme-commit.webp" alt="Commit" />
<BasicImage
<Image
caption="Commit DIFF"
src="/images/posts/gitweb-theme-commitdiff.webp"
src="/assets/images/posts/gitweb-theme-commitdiff.webp"
alt="Commit DIFF"
/>
<BasicImage src="/images/posts/gitweb-theme-log.webp" alt="Log" />
<Image src="/assets/images/posts/gitweb-theme-log.webp" alt="Log" />
<BasicImage
<Image
caption="Log"
caption="Tree View"
src="/images/posts/gitweb-theme-tree.webp"
src="/assets/images/posts/gitweb-theme-tree.webp"
alt="Tree View"
/>

2
src/content/journal/2009/home-documentary.mdx
View File

@@ -4,7 +4,7 @@ slug: home-documentary
author: Stefan Imhoff
date: 2009-06-15
description: "Recommended Film: View the nature documentation HOME by Yann Arthus-Bertrand for FREE. Beautiful aerial photographs of the world. The creation of the earth, life, destruction by man and hope and ways out."
cover: /images/cover/home-documentary.webp
cover: /assets/images/cover/home-documentary.webp
tags: ["film", "recommendation"]
---

2
src/content/journal/2010/rework.mdx
View File

@@ -4,7 +4,7 @@ slug: rework
author: Stefan Imhoff
date: 2010-04-27
description: "Reading recommendation for the new book from Basecamp: Rework. A short, well-illustrated book on product development and how to run a company that has not been wrongly put on the bestseller list for a long time and has been praised to the highest standards."
cover: /images/cover/rework.webp
cover: /assets/images/cover/rework.webp
tags: ["book", "recommendation"]
---

6
src/content/journal/2010/vim.mdx
View File

@@ -4,7 +4,7 @@ slug: vim
author: Stefan Imhoff
date: 2010-10-29
description: How I became a convinced Vim disciple, why Vim is an ingenious editor, and how to best practice if you want to learn Vim.
cover: /images/cover/vim.webp
cover: /assets/images/cover/vim.webp
tags: ["code"]
---
@@ -12,9 +12,9 @@ tags: ["code"]
Something similar was said by the superhero _He-Man_ from the 80s TV show _Masters of the Universe_ before he got his superpowers. And Vim exists about as long as the TV show: **22 years**. And the older Vi, on which Vim is based, has been around even longer than I live. If a _simple_ text editor exists for a long time and gives these _powers_, it has to be something special about it.
<BasicImage
<Image
caption="Vim - cleanser and polisher. Brightens the home and the age."
src="/images/posts/vim-vintage.webp"
src="/assets/images/posts/vim-vintage.webp"
alt="Vim, Reinigungs- und Poliermittel."
/>

2
src/content/journal/2010/webstandards-magazine-django.mdx
View File

@@ -4,7 +4,7 @@ slug: webstandards-magazine-django
author: Stefan Imhoff
date: 2010-09-21
description: I was asked to write a multipage article about Django in Webstandards-Magazin. I wrote about what I appreciate about Django and why I use it.
cover: /images/cover/webstandards-magazine-django.webp
cover: /assets/images/cover/webstandards-magazine-django.webp
tags: ["code", "personal"]
---

2
src/content/journal/2011/decodeunicode.mdx
View File

@@ -4,7 +4,7 @@ slug: decodeunicode
author: Stefan Imhoff
date: 2011-06-02
description: "Book recommendation for those who are interested in writing and characters: 'decodeunicode - Die Schriftzeichen der Welt'. 656 pages thick, almost 2 kg heavy, and with all 109,242 current characters of the Unicode character set."
cover: /images/cover/book-decodeunicode.webp
cover: /assets/images/cover/book-decodeunicode.webp
tags: ["book", "design", "recommendation"]
---

2
src/content/journal/2014/gulp-tutorial-1-intro-setup.mdx
View File

@@ -4,7 +4,7 @@ slug: gulp-tutorial-1-intro-setup
author: Stefan Imhoff
date: 2014-10-18
description: "The ultimate tutorial and guide for Gulp.js: The first part of my series on Gulp.js. What is Gulp.js? Why use it? And how to install Gulp and Jekyll."
cover: /images/cover/gulp-1.webp
cover: /assets/images/cover/gulp-1.webp
tags: ["code"]
series: gulp
---

2
src/content/journal/2014/gulp-tutorial-10-generating-sprites.mdx
View File

@@ -4,7 +4,7 @@ slug: gulp-tutorial-10-generating-sprites
author: Stefan Imhoff
date: 2014-10-27
description: "The ultimate tutorial and guide for Gulp.js: How to generate image sprite maps with Spritesmith."
cover: /images/cover/gulp-10.webp
cover: /assets/images/cover/gulp-10.webp
tags: ["code"]
series: gulp
---

2
src/content/journal/2014/gulp-tutorial-11-production-build-server-and-jekyll.mdx
View File

@@ -4,7 +4,7 @@ slug: gulp-tutorial-11-production-build-server-and-jekyll
author: Stefan Imhoff
date: 2014-10-28
description: "The ultimate tutorial and guide for Gulp.js: How to write the production task for Jekyll and BrowserSync."
cover: /images/cover/gulp-11.webp
cover: /assets/images/cover/gulp-11.webp
tags: ["code"]
series: gulp
---

2
src/content/journal/2014/gulp-tutorial-12-optimize-css-javascript-images-and-html.mdx
View File

@@ -4,7 +4,7 @@ slug: gulp-tutorial-12-optimize-css-javascript-images-and-html
author: Stefan Imhoff
date: 2014-10-29
description: "The ultimate tutorial and guide for Gulp.js: How to optimize CSS, JavaScript, images, and HTML to speed up your website."
cover: /images/cover/gulp-12.webp
cover: /assets/images/cover/gulp-12.webp
tags: ["code"]
series: gulp
---

2
src/content/journal/2014/gulp-tutorial-13-revisioning.mdx
View File

@@ -4,7 +4,7 @@ slug: gulp-tutorial-13-revisioning
author: Stefan Imhoff
date: 2014-10-30
description: "The ultimate tutorial and guide for Gulp.js: How to use revisioning to allow long caching of your assets and replace them with hashed file names, that can be cache-busted."
cover: /images/cover/gulp-13.webp
cover: /assets/images/cover/gulp-13.webp
tags: ["code"]
series: gulp
---

2
src/content/journal/2014/gulp-tutorial-14-deploying-the-website.mdx
View File

@@ -4,7 +4,7 @@ slug: gulp-tutorial-14-deploying-the-website
author: Stefan Imhoff
date: 2014-10-31
description: "The ultimate tutorial and guide for Gulp.js: How to deploy your website with rsync to your server."
cover: /images/cover/gulp-14.webp
cover: /assets/images/cover/gulp-14.webp
tags: ["code"]
series: gulp
---

2
src/content/journal/2014/gulp-tutorial-15-performance-improvements-webp-gzip.mdx
View File

@@ -4,7 +4,7 @@ slug: gulp-tutorial-15-performance-improvements-webp-gzip
author: Stefan Imhoff
date: 2014-12-21
description: "The ultimate tutorial and guide for Gulp.js: How to improve the speed and performance of your website with WebP and Gzip."
cover: /images/cover/gulp-15.webp
cover: /assets/images/cover/gulp-15.webp
tags: ["code"]
series: gulp
---

2
src/content/journal/2014/gulp-tutorial-16-postcss.mdx
View File

@@ -4,7 +4,7 @@ slug: gulp-tutorial-16-postcss
author: Stefan Imhoff
date: 2014-12-30
description: "The ultimate tutorial and guide for Gulp.js: How to use PostCSS with Gulp to process CSS and how to lint your CSS files with Stylelint."
cover: /images/cover/gulp-16.webp
cover: /assets/images/cover/gulp-16.webp
tags: ["code"]
series: gulp
---

4
src/content/journal/2014/gulp-tutorial-2-development-server-browsersync-configuration.mdx
View File

@@ -4,7 +4,7 @@ slug: gulp-tutorial-2-development-server-browsersync-configuration
author: Stefan Imhoff
date: 2014-10-19
description: "The ultimate tutorial and guide for Gulp.js: How to set up a development server with BrowserSync."
cover: /images/cover/gulp-2.webp
cover: /assets/images/cover/gulp-2.webp
tags: ["code"]
series: gulp
---
@@ -126,7 +126,7 @@ module.exports = {
files: [
developmentAssets + "/css/*.css",
developmentAssets + "/js/*.js",
developmentAssets + "/images/**",
developmentAssets + "/assets/images/**",
developmentAssets + "/fonts/*",
],
},

2
src/content/journal/2014/gulp-tutorial-3-build-clean-jekyll.mdx
View File

@@ -4,7 +4,7 @@ slug: gulp-tutorial-3-build-clean-jekyll
author: Stefan Imhoff
date: 2014-10-20
description: "The ultimate tutorial and guide for Gulp.js: How to write tasks for cleaning files and folders, generating the build and the website with Jekyll."
cover: /images/cover/gulp-3.webp
cover: /assets/images/cover/gulp-3.webp
tags: ["code"]
series: gulp
---

2
src/content/journal/2014/gulp-tutorial-4-css-generation-sass.mdx
View File

@@ -4,7 +4,7 @@ slug: gulp-tutorial-4-css-generation-sass
author: Stefan Imhoff
date: 2014-10-21
description: "The ultimate tutorial and guide for Gulp.js: How to create CSS and Source Maps with Sass and Compass."
cover: /images/cover/gulp-4.webp
cover: /assets/images/cover/gulp-4.webp
tags: ["code"]
series: gulp
---

2
src/content/journal/2014/gulp-tutorial-5-javascripts-browserify.mdx
View File

@@ -4,7 +4,7 @@ slug: gulp-tutorial-5-javascripts-browserify
author: Stefan Imhoff
date: 2014-10-22
description: "The ultimate tutorial and guide for Gulp.js: How to bundle JavaScript files with Browserify and use CommonJS modules to structure and organize your code."
cover: /images/cover/gulp-5.webp
cover: /assets/images/cover/gulp-5.webp
tags: ["code"]
series: gulp
---

2
src/content/journal/2014/gulp-tutorial-6-images-vector-fonts.mdx
View File

@@ -4,7 +4,7 @@ slug: gulp-tutorial-6-images-vector-fonts
author: Stefan Imhoff
date: 2014-10-23
description: "The ultimate tutorial and guide for Gulp.js: How to move images and generate vector fonts from SVG."
cover: /images/cover/gulp-6.webp
cover: /assets/images/cover/gulp-6.webp
tags: ["code"]
series: gulp
---

2
src/content/journal/2014/gulp-tutorial-7-base64.mdx
View File

@@ -4,7 +4,7 @@ slug: gulp-tutorial-7-base64
author: Stefan Imhoff
date: 2014-10-24
description: "The ultimate tutorial and guide for Gulp.js: How to replace small images with base64 encoded images."
cover: /images/cover/gulp-7.webp
cover: /assets/images/cover/gulp-7.webp
tags: ["code"]
series: gulp
---

2
src/content/journal/2014/gulp-tutorial-8-watch.mdx
View File

@@ -4,7 +4,7 @@ slug: gulp-tutorial-8-watch
author: Stefan Imhoff
date: 2014-10-25
description: "The ultimate tutorial and guide for Gulp.js: How to set up a watch task, which triggers other tasks on file changes."
cover: /images/cover/gulp-8.webp
cover: /assets/images/cover/gulp-8.webp
tags: ["code"]
series: gulp
---

2
src/content/journal/2014/gulp-tutorial-9-linting-scss-and-javascript.mdx
View File

@@ -4,7 +4,7 @@ slug: gulp-tutorial-9-linting-scss-and-javascript
author: Stefan Imhoff
date: 2014-10-26
description: "The ultimate tutorial and guide for Gulp.js: How to check the syntax of SCSS and JavaScript files."
cover: /images/cover/gulp-9.webp
cover: /assets/images/cover/gulp-9.webp
tags: ["code"]
series: gulp
---

2
src/content/journal/2014/john-seymour-books.mdx
View File

@@ -4,7 +4,7 @@ slug: john-seymour-books
author: Stefan Imhoff
date: 2014-08-03
description: On John Seymour’s fantastic, beautifully illustrated books on self-sufficiency, agriculture, and crafts. The optimal equipment for an upcoming zombie apocalypse.
cover: /images/cover/john-seymour.webp
cover: /assets/images/cover/john-seymour.webp
tags: ["book", "recommendation", "self-improvement"]
---

10
src/content/journal/2014/logo-design.mdx
View File

@@ -4,7 +4,7 @@ slug: logo-design
author: Stefan Imhoff
date: 2014-04-18
description: "Insight into the design of my new logo and Rakkan: idea, research, and a short digression on the Chinese script."
cover: /images/cover/logo-design.webp
cover: /assets/images/cover/logo-design.webp
tags: ["design", "japan", "personal"]
---
@@ -18,9 +18,9 @@ It was clear to me early that I wanted to use a _Rakkan_ instead of a modern log
A Rakkan (or Hanko) is called in Japan a seal, which is carved in stone, representing the signature of an artist and is stamped under the artwork, and thus works as a signature.
<BasicImage
<Image
caption="Imprint of my Rakkan below a symbol for 忍 (Shinobi) written by me."
src="/images/posts/rakkan.webp"
src="/assets/images/posts/rakkan.webp"
alt="Rakkan written ink below symbol"
/>
@@ -66,9 +66,9 @@ A seal can be created in two different variants: **Yin** or **Yang** (☯). In t
First, I made numerous pencil drawings, first of individual characters that I liked, and later of combinations. I wondered how an artist would carve a traditional stamp, how the letters touch and support to give the seal the necessary stability.
<BasicImage
<Image
caption="Moleskine with pencil drawings of characters"
src="/images/posts/moleskine-pencil-drawings.webp"
src="/assets/images/posts/moleskine-pencil-drawings.webp"
alt="Moleskine with pencil drawings of characters"
/>

2
src/content/journal/2014/website-typography.mdx
View File

@@ -4,7 +4,7 @@ slug: website-typography
author: Stefan Imhoff
date: 2014-06-19
description: "About the typography of my new website: scale, font, vertical rhythm, font size, font size, and sentence width."
cover: /images/cover/website-typography.webp
cover: /assets/images/cover/website-typography.webp
tags: ["design", "code", "book", "personal"]
---

10
src/content/journal/2015/calisthenics.mdx
View File

@@ -4,7 +4,7 @@ slug: calisthenics
author: Stefan Imhoff
date: 2015-05-19
description: Learning Body Weight Training is possible for everybody. It’s free, you can do it anywhere, you need no gym or expensive equipment to train, and you can improve constantly.
cover: /images/cover/calisthenics.webp
cover: /assets/images/cover/calisthenics.webp
tags: ["self-improvement"]
---
@@ -24,9 +24,9 @@ And reading more about these extreme sports, I found out they come with the dang
Other names for body weight training are **Street Workout**, **Ghetto Fitness**, or **Calisthenics**. The word **Calisthenics** comes from the Greek words καλός (kalos), which means **beautiful** and σθένος (sthenos), which means **strength**.
<BasicImage
<Image
caption="Arm Elbow Lever on Beer Bottles"
src="/images/posts/calisthenics-arm-elbow-lever.webp"
src="/assets/images/posts/calisthenics-arm-elbow-lever.webp"
alt="Arm Elbow Lever on Beer Bottles"
/>
@@ -60,9 +60,9 @@ To reach a big goal like doing a **Human Flag** needs to be broken into parts: B
I keep track of my workouts in a diary and can see the training days in a calendar, to see if I missed too often.
<BasicImage
<Image
caption="If a father of three can do it, what is your excuse?"
src="/images/posts/calisthenics-best-dad-ever.webp"
src="/assets/images/posts/calisthenics-best-dad-ever.webp"
alt="Man doing a Pull-Up with 3 children as additional weight"
/>

2
src/content/journal/2015/human-documentary.mdx
View File

@@ -4,7 +4,7 @@ slug: human-documentary
author: Stefan Imhoff
date: 2015-09-29
description: Human, the new movie by Yann Arthus-Bertrand is a moving film made of real-life stories from more than 2000 women and men in 60 countries mixed with stunning aerial photography and ground photography.
cover: /images/cover/human-documentary.webp
cover: /assets/images/cover/human-documentary.webp
tags: ["film", "recommendation"]
---

2
src/content/journal/2015/motivational-video.mdx
View File

@@ -4,7 +4,7 @@ slug: motivational-video
author: Stefan Imhoff
date: 2015-08-14
description: Last week I found an inspirational film on YouTube, focusing on Motivation. But because it was poorly quoted, I tried to find the quotes and resolve the issue.
cover: /images/cover/motivational-video.webp
cover: /assets/images/cover/motivational-video.webp
tags: ["film"]
---

2
src/content/journal/2016/japanese-netflix-tv-show-underwear.mdx
View File

@@ -4,7 +4,7 @@ slug: japanese-netflix-tv-show-underwear
author: Stefan Imhoff
date: 2016-02-12
description: "Netflix released a new Japanese TV Show: Underwear (Atelier). I recommend this brilliant work about a young girl starting in an exclusive custom tailoring lingerie store in Tokyo."
cover: /images/cover/netflix-underwear.webp
cover: /assets/images/cover/netflix-underwear.webp
tags: ["film", "japan", "recommendation"]
---

2
src/content/journal/2017/attention.mdx
View File

@@ -4,7 +4,7 @@ slug: attention
author: Stefan Imhoff
date: 2017-11-03T08:00:00+01:00
description: A guide on how to get your attention back in the age of constant distraction.
cover: /images/cover/attention.webp
cover: /assets/images/cover/attention.webp
tags: ["self-improvement", "technology"]
---

6
src/content/journal/2017/gitbook.mdx
View File

@@ -4,7 +4,7 @@ slug: gitbook
author: Stefan Imhoff
date: 2017-06-27
description: I finished writing my first book in GitBook. I worked on it for the last six months, and it’s available to read online, as PDF, EPUB, and Mobi.
cover: /images/cover/gitbook.webp
cover: /assets/images/cover/gitbook.webp
tags: ["book", "writing"]
---
@@ -56,11 +56,11 @@ GitBook is not only good for books but to write documentation for anything.
## What’s in my book?
<BasicImage
<Image
alt="GitBook: kogakure"
caption="GitBook: kogakure"
href="https://www.kogakure.de/"
src="/images/posts/gitbook-kogakure.webp"
src="/assets/images/posts/gitbook-kogakure.webp"
/>
First thing: The book is available in **German** only 😒 (the [website](https://www.kogakure.de/en) is now in English available). I reviewed every sentence of the website for the book and changed parts of it.

18
src/content/journal/2017/minimalism.mdx
View File

@@ -5,7 +5,7 @@ author: Stefan Imhoff
date: 2017-06-07
featured: true
description: Minimalism is currently popular, but Minimalism is hard to understand, and many misconceptions can be found. This essay carries my thoughts on Minimalism and my history with it.
cover: /images/cover/minimalism.webp
cover: /assets/images/cover/minimalism.webp
tags: ["self-improvement", "book", "minimalism"]
---
@@ -27,9 +27,9 @@ Minimalism is **not glamorous**, it’s **humble** and a result of **deep mindfu
Critics of Minimalism describe it as cold, empty, and without personality. People following Minimalism would deny their past or prove their inability to connect to other people. It would be a hopeless attempt to control life, as Linda Tutmann described Minimalism in her ZEIT article [Alles mein](https://www.zeit.de/2017/06/besitz-minimalismus-dinge-erinnerungen-besitztum).
<BasicImage
<Image
caption="Sorry, it doesn’t look cold, empty, and without personality. I failed as a Minimalist."
src="/images/posts/minimalism-office.webp"
src="/assets/images/posts/minimalism-office.webp"
alt="My Minimalist home office"
/>
@@ -85,9 +85,9 @@ The next step was reading David Allen's book <cite><ProductLink asin="0143126563
This way I got rid of many things for the first time.
<BasicImage
<Image
caption="My office before cleaning up"
src="/images/posts/gtd-before.webp"
src="/assets/images/posts/gtd-before.webp"
alt="My office before cleaning up"
/>
@@ -101,9 +101,9 @@ In the last few years I changed my ideas of how to live in many ways:
I cleaned my whole flat of things I didn’t like or needed anymore. It took me three days to clean my basement from packages, cables, and technical waste, which I acquired over 10 years.
<BasicImage
<Image
caption="Cleanup of my cellar"
src="/images/posts/minimalism-cleanup-cellar.webp"
src="/assets/images/posts/minimalism-cleanup-cellar.webp"
alt="Cleanup of my cellar"
/>
@@ -129,9 +129,9 @@ I switched to green energy a few years ago, buy organic food if available, and t
When I was young, I always wanted a big, big house (preferably on a remote private island). But living in a small space is helpful for a Minimalist. It forces you to make decisions in your interest. I live on 51 m², and this is enough space for 1-2 people. That’s why I think if I need to buy something. I like the concept of small space living, but I’m happy to have a separate bedroom. This is much more relaxing, because of the different temperatures in the living and sleeping area. And I do not keep electronics in my bedroom.
<BasicImage
<Image
caption="My Minimalist living room"
src="/images/posts/minimalism-living.webp"
src="/assets/images/posts/minimalism-living.webp"
alt="My Minimalist living room"
/>

2
src/content/journal/2018/morning-routine.mdx
View File

@@ -5,7 +5,7 @@ date: 2018-09-08
updated: 2025-02-10
author: Stefan Imhoff
description: On the advantages of building yourself a morning routine and the details of my morning routine.
cover: /images/cover/morning-routine.webp
cover: /assets/images/cover/morning-routine.webp
tags: ["self-improvement", "book", "personal"]
---

2
src/content/journal/2018/storing-information.mdx
View File

@@ -4,7 +4,7 @@ slug: storing-information
date: 2018-10-03
author: Stefan Imhoff
description: How I save and process information, to find it again quickly and store it to not lose it again.
cover: /images/cover/storing-information.webp
cover: /assets/images/cover/storing-information.webp
tags: ["self-improvement"]
---

2
src/content/journal/2020/101-things-you-can-do.mdx
View File

@@ -4,7 +4,7 @@ slug: 101-things-you-can-do
date: 2020-03-28
author: Stefan Imhoff
description: The novel Coronavirus SARS-CoV-2 which can lead to the sickness of COVID-19 brought many countries into partial or total lockdown. Many people are not used to staying inside for a long time. As an introvert, I like it inside. To help to make it easier to stay inside, I created a list of 101 things you can do until this crisis is over.
cover: /images/cover/101-things-you-can-do.webp
cover: /assets/images/cover/101-things-you-can-do.webp
tags: ["recommendation", "self-improvement"]
---

2
src/content/journal/2020/apps-tools-services.mdx
View File

@@ -5,7 +5,7 @@ date: 2020-04-18T10:00:00+02:00
updated: 2025-01-06
author: Stefan Imhoff
description: All the apps, tools, and services I use on my iPhone, iPad, Apple Watch, Apple TV, and Mac.
cover: /images/cover/apps-tools-services.webp
cover: /assets/images/cover/apps-tools-services.webp
tags: ["productivity", "software"]
---

2
src/content/journal/2020/best-of-2020.mdx
View File

@@ -4,7 +4,7 @@ slug: best-of-2020
date: 2020-12-22
author: Stefan Imhoff
description: A distilled collection of my favorite topics, articles, videos, podcasts, people, or other things in 2020.
cover: /images/cover/best-of-2020.webp
cover: /assets/images/cover/best-of-2020.webp
tags: ["recommendation"]
---

2
src/content/journal/2020/everyday-carry.mdx
View File

@@ -5,7 +5,7 @@ date: 2020-03-14
updated: 2023-06-09
author: Stefan Imhoff
description: In this essay, I show my Everyday Carries and explain why I carry them.
cover: /images/cover/everyday-carry.webp
cover: /assets/images/cover/everyday-carry.webp
tags: ["self-improvement", "technology", "minimalism", "personal"]
---

44
src/content/journal/2020/new-website-2020-design.mdx
View File

@@ -4,7 +4,7 @@ date: 2020-07-21
slug: new-website-2020-design
author: Stefan Imhoff
description: This is the second of three parts in a series of essays about the process of creating my new website. This one shows the design process for my website.
cover: /images/cover/new-website-2020-design.webp
cover: /assets/images/cover/new-website-2020-design.webp
tags: ["design", "book", "japan", "personal"]
series: new-website-2020
---
@@ -58,10 +58,10 @@ I like in particular the italic font with the beautiful loops and curves. I pick
Next, I picked a Typographic Scale. A scale is a way to pick font sizes based on a fixed set of rules, for example, a specific harmonic number or formula to create a harmonic visual image. I decided to go with the [golden section](https://www.modularscale.com/?1&em&1.618) (ratio 1:1.618).
<BasicImage
<Image
caption="Typographic Scale"
size="wide"
src="/images/posts/typographic-scale.webp"
src="/assets/images/posts/typographic-scale.webp"
alt="Typographic Scale"
/>
@@ -157,23 +157,23 @@ I didn’t invert colors but needed to make sure to create good contrast, which
Next, I moved my focus to the logo. A logo is always a difficult topic. Do I need one? Why? What should it be? My initials? An image? It’s easy to create a cheesy logo. I used a _rakkan_ (落款), a Japanese artist seal, for at least 10 years. An artist carved it for me into stone, using the oldest Chinese font, the _small seal script_, introduced by the Chinese Emperor _Qin Shi Huang_, 2200 years ago. It gets pressed into red ink and then applied to the artwork as the signature. I choose the characters of my internet pseudonym _kogakure_ (木隠), meaning “hidden behind leaves”.
<BasicImage caption="Rakkan" src="/images/posts/rakkan.webp" alt="Rakkan" />
<Image caption="Rakkan" src="/assets/images/posts/rakkan.webp" alt="Rakkan" />
I created a few sketches of other possible logos, but eventually, I discarded them all and moved back to my _rakkan_. Likewise, I decided to simplify the vector form and reduce the number of points and make it more performant and easier to recognize in smaller sizes.
<BasicImage
<Image
caption="Logo Scribbles"
size="wide"
src="/images/posts/logo-skribbles.webp"
src="/assets/images/posts/logo-skribbles.webp"
alt="Logo Scribbles"
/>
But after finishing the logo, I decided in the interest of simplicity and austerity that there is no reason to use a logo at all. I even removed my name from the header, as it’s obvious on what website the visitor is. My name is written enough around the site. The logo will appear in parts of the website, for example as an icon for the app, or on other locations, a logo fits.
<BasicImage
<Image
caption="Rakkan Logo"
size="wide"
src="/images/posts/rakkan-logo.webp"
src="/assets/images/posts/rakkan-logo.webp"
alt="Rakkan Logo"
/>
@@ -181,10 +181,10 @@ But after finishing the logo, I decided in the interest of simplicity and auster
Early on I got obsessed with the [Golden Canon Grid](https://youtu.be/fWfD0EfiXcE) and my early designs used a complicated and sophisticated version of it.
<BasicImage
<Image
caption="Golden Canon Grid"
size="wide"
src="/images/posts/golden-canon-grid.webp"
src="/assets/images/posts/golden-canon-grid.webp"
alt="Golden Canon Grid"
/>
@@ -222,17 +222,17 @@ As he shows in the fantastic free video, [Aaron Draplin Takes On a Logo Design C
I followed this technique on all my designs and created dozens of variations, sometimes entire pages, sometimes a small detail as the footer or a meta section.
<BasicImage
<Image
caption="All Artboards of the base design"
size="fullsize"
src="/images/posts/base-design.webp"
src="/assets/images/posts/base-design.webp"
alt="All Artboards of the base design"
/>
<BasicImage
<Image
caption="Variants of the Meta section"
size="fullsize"
src="/images/posts/meta-section-design.webp"
src="/assets/images/posts/meta-section-design.webp"
alt="Variants of the Meta section"
/>
@@ -240,35 +240,35 @@ Designing was the part that brought the most fun to me. Designing is like a conc
I started designing the blog detail page headline and moved out from there, creating text, header, footer, and small details.
<BasicImage
<Image
caption="About Section"
size="fullsize"
src="/images/posts/about-design.webp"
src="/assets/images/posts/about-design.webp"
alt="About Section"
/>
Then I moved into color variations for the pages. I designed error pages, navigation, special pages, and the homepage last. I didn’t design every detail, but quickly moved from idea to idea, leaving behind a mess of unnamed layers and incomplete or outdated ideas.
<BasicImage
<Image
caption="Color Variants"
size="fullsize"
src="/images/posts/color-variants-design.webp"
src="/assets/images/posts/color-variants-design.webp"
alt="Color Variants"
/>
I created a giant design for all layout variations I wanted to support on a page (e.g., the combination of an image and a text). I moved quickly to [CodePen](https://codepen.io/) to create prototypes for these variations to validate my ideas where feasible. You can see all my prototypes on my CodePen account.
<BasicImage
<Image
caption="Homepage"
size="fullsize"
src="/images/posts/homepage-design.webp"
src="/assets/images/posts/homepage-design.webp"
alt="Homepage"
/>
<BasicImage
<Image
caption="Haiku Section"
size="fullsize"
src="/images/posts/haiku-design.webp"
src="/assets/images/posts/haiku-design.webp"
alt="Haiku Section"
/>

2
src/content/journal/2020/new-website-2020-development.mdx
View File

@@ -4,7 +4,7 @@ slug: new-website-2020-development
date: 2020-07-28
author: Stefan Imhoff
description: This is the last of three parts in a series of essays about the process of creating my new website. This one shows the development process for my website.
cover: /images/cover/new-website-2020-development.webp
cover: /assets/images/cover/new-website-2020-development.webp
tags: ["code", "personal"]
series: new-website-2020
---

2
src/content/journal/2020/new-website-2020-inspiration.mdx
View File

@@ -4,7 +4,7 @@ slug: new-website-2020-inspiration
date: 2020-07-14
author: Stefan Imhoff
description: This is the first of three parts in a series of essays about the process of creating my new website. This one has a look into the inspiration for my website.
cover: /images/cover/new-website-2020-inspiration.webp
cover: /assets/images/cover/new-website-2020-inspiration.webp
tags: ["design", "book", "japan", "personal"]
series: new-website-2020
---

16
src/content/journal/2020/new-website-2020.mdx
View File

@@ -4,7 +4,7 @@ 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: /images/cover/new-website-2020.webp
cover: /assets/images/cover/new-website-2020.webp
tags: ["code", "design", "japan", "personal"]
series: new-website-2020
---
@@ -13,15 +13,15 @@ Finally, after **3 years** with **250 hours** of work, I finished my longest-run
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).
<BasicImage
<Image
caption="Light Version Homepage"
src="/images/posts/homepage-light.webp"
src="/assets/images/posts/homepage-light.webp"
alt="Light Version Homepage"
/>
<BasicImage
<Image
caption="Dark Version Homepage"
src="/images/posts/homepage-dark.webp"
src="/assets/images/posts/homepage-dark.webp"
alt="Dark Version Homepage"
/>
@@ -47,7 +47,7 @@ For the first time, the website has a [Projects](/projects/) section showing my
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.
<BasicImage caption="Haiku" src="/images/posts/haiku.webp" alt="Haiku" />
<Image caption="Haiku" src="/assets/images/posts/haiku.webp" alt="Haiku" />
### Sketchnotes
@@ -57,9 +57,9 @@ I had a collection of my Sketchnotes hosted on a subdomain on Tumblr and wanted
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.
<BasicImage
<Image
caption="The Traditional Colors of Japan"
src="/images/posts/colors-of-japan.webp"
src="/assets/images/posts/colors-of-japan.webp"
alt="The Traditional Colors of Japan"
/>

6
src/content/journal/2020/tools-i-use-for-note-taking.mdx
View File

@@ -5,7 +5,7 @@ date: 2020-09-03
author: Stefan Imhoff
featured: true
description: I started my Zettelkasten in DEVONthink. But since then, I integrated more tools into my workflow. This essay describes which tools I use for my notes and why.
cover: /images/cover/tools-i-use-for-note-taking.webp
cover: /assets/images/cover/tools-i-use-for-note-taking.webp
tags: ["productivity", "technology", "writing", "personal"]
---
@@ -61,10 +61,10 @@ One thing I changed to my previous DEVONthink-_only_ workflow is that I use an *
I use [DEVONthink to Go](https://apps.apple.com/app/devonthink-to-go/id395722470s) to quickly create new notes, and add photos, or other media to my databases. These files get automatically synced with all connected devices and are added to my Macs the next time I open DEVONthink. Additionally, I use the mobile version to search and read the content of my database when I’m not on my computer.
<BasicImage
<Image
caption="Obsidian Graph View of my 3,500 notes"
size="wide"
src="/images/posts/obsidian-graph-view.webp"
src="/assets/images/posts/obsidian-graph-view.webp"
alt="Obsidian Graph View of my notes"
/>

10
src/content/journal/2020/zettelkasten-note-taking-devonthink.mdx
View File

@@ -5,7 +5,7 @@ date: 2020-05-18
author: Stefan Imhoff
featured: true
description: "The way we write notes determines how we think and learn. I was introduced recently to an old method of writing notes: The Zettelkasten method. This essay describes how I implemented the method into my workflow with DEVONthink."
cover: /images/cover/zettelkasten-note-taking-devonthink.webp
cover: /assets/images/cover/zettelkasten-note-taking-devonthink.webp
tags: ["productivity", "writing"]
---
@@ -128,9 +128,9 @@ Originally, I had the tags included in the note, but I discarded the idea, becau
One of the best features of DEVONthink is its fantastic sorter. It can be used as a menu bar item or a floating index tab, it can be triggered with various shortcuts. It allows capturing notes in many possible formats. Additionally, audio, video, screenshots, and websites. The latter one is powerful and able to strip all clutter and keep text and images or convert the content to Markdown, save it as HTML, rich text, pure text, PDF, or web archive.
<BasicImage
<Image
caption="The DEVONthink sorter to capture content quickly"
src="/images/posts/devonthink-sorter.webp"
src="/assets/images/posts/devonthink-sorter.webp"
alt="The DEVONthink Sorter"
/>
@@ -194,10 +194,10 @@ I might write notes in one of my paper notebooks. Handwriting has plenty of adva
I regularly reserve time to transfer notes, highlights, and quotes from books I’ve read into notes in my Zettelkasten.
<BasicImage
<Image
caption="DEVONthink view on a Markdown document with a sidebar for notes"
size="wide"
src="/images/posts/devonthink-zettelkasten.webp"
src="/assets/images/posts/devonthink-zettelkasten.webp"
alt="My Zettelkasten in DEVONthink"
/>

2
src/content/journal/2021/devonthink-obsidian-for-note-taking.mdx
View File

@@ -4,7 +4,7 @@ slug: devonthink-obsidian-for-note-taking
date: 2021-07-23
author: Stefan Imhoff
description: With the release of the mobile versions of Obsidian, my note-taking workflow with Obsidian and DEVONthink is now even more fun than before.
cover: /images/cover/devonthink-obsidian-for-note-taking.webp
cover: /assets/images/cover/devonthink-obsidian-for-note-taking.webp
tags: ["productivity", "technology", "writing"]
---

4
src/content/journal/2021/how-to-prepare-for-the-worst-case.mdx
View File

@@ -4,7 +4,7 @@ slug: how-to-prepare-for-the-worst-case
date: 2021-11-19
author: Stefan Imhoff
description: When potential dangers to the individual increase due to mismanagement, political incompetency, or tribalism, it’s good to have a plan on how to protect yourself and your family.
cover: /images/cover/how-to-prepare-for-the-worst-case.webp
cover: /assets/images/cover/how-to-prepare-for-the-worst-case.webp
tags: ["recommendation", "self-improvement", "book", "personal"]
---
@@ -287,7 +287,7 @@ Next, I bought a waterproof <ProductLink asin="B08NF9KH46" text="45L Military Ta
And yes, I bought the <ProductLink asin="B085VRYBPH" text="Gadsden flag" /> sticker additionally. It’s the flag used by Libertarians around the world. The snake design and the words "Don’t Tread On Me" is a warning of vigilance and willingness to act in defense against coercion. 😂
<BasicImage caption="Bug Out Bag" src="/images/posts/bug-out-bag.webp" alt="Bug Out Bag" />
<Image caption="Bug Out Bag" src="/assets/images/posts/bug-out-bag.webp" alt="Bug Out Bag" />
[^mooser2021lp]: Barbara Mooser (2021): _Skandal im Netz: Abgeordneter Huber im Twitter-Gewitter_, https://www.sueddeutsche.de/muenchen/ebersberg/falscher-hashtag-skandal-im-netz-abgeordneter-huber-im-twitter-gewitter-1.5388590.

2
src/content/journal/2021/interpretation-if.mdx
View File

@@ -5,7 +5,7 @@ date: 2021-12-13
author: Stefan Imhoff
featured: true
description: A modern interpretation of Rudyard Kipling’s great poem.
cover: /images/cover/interpretation-if.webp
cover: /assets/images/cover/interpretation-if.webp
tags: ["poetry"]
series: kipling-poems
---

6
src/content/journal/2021/interpretation-the-gods-of-the-copybook-headings.mdx
View File

@@ -4,7 +4,7 @@ slug: interpretation-the-gods-of-the-copybook-headings
date: 2021-06-12
author: Stefan Imhoff
description: A modern interpretation of Rudyard Kipling’s great poem.
cover: /images/cover/copybook-headings.webp
cover: /assets/images/cover/copybook-headings.webp
featured: true
tags: ["poetry", "politics", "philosophy"]
series: kipling-poems
@@ -30,9 +30,9 @@ The poem is his warning.
## Copybook Headings
<BasicImage
<Image
caption="A page from a 19th-century copybook, in which the printed headings have been copied. The homily is paraphrased from a 17th-century sermon of Isaac Barrow, Against Detraction — “Good nature, like a bee, collects honey from every herb. Ill nature, like a spider, sucks poison from the flowers.”"
src="/images/posts/copybook-headings.webp"
src="/assets/images/posts/copybook-headings.webp"
alt="A page from a 19th-century copybook"
/>

2
src/content/journal/2021/learning-poems.mdx
View File

@@ -4,7 +4,7 @@ slug: learning-poems
date: 2021-08-23
author: Stefan Imhoff
description: Why I started learning poems.
cover: /images/cover/learning-poems.webp
cover: /assets/images/cover/learning-poems.webp
tags: ["poetry", "self-improvement", "book", "personal"]
---

6
src/content/journal/2021/new-website-2021.mdx
View File

@@ -4,16 +4,16 @@ slug: new-website-2021
date: 2021-04-24
author: Stefan Imhoff
description: I relaunched my website, after only 10 months. The previous stack was too slow and work-intensive and prevented me from writing. I picked Eleventy for my new website, the development was quick and fun.
cover: /images/cover/new-website-2021.webp
cover: /assets/images/cover/new-website-2021.webp
tags: ["code", "design", "personal"]
---
My brand-new website is online, using [Eleventy](https://www.11ty.dev/) as its static site generator. The development was quick and fun, and Eleventy gives me a huge amount of flexibility. And it’s fast, [very fast](https://www.zachleat.com/web/build-benchmark/). Burned by my last technology choice, I did this time a performance test _before_ picking the tool. I created 1000 large Markdown pages and let Eleventy render them to HTML. It was done in an astonishing 3.8 seconds.
<BasicImage
<Image
caption="New Website 2021 Homepage"
size="wide"
src="/images/posts/new-website-2021.webp"
src="/assets/images/posts/new-website-2021.webp"
alt="New Website 2021 Homepage"
/>

2
src/content/journal/2021/processing-information-into-notes.mdx
View File

@@ -4,7 +4,7 @@ slug: processing-information-into-notes
date: 2021-05-13
author: Stefan Imhoff
description: My process of extracting information out of books, articles, podcasts, and videos and creating atomic notes.
cover: /images/cover/processing-information-into-notes.webp
cover: /assets/images/cover/processing-information-into-notes.webp
tags: ["productivity", "writing", "recommendation", "book"]
---

2
src/content/journal/2021/the-decentralized-web-1-why-do-we-need-it.mdx
View File

@@ -4,7 +4,7 @@ slug: the-decentralized-web-1-why-do-we-need-it
date: 2021-10-25
author: Stefan Imhoff
description: This is the first part of a three-part series on the Decentralized Web. This part will highlight the dangers looming on the free internet.
cover: /images/cover/decentralized-web-1.webp
cover: /assets/images/cover/decentralized-web-1.webp
tags: ["politics", "philosophy"]
series: decentralized-web
---

2
src/content/journal/2021/the-decentralized-web-2-the-wild-west-web.mdx
View File

@@ -4,7 +4,7 @@ slug: the-decentralized-web-2-the-wild-west-web
date: 2021-11-01
author: Stefan Imhoff
description: This is the second part of a three-part series on the Decentralized Web. This part will show promising examples for the decentralized web.
cover: /images/cover/decentralized-web-2.webp
cover: /assets/images/cover/decentralized-web-2.webp
tags: ["technology"]
series: decentralized-web
---

2
src/content/journal/2021/the-decentralized-web-3-develop-and-publish-a-website.mdx
View File

@@ -4,7 +4,7 @@ slug: the-decentralized-web-3-develop-and-publish-a-website
date: 2021-11-08
author: Stefan Imhoff
description: This is the third part of a three-part series on the Decentralized Web. In this part, we’ll code and release our first decentralized website.
cover: /images/cover/decentralized-web-3.webp
cover: /assets/images/cover/decentralized-web-3.webp
tags: ["code"]
series: decentralized-web
---

2
src/content/journal/2021/the-old-man-on-the-bench.mdx
View File

@@ -4,7 +4,7 @@ slug: the-old-man-on-the-bench
date: 2021-08-31
author: Stefan Imhoff
description: A story about an old man watching for birds.
cover: /images/cover/the-old-man-on-the-bench.webp
cover: /assets/images/cover/the-old-man-on-the-bench.webp
tags: ["philosophy", "personal"]
---

2
src/content/journal/2021/using-readwise-with-obsidian-for-note-talking.mdx
View File

@@ -4,7 +4,7 @@ slug: using-readwise-with-obsidian-for-note-talking
date: 2021-09-14
author: Stefan Imhoff
description: How I started using Readwise to maintain my highlights of various tools for note-taking
cover: /images/cover/using-readwise-with-obsidian-for-note-talking.webp
cover: /assets/images/cover/using-readwise-with-obsidian-for-note-talking.webp
tags: ["productivity", "technology", "recommendation"]
---

21
src/content/journal/2021/web-developer-work-environment-1.mdx
View File

@@ -4,7 +4,7 @@ slug: web-developer-work-environment-1
date: 2021-12-20
author: Stefan Imhoff
description: I decided to re-examine my developer tools and replace some of them with better tools.
cover: /images/cover/web-developer-work-environment-1.webp
cover: /assets/images/cover/web-developer-work-environment-1.webp
tags: ["code", "productivity", "technology"]
series: web-developer-work-environment
---
@@ -45,10 +45,10 @@ My previous dotfiles used a custom script to create symbolic links from inside t
Previously, I used [iTerm2](https://iterm2.com/) as my terminal application, but it is slow and using Vim is sluggish. I heard of [Kitty](https://github.com/kovidgoyal/kitty) and [Alacritty](https://github.com/alacritty/alacritty) and tried both. In the end, I decided to use Kitty as my new terminal application. It is a cross-platform, fast, feature-rich, GPU-based terminal. Additionally, it has built-in support for [Ligatures](<https://grokipedia.com/page/Ligature_(writing)>).
<BasicImage
<Image
caption="Terminal"
size="wide"
src="/images/posts/work-environment-terminal.webp"
src="/assets/images/posts/work-environment-terminal.webp"
alt="Terminal"
/>
@@ -92,7 +92,12 @@ While it is possible to download color themes for each tool, I use [base16-shell
The terminal beginner uses a new terminal window when wanting to run something while a process is in progress. The intermediate terminal user uses the built-in feature of terminals to create new tabs. The advanced terminal user uses the built-in feature to split windows into separate sections. The professional terminal user uses a terminal multiplexer. It allows you to switch between several programs in one terminal and detach them while keeping them running in the background.
<BasicImage caption="TMUX" size="wide" src="/images/posts/work-environment-tmux.webp" alt="TMUX" />
<Image
caption="TMUX"
size="wide"
src="/assets/images/posts/work-environment-tmux.webp"
alt="TMUX"
/>
A co-worker introduced me to this concept 10 years ago. Since then, I use [tmux](https://tmux.github.io/). It allows me to run many work projects and private projects at the same time and switch with a few keystrokes between them.
@@ -118,7 +123,7 @@ This is where useful tools like [z](https://github.com/rupa/z) and [fzf](https:/
[FZF](https://github.com/junegunn/fzf) is my favorite tool on the terminal. It is a general-purpose command-line fuzzy finder that is blazing fast and can be combined with every tool thinkable.
<BasicImage caption="FZF" size="wide" src="/images/posts/work-environment-fzf.webp" alt="FZF" />
<Image caption="FZF" size="wide" src="/assets/images/posts/work-environment-fzf.webp" alt="FZF" />
You can take nearly any output and pass it to FZF to get a list that can be filtered down with a fuzzy search in seconds. It can handle tenths of thousands or even hundreds of thousands of items with a fantastic performance.
@@ -126,7 +131,7 @@ You can take nearly any output and pass it to FZF to get a list that can be filt
Terminals have tools like `cat`, `head`, or `tail` to quickly view content without opening them in a more powerful editor. Cat is the most used tool of this kind, but it doesn’t have plenty of features except showing the content.
<BasicImage caption="Bat" size="wide" src="/images/posts/work-environment-bat.webp" alt="Bat" />
<Image caption="Bat" size="wide" src="/assets/images/posts/work-environment-bat.webp" alt="Bat" />
[Bat](https://github.com/sharkdp/bat) is a content viewer like cat, but with powerful features like syntax highlighting, line numbers, git integration, and paging. I replaced it nearly everywhere where I used `cat` before. It can be combined with FZF to view the code.
@@ -197,10 +202,10 @@ I use [pyenv](https://github.com/pyenv/pyenv) for version management with Python
There are dozens of window managers available, paid or free. Even the built-in macOS split feature might be enough for regular people. But a powerful window manager is crucial for effective working. As a developer, we use two or even more monitors to constantly monitor services, browse the documentation, write code, check email or chat, and browse the internet. The context switches throughout the day, sometimes the Browser is a primary tool (when surfing), and other times it’s a secondary tool (when coding). Moving windows around monitors, resizing and arranging them is therefore important.
<BasicImage
<Image
caption="Hammerspoon"
size="wide"
src="/images/posts/work-environment-hammerspoon.webp"
src="/assets/images/posts/work-environment-hammerspoon.webp"
alt="Hammerspoon"
/>

29
src/content/journal/2021/web-developer-work-environment-2.mdx
View File

@@ -4,7 +4,7 @@ slug: web-developer-work-environment-2
date: 2021-12-23
author: Stefan Imhoff
description: I decided to re-examine my developer tools and replace some of them with better tools.
cover: /images/cover/web-developer-work-environment-2.webp
cover: /assets/images/cover/web-developer-work-environment-2.webp
tags: ["code", "productivity", "technology"]
series: web-developer-work-environment
---
@@ -72,10 +72,10 @@ Neovim has many features inherited from Vim and Vi, but the developers can’t a
Even for installing plugins, you have multiple options: You can download and copy the file manually (nobody does this) or install one of the many plugin managers. I use [vim-plug](https://github.com/kogakure/dotfiles/blob/master/nvim/autocmd.vim). All you need to do is add a line pointing to the plugin to your configuration, reload Vim, and run `:PlugInstall`.
<BasicImage
<Image
caption="Vim Plug"
size="wide"
src="/images/posts/work-environment-plug-install.webp"
src="/assets/images/posts/work-environment-plug-install.webp"
alt="Vim Plug"
/>
@@ -97,10 +97,10 @@ The amount of my plugins is currently 78. I will use the rough categories of my
The built-in LSP client of Neovim is a fantastic feature. But it’s the most complicated part to set up at the moment. Of all the plugins, I struggled the most in setting up LSP. The main plugins to help are [lspconfig](https://github.com/neovim/nvim-lspconfig) and [nvim-lsp-installer](https://github.com/williamboman/nvim-lsp-installer) will help to create configurations for the LSP servers and to install them without additional manual work.
<BasicImage
<Image
caption="LSP Installer"
size="wide"
src="/images/posts/work-environment-lsp-installer.webp"
src="/assets/images/posts/work-environment-lsp-installer.webp"
alt="LSP Installer"
/>
@@ -112,10 +112,10 @@ One of the LSP servers is the diagnostics language server. There is an [unoffici
Vim has a nice completion engine with `omnicomplete`, but with [nvim-cmp](https://github.com/hrsh7th/nvim-cmp) it feels much more modern. The recommended setup includes more plugins by the same author to complete LSP, buffers, path, vim’s command line, and snippets of one of the four biggest snippet plugins.
<BasicImage
<Image
caption="Completion"
size="wide"
src="/images/posts/work-environment-completion.webp"
src="/assets/images/posts/work-environment-completion.webp"
alt="Completion"
/>
@@ -127,10 +127,10 @@ The plugin [lspkind-nvim](https://github.com/onsails/lspkind-nvim) will add pret
[Telescope](https://github.com/nvim-telescope/telescope.nvim) is my favorite plugin. It is a plugin to find, filter, preview, and pick files. It supports built-in dozens of features, for example, files, Vim features, LSP, Git, and many more. But it can be extended to browse [the file system](https://github.com/nvim-telescope/telescope-file-browser.nvim), [fzf](https://github.com/nvim-telescope/telescope-fzf-native.nvim), [recently used files](https://github.com/nvim-telescope/telescope-frecency.nvim), [node_modules](https://github.com/nvim-telescope/telescope-node-modules.nvim), or [browser bookmarks](https://github.com/dhruvmanila/telescope-bookmarks.nvim).
<BasicImage
<Image
caption="Telescope"
size="wide"
src="/images/posts/work-environment-telescope.webp"
src="/assets/images/posts/work-environment-telescope.webp"
alt="Telescope"
/>
@@ -172,7 +172,12 @@ Another thing on the opposite end of the window that many people want is a statu
I like to work distraction-free. In Visual Studio Code there is the Zen mode which will hide all unnecessary things. For Vim, the plugin [Goyo](https://github.com/junegunn/goyo.vim) does a similar thing. It centers the editor and removes all distractions.
<BasicImage caption="Goyo" size="wide" src="/images/posts/work-environment-goyo.webp" alt="Goyo" />
<Image
caption="Goyo"
size="wide"
src="/assets/images/posts/work-environment-goyo.webp"
alt="Goyo"
/>
### Syntax Highlighting
@@ -184,10 +189,10 @@ The only problem I have is support for Styled Components. It’s an [open issue
As a Front-end Web Developer, I love to see my color values visualized. The plugin [colorizer.lua](https://github.com/norcalli/nvim-colorizer.lua) does this fast and pretty.
<BasicImage
<Image
caption="Colorizer"
size="wide"
src="/images/posts/work-environment-colorizer.webp"
src="/assets/images/posts/work-environment-colorizer.webp"
alt="Colorizer"
/>

Some files were not shown because too many files have changed in this diff Show More