diff --git a/src/content/config.ts b/src/content/config.ts index dea6577..584ef27 100644 --- a/src/content/config.ts +++ b/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 }; diff --git a/src/content/projects/bamboo-illustration.mdx b/src/content/projects/bamboo-illustration.mdx new file mode 100644 index 0000000..69ab517 --- /dev/null +++ b/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. +--- diff --git a/src/content/projects/book-cover.mdx b/src/content/projects/book-cover.mdx new file mode 100644 index 0000000..4b45d07 --- /dev/null +++ b/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/ +--- diff --git a/src/content/projects/exploring-hamburg-v2.mdx b/src/content/projects/exploring-hamburg-v2.mdx new file mode 100644 index 0000000..1172a5b --- /dev/null +++ b/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/ +--- diff --git a/src/content/projects/font-ingo.mdx b/src/content/projects/font-ingo.mdx new file mode 100644 index 0000000..b28bf28 --- /dev/null +++ b/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 +--- diff --git a/src/content/projects/haiku.mdx b/src/content/projects/haiku.mdx new file mode 100644 index 0000000..2b87860 --- /dev/null +++ b/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/ +--- diff --git a/src/content/projects/ia-writer-template-nanzan.mdx b/src/content/projects/ia-writer-template-nanzan.mdx new file mode 100644 index 0000000..2fe0f7a --- /dev/null +++ b/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 +--- diff --git a/src/content/projects/ia-writer-template-shibui.mdx b/src/content/projects/ia-writer-template-shibui.mdx new file mode 100644 index 0000000..79834ed --- /dev/null +++ b/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 +--- diff --git a/src/content/projects/journal.mdx b/src/content/projects/journal.mdx new file mode 100644 index 0000000..5721b57 --- /dev/null +++ b/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/ +--- diff --git a/src/content/projects/kogakure-v9.mdx b/src/content/projects/kogakure-v9.mdx new file mode 100644 index 0000000..7891e41 --- /dev/null +++ b/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/ +--- diff --git a/src/content/projects/koi-illustration.mdx b/src/content/projects/koi-illustration.mdx new file mode 100644 index 0000000..6bc8b61 --- /dev/null +++ b/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/ +--- diff --git a/src/content/projects/osteopathie-hamburg.mdx b/src/content/projects/osteopathie-hamburg.mdx new file mode 100644 index 0000000..9a19669 --- /dev/null +++ b/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/ +--- diff --git a/src/content/projects/sketchnotes.mdx b/src/content/projects/sketchnotes.mdx new file mode 100644 index 0000000..54f899c --- /dev/null +++ b/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/ +--- diff --git a/src/content/projects/stefanimhoff-v4.mdx b/src/content/projects/stefanimhoff-v4.mdx new file mode 100644 index 0000000..8883028 --- /dev/null +++ b/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/ +--- diff --git a/src/content/projects/thai-restaurants-hamburg.mdx b/src/content/projects/thai-restaurants-hamburg.mdx new file mode 100644 index 0000000..e357333 --- /dev/null +++ b/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/ +--- diff --git a/src/content/projects/traditional-colors-of-japan.mdx b/src/content/projects/traditional-colors-of-japan.mdx new file mode 100644 index 0000000..f049e29 --- /dev/null +++ b/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/ +--- diff --git a/src/content/projects/xing-design-system.mdx b/src/content/projects/xing-design-system.mdx new file mode 100644 index 0000000..e9d1242 --- /dev/null +++ b/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/ +--- diff --git a/src/content/projects/xing-onboarding-illustrations.mdx b/src/content/projects/xing-onboarding-illustrations.mdx new file mode 100644 index 0000000..d6dab31 --- /dev/null +++ b/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/ +--- diff --git a/src/pages/projects.astro b/src/pages/projects.astro new file mode 100644 index 0000000..88ad51c --- /dev/null +++ b/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(); +--- + + + + Projects + + +
+ +
+ +
+ { + allProjects.map(({ slug, data }) => ( +
  • +

    {data.title}

    +

    {data.description}

    +
    {data.categories.join(' / ')}
    + {data.more && ( + + )} +
    • + )) + } +
    +     diff --git a/src/text/projects/intro.mdx b/src/text/projects/intro.mdx new file mode 100644 index 0000000..b73f4b5 --- /dev/null +++ b/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. diff --git a/src/utils/sort-by-sortkey.ts b/src/utils/sort-by-sortkey.ts new file mode 100644 index 0000000..12b4e97 --- /dev/null +++ b/src/utils/sort-by-sortkey.ts @@ -0,0 +1,3 @@ +export const sortBySortKey = (a: any, b: any) => { + return b.data.sort - a.data.sort; +};