From 4909aa5143488ad4e7b60ae20750dbe1f8a5600c Mon Sep 17 00:00:00 2001 From: Stefan Imhoff Date: Wed, 17 May 2023 17:36:50 +0200 Subject: [PATCH] feat: add project detail pages --- .../secuela-variable-italic.svg | 31 +------- .../secuela-variable-regular.svg | 32 +------- .../kogakure-v9/secuela-variable-italic.svg | 31 +------- .../kogakure-v9/secuela-variable-regular.svg | 32 +------- .../secuela-variable-italic.svg | 31 +------- .../secuela-variable-regular.svg | 32 +------- src/components/ColorStack.tsx | 13 ++++ src/components/DisplayBox.tsx | 22 ++++++ src/components/FloatingImage.tsx | 31 ++++++++ src/components/Picture.astro | 1 + src/components/ProjectContainer.astro | 17 +++-- src/components/ProjectContent.astro | 5 +- src/components/ProjectImage.astro | 6 +- src/components/ProjectIntro.tsx | 22 ++++++ src/components/Tag.tsx | 21 ++++++ src/components/Toolbox.astro | 4 +- src/components/index.ts | 29 ++----- src/content/config.ts | 69 ++++++++--------- src/content/projects/bamboo-illustration.mdx | 2 +- src/content/projects/book-cover.mdx | 2 +- src/content/projects/exploring-hamburg-v2.mdx | 47 +++++++++++- src/content/projects/font-ingo.mdx | 2 +- src/content/projects/haiku.mdx | 2 +- .../projects/ia-writer-template-nanzan.mdx | 2 +- .../projects/ia-writer-template-shibui.mdx | 2 +- src/content/projects/journal.mdx | 2 +- src/content/projects/kogakure-v9.mdx | 69 ++++++++++++++++- src/content/projects/koi-illustration.mdx | 60 +++++++++++++++ src/content/projects/osteopathie-hamburg.mdx | 53 ++++++++++++- src/content/projects/sketchnotes.mdx | 2 +- src/content/projects/stefanimhoff-v4.mdx | 75 ++++++++++++++++++- .../projects/thai-restaurants-hamburg.mdx | 49 +++++++++++- .../projects/traditional-colors-of-japan.mdx | 2 +- src/content/projects/xing-design-system.mdx | 26 ++++++- .../xing-onboarding-illustrations.mdx | 28 ++++++- src/layouts/AboutLayout.astro | 4 +- src/mdx-components.ts | 19 +++-- src/pages/haiku/[...slug].astro | 3 +- src/pages/projects/[...slug].astro | 54 +++++++++++++ src/pages/tools.mdx | 2 +- src/pages/traditional-colors-of-japan.astro | 6 +- src/styles/global.css | 4 +- 42 files changed, 658 insertions(+), 288 deletions(-) create mode 100644 src/components/ColorStack.tsx create mode 100644 src/components/DisplayBox.tsx create mode 100644 src/components/FloatingImage.tsx create mode 100644 src/components/ProjectIntro.tsx create mode 100644 src/components/Tag.tsx create mode 100644 src/pages/projects/[...slug].astro diff --git a/public/assets/images/projects/exploring-hamburg-v2/secuela-variable-italic.svg b/public/assets/images/projects/exploring-hamburg-v2/secuela-variable-italic.svg index 51a1fa2..7a6386e 100644 --- a/public/assets/images/projects/exploring-hamburg-v2/secuela-variable-italic.svg +++ b/public/assets/images/projects/exploring-hamburg-v2/secuela-variable-italic.svg @@ -1,30 +1 @@ - - - - - - - - Secuela Variable - - - Secuela Variable - - - Secuela Variable - - - Secuela Variable - - - Secuela Variable - - - Secuela Variable - - - Secuela Variable - - - - + \ No newline at end of file diff --git a/public/assets/images/projects/exploring-hamburg-v2/secuela-variable-regular.svg b/public/assets/images/projects/exploring-hamburg-v2/secuela-variable-regular.svg index dd9f367..cc9a8ad 100644 --- a/public/assets/images/projects/exploring-hamburg-v2/secuela-variable-regular.svg +++ b/public/assets/images/projects/exploring-hamburg-v2/secuela-variable-regular.svg @@ -1,31 +1 @@ - - - - - - - Secuela Variable - - - Secuela Variable - - - Secuela Variable - - - Secuela Variable - - - Secuela Variable - - - Secuela Variable - - - Secuela Variable - - - Secuela Variable - - - + \ No newline at end of file diff --git a/public/assets/images/projects/kogakure-v9/secuela-variable-italic.svg b/public/assets/images/projects/kogakure-v9/secuela-variable-italic.svg index 51a1fa2..7a6386e 100644 --- a/public/assets/images/projects/kogakure-v9/secuela-variable-italic.svg +++ b/public/assets/images/projects/kogakure-v9/secuela-variable-italic.svg @@ -1,30 +1 @@ - - - - - - - - Secuela Variable - - - Secuela Variable - - - Secuela Variable - - - Secuela Variable - - - Secuela Variable - - - Secuela Variable - - - Secuela Variable - - - - + \ No newline at end of file diff --git a/public/assets/images/projects/kogakure-v9/secuela-variable-regular.svg b/public/assets/images/projects/kogakure-v9/secuela-variable-regular.svg index dd9f367..cc9a8ad 100644 --- a/public/assets/images/projects/kogakure-v9/secuela-variable-regular.svg +++ b/public/assets/images/projects/kogakure-v9/secuela-variable-regular.svg @@ -1,31 +1 @@ - - - - - - - Secuela Variable - - - Secuela Variable - - - Secuela Variable - - - Secuela Variable - - - Secuela Variable - - - Secuela Variable - - - Secuela Variable - - - Secuela Variable - - - + \ No newline at end of file diff --git a/public/assets/images/projects/stefanimhoff-v4/secuela-variable-italic.svg b/public/assets/images/projects/stefanimhoff-v4/secuela-variable-italic.svg index 51a1fa2..7a6386e 100644 --- a/public/assets/images/projects/stefanimhoff-v4/secuela-variable-italic.svg +++ b/public/assets/images/projects/stefanimhoff-v4/secuela-variable-italic.svg @@ -1,30 +1 @@ - - - - - - - - Secuela Variable - - - Secuela Variable - - - Secuela Variable - - - Secuela Variable - - - Secuela Variable - - - Secuela Variable - - - Secuela Variable - - - - + \ No newline at end of file diff --git a/public/assets/images/projects/stefanimhoff-v4/secuela-variable-regular.svg b/public/assets/images/projects/stefanimhoff-v4/secuela-variable-regular.svg index dd9f367..cc9a8ad 100644 --- a/public/assets/images/projects/stefanimhoff-v4/secuela-variable-regular.svg +++ b/public/assets/images/projects/stefanimhoff-v4/secuela-variable-regular.svg @@ -1,31 +1 @@ - - - - - - - Secuela Variable - - - Secuela Variable - - - Secuela Variable - - - Secuela Variable - - - Secuela Variable - - - Secuela Variable - - - Secuela Variable - - - Secuela Variable - - - + \ No newline at end of file diff --git a/src/components/ColorStack.tsx b/src/components/ColorStack.tsx new file mode 100644 index 0000000..b8662da --- /dev/null +++ b/src/components/ColorStack.tsx @@ -0,0 +1,13 @@ +import type { ComponentChild, FunctionalComponent } from 'preact'; + +interface Props { + children: ComponentChild; +} + +export const ColorStack: FunctionalComponent = ({ children, ...props }) => { + return ( +
+ {children} +
+ ); +}; diff --git a/src/components/DisplayBox.tsx b/src/components/DisplayBox.tsx new file mode 100644 index 0000000..95949d9 --- /dev/null +++ b/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 = ({ + class: className, + children, + ...props +}) => { + const classes = cx('[&_img]:bg-gray-100 [&_img]:p-10', className); + + return ( +
+ {children} +
+ ); +}; diff --git a/src/components/FloatingImage.tsx b/src/components/FloatingImage.tsx new file mode 100644 index 0000000..f804cd5 --- /dev/null +++ b/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 = ({ + alt, + class: className, + noMargin, + src, + ...props +}) => { + const classes = cx('image-shadow mbe-10 mbs-0', { 'mbe-0': noMargin }, className); + + return ( +
+ {alt} +
+ ); +}; diff --git a/src/components/Picture.astro b/src/components/Picture.astro index e228e01..b9238c3 100644 --- a/src/components/Picture.astro +++ b/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; diff --git a/src/components/ProjectContainer.astro b/src/components/ProjectContainer.astro index b871a66..6562f09 100644 --- a/src/components/ProjectContainer.astro +++ b/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' && (
-
+
@@ -35,7 +36,7 @@ const classes = cx('col-start-1 col-end-19 grid grid-cols-18', className); { format === '50-end' && (
-
+
@@ -47,7 +48,7 @@ const classes = cx('col-start-1 col-end-19 grid grid-cols-18', className); { format === '70-start' && (
-
+
@@ -59,7 +60,7 @@ const classes = cx('col-start-1 col-end-19 grid grid-cols-18', className); { format === '70-end' && (
-
+
@@ -71,7 +72,7 @@ const classes = cx('col-start-1 col-end-19 grid grid-cols-18', className); { format === '100-start' && (
-
+
@@ -83,7 +84,7 @@ const classes = cx('col-start-1 col-end-19 grid grid-cols-18', className); { format === '100-end' && (
-
+
@@ -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; } diff --git a/src/components/ProjectContent.astro b/src/components/ProjectContent.astro index 4a66bf3..7546134 100644 --- a/src/components/ProjectContent.astro +++ b/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(' / ')} {project.data.title} -{project.data.description} +{project.data.intro} { project.data.more && ( diff --git a/src/components/ProjectImage.astro b/src/components/ProjectImage.astro index 488d902..2e77a09 100644 --- a/src/components/ProjectImage.astro +++ b/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') ? ( - {project.data.title} +
+ {project.data.title} +
) : ( = ({ + class: className, + children, + ...props +}) => { + const classes = cx('max-w-[66ch]', className); + + return ( +
+ {children} +
+ ); +}; 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 + + + ![Secuela Variable Italic](/assets/images/projects/kogakure-v9/secuela-variable-regular.svg) + + + + ![Secuela Variable Italic](/assets/images/projects/kogakure-v9/secuela-variable-italic.svg) + + +## 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) 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 + + + ![Secuela Variable Italic](/assets/images/projects/kogakure-v9/secuela-variable-regular.svg) + + + + ![Secuela Variable Italic](/assets/images/projects/kogakure-v9/secuela-variable-italic.svg) + + +## 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 + +
+ +![](/assets/images/projects/kogakure-v9/kogakure-v9-essay.jpg) + +![](/assets/images/projects/kogakure-v9/kogakure-v9-recommendations.jpg) + +
+ +
+ +![](/assets/images/projects/kogakure-v9/kogakure-v9-colophon.jpg) + +![](/assets/images/projects/kogakure-v9/kogakure-v9-glossary.jpg) + +
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 + +![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) 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 + + + ![Typefaces Delicous and + Baskerville](/assets/images/projects/osteopathie-hamburg/osteopathie-hamburg-typefaces.svg) + + +## 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 + +
+ +![Subpage Osteopathie](/assets/images/projects/osteopathie-hamburg/osteopathie-hamburg-osteopathie.jpg) + +![Subpage Qigong](/assets/images/projects/osteopathie-hamburg/osteopathie-hamburg-qigong.jpg) + +
+ +## Contact + +![Contact Page](/assets/images/projects/osteopathie-hamburg/osteopathie-hamburg-contact.jpg) 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 + + + ![Secuela Variable Italic](/assets/images/projects/kogakure-v9/secuela-variable-regular.svg) + + + + ![Secuela Variable Italic](/assets/images/projects/kogakure-v9/secuela-variable-italic.svg) + + +## 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) + +
+ +![](/assets/images/projects/stefanimhoff-v4/stefanimhoff-v4-journal.jpg) + +![](/assets/images/projects/stefanimhoff-v4/stefanimhoff-v4-essay.jpg) + +
+ +![](/assets/images/projects/stefanimhoff-v4/stefanimhoff-v4-haiku.jpg) + +![](/assets/images/projects/stefanimhoff-v4/stefanimhoff-v4-haiku-detail.jpg) + +
+ +![](/assets/images/projects/stefanimhoff-v4/stefanimhoff-v4-sketchnotes.jpg) + +![](/assets/images/projects/stefanimhoff-v4/stefanimhoff-v4-colors-of-japan.jpg) + +
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 + + + ![Typeface Diavlo](/assets/images/projects/thai-restaurants-hamburg/thai-restaurant-typefaces.svg) + + +## Design Elements + + + ![Gold + Accessories](/assets/images/projects/thai-restaurants-hamburg/thai-restaurant-accessories.jpg) + + +## 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) 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 + +![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) 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 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) 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} + + +
+
+ {entry.data.categories.map((category: string) => {category})} +
+ +
+ + + diff --git a/src/pages/tools.mdx b/src/pages/tools.mdx index b003824..9905253 100644 --- a/src/pages/tools.mdx +++ b/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; diff --git a/src/pages/traditional-colors-of-japan.astro b/src/pages/traditional-colors-of-japan.astro index 5b27fe4..9fbdb31 100644 --- a/src/pages/traditional-colors-of-japan.astro +++ b/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'; /> -
+ { colors.map(({ name, description, color }) => ( )) } -
+ diff --git a/src/styles/global.css b/src/styles/global.css index 70cd511..150aa9f 100644 --- a/src/styles/global.css +++ b/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; } }