feat: add project detail pages

src/components/ColorStack.tsx

@@ -0,0 +1,13 @@
+import type { ComponentChild, FunctionalComponent } from 'preact';
+
+interface Props {
+	children: ComponentChild;
+}
+
+export const ColorStack: FunctionalComponent<Props> = ({ children, ...props }) => {
+	return (
+		<article class="col-start-1 col-end-17 grid grid-cols-books gap-[20px]" {...props}>
+			{children}
+		</article>
+	);
+};

src/components/DisplayBox.tsx

@@ -0,0 +1,22 @@
+import cx from 'classnames';
+
+import type { ComponentChild, FunctionalComponent } from 'preact';
+
+interface Props {
+	class?: string;
+	children: ComponentChild;
+}
+
+export const DisplayBox: FunctionalComponent<Props> = ({
+	class: className,
+	children,
+	...props
+}) => {
+	const classes = cx('[&_img]:bg-gray-100 [&_img]:p-10', className);
+
+	return (
+		<div class={classes} {...props}>
+			{children}
+		</div>
+	);
+};

src/components/FloatingImage.tsx

@@ -0,0 +1,31 @@
+import cx from 'classnames';
+
+import type { FunctionalComponent } from 'preact';
+
+interface Props {
+	alt: string;
+	class?: string;
+	noMargin?: boolean;
+	src: string;
+}
+
+export const FloatingImage: FunctionalComponent<Props> = ({
+	alt,
+	class: className,
+	noMargin,
+	src,
+	...props
+}) => {
+	const classes = cx('image-shadow mbe-10 mbs-0', { 'mbe-0': noMargin }, className);
+
+	return (
+		<div class={classes}>
+			<img
+				alt={alt}
+				class="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"
+				src={src}
+				{...props}
+			/>
+		</div>
+	);
+};

src/components/Picture.astro

@@ -6,6 +6,7 @@ interface Props {
 	alt?: string;
 	aspectRatio?: number | `${number}:${number}`;
 	class?: string;
+	formats?: string[];
 	noMargin?: boolean;
 	sizes?: string;
 	src: string;

src/components/ProjectContainer.astro

@@ -3,7 +3,8 @@ import cx from 'classnames';
 
 import type { CollectionEntry } from 'astro:content';
 
-import { ProjectContent, ProjectImage } from '../components';
+import ProjectContent from '../components/ProjectContent.astro';
+import ProjectImage from '../components/ProjectImage.astro';
 
 interface Props {
 	project: CollectionEntry<'projects'>;
@@ -23,7 +24,7 @@ const classes = cx('col-start-1 col-end-19 grid grid-cols-18', className);
 	{
 		format === '50-start' && (
 			<figure class="col-start-2 col-end-18 m-0 grid grid-cols-2 items-center gap-x-gap gap-y-halfgap">
-				<div class="image-shadow col-start-1 col-end-3 row-start-1 md:col-start-1 md:col-end-2 md:row-start-1">
+				<div class="col-start-1 col-end-3 row-start-1 md:col-start-1 md:col-end-2 md:row-start-1">
 					<ProjectImage project={project} />
 				</div>
 				<figcaption class="col-start-1 col-end-3 row-start-2 text-start md:col-start-2 md:row-start-1">
@@ -35,7 +36,7 @@ const classes = cx('col-start-1 col-end-19 grid grid-cols-18', className);
 	{
 		format === '50-end' && (
 			<figure class="col-start-2 col-end-18 m-0 grid grid-cols-2 items-center gap-x-gap gap-y-halfgap">
-				<div class="image-shadow col-start-1 col-end-3 row-start-1 md:col-start-2 md:row-start-1">
+				<div class="col-start-1 col-end-3 row-start-1 md:col-start-2 md:row-start-1">
 					<ProjectImage project={project} />
 				</div>
 				<figcaption class="col-start-1 col-end-3 row-start-2 text-start md:col-start-1 md:col-end-2 md:row-start-1">
@@ -47,7 +48,7 @@ const classes = cx('col-start-1 col-end-19 grid grid-cols-18', className);
 	{
 		format === '70-start' && (
 			<figure class="col-start-1 col-end-19 row-start-1 grid grid-cols-18 gap-x-gap gap-y-halfgap">
-				<div class="image-shadow col-start-1 col-end-19 grid self-start xl:col-end-13">
+				<div class=" col-start-1 col-end-19 grid self-start xl:col-end-13">
 					<ProjectImage project={project} />
 				</div>
 				<figcaption class="col-start-2 col-end-18 xl:col-start-13">
@@ -59,7 +60,7 @@ const classes = cx('col-start-1 col-end-19 grid grid-cols-18', className);
 	{
 		format === '70-end' && (
 			<figure class="col-start-1 col-end-19 row-start-1 grid grid-cols-18 gap-x-gap gap-y-halfgap">
-				<div class="image-shadow col-start-1 col-end-19 row-start-1 grid self-start xl:col-start-7 xl:col-end-19">
+				<div class=" col-start-1 col-end-19 row-start-1 grid self-start xl:col-start-7 xl:col-end-19">
 					<ProjectImage project={project} />
 				</div>
 				<figcaption class="col-start-2 col-end-18 xl:col-start-2 xl:col-end-7">
@@ -71,7 +72,7 @@ const classes = cx('col-start-1 col-end-19 grid grid-cols-18', className);
 	{
 		format === '100-start' && (
 			<figure class="col-start-1 col-end-19 row-start-1 grid grid-cols-18 gap-x-gap gap-y-halfgap">
-				<div class="image-shadow col-start-1 col-end-19 row-start-1">
+				<div class=" col-start-1 col-end-19 row-start-1">
 					<ProjectImage project={project} />
 				</div>
 				<figcaption class="col-start-2 col-end-18 md:col-end-13 xl:col-end-10">
@@ -83,7 +84,7 @@ const classes = cx('col-start-1 col-end-19 grid grid-cols-18', className);
 	{
 		format === '100-end' && (
 			<figure class="col-start-1 col-end-19 row-start-1 grid grid-cols-18 gap-x-gap gap-y-halfgap">
-				<div class="image-shadow col-start-1 col-end-19 row-start-1">
+				<div class=" col-start-1 col-end-19 row-start-1">
 					<ProjectImage project={project} />
 				</div>
 				<figcaption class="col-start-2 col-end-18 md:col-start-8 md:col-end-18 xl:col-start-10 xl:col-end-18">
@@ -104,7 +105,7 @@ const classes = cx('col-start-1 col-end-19 grid grid-cols-18', className);
 
 	.traditional-colors-of-japan {
 		& img {
-			@apply bg-transparent duration-500 ease-in-out;
+			@apply border-0 bg-transparent shadow-none duration-500 ease-in-out dark:bg-transparent;
 			transition-property: filter;
 		}
 

src/components/ProjectContent.astro

@@ -1,7 +1,8 @@
 ---
 import type { CollectionEntry } from 'astro:content';
 
-import { Headline, MoreLink, Text } from '../components';
+import MoreLink from '../components/MoreLink.astro';
+import { Headline, Text } from '../components';
 
 interface Props {
 	project: CollectionEntry<'projects'>;
@@ -16,7 +17,7 @@ const { project } = Astro.props;
 	{project.data.categories.join(' / ')}
 </small>
 <Headline class="!mbs-1">{project.data.title}</Headline>
-<Text>{project.data.description}</Text>
+<Text>{project.data.intro}</Text>
 {
 	project.data.more && (
 		<MoreLink href={project.data.more.link} text={project.data.more.text || 'See more'} />

src/components/ProjectImage.astro

@@ -1,6 +1,6 @@
 ---
-import { Picture } from '@astrojs/image/components';
 import type { CollectionEntry } from 'astro:content';
+import Picture from './Picture.astro';
 
 interface Props {
 	project: CollectionEntry<'projects'>;
@@ -12,7 +12,9 @@ const { project } = Astro.props;
 {
 	project.data.image &&
 		(project.data.image.src.includes('.svg') ? (
-			<img alt={project.data.title} src={project.data.image.src} />
+			<div class="image-shadow mbe-10 mbs-0">
+				<img class="image-border" alt={project.data.title} src={project.data.image.src} />
+			</div>
 		) : (
 			<Picture
 				alt={project.data.title}

src/components/ProjectIntro.tsx

@@ -0,0 +1,22 @@
+import cx from 'classnames';
+
+import type { ComponentChild, FunctionalComponent } from 'preact';
+
+interface Props {
+	class?: string;
+	children: ComponentChild;
+}
+
+export const ProjectIntro: FunctionalComponent<Props> = ({
+	class: className,
+	children,
+	...props
+}) => {
+	const classes = cx('max-w-[66ch]', className);
+
+	return (
+		<div class={classes} {...props}>
+			{children}
+		</div>
+	);
+};

src/components/Tag.tsx

@@ -0,0 +1,21 @@
+import cx from 'classnames';
+
+import type { ComponentChild, FunctionalComponent } from 'preact';
+
+interface Props {
+	class?: string;
+	children: ComponentChild;
+}
+
+export const Tag: FunctionalComponent<Props> = ({ class: className, children, ...props }) => {
+	const classes = cx(
+		'inline-flex items-center justify-center rounded-25 border-2 border-shibui-350 bg-shibui-200 px-3 py-1 text-1 leading-none text-black mie-1 dark:border-shibui-750 dark:bg-shibui-950 dark:text-white',
+		className
+	);
+
+	return (
+		<span class={classes} {...props}>
+			{children}
+		</span>
+	);
+};

src/components/Toolbox.astro

@@ -20,9 +20,9 @@ const { tools } = Astro.props;
 						alt={name}
 						aspectRatio="1:1"
 						format="avif"
-						height={80}
+						height={200}
 						src={image}
-						width={80}
+						width={200}
 					/>
 				</Link>
 			</li>

src/components/index.ts

@@ -1,22 +1,13 @@
-// @ts-nocheck
-import DownloadLink from './DownloadLink.astro';
-import EmailLink from './EmailLink.astro';
-import Image from './Image.astro';
-import MoreLink from './MoreLink.astro';
-import Pagination from './Pagination.astro';
-import Picture from './Picture.astro';
-import ProjectContainer from './ProjectContainer.astro';
-import ProjectContent from './ProjectContent.astro';
-import ProjectImage from './ProjectImage.astro';
-import Toolbox from './Toolbox.astro';
-
 export * from './AffiliateLink';
 export * from './AmazonBook';
 export * from './Banner';
 export * from './Book';
+export * from './ColorStack';
 export * from './ColorSwatch';
+export * from './DisplayBox';
 export * from './Divider';
 export * from './Flag';
+export * from './FloatingImage';
 export * from './Headline';
 export * from './LegalDate';
 export * from './Link';
@@ -25,23 +16,13 @@ export * from './NetflixFlag';
 export * from './OdyseeVideo';
 export * from './OrderedList';
 export * from './PrimeVideoFlag';
+export * from './ProjectIntro';
 export * from './Subheadline';
 export * from './Subsubheadline';
+export * from './Tag';
 export * from './Text';
 export * from './TextLink';
 export * from './Title';
 export * from './UnorderedList';
 export * from './Verse';
 export * from './YouTubeVideo';
-export {
-	DownloadLink,
-	EmailLink,
-	Image,
-	MoreLink,
-	Pagination,
-	Picture,
-	ProjectContainer,
-	ProjectContent,
-	ProjectImage,
-	Toolbox,
-};

src/content/config.ts

@@ -11,48 +11,45 @@ const haikuCollection = defineCollection({
 const projectCollection = defineCollection({
 	schema: z.object({
 		title: z.string(),
-		format: z.enum([
-			"100-end",
-			"100-start",
-			"50-end",
-			"50-start",
-			"70-end",
-			"70-start"
-		]),
-		image: z.object({
-			src: z.string(),
-			height: z.number().optional(),
-			width: z.number().optional(),
-			aspectRatio: z.union([
-				z.number(),
-				z.string().regex(/^\d+:\d+$/),
-			]),
-		}).optional(),
+		format: z.enum(['100-end', '100-start', '50-end', '50-start', '70-end', '70-start']),
+		image: z
+			.object({
+				src: z.string(),
+				height: z.number().optional(),
+				width: z.number().optional(),
+				aspectRatio: z.union([z.number(), z.string().regex(/^\d+:\d+$/)]),
+			})
+			.optional(),
 		sort: z.number().optional(),
 		showcase: z.boolean().optional(),
-		description: z.string(),
-		categories: z.array(z.enum([
-			"Design",
-			"Graphic Design",
-			"Icon Design",
-			"Illustration",
-			"Painting",
-			"Photography",
-			"Poetry",
-			"Typeface Design",
-			"Web Design",
-			"Web Development",
-			"Writing"
-		])),
-		more: z.object({
-			text: z.string().optional(),
-			link: z.string()
-		}).optional(),
+		description: z.string().optional(),
+		intro: z.string().optional(),
+		categories: z.array(
+			z.enum([
+				'Design',
+				'Graphic Design',
+				'Icon Design',
+				'Illustration',
+				'Painting',
+				'Photography',
+				'Poetry',
+				'Typeface Design',
+				'Web Design',
+				'Web Development',
+				'Writing',
+			])
+		),
+		more: z
+			.object({
+				text: z.string().optional(),
+				link: z.string(),
+			})
+			.optional(),
 		class: z.string().optional(),
 	}),
 });
 
 export const collections = {
 	haiku: haikuCollection,
-	projects: projectCollection
+	projects: projectCollection,
 };

src/content/projects/bamboo-illustration.mdx

@@ -4,7 +4,7 @@ format: 100-end
 class: bamboo-illustration
 sort: 90
 categories: ["Illustration"]
-description: I created the bamboo illustration in 2006 for my Martial Arts website using Adobe Illustrator and the gradient grid tool. 2015 I decided to use my bamboo as SVG on my website. Unfortunately, the gradient tool is not supported in SVG and I needed to recreate my bamboo with linear, radial, and other supported gradients in Affinity Designer.
+intro: I created the bamboo illustration in 2006 for my Martial Arts website using Adobe Illustrator and the gradient grid tool. 2015 I decided to use my bamboo as SVG on my website. Unfortunately, the gradient tool is not supported in SVG and I needed to recreate my bamboo with linear, radial, and other supported gradients in Affinity Designer.
 image:
   src: /assets/images/projects/thumbnails/bamboo-illustration.svg
   aspectRatio: 1.5

src/content/projects/book-cover.mdx

@@ -3,7 +3,7 @@ title: Book & Book Cover
 format: 50-end
 sort: 110
 categories: ["Writing", "Graphic Design"]
-description: I wrote this book in 2017 out of the essays I’ve written on my Martial Arts website in the last 20 years. It’s a book in German about the Ninja and their secret art of Ninjutsu. I also designed the book cover for my book. The book was written with GitBook and can be read or downloaded for free as PDF, ePub, or Mobi eBook.
+intro: I wrote this book in 2017 out of the essays I’ve written on my Martial Arts website in the last 20 years. It’s a book in German about the Ninja and their secret art of Ninjutsu. I also designed the book cover for my book. The book was written with GitBook and can be read or downloaded for free as PDF, ePub, or Mobi eBook.
 image:
   src: /assets/images/projects/thumbnails/book-kogakure.jpg
   aspectRatio: 0.76

src/content/projects/exploring-hamburg-v2.mdx

@@ -4,7 +4,8 @@ format: 50-end
 sort: 140
 showcase: true
 categories: ["Web Design", "Web Development", "Photography"]
-description: "I created this Photography Blog for one of my hobbies: I explore the city of Hamburg, mostly walking, and sometimes biking to find out more about the individual districts and to shoot photos. The current design is the 2nd iteration."
+intro: "I created this Photography Blog for one of my hobbies: I explore the city of Hamburg, mostly walking, and sometimes biking to find out more about the individual districts and to shoot photos. The current design is the 2nd iteration."
+description: I explore Hamburg, mostly walking, sometimes biking to find out more about the individual districts and to shoot photos.
 image:
   src: /assets/images/projects/thumbnails/exploring-hamburg-v2.jpg
   aspectRatio: 1.25
@@ -12,3 +13,47 @@ more:
   text: See Showcase of Version 2
   link: /projects/exploring-hamburg-v2/
 ---
+
+<ProjectIntro>
+At the end of 2021, I decided to unify my brand and redesign my [photoblog](https://hamburg.stefanimhoff.de/). I used the existing brand design and created the website based on that design, using variations like full-height photos and rotated text.
+
+<MoreLink href="https://github.com/kogakure/website-11ty-hamburg.stefanimhoff.de/" text="Source Code" />
+</ProjectIntro>
+
+---
+
+### Light Design
+
+<ColorStack>
+	<ColorSwatch color="#E7E6E4" title="Light Background" />
+	<ColorSwatch color="#0E0D0C" title="Light Foreground" />
+	<ColorSwatch color="#2d5da3" title="Accent" />
+</ColorStack>
+
+### Dark Design
+
+<ColorStack>
+	<ColorSwatch color="#1B1A18" title="Light Background" />
+	<ColorSwatch color="#E7E6E4" title="Light Foreground" />
+	<ColorSwatch color="#2d5da3" 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/exploring-hamburg-v2/exploring-hamburg-v2-homepage.jpg)
+
+![Homepage Dark](/assets/images/projects/exploring-hamburg-v2/exploring-hamburg-v2-homepage-dark.jpg)
+
+## Subpage
+
+![Subpage](/assets/images/projects/exploring-hamburg-v2/exploring-hamburg-v2-subpage.jpg)

src/content/projects/font-ingo.mdx

@@ -3,7 +3,7 @@ title: "Ingo: Iga Ninja Cipher Font"
 format: 50-start
 sort: 170
 categories: ["Typeface Design", "Graphic Design"]
-description: The Iga Ninja Cipher Font was created by me of an image provided by the Iga Ninja Museum in Japan and is said to be a font for correspondence in cipher. It was a fun personal project to learn how to create a typeface.
+intro: The Iga Ninja Cipher Font was created by me of an image provided by the Iga Ninja Museum in Japan and is said to be a font for correspondence in cipher. It was a fun personal project to learn how to create a typeface.
 image:
   src: /assets/images/projects/thumbnails/ingo-iga-ninja-cipher.jpg
   aspectRatio: 0.94

src/content/projects/haiku.mdx

@@ -3,7 +3,7 @@ title: Haiku
 format: 50-start
 sort: 30
 categories: ["Poetry", "Writing"]
-description: I started writing Haiku poetry some years ago inspired by the works of the Japanese Haiku poet Matsuo Bashō. I think Haiku is a fun, creative way to use limitation and brevity while saying something meaningful.
+intro: I started writing Haiku poetry some years ago inspired by the works of the Japanese Haiku poet Matsuo Bashō. I think Haiku is a fun, creative way to use limitation and brevity while saying something meaningful.
 more:
   text: Read Haiku
   link: /haiku/

src/content/projects/ia-writer-template-nanzan.mdx

@@ -3,7 +3,7 @@ title: iA Writer Template Nanzan (南山)
 format: 50-start
 sort: 70
 categories: ["Web Design", "Web Development"]
-description: This iA Writer template is inspired by the typographic style of the book Engaging Japanese Philosophy by Thomas P. Kasulis, designed by the Nanzan Institute for Religion and Culture.
+intro: This iA Writer template is inspired by the typographic style of the book Engaging Japanese Philosophy by Thomas P. Kasulis, designed by the Nanzan Institute for Religion and Culture.
 image:
   src: /assets/images/projects/thumbnails/ia-template-nanzan.jpg
   aspectRatio: 1.65

src/content/projects/ia-writer-template-shibui.mdx

@@ -3,7 +3,7 @@ title: iA Writer Template Shibui (渋い)
 format: 50-end
 sort: 80
 categories: ["Web Design", "Web Development"]
-description: This iA Writer template is inspired by the Japanese aesthetics style shibui which was founded during the Muromachi period (1336-1392). I use the same style for my current personal branding on my website, for my martial arts book and for my photoblog.
+intro: This iA Writer template is inspired by the Japanese aesthetics style shibui which was founded during the Muromachi period (1336-1392). I use the same style for my current personal branding on my website, for my martial arts book and for my photoblog.
 image:
   src: /assets/images/projects/thumbnails/ia-template-shibui.jpg
   aspectRatio: 1.63

src/content/projects/journal.mdx

@@ -3,7 +3,7 @@ title: Journal & Blog
 format: 50-end
 sort: 10
 categories: ["Writing"]
-description: I have been writing essays on this website since 2007. The topics include programming, design, self-improvement, philosophy, productivity, books, and films. The collection has been much bigger, but I deleted outdated and irrelevant essays.
+intro: I have been writing essays on this website since 2007. The topics include programming, design, self-improvement, philosophy, productivity, books, and films. The collection has been much bigger, but I deleted outdated and irrelevant essays.
 more:
   text: Read Journal
   link: /journal/

src/content/projects/kogakure-v9.mdx

@@ -4,7 +4,8 @@ format: 50-start
 sort: 100
 showcase: true
 categories: ["Web Design", "Web Development", "Writing"]
-description: My Ninjutsu Book 木隠 was first launched in 1999 and is my oldest and most visited website. The current design is the 9th iteration. In 2022 I translated it to English to make it accessible to a larger readership.
+intro: My Ninjutsu Book 木隠 was first launched in 1999 and is my oldest and most visited website. The current design is the 9th iteration. In 2022 I translated it to English to make it accessible to a larger readership.
+description: I redesigned my Ninjutsu Book 木隠 in 2022.
 image:
   src: /assets/images/projects/thumbnails/kogakure-v9.jpg
   aspectRatio: 1.25
@@ -12,3 +13,69 @@ more:
   text: See Showcase of Version 9
   link: /projects/kogakure-v9/
 ---
+
+<ProjectIntro>
+At the beginning of 2022, I decided to unify my brand and redesign my [Ninjutsu Book 木隠](https://www.kogakure.de/en/). I used the existing brand design and created the website based on that design.
+
+For the first time in its 22-year-long history, I created a complete translation of the content into the English language.
+
+<MoreLink href="https://github.com/kogakure/website-11ty-kogakure.de" text="Source Code" />
+</ProjectIntro>
+
+---
+
+## Color Palette
+
+### Light Design
+
+<ColorStack>
+	<ColorSwatch color="#E7E6E4" title="Light Background" />
+	<ColorSwatch color="#0E0D0C" title="Light Foreground" />
+	<ColorSwatch color="#7B9E4C" title="Accent" />
+</ColorStack>
+
+### Dark Design
+
+<ColorStack>
+	<ColorSwatch color="#1B1A18" title="Light Background" />
+	<ColorSwatch color="#E7E6E4" title="Light Foreground" />
+	<ColorSwatch color="#7B9E4C" 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>
+
+## Illustration
+
+![Bamboo Illustration](/assets/images/projects/kogakure-v9/kogakure-v8-illustration.jpg)
+
+## Homepage
+
+![Homepage Light](/assets/images/projects/kogakure-v9/kogakure-v9-homepage.jpg)
+
+![Homepage Dark](/assets/images/projects/kogakure-v9/kogakure-v9-homepage-dark.jpg)
+
+## Subpages
+
+<div class="projects-detail-medium">
+
+![](/assets/images/projects/kogakure-v9/kogakure-v9-essay.jpg)
+
+![](/assets/images/projects/kogakure-v9/kogakure-v9-recommendations.jpg)
+
+</div>
+
+<div class="projects-detail-medium">
+
+![](/assets/images/projects/kogakure-v9/kogakure-v9-colophon.jpg)
+
+![](/assets/images/projects/kogakure-v9/kogakure-v9-glossary.jpg)
+
+</div>

src/content/projects/koi-illustration.mdx

@@ -4,6 +4,7 @@ format: 70-start
 sort: 130
 showcase: true
 categories: ["Illustration", "Painting"]
+intro: I created this illustration for a previous version of my website in 2007 with a pencil on paper and then brought it into Adobe Photoshop, where all coloring was done.
 description: I created this illustration for a previous version of my website in 2007 with a pencil on paper and then brought it into Adobe Photoshop, where all coloring was done.
 image:
   src: /assets/images/projects/thumbnails/koi-illustration.jpg
@@ -12,3 +13,62 @@ more:
   text: See the “Making-of”
   link: /projects/koi-illustration/
 ---
+
+<ProjectIntro>
+I created this illustration for a previous version of my website in 2007. The inspiration for my illustration was the art of the Japanese tattoo, _irezumi_ (刺青). Most motives have a deep meaning, based on religion, history, or myths from China and Japan.
+
+A lot of the motives are based on the Chinese novel [Shuǐhǔ Zhuàn](https://en.wikipedia.org/wiki/Water_Margin) (jap. _suikoden_, engl. _Water Margin_), or are based on mythical creatures like the Phoenix, Dragons, or Koi.
+
+I chose a motive from a legend, in which Koi, who swim against the stream of some magic waterfalls turn into a dragon. After 500 more years, they turn into a horned dragon and after 1000 years into a flying dragon.
+
+The illustration was done with a pencil on paper and then brought into Adobe Photoshop, where all coloring was done (with the help of a Wacom tablet).
+
+</ProjectIntro>
+
+---
+
+## Final Illustration
+
+![Koi Illustration](/assets/images/projects/koi-illustration/cover.jpg)
+
+## Making-Of
+
+![Making-Of Step 1](/assets/images/projects/koi-illustration/koi-making-of-01.jpg)
+
+![Making-Of Step 2](/assets/images/projects/koi-illustration/koi-making-of-02.jpg)
+
+![Making-Of Step 3](/assets/images/projects/koi-illustration/koi-making-of-03.jpg)
+
+![Making-Of Step 4](/assets/images/projects/koi-illustration/koi-making-of-04.jpg)
+
+![Making-Of Step 5](/assets/images/projects/koi-illustration/koi-making-of-05.jpg)
+
+![Making-Of Step 6](/assets/images/projects/koi-illustration/koi-making-of-06.jpg)
+
+![Making-Of Step 7](/assets/images/projects/koi-illustration/koi-making-of-07.jpg)
+
+![Making-Of Step 8](/assets/images/projects/koi-illustration/koi-making-of-08.jpg)
+
+![Making-Of Step 9](/assets/images/projects/koi-illustration/koi-making-of-09.jpg)
+
+![Making-Of Step 10](/assets/images/projects/koi-illustration/koi-making-of-10.jpg)
+
+![Making-Of Step 11](/assets/images/projects/koi-illustration/koi-making-of-11.jpg)
+
+![Making-Of Step 12](/assets/images/projects/koi-illustration/koi-making-of-12.jpg)
+
+![Making-Of Step 13](/assets/images/projects/koi-illustration/koi-making-of-13.jpg)
+
+![Making-Of Step 14](/assets/images/projects/koi-illustration/koi-making-of-14.jpg)
+
+![Making-Of Step 15](/assets/images/projects/koi-illustration/koi-making-of-15.jpg)
+
+![Making-Of Step 16](/assets/images/projects/koi-illustration/koi-making-of-16.jpg)
+
+![Making-Of Step 17](/assets/images/projects/koi-illustration/koi-making-of-17.jpg)
+
+![Making-Of Step 18](/assets/images/projects/koi-illustration/koi-making-of-18.jpg)
+
+![Making-Of Step 19](/assets/images/projects/koi-illustration/koi-making-of-19.jpg)
+
+![Making-Of Step 20](/assets/images/projects/koi-illustration/koi-making-of-20.jpg)

src/content/projects/osteopathie-hamburg.mdx

@@ -4,7 +4,8 @@ format: 50-start
 sort: 150
 showcase: true
 categories: ["Web Design", "Web Development", "Photography"]
-description: I created this website for the Osteopathie-Institut Hamburg in 2010 as one of my last websites before I started working as a Frontend Engineer for XING.
+intro: I created this website for the Osteopathie-Institut Hamburg in 2010 as one of my last websites before I started working as a Frontend Engineer for XING.
+description: This website for the Osteopathie-Insitut Hamburg I created in 2010.
 image:
   src: /assets/images/projects/thumbnails/osteopathie-hamburg.jpg
   aspectRatio: 1.75
@@ -12,3 +13,53 @@ more:
   text: See Showcase of Osteopathie-Institut Hamburg
   link: /projects/osteopathie-hamburg/
 ---
+
+<ProjectIntro>
+This website for the **Osteopathie-Institut Hamburg**, a school to learn Osteopathie was one of the last websites I created before I started working as a _Frontend Engineer_ for [XING](https://www.xing.com/) on just one product.
+
+I invested full effort into it not only because the teacher of that school was my Martial Arts teacher at that time, but also because the provided material (photos, quotes, text) was fantastic.
+
+The website had an interactive carousel on the homepage, collapsible sections in the course section, a custom Google Map pin, and a contact form.
+
+</ProjectIntro>
+
+---
+
+## Color Palette
+
+<ColorStack>
+	<ColorSwatch color="#002856" />
+	<ColorSwatch color="#E5E9EE" />
+	<ColorSwatch color="#AEC605" />
+	<ColorSwatch color="#DEE99B" />
+	<ColorSwatch color="#FFFFFF" />
+</ColorStack>
+
+## Typefaces
+
+<DisplayBox>
+	![Typefaces Delicous and
+	Baskerville](/assets/images/projects/osteopathie-hamburg/osteopathie-hamburg-typefaces.svg)
+</DisplayBox>
+
+## Homepage
+
+![Homepage](/assets/images/projects/osteopathie-hamburg/osteopathie-hamburg-homepage.jpg)
+
+## Training Page
+
+![Training Page](/assets/images/projects/osteopathie-hamburg/osteopathie-hamburg-training.jpg)
+
+## Subpages
+
+<div class="projects-detail-medium">
+
+![Subpage Osteopathie](/assets/images/projects/osteopathie-hamburg/osteopathie-hamburg-osteopathie.jpg)
+
+![Subpage Qigong](/assets/images/projects/osteopathie-hamburg/osteopathie-hamburg-qigong.jpg)
+
+</div>
+
+## Contact
+
+![Contact Page](/assets/images/projects/osteopathie-hamburg/osteopathie-hamburg-contact.jpg)

src/content/projects/sketchnotes.mdx

@@ -3,7 +3,7 @@ title: Sketchnotes
 format: 50-end
 sort: 20
 categories: ["Illustration", "Writing"]
-description: One of my passions is Sketchnotes or also called Visual Notetaking. In Sketchnoting you use visual language to visualize ideas, notes, or thoughts. I create Sketchnotes since I first visited a workshop in 2015.
+intro: One of my passions is Sketchnotes or also called Visual Notetaking. In Sketchnoting you use visual language to visualize ideas, notes, or thoughts. I create Sketchnotes since I first visited a workshop in 2015.
 image:
   src: /assets/images/projects/thumbnails/sketchnotes.jpg
   aspectRatio: 1.43

src/content/projects/stefanimhoff-v4.mdx

@@ -4,7 +4,8 @@ format: 50-start
 sort: 120
 showcase: true
 categories: ["Web Design", "Web Development"]
-description: My website and blog first launched in 2006 and is the website you’re looking at. The current design is the 4th iteration.
+intro: My website and blog first launched in 2006 and is the website you’re looking at. The current design is the 4th iteration.
+description: My personal website and blog relaunched in 2020/2021 with Eleventy.
 image:
   src: /assets/images/projects/thumbnails/stefanimhoff-v4.jpg
   aspectRatio: 1.67
@@ -12,3 +13,75 @@ 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.
+
+The Gatsby version is still hosted on a [subdomain](https://v3.stefanimhoff.de/).
+
+- <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.jpg)
+
+![Homepage Dark](/assets/images/projects/stefanimhoff-v4/stefanimhoff-v4-homepage-dark.jpg)
+
+## Subpages
+
+![](/assets/images/projects/stefanimhoff-v4/stefanimhoff-v4-about.jpg)
+
+<div class="projects-detail-medium">
+
+![](/assets/images/projects/stefanimhoff-v4/stefanimhoff-v4-journal.jpg)
+
+![](/assets/images/projects/stefanimhoff-v4/stefanimhoff-v4-essay.jpg)
+
+</div>
+
+![](/assets/images/projects/stefanimhoff-v4/stefanimhoff-v4-haiku.jpg)
+
+![](/assets/images/projects/stefanimhoff-v4/stefanimhoff-v4-haiku-detail.jpg)
+
+<div class="projects-detail-medium">
+
+![](/assets/images/projects/stefanimhoff-v4/stefanimhoff-v4-sketchnotes.jpg)
+
+![](/assets/images/projects/stefanimhoff-v4/stefanimhoff-v4-colors-of-japan.jpg)
+
+</div>

src/content/projects/thai-restaurants-hamburg.mdx

@@ -4,7 +4,8 @@ format: 50-end
 sort: 160
 showcase: true
 categories: ["Graphic Design", "Web Design", "Web Development"]
-description: I created this small website for three Thai restaurants in Hamburg in 2010. It was online for nearly ten years and I had a lot of fun creating it.
+intro: I created this small website for three Thai restaurants in Hamburg in 2010. It was online for nearly ten years and I had a lot of fun creating it.
+description: I created this small website for three Thai restaurants in Hamburg in 2010.
 image:
   src: /assets/images/projects/thumbnails/thai-restaurant.jpg
   aspectRatio: 1.29
@@ -12,3 +13,49 @@ more:
   text: See Showcase of Thai Restaurants Hamburg
   link: /projects/thai-restaurants-hamburg/
 ---
+
+<ProjectIntro>
+I created this small website for three Thai restaurants in Hamburg in 2010. Of the more than **100** websites I created in my career, this one I still remember. It stayed online for nearly **10 years**.
+
+I learned a lot about Graphic Design while working on it. I created the complete graphic by myself and learned how to design Gold items. I wanted to stay as true to Thai culture as possible and researched in-depth the colors and style of Thailand.
+
+</ProjectIntro>
+
+---
+
+## Color Palette
+
+<ColorStack>
+	<ColorSwatch color="#241701" />
+	<ColorSwatch color="#4B2E01" />
+	<ColorSwatch color="#6B3920" />
+	<ColorSwatch color="#C2BC8D" />
+	<ColorSwatch color="#D8BB34" />
+</ColorStack>
+
+## Typeface
+
+<DisplayBox class="[&_img]:!bg-[#13110B]">
+	![Typeface Diavlo](/assets/images/projects/thai-restaurants-hamburg/thai-restaurant-typefaces.svg)
+</DisplayBox>
+
+## Design Elements
+
+<DisplayBox class="[&_img]:!bg-[#13110B]">
+	![Gold
+	Accessories](/assets/images/projects/thai-restaurants-hamburg/thai-restaurant-accessories.jpg)
+</DisplayBox>
+
+## Making-Of Buddha Composition
+
+![Subpage](/assets/images/projects/thai-restaurants-hamburg/thai-restaurant-making-of-buddha.jpg)
+
+## Homepage
+
+![Homepage](/assets/images/projects/thai-restaurants-hamburg/thai-restaurant-homepage.jpg)
+
+## Subpages
+
+![Subpage Restaurants](/assets/images/projects/thai-restaurants-hamburg/thai-restaurant-restaurants.jpg)
+
+![Phone Bistros](/assets/images/projects/thai-restaurants-hamburg/thai-restaurant-bistros.jpg)

src/content/projects/traditional-colors-of-japan.mdx

@@ -4,7 +4,7 @@ format: 50-end
 class: traditional-colors-of-japan
 sort: 60
 categories: ["Design", "Web Development"]
-description: In 2007 I stumbled upon a Japanese book about the traditional colors of Japan by Nobyoshi Hamada. He listed all 250 colors with their color value in the appendix. I took some time to create an ASE file to be used with all common design software.
+intro: In 2007 I stumbled upon a Japanese book about the traditional colors of Japan by Nobyoshi Hamada. He listed all 250 colors with their color value in the appendix. I took some time to create an ASE file to be used with all common design software.
 image:
   src: /assets/images/projects/thumbnails/traditional-colors-of-japan.svg
   aspectRatio: 1.6

src/content/projects/xing-design-system.mdx

@@ -4,7 +4,8 @@ format: 70-end
 sort: 40
 showcase: true
 categories: ["Web Design", "Web Development", "Writing"]
-description: As a Senior Web Developer on the Design System Team, I created, maintained, and documented the components of the XING Design System. I supported teams implementing our components across the platform.
+intro: As a Senior Web Developer on the Design System Team, I created, maintained, and documented the components of the XING Design System. I supported teams implementing our components across the platform.
+description: As a Senior Web Developer on the Design System Team I created, maintained, and documented the components of the XING Design System. I supported teams implementing our components across the platform.
 image:
   src: /assets/images/projects/thumbnails/xing-design-system.jpg
   aspectRatio: 1.65
@@ -12,3 +13,26 @@ more:
   text: See XING Design System Components
   link: /projects/xing-design-system/
 ---
+
+<ProjectIntro>
+As the Senior Web Developer in the XING Design System Team, a dedicated team with multiple designers, QA, and developers for Android, iOS, and Web, I created more than 50 components with [React.js](https://reactjs.org/), [TypeScript](https://www.typescriptlang.org/), and [Styled Components](https://styled-components.com/) together with another developer.
+
+We worked in collaboration with the Designers to develop and review the Design Specs for the [XING Platform](https://www.xing.com/) and extend our components.
+
+We maintained and extended the components, wrote documentation, added demos, and supported the Web teams of the company implementing and using our components.
+
+This is a reduced selection of the components. Most components come in multiple sizes and variations. Additionally, the Design System supports dark and light modes. Please toggle the mode of this website to see both versions.
+
+</ProjectIntro>
+
+---
+
+## Component Library
+
+### Light Mode
+
+![XING Design System Light Mode](/assets/images/projects/xing-design-system/xing-design-system-light.png)
+
+### Dark Mode
+
+![XING Design System Dark Mode](/assets/images/projects/xing-design-system/xing-design-system-dark.png)

src/content/projects/xing-onboarding-illustrations.mdx

@@ -4,7 +4,8 @@ format: 70-start
 sort: 50
 showcase: true
 categories: ["Illustration", "Icon Design"]
-description: I was asked to create three new illustrations that could be used for an Onboarding screen on XING. I accepted the challenge to take over this task and finished the whole process from concept to scribbles, to final illustrations in a day.
+intro: I was asked to create three new illustrations that could be used for an Onboarding screen on XING. I accepted the challenge to take over this task and finished the whole process from concept to scribbles, to final illustrations in a day.
+description: I was asked to create three new illustrations that could be used for an Onboarding screen on XING.
 image:
   src: /assets/images/projects/thumbnails/xing-illustrations.jpg
   aspectRatio: 2.34
@@ -12,3 +13,28 @@ more:
   text: See XING Onboarding Illustrations
   link: /projects/xing-onboarding-illustrations/
 ---
+
+<ProjectIntro>
+I was asked to create three new illustrations that could be used for an Onboarding screen on [XING](https://www.xing.com/). The screen was intended to let users choose their current working status.
+
+One icon was needed for _Job Beginners_, one for _Professionals_ and one for _Retired People_. One of the objectives was to make sure the icons fit into the **XING illustration brand style guide**.
+
+</ProjectIntro>
+
+---
+
+## Final Illustrations
+
+![Final Illustrations](/assets/images/projects/xing-onboarding-illustrations/xing-illustrations-final-illustrations.jpg)
+
+## Final Draft
+
+![Final Draft](/assets/images/projects/xing-onboarding-illustrations/xing-illustrations-final-draft.jpg)
+
+## Making-Of
+
+![Making-Of Starter](/assets/images/projects/xing-onboarding-illustrations/xing-illustrations-making-of-starter.jpg)
+
+![Making-Of Retired](/assets/images/projects/xing-onboarding-illustrations/xing-illustrations-making-of-retired.jpg)
+
+![Making-Of Professional](/assets/images/projects/xing-onboarding-illustrations/xing-illustrations-making-of-professional.jpg)

src/layouts/AboutLayout.astro

@@ -1,9 +1,7 @@
 ---
 import GridLayout from './GridLayout.astro';
-
 import PageTitle from '../components/PageTitle.astro';
-
-import { Picture } from '../components';
+import Picture from '../components/Picture.astro';
 
 const { frontmatter } = Astro.props;
 ---

src/mdx-components.ts

@@ -1,21 +1,26 @@
+import DownloadLink from './components/DownloadLink.astro';
+import EmailLink from './components/EmailLink.astro';
+import MoreLink from './components/MoreLink.astro';
+import ThemeBox from './components/ThemeBox.astro';
+
 import {
 	AffiliateLink,
 	AmazonBook,
 	Banner,
 	Book,
+	ColorStack,
 	ColorSwatch,
+	DisplayBox,
 	Divider,
-	DownloadLink,
-	EmailLink,
 	Flag,
+	FloatingImage,
 	Headline,
-	Image,
 	ListItem,
-	MoreLink,
 	NetflixFlag,
 	OdyseeVideo,
 	OrderedList,
 	PrimeVideoFlag,
+	ProjectIntro,
 	Subheadline,
 	Subsubheadline,
 	Text,
@@ -32,7 +37,9 @@ export const mapping = {
 	AmazonBook,
 	Banner,
 	Book,
+	ColorStack,
 	ColorSwatch,
+	DisplayBox,
 	DownloadLink,
 	EmailLink,
 	Flag,
@@ -43,7 +50,7 @@ export const mapping = {
 	h5: Subsubheadline,
 	h6: Subsubheadline,
 	hr: Divider,
-	img: Image,
+	img: FloatingImage,
 	li: ListItem,
 	MoreLink,
 	NetflixFlag,
@@ -51,6 +58,8 @@ export const mapping = {
 	ol: OrderedList,
 	p: Text,
 	PrimeVideoFlag,
+	ProjectIntro,
+	ThemeBox,
 	ul: UnorderedList,
 	Verse,
 	YouTubeVideo,

src/pages/haiku/[...slug].astro

@@ -5,7 +5,8 @@ import { sortByDate } from '../../utils/sort-by-date';
 
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import PageHeader from '../../components/PageHeader.astro';
-import { Pagination, Verse } from '../../components';
+import Pagination from '../../components/Pagination.astro';
+import { Verse } from '../../components';
 
 export async function getStaticPaths() {
 	const haikuEntries = await getCollection('haiku');

src/pages/projects/[...slug].astro

@@ -0,0 +1,54 @@
+---
+import { getCollection } from 'astro:content';
+
+import { sortBySortKey } from '../../utils/sort-by-sortkey';
+
+import GridLayout from '../../layouts/GridLayout.astro';
+import PageTitle from '../../components/PageTitle.astro';
+
+import { mapping } from '../../mdx-components';
+
+import Pagination from '../../components/Pagination.astro';
+import { Tag } from '../../components';
+
+export async function getStaticPaths() {
+	const projectEntries = await getCollection('projects', ({ data }) => data.showcase === true);
+	const numberOfPages = projectEntries.length;
+	projectEntries.sort(sortBySortKey).reverse();
+
+	return projectEntries.map((entry, index) => ({
+		params: { slug: entry.slug },
+		props: {
+			entry,
+			nextPost:
+				index + 1 === numberOfPages
+					? { slug: null, data: null }
+					: projectEntries[index + 1],
+			prevPost: index === 0 ? {} : projectEntries[index - 1],
+		},
+	}));
+}
+
+const { entry, prevPost, nextPost } = Astro.props;
+const { Content } = await entry.render();
+---
+
+<GridLayout title={entry.data.title} grid="wide" innerGrid backLink="/projects/">
+	<PageTitle slot="title">
+		{entry.data.title}
+	</PageTitle>
+
+	<article class="project-content col-start-1 col-end-17 grid-cols-books gap-[20px]">
+		<div class="mbe-7">
+			{entry.data.categories.map((category: string) => <Tag>{category}</Tag>)}
+		</div>
+		<Content components={mapping} />
+	</article>
+
+	<Pagination
+		nextText={nextPost.data?.title}
+		nextUrl={nextPost.slug && `/projects/${nextPost.slug}`}
+		previousText={prevPost.data?.title}
+		previousUrl={prevPost.slug && `/projects/${prevPost.slug}`}
+	/>
+</GridLayout>

src/pages/tools.mdx

@@ -4,7 +4,7 @@ title: Tools
 intro: I enjoy learning how other people work, what hardware, software, tools, and gadgets they use. On this page, I present my tools.
 ---
 
-import { Toolbox } from "../components";
+import Toolbox from "../components/Toolbox.astro";
 import { development, design, research, other } from "../data/tools.ts";
 import { mapping } from "../mdx-components.ts";
 export const components = mapping;

src/pages/traditional-colors-of-japan.astro

@@ -2,7 +2,7 @@
 import GridLayout from '../layouts/GridLayout.astro';
 
 import PageTitle from '../components/PageTitle.astro';
-import { AmazonBook, ColorSwatch } from '../components';
+import { AmazonBook, ColorSwatch, ColorStack } from '../components';
 
 import { Content as Intro } from '../text/traditional-colors-of-japan/intro.mdx';
 import colors from '../data/colors-japan.json';
@@ -30,11 +30,11 @@ import { mapping } from '../mdx-components';
 		/>
 	</article>
 
-	<article class="col-start-1 col-end-17 grid grid-cols-books gap-[20px]">
+	<ColorStack>
 		{
 			colors.map(({ name, description, color }) => (
 				<ColorSwatch client:visible color={color} title={name} description={description} />
 			))
 		}
-	</article>
+	</ColorStack>
 </GridLayout>

src/styles/global.css

@@ -86,11 +86,11 @@
 	}
 
 	/** Images */
-	img {
+	img.image-border {
 		@apply block h-auto w-full rounded-1 border border-solid border-black/5 bg-black/5 shadow-img dark:border-white/5 dark:bg-white/5 dark:opacity-[0.87];
 	}
 
-	img[src$='.svg'] {
+	img.image-no-border {
 		@apply border-0 bg-transparent shadow-none;
 	}
 }