mirror of
https://github.com/kogakure/website-astro-stefanimhoff.de.git
synced 2026-02-03 20:15:27 +00:00
feat: remove scroll animations
This commit is contained in:
Stefan Imhoff
committed by
Stefan Imhoff
Stefan Imhoff
parent
61c722c84f
commit
a05dec6363
@@ -18,7 +18,7 @@ const { entries } = Astro.props;
|
||||
>
|
||||
{
|
||||
entries.map(({ slug, data }) => (
|
||||
<li class="slide journal-card image-shadow group">
|
||||
<li class="journal-card image-shadow group">
|
||||
<Link
|
||||
class="journal-card-link group relative block h-full w-full group-hover:scale-100"
|
||||
href={`/${slug}/`}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
title: Bamboo Illustration
|
||||
date: 2014-12-12
|
||||
format: 100-end
|
||||
class: bamboo-illustration slide
|
||||
class: bamboo-illustration
|
||||
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.
|
||||
|
||||
@@ -4,7 +4,6 @@ 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
|
||||
|
||||
@@ -5,7 +5,6 @@ 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:
|
||||
|
||||
@@ -4,7 +4,6 @@ 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
|
||||
|
||||
@@ -4,7 +4,6 @@ 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
|
||||
|
||||
@@ -4,7 +4,6 @@ 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
|
||||
|
||||
@@ -4,7 +4,6 @@ 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
|
||||
|
||||
@@ -4,7 +4,6 @@ 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
|
||||
|
||||
@@ -5,7 +5,6 @@ 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:
|
||||
|
||||
@@ -5,7 +5,6 @@ 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:
|
||||
|
||||
@@ -5,7 +5,6 @@ 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:
|
||||
|
||||
@@ -5,7 +5,6 @@ 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
|
||||
|
||||
@@ -5,7 +5,6 @@ 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:
|
||||
|
||||
@@ -5,7 +5,6 @@ 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:
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
title: The Traditional Colors of Japan
|
||||
date: 2007-12-08
|
||||
format: 50-end
|
||||
class: traditional-colors-of-japan slide
|
||||
class: traditional-colors-of-japan
|
||||
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.
|
||||
|
||||
@@ -5,7 +5,6 @@ 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:
|
||||
|
||||
@@ -62,7 +62,6 @@ 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}/`}>
|
||||
|
||||
@@ -66,7 +66,7 @@ rssPosts.sort(sortMarkdownByDate);
|
||||
</article>
|
||||
|
||||
<article
|
||||
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"
|
||||
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"
|
||||
>
|
||||
<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="slide col-start-2 col-end-18 md:col-start-6 md:col-end-14 xl:col-start-7 xl:col-end-13"
|
||||
class="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="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"
|
||||
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"
|
||||
data-pagefind-ignore
|
||||
aria-label="Latest essays"
|
||||
>
|
||||
|
||||
@@ -55,7 +55,6 @@ 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}/`}>
|
||||
|
||||
@@ -39,7 +39,7 @@ const description =
|
||||
<ColorStack>
|
||||
{
|
||||
colors.map(({ name, description, color }) => (
|
||||
<div class="slide">
|
||||
<div>
|
||||
<ColorSwatch color={color} title={name} description={description} />
|
||||
</div>
|
||||
))
|
||||
|
||||
@@ -268,22 +268,4 @@
|
||||
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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user