feat: add scroll animations

src/components/JournalList.astro

@@ -18,7 +18,7 @@ const { entries } = Astro.props;
 >
 	{
 		entries.map(({ slug, data }) => (
-			<li class="journal-card image-shadow group">
+			<li class="slide journal-card image-shadow group">
 				<Link
 					class="journal-card-link group relative block h-full w-full group-hover:scale-100"
 					href={`/${slug}/`}

src/content/projects/bamboo-illustration.mdx

@@ -2,7 +2,7 @@
 title: Bamboo Illustration
 date: 2014-12-12
 format: 100-end
-class: bamboo-illustration
+class: bamboo-illustration slide
 sort: 90
 categories: ["Illustration"]
 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.

src/content/projects/book-cover.mdx

@@ -4,6 +4,7 @@ date: 2017-06-23
 format: 50-end
 sort: 110
 categories: ["Writing", "Graphic Design"]
+class: slide
 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.webp

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

@@ -5,6 +5,7 @@ format: 50-end
 sort: 140
 showcase: true
 categories: ["Web Design", "Web Development", "Photography"]
+class: slide
 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/content/projects/font-ingo.mdx

@@ -4,6 +4,7 @@ date: 2017-08-01
 format: 50-start
 sort: 170
 categories: ["Typeface Design", "Graphic Design"]
+class: slide
 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.webp

src/content/projects/haiku.mdx

@@ -4,6 +4,7 @@ date: 2015-01-01
 format: 50-start
 sort: 30
 categories: ["Poetry", "Writing"]
+class: slide
 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

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

@@ -4,6 +4,7 @@ date: 2022-03-17
 format: 50-start
 sort: 70
 categories: ["Web Design", "Web Development"]
+class: slide
 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.webp

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

@@ -4,6 +4,7 @@ date: 2022-03-18
 format: 50-end
 sort: 80
 categories: ["Web Design", "Web Development"]
+class: slide
 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.webp

src/content/projects/journal.mdx

@@ -4,6 +4,7 @@ date: 2006-01-01
 format: 50-start
 sort: 25
 categories: ["Writing"]
+class: slide
 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

src/content/projects/kogakure-v9.mdx

@@ -5,6 +5,7 @@ format: 50-start
 sort: 100
 showcase: true
 categories: ["Web Design", "Web Development", "Writing"]
+class: slide
 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/content/projects/koi-illustration.mdx

@@ -5,6 +5,7 @@ format: 70-start
 sort: 130
 showcase: true
 categories: ["Illustration", "Painting"]
+class: slide
 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/content/projects/osteopathie-hamburg.mdx

@@ -5,6 +5,7 @@ format: 50-start
 sort: 150
 showcase: true
 categories: ["Web Design", "Web Development", "Photography"]
+class: slide
 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/content/projects/sketchnotes.mdx

@@ -5,6 +5,7 @@ format: 50-end
 sort: 180
 categories: ["Illustration", "Writing"]
 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.
+class: slide
 image:
   src: /assets/images/projects/thumbnails/sketchnotes.webp
   aspectRatio: 1.43

src/content/projects/stefanimhoff-v4.mdx

@@ -5,6 +5,7 @@ format: 50-start
 sort: 120
 showcase: true
 categories: ["Web Design", "Web Development"]
+class: slide
 intro: My website and blog first launched in 2006 and is the website you’re looking at. The current design is the 5th iteration.
 description: My personal website and blog relaunched in 2020/2021 with Eleventy.
 image:

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

@@ -5,6 +5,7 @@ format: 50-end
 sort: 160
 showcase: true
 categories: ["Graphic Design", "Web Design", "Web Development"]
+class: slide
 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/content/projects/traditional-colors-of-japan.mdx

@@ -2,7 +2,7 @@
 title: The Traditional Colors of Japan
 date: 2007-12-08
 format: 50-end
-class: traditional-colors-of-japan
+class: traditional-colors-of-japan slide
 sort: 26
 categories: ["Design", "Web Development"]
 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.

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

@@ -5,6 +5,7 @@ format: 70-end
 sort: 20
 showcase: true
 categories: ["Illustration", "Icon Design"]
+class: slide
 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/pages/ai-art.astro

@@ -62,6 +62,7 @@ const description = 'This is a collection of AI art pieces I’ve created with S
 								'md:col-span-6 md:row-span-6':
 									data.images[0].aspectRatio === 1 && data.coverSize === 'large',
 							},
+							'slide',
 						]}
 					>
 						<Link title={data.title} href={`/ai-art/${slug}/`}>

src/pages/index.astro

@@ -66,7 +66,7 @@ rssPosts.sort(sortMarkdownByDate);
 	</article>
 
 	<article
-		class="col-start-2 col-end-18 row-start-4 md:col-start-3 md:col-end-17 md:row-start-3 xl:col-start-5 xl:col-end-15"
+		class="slide col-start-2 col-end-18 row-start-4 md:col-start-3 md:col-end-17 md:row-start-3 xl:col-start-5 xl:col-end-15"
 	>
 		<Headline>What I Do</Headline>
 		<div class="columns-1 gap-[2.775vw] mbe-10 md:columns-2 [&_p:last-of-type]:mbe-0">
@@ -76,7 +76,7 @@ rssPosts.sort(sortMarkdownByDate);
 	</article>
 
 	<article
-		class="col-start-2 col-end-18 md:col-start-6 md:col-end-14 xl:col-start-7 xl:col-end-13"
+		class="slide col-start-2 col-end-18 md:col-start-6 md:col-end-14 xl:col-start-7 xl:col-end-13"
 	>
 		<Headline>Journal</Headline>
 		<Journal components={mapping} />
@@ -84,7 +84,7 @@ rssPosts.sort(sortMarkdownByDate);
 	</article>
 
 	<article
-		class="min-[1794px]:[&_li:block col-start-2 col-end-18 grid w-full grid-cols-18 gap-y-gap mbe-12 min-[1097px]:[&_li:nth-child(n+5)]:hidden min-[1410px]:[&_li:nth-child(n+5)]:block min-[1411px]:[&_li:nth-child(n+6)]:hidden min-[1793px]:[&_li:nth-child(n+6)]:block"
+		class="slide min-[1794px]:[&_li:block col-start-2 col-end-18 grid w-full grid-cols-18 gap-y-gap mbe-12 min-[1097px]:[&_li:nth-child(n+5)]:hidden min-[1410px]:[&_li:nth-child(n+5)]:block min-[1411px]:[&_li:nth-child(n+6)]:hidden min-[1793px]:[&_li:nth-child(n+6)]:block"
 		data-pagefind-ignore
 		aria-label="Latest essays"
 	>

src/pages/sketchnotes.astro

@@ -55,6 +55,7 @@ const description = 'This is a collection of Sketchnotes I’ve drawn.';
 								'md:col-span-5 md:row-span-6':
 									data.images[0].aspectRatio < 1 && data.coverSize === 'large',
 							},
+							'slide',
 						]}
 					>
 						<Link title={data.title} href={`/sketchnotes/${slug}/`}>

src/pages/traditional-colors-of-japan.astro

@@ -39,7 +39,7 @@ const description =
 	<ColorStack>
 		{
 			colors.map(({ name, description, color }) => (
-				<div>
+				<div class="slide">
 					<ColorSwatch color={color} title={name} description={description} />
 				</div>
 			))

src/styles/global.css

@@ -268,4 +268,22 @@
 	figure > .figure-content > lite-youtube {
 		@apply mbe-0;
 	}
+
+	@keyframes slide-fade-in {
+		from {
+			opacity: 0;
+			box-shadow: none;
+			transform: scale(0.8) translateY(15vh);
+		}
+	}
+
+	.slide {
+		@media (prefers-reduced-motion: no-preference) {
+			@supports (animation-timeline: view()) {
+				animation: slide-fade-in both;
+				animation-timeline: view();
+				animation-range: contain -40% contain 50%;
+			}
+		}
+	}
 }