+ );
+};
diff --git a/src/components/Tag.tsx b/src/components/Tag.tsx
new file mode 100644
index 0000000..f642a87
--- /dev/null
+++ b/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 = ({ 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 (
+
+ {children}
+
+ );
+};
diff --git a/src/components/Toolbox.astro b/src/components/Toolbox.astro
index c83fb85..b87643a 100644
--- a/src/components/Toolbox.astro
+++ b/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}
/>
diff --git a/src/components/index.ts b/src/components/index.ts
index 730fb70..a329efd 100644
--- a/src/components/index.ts
+++ b/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,
-};
diff --git a/src/content/config.ts b/src/content/config.ts
index 46d1bbc..33856a3 100644
--- a/src/content/config.ts
+++ b/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,
};
diff --git a/src/content/projects/bamboo-illustration.mdx b/src/content/projects/bamboo-illustration.mdx
index 88c6e44..4facd74 100644
--- a/src/content/projects/bamboo-illustration.mdx
+++ b/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
diff --git a/src/content/projects/book-cover.mdx b/src/content/projects/book-cover.mdx
index 68ea263..3b64443 100644
--- a/src/content/projects/book-cover.mdx
+++ b/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
diff --git a/src/content/projects/exploring-hamburg-v2.mdx b/src/content/projects/exploring-hamburg-v2.mdx
index edaf010..5ce7166 100644
--- a/src/content/projects/exploring-hamburg-v2.mdx
+++ b/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/
---
+
+
+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.
+
+
+
+
+---
+
+### Light Design
+
+
+
+
+
+
+
+### Dark Design
+
+
+
+
+
+
+
+## Font
+
+
+ 
+
+
+
+ 
+
+
+## Homepage
+
+
+
+
+
+## Subpage
+
+
diff --git a/src/content/projects/font-ingo.mdx b/src/content/projects/font-ingo.mdx
index 7505ead..1131246 100644
--- a/src/content/projects/font-ingo.mdx
+++ b/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
diff --git a/src/content/projects/haiku.mdx b/src/content/projects/haiku.mdx
index 80a5c75..e4c83ab 100644
--- a/src/content/projects/haiku.mdx
+++ b/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/
diff --git a/src/content/projects/ia-writer-template-nanzan.mdx b/src/content/projects/ia-writer-template-nanzan.mdx
index deca48e..77c709b 100644
--- a/src/content/projects/ia-writer-template-nanzan.mdx
+++ b/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
diff --git a/src/content/projects/ia-writer-template-shibui.mdx b/src/content/projects/ia-writer-template-shibui.mdx
index 0594178..4c166c5 100644
--- a/src/content/projects/ia-writer-template-shibui.mdx
+++ b/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
diff --git a/src/content/projects/journal.mdx b/src/content/projects/journal.mdx
index 68e2612..ff06c47 100644
--- a/src/content/projects/journal.mdx
+++ b/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/
diff --git a/src/content/projects/kogakure-v9.mdx b/src/content/projects/kogakure-v9.mdx
index 414f049..28256fa 100644
--- a/src/content/projects/kogakure-v9.mdx
+++ b/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/
---
+
+
+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.
+
+
+
+
+---
+
+## Color Palette
+
+### Light Design
+
+
+
+
+
+
+
+### Dark Design
+
+
+
+
+
+
+
+## Font
+
+
+ 
+
+
+
+ 
+
+
+## Illustration
+
+
+
+## Homepage
+
+
+
+
+
+## Subpages
+
+
diff --git a/src/content/projects/koi-illustration.mdx b/src/content/projects/koi-illustration.mdx
index 4c20463..77e34a3 100644
--- a/src/content/projects/koi-illustration.mdx
+++ b/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/
---
+
+
+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).
+
+
+
+---
+
+## Final Illustration
+
+
+
+## Making-Of
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/content/projects/osteopathie-hamburg.mdx b/src/content/projects/osteopathie-hamburg.mdx
index c68e927..4a6d80a 100644
--- a/src/content/projects/osteopathie-hamburg.mdx
+++ b/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/
---
+
+
+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.
+
+
+
+---
+
+## Color Palette
+
+
+
+
+
+
+
+
+
+## Typefaces
+
+
+ 
+
+
+## Homepage
+
+
+
+## Training Page
+
+
+
+## Subpages
+
+
+
+## Contact
+
+
diff --git a/src/content/projects/sketchnotes.mdx b/src/content/projects/sketchnotes.mdx
index f9b6c7a..63c46bd 100644
--- a/src/content/projects/sketchnotes.mdx
+++ b/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
diff --git a/src/content/projects/stefanimhoff-v4.mdx b/src/content/projects/stefanimhoff-v4.mdx
index f8ef3c2..7821799 100644
--- a/src/content/projects/stefanimhoff-v4.mdx
+++ b/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/
---
+
+
+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/).
+
+-
+-
+
+
+---
+
+## Color Palette
+
+### Light Design
+
+
+
+
+
+
+
+### Dark Design
+
+
+
+
+
+
+
+## Font
+
+
+ 
+
+
+
+ 
+
+
+## Homepage
+
+
+
+
+
+## Subpages
+
+
+
+
diff --git a/src/content/projects/thai-restaurants-hamburg.mdx b/src/content/projects/thai-restaurants-hamburg.mdx
index 49f0ee6..9e01297 100644
--- a/src/content/projects/thai-restaurants-hamburg.mdx
+++ b/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/
---
+
+
+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.
+
+
+
+---
+
+## Color Palette
+
+
+
+
+
+
+
+
+
+## Typeface
+
+
+ 
+
+
+## Design Elements
+
+
+ 
+
+
+## Making-Of Buddha Composition
+
+
+
+## Homepage
+
+
+
+## Subpages
+
+
+
+
diff --git a/src/content/projects/traditional-colors-of-japan.mdx b/src/content/projects/traditional-colors-of-japan.mdx
index 5e9f25f..bcaaa20 100644
--- a/src/content/projects/traditional-colors-of-japan.mdx
+++ b/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
diff --git a/src/content/projects/xing-design-system.mdx b/src/content/projects/xing-design-system.mdx
index 44599ee..dd67b56 100644
--- a/src/content/projects/xing-design-system.mdx
+++ b/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/
---
+
+
+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.
+
+
+
+---
+
+## Component Library
+
+### Light Mode
+
+
+
+### Dark Mode
+
+
diff --git a/src/content/projects/xing-onboarding-illustrations.mdx b/src/content/projects/xing-onboarding-illustrations.mdx
index 71008bb..095cfe9 100644
--- a/src/content/projects/xing-onboarding-illustrations.mdx
+++ b/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/
---
+
+
+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**.
+
+
+
+---
+
+## Final Illustrations
+
+
+
+## Final Draft
+
+
+
+## Making-Of
+
+
+
+
+
+
diff --git a/src/layouts/AboutLayout.astro b/src/layouts/AboutLayout.astro
index feb1860..e3bbe05 100644
--- a/src/layouts/AboutLayout.astro
+++ b/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;
---
diff --git a/src/mdx-components.ts b/src/mdx-components.ts
index ce3997f..e4e0e28 100644
--- a/src/mdx-components.ts
+++ b/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,
diff --git a/src/pages/haiku/[...slug].astro b/src/pages/haiku/[...slug].astro
index d91546f..307e75f 100644
--- a/src/pages/haiku/[...slug].astro
+++ b/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');
diff --git a/src/pages/projects/[...slug].astro b/src/pages/projects/[...slug].astro
new file mode 100644
index 0000000..b410a61
--- /dev/null
+++ b/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();
+---
+
+
+
+ {entry.data.title}
+
+
+
+
+ 
+