feat: add Projects overview data

src/content/config.ts

@@ -8,6 +8,33 @@ const haikuCollection = defineCollection({
 	}),
 });
 
+const projectCollection = defineCollection({
+	schema: z.object({
+		title: z.string(),
+		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()
+	}),
+});
+
 export const collections = {
 	haiku: haikuCollection,
+	projects: projectCollection
 };

src/content/projects/bamboo-illustration.mdx

@@ -0,0 +1,6 @@
+---
+title: 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.
+---

src/content/projects/book-cover.mdx

@@ -0,0 +1,9 @@
+---
+title: Book & Book Cover
+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.
+more:
+  text: Read the Book
+  link: https://www.kogakure.de/
+---

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

@@ -0,0 +1,10 @@
+---
+title: Exploring Hamburg
+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."
+more:
+  text: See Showcase of Version 2
+  link: /projects/exploring-hamburg-v2/
+---

src/content/projects/font-ingo.mdx

@@ -0,0 +1,9 @@
+---
+title: "Ingo: Iga Ninja Cipher Font"
+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.
+more:
+  text: Download Font on GitHub
+  link: https://github.com/kogakure/font-ingo
+---

src/content/projects/haiku.mdx

@@ -0,0 +1,9 @@
+---
+title: Haiku
+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.
+more:
+  text: Read Haiku
+  link: /haiku/
+---

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

@@ -0,0 +1,9 @@
+---
+title: iA Writer Template Nanzan (南山)
+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.
+more:
+  text: Download iA Writer Template Nanzan on GitHub
+  link: https://github.com/kogakure/ia-writer-template-nanzan
+---

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

@@ -0,0 +1,9 @@
+---
+title: iA Writer Template Shibui (渋い)
+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.
+more:
+  text: Download iA Writer Template Shibui on GitHub
+  link: https://github.com/kogakure/ia-writer-template-shibui
+---

src/content/projects/journal.mdx

@@ -0,0 +1,9 @@
+---
+title: Journal & Blog
+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.
+more:
+  text: Read Journal
+  link: /journal/
+---

src/content/projects/kogakure-v9.mdx

@@ -0,0 +1,10 @@
+---
+title: Ninjutsu Book 木隠
+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.
+more:
+  text: See Showcase of Version 9
+  link: /projects/kogakure-v9/
+---

src/content/projects/koi-illustration.mdx

@@ -0,0 +1,10 @@
+---
+title: Koi Illustration
+sort: 130
+showcase: true
+categories: ["Illustration", "Painting"]
+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.
+more:
+  text: See the “Making-of”
+  link: /projects/koi-illustration/
+---

src/content/projects/osteopathie-hamburg.mdx

@@ -0,0 +1,10 @@
+---
+title: Osteopathie-Institut Hamburg
+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.
+more:
+  text: See Showcase of Osteopathie-Institut Hamburg
+  link: /projects/osteopathie-hamburg/
+---

src/content/projects/sketchnotes.mdx

@@ -0,0 +1,9 @@
+---
+title: Sketchnotes
+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.
+more:
+  text: See Sketchotes
+  link: /sketchnotes/
+---

src/content/projects/stefanimhoff-v4.mdx

@@ -0,0 +1,10 @@
+---
+title: Personal Website & Blog
+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.
+more:
+  text: See Showcase of Version 4
+  link: /projects/stefanimhoff-v4/
+---

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

@@ -0,0 +1,10 @@
+---
+title: Thai Restaurants Hamburg
+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.
+more:
+  text: See Showcase of Thai Restaurants Hamburg
+  link: /projects/thai-restaurants-hamburg/
+---

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

@@ -0,0 +1,9 @@
+---
+title: The 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.
+more:
+  text: See Traditional Colors of Japan
+  link: /traditional-colors-of-japan/
+---

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

@@ -0,0 +1,10 @@
+---
+title: XING Design System
+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.
+more:
+  text: See XING Design System Components
+  link: /projects/xing-design-system/
+---

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

@@ -0,0 +1,10 @@
+---
+title: XING Onboarding Illustration
+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.
+more:
+  text: See XING Onboarding Illustrations
+  link: /projects/xing-onboarding-illustrations/
+---

src/pages/projects.astro

@@ -0,0 +1,44 @@
+---
+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 { MoreLink } from '../components';
+
+import { Content as Intro } from '../text/projects/intro.mdx';
+
+import { mapping } from '../mdx-components';
+const allProjects = await getCollection('projects');
+allProjects.sort(sortBySortKey).reverse();
+---
+
+<GridLayout title="Projects" grid="fullsize" class="grid" innerGrid>
+	<PageTitle
+		grid="wide"
+		innerGrid
+		class="!col-start-2 !col-end-18 md:!col-start-3 md:!col-end-17"
+	>
+		Projects
+	</PageTitle>
+
+	<article class="col-start-2 col-end-18 md:col-start-6 md:col-end-14">
+		<Intro components={mapping} />
+	</article>
+
+	<div class="col-start-1 col-end-19">
+		{
+			allProjects.map(({ slug, data }) => (
+				<li>
+					<h2>{data.title}</h2>
+					<p>{data.description}</p>
+					<div>{data.categories.join(' / ')}</div>
+					{data.more && (
+						<MoreLink href={data.more.link} text={data.more.text || 'See more'} />
+					)}
+				</li>
+			))
+		}
+	</div>
+</GridLayout>

src/text/projects/intro.mdx

@@ -0,0 +1,5 @@
+I’m a *Frontend Developer* by profession. But I worked in previous jobs in Design, Editing, and 3D Animation. I even created Flash Animations and Multimedia CD-ROMs when this was a thing.
+
+I like the concept of the [Renaissance Man](https://simple.wikipedia.org/wiki/Renaissance_man) and like to try out different skills.
+
+These are projects I created over the last years.

src/utils/sort-by-sortkey.ts

@@ -0,0 +1,3 @@
+export const sortBySortKey = (a: any, b: any) => {
+	return b.data.sort - a.data.sort;
+};