kogakure/website-astro-stefanimhoff.de
1
0
Fork 0
mirror of https://github.com/kogakure/website-astro-stefanimhoff.de.git synced 2026-02-03 20:15:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: remove Sal.js

Browse Source 
Fewer animations for the new year.
This commit is contained in:
Stefan Imhoff
2025-01-03 13:39:25 +01:00
parent 154dbb3017
commit 1560013a07
30 changed files with 23 additions and 525 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/pages/404.astro
View File

@@ -1,7 +1,5 @@
---
// Cspell:words astro noindex
import { animation, animationDelay } from '../data/site';
import GridLayout from '../layouts/GridLayout.astro';
import PageTitle from '../components/PageTitle.astro';
@@ -28,7 +26,6 @@ const description = 'Page not found.';
<Verse
class="z-10 col-start-1 col-end-17 row-start-2 text-3 italic mbe-10 mbs-10 md:col-start-3 md:col-end-9"
variant="left"
{...animation}
>
<Haiku components={mapping} />
</Verse>
@@ -36,7 +33,6 @@ const description = 'Page not found.';
aria-hidden="true"
class="col-start-10 col-end-13 row-start-1 row-end-3 text-9 font-black text-black/[0.05] dark:text-white/[0.05]"
role="img"
{...animationDelay}
>
404
</span>

13
src/pages/about.mdx
View File

@@ -5,32 +5,19 @@ description: I’m Stefan Imhoff, a Web UI Engineer from Hamburg, Germany.
backLink: /
---
import { animation, animationDelay } from "../data/site";
import { mapping } from "../mdx-components.ts";
export const components = mapping;
<div {...animation}>
I’m _Stefan Imhoff_, a Senior Web UI Engineer from Hamburg, Germany.
I find inspiration in a wide variety of media, from reading challenging and heterodox [books](https://goodreads.com/kogakure) about philosophy, science, and economics to listening to [podcasts](https://raindrop.io/kogakure/podcasts-24118384), watching [TV shows](https://www.themoviedb.org/u/kogakure/favorites/tv) and [movies](https://www.themoviedb.org/u/kogakure/favorites), and indulging in [Korean](https://www.themoviedb.org/list/8216385) and [Japanese](https://www.themoviedb.org/list/106001) dramas on Netflix.
</div>
<div {...animationDelay}>
As a passionate enthusiast of storytelling, I am convinced that humans understand the world and find meaning through narratives. This fascination has led me to contribute to the propagation of impactful ideas through my writing. Whether I am crafting [essays](/journal/), [Sketchnotes](/sketchnotes/), or [Haiku](/haiku/), I aim to use the power of storytelling to communicate messages that resonate with readers. I have even written a free [book about Ninja and Ninjutsu](https://www.kogakure.de/en/).
</div>
<div {...animationDelay}>
In my spare time, I enjoy exploring nature through activities such as [walking and cycling](https://hamburg.stefanimhoff.de/), and doing [Calisthenics](/calisthenics/). I have a keen appreciation for the beauty of everyday life and find joy in the small things. Whether it’s the peacefulness of a forest, the vastness of the sea, or the grandeur of a mountain, I am constantly inspired by nature’s magnificence. I enjoy both the power of thunderstorms and the warmth of sunny days.
See what I’m doing [now](/now/).
</div>
---
I see myself as a 🔲 [Minimalist](/minimalism/), 🏛️ [Stoic](/interpretation-if/), 🎧 Introvert, 🐍 Libertarian, and ⛩️ Japanophile.

4
src/pages/ai-art.astro
View File

@@ -6,8 +6,6 @@ import { getCollection } from 'astro:content';
import { sortBySortKey } from '../utils';
import { animation } from '../data/site';
import GridLayout from '../layouts/GridLayout.astro';
import PageTitle from '../components/PageTitle.astro';
import Image from '../components/Image.astro';
@@ -28,7 +26,6 @@ const description = 'This is a collection of AI art pieces I’ve created with S
<article
class="col-start-1 col-end-18 grid md:col-start-4 md:col-end-12 xl:col-start-5 xl:col-end-11"
{...animation}
>
<Intro components={mapping} />
</article>
@@ -66,7 +63,6 @@ const description = 'This is a collection of AI art pieces I’ve created with S
data.images[0].aspectRatio === 1 && data.coverSize === 'large',
},
]}
{...animation}
>
<Link title={data.title} href={`/ai-art/${slug}/`}>
<Image

15
src/pages/colophon.mdx
View File

@@ -7,18 +7,11 @@ intro: In publishing, a colophon is a brief statement containing information abo
backLink: /
---
import { animation, animationDelay } from "../data/site";
import { mapping } from "../mdx-components.ts";
export const components = mapping;
<div {...animation}>
The source code of this website is available on [GitHub](https://github.com/kogakure/website-astro-stefanimhoff.de). You are welcome to learn from the source code and reuse code for your projects. Don’t steal it. Learn from it. Remix. Reuse. Build your own things. 🤘
</div>
<div {...animationDelay}>
## Design
- I designed the website myself in [Affinity Designer](https://affinity.serif.com/designer/), using the Japanese art form of _shibui_ (<nobr>渋い</nobr>) as a source of inspiration. To learn more about the process, please read the essays about the [inspiration](/new-website-2020-inspiration/) and [design](/new-website-2020-design/).
@@ -26,10 +19,6 @@ The source code of this website is available on [GitHub](https://github.com/koga
- I created the Bonsai image on my homepage and other cover photos with [Stable Diffusion](https://stability.ai/), [FLUX](https://blackforestlabs.ai/) [ControlNet](https://github.com/lllyasviel/ControlNet), and [Affinity Photo](https://affinity.serif.com/photo/). My portrait photo was generated in Stable Diffusion with a custom model trainied in [DreamBooth](https://dreambooth.github.io/).
- The minimalistic icons are by [Remix Icon](https://remixicon.com/), which is [Jimmy Cheung](https://github.com/xiaochunjimmy) and [Wendy Gao](https://github.com/wendygaoyuan).
</div>
<div {...animationDelay}>
## Technology
- The website is built with [Astro](https://astro.build/), the all-in-one web framework.
@@ -37,7 +26,7 @@ The source code of this website is available on [GitHub](https://github.com/koga
- The layouts, templates, and components are written in Astro and [Preact](https://preactjs.com/).
- My content is written in [MDX](https://mdxjs.com/), which allows using components in the [Markdown](https://daringfireball.net/projects/markdown/).
- I use [Tailwind CSS](https://tailwindcss.com/) for my styling and [tailwindcss-logical](https://stevecochrane.github.io/tailwindcss-logical/) to get logical properties.
- The scroll animations are created with [Sal](https://mciastek.github.io/sal/) and for page transitions I use [Swup](https://swup.js.org/).
- The page transitions are created with [Swup](https://swup.js.org/).
- My site search is build with [Pagefind](https://pagefind.app/) using the [Astro-Pagefind](https://github.com/shishkin/astro-pagefind) integration.
- I use YouTube Lite, provided by [Astro Embed](https://github.com/astro-community/astro-embed).
- [Astro SEO](https://github.com/jonasmerlin/astro-seo) makes it easy to add the SEO relevant information.
@@ -47,5 +36,3 @@ The source code of this website is available on [GitHub](https://github.com/koga
- To parse and format dates I use [Moment.js](https://momentjs.com/).
- I use [Plop](https://plopjs.com/) to generate content from templates.
- The website is self-hosted with [Coolify](https://coolify.io/).
</div>

6
src/pages/cv.astro
View File

@@ -1,7 +1,5 @@
---
// Cspell:words astro subheadline imhoff stefanimhoff noindex
import { animation, animationDelay } from '../data/site';
import Divider from '../components/Divider.astro';
import DownloadLink from '../components/DownloadLink.astro';
import EmailLink from '../components/EmailLink.astro';
@@ -38,12 +36,12 @@ const description =
>
<PageTitle grid="wide" innerGrid>Curriculum Vitae</PageTitle>
<article class="col-span-full md:col-start-1 md:col-end-9" {...animation}>
<article class="col-span-full md:col-start-1 md:col-end-9">
<Headline>{cv.summary.headline}</Headline>
<Intro components={mapping} />
</article>
<article class="col-span-full md:col-start-10 md:col-end-18" {...animationDelay}>
<article class="col-span-full md:col-start-10 md:col-end-18">
<Headline>Personal Information</Headline>
<Subheadline class="font-semibold">{cv.personal.name}</Subheadline>
<Text class="!mbe-0">{cv.personal.tagline}</Text>

3
src/pages/haiku.astro
View File

@@ -5,7 +5,6 @@ type Haiku = CollectionEntry<'haiku'>;
import { getCollection } from 'astro:content';
import { sortByDate } from '../utils';
import { animation, animationDelay } from '../data/site';
import GridLayout from '../layouts/GridLayout.astro';
import Link from '../components/Link.astro';
@@ -27,7 +26,6 @@ const description =
<article
class="col-start-1 col-end-17 grid md:col-start-4 md:col-end-12 xl:col-start-5 xl:col-end-11"
{...animation}
>
<Intro components={mapping} />
</article>
@@ -39,7 +37,6 @@ const description =
>
<ol
class="grid list-none grid-cols-[repeat(auto-fill,_minmax(3rem,_1fr))] justify-items-center gap-[1rem]"
{...animationDelay}
>
{
allHaiku.map(({ slug }) => (

5
src/pages/haiku/[...slug].astro
View File

@@ -4,7 +4,6 @@ type Haiku = CollectionEntry<'haiku'>;
import { getCollection } from 'astro:content';
import { sortByDate } from '../../utils';
import { animation, animationDelay } from '../../data/site';
import BaseLayout from '../../layouts/BaseLayout.astro';
import PageHeader from '../../components/PageHeader.astro';
@@ -44,7 +43,7 @@ const description = `Haiku ${entry.slug} in German and English.`;
class="min-[700px]:grid-cols-[repeat(auto-fit,_minmax(25rem,_1fr)] col-span-full row-start-1 row-end-3 grid w-full grid-cols-[repeat(auto-fit,_minmax(15rem,_1fr))] print:block"
>
<div class="grid h-full w-full items-center">
<div {...animation}>
<div>
<Verse
class="justify-center text-center text-3 font-black not-italic !leading-relaxed min-[700px]:text-4"
>
@@ -55,7 +54,7 @@ const description = `Haiku ${entry.slug} in German and English.`;
<div
class="grid h-full w-full items-center bg-[#d0cdc8] dark:bg-[#0e0d0c] print:bg-transparent"
>
<div {...animationDelay}>
<div>
<Verse
class="justify-center text-center text-3 font-black not-italic !leading-relaxed min-[700px]:text-4"
>

6
src/pages/index.astro
View File

@@ -6,7 +6,7 @@ import { getCollection } from 'astro:content';
import { formatPosts, isProduction, sortMarkdownByDate } from '../utils';
import { site, animation, animationDelay } from '../data/site';
import { site } from '../data/site';
import GridLayout from '../layouts/GridLayout.astro';
@@ -55,7 +55,6 @@ rssPosts.sort(sortMarkdownByDate);
<article
class="col-start-2 col-end-18 row-start-3 self-center md:col-start-12 md:row-start-2 xl:col-start-13 xl:col-end-17"
{...animation}
>
<Headline>About Me</Headline>
<AboutMe components={mapping} />
@@ -64,7 +63,6 @@ rssPosts.sort(sortMarkdownByDate);
<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"
{...animationDelay}
>
<Headline>What I Do</Headline>
<div class="columns-1 gap-[2.775vw] mbe-10 md:columns-2 [&_p:last-of-type]:mbe-0">
@@ -75,7 +73,6 @@ rssPosts.sort(sortMarkdownByDate);
<article
class="col-start-2 col-end-18 md:col-start-6 md:col-end-14 xl:col-start-7 xl:col-end-13"
{...animation}
>
<Headline>Journal</Headline>
<Journal components={mapping} />
@@ -85,7 +82,6 @@ rssPosts.sort(sortMarkdownByDate);
<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"
data-pagefind-ignore
{...animation}
>
<JournalList entries={formattedLatest} />
</article>

5
src/pages/journal.astro
View File

@@ -6,8 +6,6 @@ import { getCollection } from 'astro:content';
import { formatPosts } from '../utils';
import { animation, animationDelay } from '../data/site';
import GridLayout from '../layouts/GridLayout.astro';
import PageTitle from '../components/PageTitle.astro';
import JournalList from '../components/JournalList.astro';
@@ -33,11 +31,10 @@ const description = 'I am writing essays about various topics in this Journal.';
<article
class="col-start-1 col-end-18 grid md:col-start-4 md:col-end-12 xl:col-start-5 xl:col-end-11"
data-pagefind-ignore
{...animation}
>
<Intro components={mapping} />
</article>
<aside class="col-start-1 col-end-18 flex flex-wrap gap-y-3" {...animationDelay}>
<aside class="col-start-1 col-end-18 flex flex-wrap gap-y-3">
{uniqueTags.map((tag) => <Tag href={`/tag/${tag}/`}>{tag}</Tag>)}
</aside>
<nav class="col-start-1 col-end-18" aria-label="Journal">

5
src/pages/life-rules.mdx
View File

@@ -7,16 +7,11 @@ intro: These are the rules, beliefs, and principles that guide my life.
backLink: /
---
import { animation, animationDelay } from "../data/site";
import { mapping } from "../mdx-components.ts";
export const components = mapping;
<div {...animation}>
I try to live by these rules, beliefs, and principles. They are taken from everywhere, and will be updated when I find new ones. If you like them, take them.
</div>
---
## 📚 Education & Knowledge

9
src/pages/now.mdx
View File

@@ -7,18 +7,11 @@ intro: This is my Now page, a website with the content of what I am focused on a
backLink: /
---
import { animation, animationDelay } from "../data/site";
import { mapping } from "../mdx-components.ts";
export const components = mapping;
<div {...animation}>
The concept of a [Now](https://nownownow.com/) page is an idea by [Derek Silvers](https://sive.rs/).
</div>
<div {...animationDelay}>
- Building the Design System of XING 👨‍💻
- Working from home 🏡
- Learning Japanese 🇯🇵 and 🇪🇸 Spanish on [Duolingo](https://www.duolingo.com/profile/kogakure) 🦉and with [Anki](https://apps.ankiweb.net/) ⭐
@@ -27,5 +20,3 @@ The concept of a [Now](https://nownownow.com/) page is an idea by [Derek Silvers
- Creating and reviewing highlights with [Readwise](https://readwise.io/i/stefan805) 📝 every day
- Connecting ideas with the [Zettelkasten](https://en.wikipedia.org/wiki/Zettelkasten) 🗃️ note-taking method, using [Obsidian](https://obsidian.md/)
- Always reading at least two or three [books](https://www.goodreads.com/kogakure) 📚 at the same time
</div>

4
src/pages/projects.astro
View File

@@ -6,8 +6,6 @@ import { getCollection } from 'astro:content';
import { sortBySortKey } from '../utils';
import { animation } from '../data/site';
import GridLayout from '../layouts/GridLayout.astro';
import PageTitle from '../components/PageTitle.astro';
import ProjectContainer from '../components/ProjectContainer.astro';
@@ -39,7 +37,7 @@ const description =
Projects
</PageTitle>
<article class="col-start-2 col-end-18 md:col-start-6 md:col-end-14" {...animation}>
<article class="col-start-2 col-end-18 md:col-start-6 md:col-end-14">
<Intro components={mapping} />
</article>

3
src/pages/sketchnotes.astro
View File

@@ -5,7 +5,6 @@ type Sketchnotes = CollectionEntry<'sketchnotes'>;
import { getCollection } from 'astro:content';
import { sortBySortKey } from '../utils';
import { animation } from '../data/site';
import GridLayout from '../layouts/GridLayout.astro';
import Image from '../components/Image.astro';
@@ -27,7 +26,6 @@ const description = 'This is a collection of Sketchnotes I’ve drawn.';
<article
class="col-start-1 col-end-17 grid md:col-start-4 md:col-end-12 xl:col-start-5 xl:col-end-11 print:block"
{...animation}
>
<Intro components={mapping} />
</article>
@@ -59,7 +57,6 @@ const description = 'This is a collection of Sketchnotes I’ve drawn.';
data.images[0].aspectRatio < 1 && data.coverSize === 'large',
},
]}
{...animation}
>
<Link title={data.title} href={`/sketchnotes/${slug}/`}>
<Image

4
src/pages/tag.astro
View File

@@ -4,8 +4,6 @@ import type { CollectionEntry } from 'astro:content';
type Journal = CollectionEntry<'journal'>;
import { getCollection } from 'astro:content';
import { animation } from '../data/site';
import GridLayout from '../layouts/GridLayout.astro';
import PageTitle from '../components/PageTitle.astro';
import TagComponent from '../components/Tag.astro';
@@ -27,7 +25,7 @@ const description = 'This is a list of all the tags used in my journal.';
title={title}
>
<PageTitle grid="wide" innerGrid>Tags</PageTitle>
<aside class="col-start-1 col-end-18 flex flex-wrap gap-y-3" {...animation}>
<aside class="col-start-1 col-end-18 flex flex-wrap gap-y-3">
{uniqueTags.map((t) => <TagComponent href={`/tag/${t}/`}>{t}</TagComponent>)}
</aside>
</GridLayout>

3
src/pages/tag/[tag].astro
View File

@@ -5,7 +5,6 @@ type Journal = CollectionEntry<'journal'>;
import { getCollection } from 'astro:content';
import { formatPosts, titleCase } from '../../utils';
import { animationDelay } from '../../data/site';
import GridLayout from '../../layouts/GridLayout.astro';
import PageTitle from '../../components/PageTitle.astro';
@@ -58,7 +57,7 @@ const description = `These are all the articles categorized with the tag "${titl
<PageTitle slot="title" class="capitalize">
{tag}
</PageTitle>
<aside class="col-start-1 col-end-18 flex flex-wrap gap-y-3" {...animationDelay}>
<aside class="col-start-1 col-end-18 flex flex-wrap gap-y-3">
{
uniqueTags.map((uTag) => (
<TagComponent active={uTag === tag} href={`/tag/${uTag}/`}>

10
src/pages/traditional-colors-of-japan.astro
View File

@@ -11,7 +11,6 @@ import { Content as Intro } from '../text/traditional-colors-of-japan/intro.mdx'
import colors from '../data/colors-japan.json';
import { mapping } from '../mdx-components';
import { animation, animationDelay } from '../data/site';
const title = 'The Traditional Colors of Japan';
const description =
@@ -21,14 +20,11 @@ const description =
<GridLayout title={title} description={description} grid="wide" backLink="/" class="grid" innerGrid>
<PageTitle grid="wide" innerGrid>The Traditional Colors of&nbsp;Japan</PageTitle>
<article class="col-start-1 col-end-17 grid md:col-end-8 xl:content-center" {...animation}>
<article class="col-start-1 col-end-17 grid md:col-end-8 xl:content-center">
<Intro components={mapping} />
</article>
<article
class="col-start-1 col-end-17 flex grid-cols-2 md:col-start-9 md:justify-end"
{...animationDelay}
>
<article class="col-start-1 col-end-17 flex grid-cols-2 md:col-start-9 md:justify-end">
<AmazonBook
alt="The Traditional Colors of Japan"
asin="475624100X"
@@ -44,7 +40,7 @@ const description =
<ColorStack>
{
colors.map(({ name, description, color }) => (
<div {...animation}>
<div>
<ColorSwatch color={color} title={name} description={description} />
</div>
))