diff --git a/package.json b/package.json index 0e16f18..9ab961f 100644 --- a/package.json +++ b/package.json @@ -41,6 +41,7 @@ "react-chartjs-2": "^5.2.0", "react-dom": "npm:@preact/compat@^17.1.2", "reading-time": "^1.5.0", + "sal.js": "^0.8.5", "sharp": "^0.32.1", "tailwindcss": "^3.3.2", "unist-util-visit": "^4.1.2" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2c18cd6..62f47c1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -84,6 +84,9 @@ dependencies: reading-time: specifier: ^1.5.0 version: 1.5.0 + sal.js: + specifier: ^0.8.5 + version: 0.8.5 sharp: specifier: ^0.32.1 version: 0.32.1 @@ -11357,6 +11360,11 @@ packages: resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==} dev: true + /sal.js@0.8.5: + resolution: {integrity: sha512-KUb3fNrVZ1oWxxkEAfQfQ4Mrd910yboIRHqsvioBkulQInqMVeSMah+J5f7ch7KXFLicKlAaE0TzTsG/eJ02Dg==} + engines: {node: '>=12.0.0'} + dev: false + /sass-formatter@0.7.6: resolution: {integrity: sha512-hXdxU6PCkiV3XAiSnX+XLqz2ohHoEnVUlrd8LEVMAI80uB1+OTScIkH9n6qQwImZpTye1r1WG1rbGUteHNhoHg==} dependencies: diff --git a/src/components/GalleryDetail.astro b/src/components/GalleryDetail.astro index bad693f..efe367c 100644 --- a/src/components/GalleryDetail.astro +++ b/src/components/GalleryDetail.astro @@ -1,6 +1,8 @@ --- import cx from 'classnames'; +import { animation, animationDelay } from '../data/site'; + import Picture from './Picture.astro'; import { Headline } from '.'; @@ -19,6 +21,7 @@ const imageLength = entry.data.images.length;
{entry.data.title} @@ -35,10 +38,7 @@ const imageLength = entry.data.images.length; > { entry.data.images.map(({ src }: { src: string }, index: number) => ( - 1 && index > 0, @@ -48,9 +48,16 @@ const imageLength = entry.data.images.length; randomPosition() === 'end' && imageLength > 1 && index > 0, 'lg:col-start-2': imageLength === 1 || index === 0, })} - format={['webp', 'avif']} - src={src} - /> + {...animation} + > + +
)) }
diff --git a/src/components/JournalList.astro b/src/components/JournalList.astro index d7dbab7..e5d11df 100644 --- a/src/components/JournalList.astro +++ b/src/components/JournalList.astro @@ -6,6 +6,8 @@ interface Props { entries: CollectionEntry<'journal'>[]; } +import { animation } from '../data/site'; + import { pickTwoRandomColors } from '../utils'; import { Link, Subsubheadline } from '../components'; @@ -17,7 +19,7 @@ const { entries } = Astro.props; > { entries.map(({ slug, data }) => ( -
  • +
  • {data.title} diff --git a/src/components/ProjectContainer.astro b/src/components/ProjectContainer.astro index 6562f09..1900045 100644 --- a/src/components/ProjectContainer.astro +++ b/src/components/ProjectContainer.astro @@ -3,6 +3,8 @@ import cx from 'classnames'; import type { CollectionEntry } from 'astro:content'; +import { animation } from '../data/site'; + import ProjectContent from '../components/ProjectContent.astro'; import ProjectImage from '../components/ProjectImage.astro'; @@ -20,7 +22,7 @@ const { const classes = cx('col-start-1 col-end-19 grid grid-cols-18', className); --- -
    +
    { format === '50-start' && (
    @@ -35,7 +37,10 @@ const classes = cx('col-start-1 col-end-19 grid grid-cols-18', className); } { format === '50-end' && ( -
    +
    @@ -47,7 +52,10 @@ const classes = cx('col-start-1 col-end-19 grid grid-cols-18', className); } { format === '70-start' && ( -
    +
    @@ -59,7 +67,10 @@ const classes = cx('col-start-1 col-end-19 grid grid-cols-18', className); } { format === '70-end' && ( -
    +
    @@ -71,7 +82,10 @@ const classes = cx('col-start-1 col-end-19 grid grid-cols-18', className); } { format === '100-start' && ( -
    +
    @@ -83,7 +97,10 @@ const classes = cx('col-start-1 col-end-19 grid grid-cols-18', className); } { format === '100-end' && ( -
    +
    diff --git a/src/components/Sal.astro b/src/components/Sal.astro new file mode 100644 index 0000000..dd3047a --- /dev/null +++ b/src/components/Sal.astro @@ -0,0 +1,28 @@ +--- +import '../../node_modules/sal.js/dist/sal.css'; +--- + + + + + diff --git a/src/data/site.ts b/src/data/site.ts index cbd50bc..a1068b8 100644 --- a/src/data/site.ts +++ b/src/data/site.ts @@ -1,3 +1,25 @@ +const animationType = 'slide-up'; +const delay = 300; +const duration = 800; +const easing = 'ease-out-sine'; + export const site = { + title: 'Stefan Imhoff', + description: 'Front-End Web Developer from Hamburg, Germany', + url: 'https://www.stefanimhoff.de', author: 'Stefan Imhoff', + tagline: 'Front-End Web Developer • Designer • Minimalist • Japanophile', + faviconPath: '/assets/images/branding/favicons/', + twitter: '@kogakure', +}; + +export const animation = { + 'data-sal': animationType, + 'data-sal-duration': duration, + 'data-sal-easing': easing, +}; + +export const animationDelay = { + ...animation, + 'data-sal-delay': delay, }; diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro index 1575f29..f8fbc32 100644 --- a/src/layouts/BaseLayout.astro +++ b/src/layouts/BaseLayout.astro @@ -5,6 +5,7 @@ import { Sprite } from 'astro-icon'; import ThemeProvider from '../components/ThemeProvider.astro'; import PageHeader from '../components/PageHeader.astro'; import PageFooter from '../components/PageFooter.astro'; +import Sal from '../components/Sal.astro'; export interface Props { backLink?: string; @@ -53,6 +54,7 @@ const { backLink, footer = true, header = true, title, description } = Astro.pro rel="preload" type="font/woff2" /> + @@ -23,6 +26,7 @@ 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 diff --git a/src/pages/about.mdx b/src/pages/about.mdx index 6816d39..8ef35a8 100644 --- a/src/pages/about.mdx +++ b/src/pages/about.mdx @@ -4,9 +4,12 @@ title: About description: I’m Stefan Imhoff, a Front-End Web Developer, and Designer from Hamburg, Germany. --- +import { animation } from "../data/site"; import { mapping } from "../mdx-components.ts"; export const components = mapping; +
    + I’m _Stefan Imhoff_, a Senior Front-End Web Developer, and Designer 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. @@ -15,6 +18,8 @@ As a passionate enthusiast of storytelling, I am convinced that humans understan 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. +
    + --- I see myself as a 🔲 [Minimalist](/minimalism/), 🏛️ Stoic, 🎧 Introvert, and ⛩️ Japanophile. diff --git a/src/pages/ai-art.astro b/src/pages/ai-art.astro index daf7924..a82857d 100644 --- a/src/pages/ai-art.astro +++ b/src/pages/ai-art.astro @@ -5,6 +5,8 @@ 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 Picture from '../components/Picture.astro'; @@ -25,6 +27,7 @@ const description = '…';
    @@ -56,6 +59,7 @@ const description = '…'; 'md:col-span-6 md:row-span-6': data.images[0].aspectRatio === 1 && data.coverSize === 'large', })} + {...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. 🤘 +
    + +
    + ## Design - I designed the website myself in [Affinity Designer](https://affinity.serif.com/designer/), using the Japanese art form of _shibui_ (渋い) 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/). @@ -17,6 +24,10 @@ The source code of this website is available on [GitHub](https://github.com/koga - I created the Bonsai image on my homepage with [Stable Diffusion](https://stability.ai/), [ControlNet](https://github.com/lllyasviel/ControlNet), and [Affinity Photo](https://affinity.serif.com/photo/). - 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). +
    + +
    + ## Technology - The website is built with [Astro](https://astro.build/), the all-in-one web framework. @@ -31,3 +42,5 @@ The source code of this website is available on [GitHub](https://github.com/koga - I use [reading-time](https://github.com/ngryman/reading-time) to add the reading time to Remark. - To parse and format dates I use [Moment.js](https://momentjs.com/). - I use [Plop](https://plopjs.com/) to generate content from templates. + +
    diff --git a/src/pages/cv.astro b/src/pages/cv.astro index 3f7e344..e0a6acf 100644 --- a/src/pages/cv.astro +++ b/src/pages/cv.astro @@ -1,4 +1,6 @@ --- +import { animation, animationDelay } from '../data/site'; + import GridLayout from '../layouts/GridLayout.astro'; import PageTitle from '../components/PageTitle.astro'; import DownloadLink from '../components/DownloadLink.astro'; @@ -27,12 +29,12 @@ const description = ''; Curriculum Vitae -
    +
    {cv.summary.headline}
    -
    +
    Personal Information {cv.personal.name} {cv.personal.tagline} diff --git a/src/pages/haiku.astro b/src/pages/haiku.astro index 8dec0eb..213ff94 100644 --- a/src/pages/haiku.astro +++ b/src/pages/haiku.astro @@ -2,6 +2,7 @@ import { getCollection } from 'astro:content'; import { sortByDate } from '../utils'; +import { animation, animationDelay } from '../data/site'; import GridLayout from '../layouts/GridLayout.astro'; import PageTitle from '../components/PageTitle.astro'; @@ -22,6 +23,7 @@ const description = '…';
    @@ -29,6 +31,7 @@ const description = '…';