feat: finish Projects overview

src/content/config.ts

@@ -11,6 +11,23 @@ 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(),
 		sort: z.number().optional(),
 		showcase: z.boolean().optional(),
 		description: z.string(),
@@ -30,7 +47,8 @@ const projectCollection = defineCollection({
 		more: z.object({
 			text: z.string().optional(),
 			link: z.string()
-		}).optional()
+		}).optional(),
+		class: z.string().optional(),
 	}),
 });
 

src/content/projects/bamboo-illustration.mdx

@@ -1,6 +1,11 @@
 ---
 title: Bamboo Illustration
+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.
+image:
+  src: /assets/images/projects/thumbnails/bamboo-illustration.svg
+  aspectRatio: 1.5
 ---

src/content/projects/book-cover.mdx

@@ -1,8 +1,12 @@
 ---
 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.
+image:
+  src: /assets/images/projects/thumbnails/book-kogakure.jpg
+  aspectRatio: 0.76
 more:
   text: Read the Book
   link: https://www.kogakure.de/

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

@@ -1,9 +1,13 @@
 ---
 title: Exploring Hamburg
+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."
+image:
+  src: /assets/images/projects/thumbnails/exploring-hamburg-v2.jpg
+  aspectRatio: 1.25
 more:
   text: See Showcase of Version 2
   link: /projects/exploring-hamburg-v2/

src/content/projects/font-ingo.mdx

@@ -1,8 +1,12 @@
 ---
 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.
+image:
+  src: /assets/images/projects/thumbnails/ingo-iga-ninja-cipher.jpg
+  aspectRatio: 0.94
 more:
   text: Download Font on GitHub
   link: https://github.com/kogakure/font-ingo

src/content/projects/haiku.mdx

@@ -1,5 +1,6 @@
 ---
 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.

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

@@ -1,8 +1,12 @@
 ---
 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.
+image:
+  src: /assets/images/projects/thumbnails/ia-template-nanzan.jpg
+  aspectRatio: 1.65
 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

@@ -1,8 +1,12 @@
 ---
 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.
+image:
+  src: /assets/images/projects/thumbnails/ia-template-shibui.jpg
+  aspectRatio: 1.63
 more:
   text: Download iA Writer Template Shibui on GitHub
   link: https://github.com/kogakure/ia-writer-template-shibui

src/content/projects/journal.mdx

@@ -1,5 +1,6 @@
 ---
 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.

src/content/projects/kogakure-v9.mdx

@@ -1,9 +1,13 @@
 ---
 title: Ninjutsu Book 木隠
+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.
+image:
+  src: /assets/images/projects/thumbnails/kogakure-v9.jpg
+  aspectRatio: 1.25
 more:
   text: See Showcase of Version 9
   link: /projects/kogakure-v9/

src/content/projects/koi-illustration.mdx

@@ -1,9 +1,13 @@
 ---
 title: Koi Illustration
+format: 70-start
 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.
+image:
+  src: /assets/images/projects/thumbnails/koi-illustration.jpg
+  aspectRatio: 4.35
 more:
   text: See the “Making-of”
   link: /projects/koi-illustration/

src/content/projects/osteopathie-hamburg.mdx

@@ -1,9 +1,13 @@
 ---
 title: Osteopathie-Institut Hamburg
+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.
+image:
+  src: /assets/images/projects/thumbnails/osteopathie-hamburg.jpg
+  aspectRatio: 1.75
 more:
   text: See Showcase of Osteopathie-Institut Hamburg
   link: /projects/osteopathie-hamburg/

src/content/projects/sketchnotes.mdx

@@ -1,8 +1,12 @@
 ---
 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.
+image:
+  src: /assets/images/projects/thumbnails/sketchnotes.jpg
+  aspectRatio: 1.43
 more:
   text: See Sketchotes
   link: /sketchnotes/

src/content/projects/stefanimhoff-v4.mdx

@@ -1,9 +1,13 @@
 ---
 title: Personal Website & Blog
+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.
+image:
+  src: /assets/images/projects/thumbnails/stefanimhoff-v4.jpg
+  aspectRatio: 1.67
 more:
   text: See Showcase of Version 4
   link: /projects/stefanimhoff-v4/

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

@@ -1,9 +1,13 @@
 ---
 title: Thai Restaurants Hamburg
+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.
+image:
+  src: /assets/images/projects/thumbnails/thai-restaurant.jpg
+  aspectRatio: 1.29
 more:
   text: See Showcase of Thai Restaurants Hamburg
   link: /projects/thai-restaurants-hamburg/

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

@@ -1,8 +1,13 @@
 ---
 title: The Traditional Colors of Japan
+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.
+image:
+  src: /assets/images/projects/thumbnails/traditional-colors-of-japan.svg
+  aspectRatio: 1.6
 more:
   text: See Traditional Colors of Japan
   link: /traditional-colors-of-japan/

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

@@ -1,9 +1,13 @@
 ---
 title: XING Design System
+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.
+image:
+  src: /assets/images/projects/thumbnails/xing-design-system.jpg
+  aspectRatio: 1.65
 more:
   text: See XING Design System Components
   link: /projects/xing-design-system/

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

@@ -1,9 +1,13 @@
 ---
 title: XING Onboarding Illustration
+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.
+image:
+  src: /assets/images/projects/thumbnails/xing-illustrations.jpg
+  aspectRatio: 2.34
 more:
   text: See XING Onboarding Illustrations
   link: /projects/xing-onboarding-illustrations/