feat: improve some error messages

.github/workflows/default.yaml

@@ -16,12 +16,10 @@ jobs:
     runs-on: ubuntu-latest
     container: git.max-richter.dev/max/website:latest
     steps:
+
       - name: 🔄 Checkout code
         uses: actions/checkout@v3
 
-      - name: CHeck tar varsion
-        run: tar --version
-
       - name: 🔢 Calculate cache IDs
         run: |
           # Calculate cache IDs for Git LFS and PNPM
@@ -55,20 +53,25 @@ jobs:
 
       - name: 🏗️ Build site
         run: |
-          # Install dependencies, build, and generate site output
           pnpm i && pnpm build
 
-      - name: 🚀 Deploy files via SFTP
+      - name: 🔑 Configure rclone
-        uses: pressidium/lftp-mirror-action@v1
+        run: |
-        with:
+          echo "$SSH_PRIVATE_KEY" > /tmp/id_rsa
-          host: ${{ secrets.FTP_HOST }}
+          chmod 600 /tmp/id_rsa
-          port: ${{ secrets.FTP_PORT || 21 }}
+          mkdir -p ~/.config/rclone
-          user: ${{ secrets.FTP_USERNAME }}
+          echo -e "[sftp-remote]\ntype = sftp\nhost = ${SSH_HOST}\nuser = ${SSH_USER}\nport = ${SSH_PORT}\nkey_file = /tmp/id_rsa" > ~/.config/rclone/rclone.conf
-          pass: ${{ secrets.FTP_PASSWORD }}
+        env:
-          onlyNewer: true
+          SSH_PRIVATE_KEY: ${{ secrets.SSH_PRIVATE_KEY }}
-          parallel: '4'
+          SSH_HOST: ${{ vars.SSH_HOST }}
-          settings: 'sftp:auto-confirm=yes'
+          SSH_PORT: ${{ vars.SSH_PORT }}
-          localDir: 'dist'
+          SSH_USER: ${{ vars.SSH_USER }}
-          remoteDir: '/share/new-website'
-          options: '--verbose'
 
+      - name: 🚀 Deploy Changed Files via rclone
+        run: |
+          echo "Uploading _astro assets"
+          rclone sync --update -v --progress --size-only --stats 2s --stats-one-line ./dist/_astro sftp-remote:${REMOTE_DIR}/_astro --transfers 4
+          echo "Uploading the rest"
+          rclone sync --update -v --progress --exclude _astro/** --stats 2s --stats-one-line ./dist/ sftp-remote:${REMOTE_DIR} --transfers 4
+        env:
+          REMOTE_DIR: ${{ vars.REMOTE_DIR }}

.prettierrc

@@ -0,0 +1,3 @@
+{
+  "bracketSameLine": true
+}

Dockerfile

@@ -5,6 +5,8 @@ RUN apk add --no-cache \
     git \
     git-lfs \
     tar \
+    rclone \
+    openssh \
     bash
 
 # Install PNPM globally

astro.config.mjs

@@ -10,7 +10,7 @@ import UnoCSS from 'unocss/astro'
 
 const defaultLocale = "de";
 const locales = {
-  en: "en", // the `defaultLocale` value must present in `locales` keys
+  en: "en",
   de: "de",
 };
 
@@ -38,21 +38,28 @@ export default defineConfig({
         compiler: 'svelte',
       }),
     ],
+    server: {
+     watch: {
+        // Customize watch behavior to reduce file watchers
+        ignored: ['**/node_modules/**', '**/dist/**', '**/.git/**'],
+        usePolling: process.env.NODE_ENV === 'production',
+      },
+    },
   },
   markdown: {
     remarkPlugins: [setDefaultLayout]
   },
   integrations: [
-    mdx(),
-    svelte(),
-    UnoCSS({
-      injectReset: true
-    }),
     i18n({
       exclude: ["pages/**/*.json.ts", "pages/api/**/*",],
       locales,
       defaultLocale,
     }),
+    mdx(),
+    svelte(),
+    UnoCSS({
+      injectReset: true
+    }),
     sitemap({
       i18n: {
         locales,

package.json

@@ -10,32 +10,33 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/check": "^0.5.10",
+    "@astrojs/check": "^0.9.4",
-    "@astrojs/mdx": "^2.2.4",
+    "@astrojs/mdx": "^4.2.6",
-    "@astrojs/svelte": "^5.3.0",
+    "@astrojs/svelte": "^7.0.13",
-    "@astrojs/tailwind": "^5.1.0",
+    "@astrojs/tailwind": "^6.0.2",
-    "astro": "^4.5.16",
+    "astro": "^5.7.13",
-    "astro-i18n-aut": "^0.7.0",
+    "astro-i18n-aut": "^0.7.3",
-    "svelte": "^4.2.12",
+    "exifreader": "^4.30.1",
-    "svelte-gestures": "^4.0.0",
+    "svelte": "^5.28.6",
-    "tailwindcss": "^3.4.3",
+    "svelte-gestures": "^5.1.4",
+    "tailwindcss": "^4.1.6",
     "thumbhash": "^0.1.1",
-    "typescript": "^5.4.4"
+    "typescript": "^5.8.3"
   },
   "devDependencies": {
-    "@astrojs/sitemap": "^3.1.2",
+    "@astrojs/sitemap": "^3.4.0",
-    "@iconify-json/tabler": "^1.1.109",
+    "@iconify-json/tabler": "^1.2.17",
-    "@types/markdown-it": "^14.0.0",
+    "@types/markdown-it": "^14.1.2",
-    "@unocss/preset-icons": "^0.59.0",
+    "@unocss/preset-icons": "^66.1.1",
-    "@unocss/reset": "^0.59.0",
+    "@unocss/reset": "^66.1.1",
-    "astro-font": "^0.0.80",
+    "astro-font": "^1.1.0",
     "markdown-it": "^14.1.0",
-    "ogl": "^1.0.6",
+    "ogl": "^1.0.11",
-    "prettier": "^3.2.5",
+    "prettier": "^3.5.3",
-    "prettier-plugin-astro": "^0.13.0",
+    "prettier-plugin-astro": "^0.14.1",
-    "sharp": "^0.33.3",
+    "sharp": "^0.34.1",
-    "unocss": "^0.59.0",
+    "unocss": "^66.1.1",
-    "unplugin-icons": "^0.18.5",
+    "unplugin-icons": "^22.1.0",
-    "vite-plugin-glsl": "^1.3.0"
+    "vite-plugin-glsl": "^1.4.1"
   }
 }

public/projects/plantarium/favicon.svg

@@ -0,0 +1,9 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M55.2154 77.6602L52.2788 78.3944L49.2607 60.6933L52.2788 33.0404L47.6293 18.0312L45.9162 18.6838L41.6745 28.7987L31.6412 33.4483H20.2211L21.6894 24.0675L31.6412 15.9919L45.9162 15.1762L49.7501 15.9919L55.2154 32.6326L54.5628 38.5873L64.8409 33.0404L69.5721 37.69L80.1764 43.1553L84.1734 52.8624L83.113 64.1193L73.8954 61.8353L66.3092 52.4545V38.5873L64.1068 36.7112L54.155 42.4212L52.2788 60.6933L55.2154 77.6602Z" fill="url(#paint0_linear)"/>
+<defs>
+<linearGradient id="paint0_linear" x1="34.3903" y1="15.1762" x2="52.1972" y2="78.3944" gradientUnits="userSpaceOnUse">
+<stop stop-color="#4CAF7B"/>
+<stop offset="1" stop-color="#347452"/>
+</linearGradient>
+</defs>
+</svg>

src/components/GoogleyEye.svelte

@@ -95,8 +95,7 @@
   role="img"
   aria-label="Toggle Googley Eyes"
   aria-hidden="true"
-  on:keydown={(ev) => (ev.key === "Enter" ? ($visible = !$visible) : "")}
+  on:keydown={(ev) => (ev.key === "Enter" ? ($visible = !$visible) : "")}>
->
   {#if $visible}
     <div class="eye" bind:this={eye} transition:scale>
       <div class="pupil"></div>
@@ -110,8 +109,10 @@
     width: 100%;
     height: 100%;
     display: flex;
-    width: 50px;
+    max-width: 50px;
-    height: 50px;
+    max-height: 50px;
+    width: 10vw;
+    height: 10vw;
     justify-content: center;
     align-items: center;
   }
@@ -119,8 +120,10 @@
   .eye {
     position: relative;
     overflow: hidden;
-    width: 50px;
+    max-width: 50px;
-    height: 50px;
+    max-height: 50px;
+    width: 10vw;
+    height: 10vw;
     border-radius: 50%;
     background-color: white;
     display: flex;

src/components/HeroCard.astro

@@ -3,18 +3,14 @@ import markdownToText from "@helpers/markdownToText";
 import { Card } from "./card";
 import { useTranslatedPath, useTranslations } from "@i18n/utils";
 import Image from "@components/Image.astro";
-import type { ImageMetadata } from "astro";
+import type { InferEntrySchema } from "astro:content";
 
 interface Props {
   post: {
-    data: {
+    data: InferEntrySchema<"projects">;
-      title: string;
-      icon?: string;
-      cover?: ImageMetadata;
-    };
     collection: string;
-    slug: string;
+    id: string;
-    body: string;
+    body?: string;
   };
 }
 
@@ -22,25 +18,31 @@ const {
   data: { title, cover, icon },
   collection,
   body,
-  slug,
+  id,
 } = Astro.props.post;
 
 const translatePath = useTranslatedPath(Astro.url);
 const t = useTranslations(Astro.url);
 
-const link = translatePath(`/${collection}/${slug.split("/")[0]}`);
+const link = translatePath(`/${collection}/${id.split("/")[0]}`);
 ---
 
 <Card
-  classes={`grid gradient border-1 border-neutral overflow-hidden  ${cover ? "grid-rows-[200px_1fr] xs:grid-rows-none xs:grid-cols-[1fr_200px]" : ""}`}
+  classes={`grid gradient border-1 border-neutral overflow-hidden  ${cover ? "grid-rows-[200px_1fr] xs:grid-rows-none xs:grid-cols-[1fr_200px]" : ""}`}>
->
   <Card.Content classes="px-8 py-7 order-last xs:order-first">
     <Card.Title classes="text-4xl flex items-center gap-2">
-      {icon && <img src={icon} class="h-6" />}
+      {
+      icon && 
+        (
+          icon?.length > 5
+            ? <img class="h-6 w-6" src={icon}  />
+            : <span class="p-r-4 text-md">{icon}</span>
+        )
+      }
       {title}
     </Card.Title>
     <Card.Description>
-      {markdownToText(body).slice(0, 200)}
+      {markdownToText(body ?? "").slice(0, 200)}
     </Card.Description>
     <Card.ReadMoreButton link={link} text={t("read-more")} />
   </Card.Content>
@@ -50,7 +52,7 @@ const link = translatePath(`/${collection}/${slug.split("/")[0]}`);
         <Image
           hash
           loader={false}
-          src={cover}
+          src={cover as ImageMetadata}
           alt={"cover for " + title}
           class="right-0 h-full object-cover object-center rounded-none border-l border-neutral"
         />

src/components/Image.astro

@@ -1,9 +1,9 @@
 ---
 import type { ImageMetadata } from "astro";
 import { Picture as AstroImage } from "astro:assets";
-import { generateThumbHash } from "@helpers/image";
+import { generateThumbHash, getExifData } from "@helpers/image";
 interface Props {
-  src: ImageMetadata;
+  src: ImageMetadata & { fsPath?: string };
   alt: string;
   pictureClass?: string;
   class?: string;
@@ -22,7 +22,9 @@ const {
   maxWidth,
 } = Astro.props;
 
-let thumbhash = hash ? await generateThumbHash(image) : "";
+let thumbhash = hash && image.fsPath ? await generateThumbHash(image) : "";
+
+let exif = await getExifData(image);
 
 const sizes = [
   {
@@ -47,6 +49,7 @@ const sizes = [
   src={image}
   alt={alt}
   data-thumbhash={thumbhash}
+  data-exif={JSON.stringify(exif)}
   pictureAttributes={{
     class: `${hash ? "block h-full relative" : ""} ${loader ? "thumb" : ""} ${pictureClass}`,
   }}
@@ -54,5 +57,6 @@ const sizes = [
   widths={sizes.map((size) => size.width)}
   sizes={sizes
     .map((size) => `${size.media || "100vw"} ${size.width}px`)
-    .join(", ")}
+    .join(", ")}>
-/>
+  <slot />
+</AstroImage>

src/components/ImageGallery.svelte

@@ -2,8 +2,18 @@
   import { onMount } from "svelte";
   import { fade } from "svelte/transition";
   import normalizeWheel from "@helpers/normalizeWheel";
-  let images = [];
+  type Image = {
-  let progress = [];
+    exif: string[];
+    src: string;
+    alt: string;
+    sizes: string;
+    original: string;
+    loaded: string;
+    originalLoaded: boolean;
+    startedLoading: boolean;
+  };
+  let images: Image[] = [];
+  let progress: number[] = [];
   let currentIndex = -1;
   const maxZoom = 5;
   import { swipe } from "svelte-gestures";
@@ -34,14 +44,14 @@
     currentIndex = index;
   };
 
-  const handleKeyDown = ({ key }) => {
+  const handleKeyDown = ({ key }: KeyboardEvent) => {
     if (currentIndex < 0) return;
     if (key === "Escape" && currentIndex > -1) setIndex(-1);
     if (key === "ArrowLeft") addIndex(-1);
     if (key === "ArrowRight") addIndex(+1);
   };
 
-  const handleOriginalLoading = async (image) => {
+  const handleOriginalLoading = async (image: Image) => {
     if (!image.startedLoading) {
       image.startedLoading = true;
       let cIndex = currentIndex;
@@ -54,7 +64,8 @@
           },
         });
         const total = Number(response.headers.get("content-length"));
-        const reader = response.body.getReader();
+        const reader = response?.body?.getReader();
+        if (!reader) return;
         let bytesReceived = 0;
         let chunks = [];
         console.log("[SLIDER] started loading " + image.original);
@@ -130,6 +141,15 @@
     // console.log(ev);
   };
 
+  function formatExposureTime(num: string) {
+    if (num.includes("/")) {
+      const [a, b] = num.split("/");
+      return `${a}/${b}s`;
+    } else {
+      return num + "s";
+    }
+  }
+
   onMount(() => {
     const wrappers = Array.prototype.slice.call(
       document.querySelectorAll("picture > img"),
@@ -145,18 +165,31 @@
         console.log("Error loading", image);
       });
 
-      let exif = null;
+      let exif: string[] = [];
 
       try {
-        let rawExif = image.getAttribute("data-exif");
+        const rawExif = image.getAttribute("data-exif");
-        exif = JSON.parse(rawExif);
+        const exifData = JSON.parse(rawExif);
+        if (exifData) {
+          exif = [
+            "Model" in exifData ? exifData.Model : "",
+            "FocalLength" in exifData
+              ? exifData.FocalLength.replace(" mm", "mm")
+              : "",
+            "FNumber" in exifData ? exifData.FNumber : "",
+            "ExposureTime" in exifData
+              ? formatExposureTime(exifData.ExposureTime)
+              : "",
+          ];
+        }
       } catch (error) {
         // No biggie
       }
 
       return {
         exif,
-        // preview: preview.getAttribute("src"),
+        startedLoading: false,
+        loaded: "",
         src: image.getAttribute("srcset"),
         alt: image.getAttribute("alt"),
         sizes: image.getAttribute("sizes"),
@@ -184,11 +217,11 @@
     <div class="controls">
       {#each images as _, i}
         <button
+          aria-label={`Image ${i + 1}`}
           class:active={currentIndex === i}
           on:click={() => {
             currentIndex = i;
-          }}
+          }}></button>
-        />
       {/each}
     </div>
   {/if}
@@ -201,25 +234,18 @@
     <div
       class="image"
       use:swipe
+      role="dialog"
       on:swipe={handleSwipe}
       on:wheel|passive={handleScroll}
       on:mousemove={handleMouseMove}
-      on:pointermove={handlePointerMove}
+      on:pointermove={handlePointerMove}>
-    >
       {#if progress[currentIndex] && progress[currentIndex] < 0.99}
         <div
           transition:fade
           id="progress"
-          style={`transform: scaleX(${progress[currentIndex]});`}
+          style={`transform: scaleX(${progress[currentIndex]});`} />
-        />
       {/if}
 
-      <img
-        class="background"
-        src={images[currentIndex].preview}
-        alt="background blur"
-      />
-
       <span>
         <img
           style={`transform: scale(${scale}); transform-origin: ${
@@ -227,28 +253,15 @@
           }px ${window.innerHeight - my}px`}
           srcset={images[currentIndex].loaded ? "" : images[currentIndex].src}
           src={images[currentIndex].loaded}
-          alt={images[currentIndex].alt}
+          alt={images[currentIndex].alt} />
-        />
       </span>
     </div>
     {#if images[currentIndex].exif}
       {@const exif = images[currentIndex].exif}
-      <div class="exif" on:click={() => console.log(exif)}>
+      <div class="exif">
-        {#if "FocalLength" in exif}
+        {#each exif as e}
-          {exif.FocalLength}mm |
+          <span> {e} </span>
-        {/if}
+        {/each}
-
-        {#if "FNumber" in exif}
-          <i>f</i>{exif.FNumber} |
-        {/if}
-
-        {#if "ExposureTime" in exif}
-          {exif.ExposureTime.replace(" s", "s")} |
-        {/if}
-
-        {#if "Date" in exif}
-          {exif.Date}
-        {/if}
       </div>
     {/if}
   {/if}
@@ -261,7 +274,7 @@
     height: 10px;
     z-index: 99;
     left: 47px;
-    background-color: black;
+    background: var(--neutral-800);
     width: calc(100% - 94px);
     transform-origin: left;
     transition: transform 0.3s ease;
@@ -273,7 +286,7 @@
     left: 0;
     height: 100vh;
     width: 100vw;
-    background-color: rgba(24, 24, 24, 0.99);
+    background: var(--neutral-800);
 
     opacity: 0;
     transition: opacity 0.1s ease;
@@ -313,21 +326,11 @@
       transform-origin 0.1s linear;
   }
 
-  .image > .background {
-    filter: brightness(0.2);
-    position: absolute;
-    opacity: 0.3;
-    width: 100%;
-    z-index: 98;
-    height: 100%;
-    object-fit: fill;
-  }
-
   .controls {
     width: fit-content;
     left: 50vw;
     transform: translateX(-50%);
-    background: black;
+    background: var(--neutral-800);
     padding: 5px;
     position: absolute;
     z-index: 99;
@@ -338,7 +341,7 @@
     width: 15px;
     height: 15px;
     border-style: none;
-    background: black;
+    background: transparent;
     border: solid 1px white;
     cursor: pointer;
     margin: 2px;
@@ -355,15 +358,25 @@
     left: 50vw;
     transform: translateX(-50%);
     z-index: 99;
-    background-color: black;
+    background: var(--neutral-800);
     color: white;
     padding: 5px;
-    font-size: 0.8em;
+    padding-inline: 10px;
+    font-size: 0.9em;
     white-space: pre;
+    display: flex;
+  }
+
+  .exif > span {
+    padding: 0px 8px;
+  }
+
+  .exif > span:last-child {
+    border-right: none;
   }
 
   .gallery-wrapper > button {
-    background: black;
+    background: var(--neutral-800);
     color: white;
     border-radius: 0px;
     border: none;

src/components/ImageSlider.svelte

@@ -19,7 +19,6 @@
     _img.addEventListener("load", () => {
       img.classList.remove("thumb-loading");
       _img.style.opacity = "1";
-      console.log("loaded");
     });
     if (_img?.alt) altText = _img.alt;
     else altText = "";
@@ -62,10 +61,12 @@
   style={`--height:${height}px`}
 >
   {#if title}
-    <div class="flex items-center p-x-4 bg justify-between">
+    <div class="flex items-center p-x-4 p-y-6 bg justify-between">
       <h3>{title}</h3>
 
-      <div class="overflow-hidden rounded-md bg-light gap-2 flex p-1">
+      <div
+        class="overflow-hidden rounded-md bg-light gap-2 flex p-2 border border-light"
+      >
         <button
           class="flex-1 i-tabler-arrow-left"
           aria-label="previous image"
@@ -80,10 +81,10 @@
     </div>
   {/if}
 
-  <div class="images" bind:this={slot}>
+  <div class="images border-t-1 border-b-1 border-neutral" bind:this={slot}>
     <slot />
   </div>
-  <div class="p-2 flex place-content-between bg">
+  <div class="px-4 flex items-center place-content-between bg">
     <p>
       {#if images?.length}
         {index + 1}/{images?.length}
@@ -97,7 +98,7 @@
 
 <style>
   .wrapper {
-    grid-template-rows: 1fr 40px;
+    grid-template-rows: 1fr 50px;
     transition: height 0.3s;
   }
 
@@ -106,11 +107,11 @@
   }
 
   .wrapper.title {
-    grid-template-rows: 40px 1fr 40px;
+    grid-template-rows: 50px 1fr 50px;
   }
 
   .loaded {
-    height: calc(var(--height) + 40px);
+    height: calc(var(--height) + 50px);
   }
 
   .not-loaded .images :global(picture):first-child {
@@ -118,7 +119,7 @@
   }
 
   .wrapper.title.loaded {
-    height: calc(var(--height) + 80px);
+    height: calc(var(--height) + 100px);
   }
 
   .images :global(picture) {
@@ -126,6 +127,10 @@
     display: none;
   }
 
+  .images :global(.thumb-loading)::before {
+    opacity: 0;
+  }
+
   .images :global(.active) {
     position: relative;
     display: block !important;

src/components/Max.astro

@@ -10,30 +10,37 @@ const t = useTranslations(Astro.url);
 ---
 
 <Card
-  classes="googley-eye-target relative rounded-diag-md border border-neutral bg-dark grid xs:grid-cols-[250px_1fr] min-h-[180px] sm:h-[180px] mt-8"
+  classes="googley-eye-target relative rounded-diag-md border border-neutral bg-dark grid xs:grid-cols-[200px_1fr] sm:grid-cols-[300px_1fr]  mt-8">
->
   <div
-    class="image relative h-[130%] self-end items-end flex overflow-hidden order-last xs:order-first"
+    class="relative xs:h-full self-end items-end flex order-last xs:order-first">
-  >
+    <div
-    <Image
+      class="image xs:absolute inline w-1/2 xs:w-full xs:h-[110%] overflow-hidden">
-      src={MaxImg}
+      <Image
-      alt="its mee"
+        src={MaxImg}
-      class="object-bottom h-full object-cover w-1/2 xs:w-full"
+        alt="its mee"
-      hash={false}
+        class="object-bottom h-full object-contain"
-      maxWidth={700}
+        hash={false}
-      loader={false}
+        maxWidth={700}
-    />
+        loader={false}
-    <div class="eye right">
+      />
-      <GoogleyEye client:load />
+      <div class="eye right">
-    </div>
+        <GoogleyEye client:load />
-    <div class="eye left">
+      </div>
-      <GoogleyEye client:load />
+      <div class="eye left">
+        <GoogleyEye client:load />
+      </div>
     </div>
   </div>
 
-  <div class="content flex flex-col p-8 pl-4 gap-2 justify-center">
+  <div class="content flex flex-col p-8 pl-4 gap-3 justify-center">
     <h1 class="text-2xl">{t("home.title")}</h1>
     <p>{t("home.subtitle")}</p>
+    <a
+      class="bg gradient flex items-center border border-neutral gap-2 w-fit p-2 px-4 rounded-2xl"
+      href="/max-richter-resume.pdf">
+      {t("resume").toLowerCase()}.pdf
+      <span class="i-tabler-download w-4 h-4 dark:opacity-50"></span>
+    </a>
   </div>
 </Card>
 
@@ -81,11 +88,11 @@ const t = useTranslations(Astro.url);
     position: absolute;
   }
   .eye.left {
-    top: 29%;
+    top: 24%;
-    right: 28%;
+    right: 27%;
   }
   .eye.right {
-    top: 31%;
+    top: 26%;
-    right: 12%;
+    right: 13%;
   }
 </style>

src/components/MetaTags.astro

@@ -0,0 +1,13 @@
+---
+interface Props {
+  title: string;
+  cover: string;
+}
+---
+
+<meta property="og:title" content={Astro.props.title} />
+<meta property="og:type" content="website" />
+<meta property="og:url" content={Astro.url} />
+<meta property="og:image" content={Astro.props.cover} />
+<meta property="og:description" content="Max Richters personal blog" />
+<meta property="og:site_name" content="Max Richter" />

src/components/Nav.astro

@@ -4,7 +4,7 @@ import Logo from "./Logo.astro";
 import ToggleTheme from "@components/ThemeToggle.svelte";
 
 function isActive(path: string) {
-  return Astro.url.pathname === path;
+  return Astro.url.pathname.startsWith(path);
 }
 
 const t = useTranslations(Astro.url);
@@ -33,12 +33,10 @@ const paths = [
 <ul class="flex my-4 h-12">
   <li><a href="#main-content" class="skip-link">Skip to main content</a></li>
   <li
-    class="border-none bg-transparent my-2 mr-4 logo grid place-content-center"
+    class="border-none bg-transparent my-2 mr-4 logo grid place-content-center">
-  >
     <a
       href={translatePath("/")}
-      class="text-neutral h-9 flex items-center justify-center lowercase"
+      class="text-neutral h-9 flex items-center justify-center lowercase">
-    >
       <Logo />
     </a>
   </li>
@@ -50,13 +48,11 @@ const paths = [
           ${isActive(link) ? "bg-light underline" : "bg"}
           ${i === 0 ? "rounded-bl-md border-l-1" : "border-l-1"}
           ${i === paths.length - 1 ? "rounded-tr-md !border-r-1" : ""}
-        `}
+        `}>
-      >
         <a
           class="text-neutral w-full h-full flex items-center justify-center lowercase"
           href={link}
-          data-astro-prefetch
+          data-astro-prefetch>
-        >
           {text}
         </a>
       </li>

src/components/Picture.astro

@@ -0,0 +1,27 @@
+---
+import Image from "./Image.astro";
+const {src, alt, caption} = Astro.props;
+---
+
+<figure>
+  <Image src={src} alt={alt}/>
+  <figcaption>
+    {caption}
+  </figcaption>
+</figure>
+
+<style>
+
+figure {
+  display: inline-block;
+  text-align: center;
+}
+
+figcaption {
+  font-size: 0.9rem;
+  text-align: center;
+  color: #666;
+  margin-top: 0.5rem;
+}
+
+</style>

src/components/SmallCard.astro

@@ -1,20 +1,16 @@
 ---
 import markdownToText from "@helpers/markdownToText";
 import { useTranslatedPath } from "@i18n/utils";
+import type { InferEntrySchema } from "astro:content";
 
 const tp = useTranslatedPath(Astro.url);
 
 interface Props {
   post: {
-    data: {
+    data: InferEntrySchema<"blog">;
-      title: string;
-      description?: string;
-      icon?: string;
-      tags?: string[];
-    };
     collection: string;
-    body: string;
+    body?: string;
-    slug: string;
+    id: string;
   };
 }
 
@@ -22,15 +18,20 @@ const { post } = Astro.props;
 ---
 
 <div class="rounded-diag-md border border-neutral p-4 overflow-hidden">
-  <a href={tp(`/${post.collection}/${post.slug.split("/")[0]}`)}>
+  <a href={tp(`/${post.collection}/${post.id.split("/")[0]}`)}>
     <h2
-      class="text-2xl flex gap-2 items-center line-clamp text-ellipsis overflow-hidden"
+      class="text-2xl flex gap-2 items-center line-clamp text-ellipsis overflow-hidden">
-    >
+      {
-      {post.data.icon && <img src={post.data.icon} class="h-6" />}
+        post.data.icon?.length > 3 ? (
+          <img src={post.data.icon} class="h-6" />
+        ) : post.data.icon?.length ? (
+          <span>{post.data.icon}</span>
+        ) : null
+      }
       {post.data.title}
     </h2>
     <p class="text-ellipsis overflow-hidden line-clamp-2">
-      {post.data.description || markdownToText(post.body).slice(0, 200)}
+      {post.data.description || markdownToText(post?.body || "").slice(0, 200)}
     </p>
   </a>
   {
@@ -39,8 +40,7 @@ const { post } = Astro.props;
         {post.data.tags.map((tag) => (
           <a
             href={tp(`/tag/${tag}`)}
-            class="text-xs border border-neutral p-2 rounded-md"
+            class="text-xs border border-neutral p-2 rounded-md">
-          >
             {tag}
           </a>
         ))}

src/components/TOC.astro

@@ -10,10 +10,9 @@ type Props = {
 const { headings } = Astro.props;
 ---
 
-<div class="toc-wrapper lg:fixed lg:left-6 lg:top-6">
+<div class="toc-wrapper lg:fixed lg:left-6 lg:top-6 z-2">
   <details
-    class="py-2 px-4 rounded-xl border border-neutral flex flex-col bg gap-2"
+    class="py-2 lg:px-4 rounded-xl lg:border lg:border-neutral flex flex-col lg:bg gap-2">
-  >
     <summary class="text-lg cursor-pointer select-none"
       >{t("toc.title")}</summary
     >
@@ -24,8 +23,7 @@ const { headings } = Astro.props;
             <a
               href={`#${heading.slug}`}
               style={{ marginLeft: `${(heading.depth - 1) * 1}rem` }}
-              class={`block text my-0`}
+              class={`block text my-0`}>
-            >
               {heading.text}
             </a>
           );

src/components/ThemeToggle.svelte

@@ -3,6 +3,7 @@
   import { writable } from "svelte/store";
   import IconSun from "~icons/tabler/Sun";
   import IconMoon from "~icons/tabler/Moon";
+  import { colors } from "@helpers/colors";
 
   let theme = writable("");
 
@@ -10,6 +11,12 @@
     document.documentElement.classList.remove("light", "dark");
     document.documentElement.classList.add($theme);
     localStorage.setItem("theme", $theme);
+
+    const background = window.getComputedStyle(document.body);
+
+    $colors = {
+      background: background.backgroundColor,
+    };
   }
 
   function toggleTheme() {

src/components/Thumbhash.astro

@@ -1,55 +0,0 @@
-<script>
-  import { thumbHashToRGBA, rgbaToDataURL } from "thumbhash";
-
-  function show(img: HTMLImageElement) {
-    img.style.opacity = "1";
-    img.style.filter = "blur(0px)";
-    setTimeout(() => {
-      if (img.parentNode) {
-        (img.parentNode as HTMLPictureElement).style.background = "";
-      }
-    }, 600);
-  }
-
-  console.log("Thumbhash script loaded");
-
-  document.querySelectorAll("[data-thumbhash]").forEach((entry) => {
-    const parent = entry?.parentNode as HTMLPictureElement;
-    const img = entry as HTMLImageElement;
-
-    if (parent?.nodeName !== "PICTURE") return;
-
-    const hash = img.getAttribute("data-thumbhash");
-    if (!hash) return;
-
-    // its only browser, why you have to be mad
-    const decodedString = window.atob(hash);
-
-    // Create Uint8Array from decoded string
-    const buffer = new Uint8Array(decodedString.length);
-    for (let i = 0; i < decodedString.length; i++) {
-      buffer[i] = decodedString.charCodeAt(i);
-    }
-
-    const image = thumbHashToRGBA(buffer);
-    const dataURL = rgbaToDataURL(image.w, image.h, image.rgba);
-
-    parent.style.background = `url(${dataURL})`;
-    parent.style.backgroundSize = "cover";
-
-    if (img.complete) {
-      return;
-    }
-
-    img.style.opacity = "0";
-    img.style.filter = "blur(5px)";
-    img.style.transition = "opacity 0.6s ease, filter 0.8s ease";
-
-    const sources = parent.querySelectorAll("source");
-
-    img.onload = () => show(img);
-    for (const source of sources) {
-      source.addEventListener("load", () => show(img));
-    }
-  });
-</script>

src/components/arrows/ArrowB.astro

@@ -12,6 +12,7 @@ const t = useTranslations(Astro.url);
   .arrow {
     position: absolute;
     left: 0;
+    z-index: 1;
     transform: translateX(-110%) translateY(-160px);
   }
   .arrow > p {

src/components/card/ReadMoreButton.svelte

@@ -7,5 +7,5 @@
   href={link}
   data-astro-prefetch
   class="bg-light p-2 text-s rounded-md px-4 flex flex-0 items-center gap-2 w-fit"
-  >{text}<span class="i-tabler-arrow-right inline-block w-4 h-4" />
+  >{text}<span class="i-tabler-arrow-right inline-block w-4 h-4"></span>
 </a>

src/components/card/index.ts

@@ -5,14 +5,7 @@ import Title from './Title.svelte';
 import Description from './Description.svelte';
 import ReadMoreButton from './ReadMoreButton.svelte';
 
-const Card = {
+const Card = Wrapper as typeof Wrapper & {
-  ...Wrapper,
-  Image,
-  Content,
-  Title,
-  Description,
-  ReadMoreButton
-} as typeof Wrapper & {
   Image: typeof Image;
   Content: typeof Content;
   Title: typeof Title;
@@ -20,4 +13,10 @@ const Card = {
   ReadMoreButton: typeof ReadMoreButton;
 }
 
+Card.Image = Image;
+Card.Content = Content;
+Card.Title = Title;
+Card.Description = Description;
+Card.ReadMoreButton = ReadMoreButton;
+
 export { Card };

src/content.config.ts

@@ -0,0 +1,33 @@
+import { glob } from 'astro/loaders';
+import { defineCollection, z, type ImageFunction } from 'astro:content';
+
+const defaultSchema = ({ image }: { image: ImageFunction }) => z.object({
+  title: z.string(),
+  date: z.date(),
+  cover: image().optional(),
+  links: z.array(z.array(z.string())).optional(),
+  coverAlt: z.string().optional(),
+  toc: z.boolean().optional(),
+  description: z.string().optional(),
+  icon: z.string().optional(),
+  draft: z.boolean().optional(),
+  featured: z.boolean().optional(),
+  tags: z.array(z.string()).optional(),
+  _layout: z.enum(['normal', 'transparent']).optional(),
+})
+
+
+export const collections = {
+  'blog': defineCollection({
+    loader: glob({ pattern: '**/[^_]*.{md,mdx}', base: "./src/content/blog" }),
+    schema: defaultSchema,
+  }),
+  "projects": defineCollection({
+    loader: glob({ pattern: '**/[^_]*.{md,mdx}', base: "./src/content/projects" }),
+    schema: defaultSchema,
+  }),
+  "photos": defineCollection({
+    loader: glob({ pattern: '**/[^_]*.{md,mdx}', base: "./src/content/photos" }),
+    schema: defaultSchema,
+  })
+};

src/content/blog/zentralwerk_2051/Fishes.svelte

@@ -2,38 +2,36 @@
   import { onMount } from "svelte";
   import createFishes from "./fishes/webgl-fishes";
   import { Color } from "ogl";
-  import { rgbToHex } from "@helpers/colors";
+  import { colors, rgbToHex } from "@helpers/colors";
 
   let canvasBottom: HTMLCanvasElement;
 
   let speed = 0;
   let timeOffset = Math.random() * 100000;
 
-  let fishCanvasBack: { resize: any; update: any };
+  let fishCanvasBack: ReturnType<typeof createFishes>;
   let render = true;
 
   const color = new Color("#ffffff");
 
+  function updateColor(c: string) {
+    const d = new Color(rgbToHex(c));
+    color.set(d.r, d.g, d.b);
+    fishCanvasBack?.resize();
+  }
+
+  $: if ($colors.background) {
+    updateColor($colors.background);
+  }
+
   const handleResize = () => {
     fishCanvasBack.resize();
-
     render = window.innerWidth > 500;
   };
 
-  const updateBackgroundColor = () => {
-    const background = window.getComputedStyle(document.body);
-    const d = new Color(rgbToHex(background.backgroundColor));
-    color.set(d.r, d.g, d.b);
-    fishCanvasBack.resize();
-  };
-
   let loaded = false;
 
   onMount(async () => {
-    const background = window.getComputedStyle(document.body);
-    const d = new Color(rgbToHex(background.backgroundColor));
-    color.set(d.r, d.g, d.b);
-
     fishCanvasBack = createFishes(canvasBottom, { amount: 100, color });
 
     fishCanvasBack.resize();
@@ -48,15 +46,12 @@
   });
 </script>
 
-<svelte:body on:transitionend={updateBackgroundColor} />
-
 <svelte:window
   on:resize={handleResize}
   on:scroll={() => {
     speed = Math.min(speed + 0.001, 0.15);
     timeOffset += speed;
-  }}
+  }} />
-/>
 
 <canvas id="bottom" bind:this={canvasBottom} class:loaded />
 
@@ -70,10 +65,10 @@
     left: 0px;
     z-index: -1;
     opacity: 0;
-    transition: opacity 0.5s;
+    transition: opacity 4s;
   }
 
   canvas.loaded {
-    opacity: 0.2;
+    opacity: 0.8;
   }
 </style>

src/content/config.ts

@@ -1,26 +0,0 @@
-import { defineCollection, z } from 'astro:content';
-
-const blogCollection = defineCollection({
-  schema: ({ image }) => z.object({
-    title: z.string(),
-    date: z.date(),
-    cover: image().refine((img) => img.width >= 720, {
-      message: "Cover image must be at least 720 pixels wide!",
-    }).optional(),
-    links: z.array(z.array(z.string())).optional(),
-    coverAlt: z.string().optional(),
-    toc: z.boolean().optional(),
-    description: z.string().optional(),
-    icon: z.string().optional(),
-    draft: z.boolean().optional(),
-    featured: z.boolean().optional(),
-    tags: z.array(z.string()).optional(),
-    _layout: z.enum(['normal', 'transparent']).optional(),
-  })
-});
-
-export const collections = {
-  'blog': blogCollection,
-  "projects": blogCollection,
-  "photos": blogCollection,
-};

src/content/photos/erasmus-valencia/index.en.mdx

@@ -2,6 +2,9 @@
 title: "Erasmus Valencia"
 date: 2022-09-02
 cover: ./images/MAX_8218 - MAX_8230.jpg
+toc: true
+icon: 🍊
+tags: ["valencia", "erasmus"]
 ---
 
 import Image from "@components/Image.astro"

src/content/photos/erasmus-valencia/index.mdx

@@ -3,6 +3,8 @@ title: "Erasmus Valencia"
 date: 2022-09-02
 cover: ./images/MAX_8218 - MAX_8230.jpg
 toc: true
+icon: 🍊
+tags: ["valencia", "erasmus"]
 ---
 
 import Image from "@components/Image.astro"

src/content/photos/madeira-2025/index.en.mdx

@@ -0,0 +1,104 @@
+---
+title: Madeira
+date: 2025-02-16
+license: "CC-BY-SA:4.0"
+comments: true
+icon: 🏝️
+cover: ./images/MAX_0603.jpg
+tags: ["madeira", "travel"]
+---
+
+import Image from "@components/Image.astro";
+import Picture from "@components/Picture.astro";
+import ImageGallery from "@components/ImageGallery.svelte"
+import ImageSlider from "@components/ImageSlider.svelte"
+
+import MAX_0354 from "./images/MAX_0354.jpg"
+import MAX_0369 from "./images/MAX_0369.jpg"
+import MAX_0442 from "./images/MAX_0442.jpg"
+import MAX_0447_Panorama from "./images/MAX_0447-Panorama.jpg"
+import MAX_0463 from "./images/MAX_0463.jpg"
+import MAX_0505 from "./images/MAX_0505.jpg"
+import MAX_0603 from "./images/MAX_0603.jpg"
+import MAX_0646 from "./images/MAX_0646.jpg"
+
+import PXL_20250209_132548610 from "./images/PXL_20250209_132548610.MP.jpg"
+import PXL_20250209_133848550 from "./images/PXL_20250209_133848550.MP.jpg"
+import PXL_20250210_150929413 from "./images/PXL_20250210_150929413.jpg"
+import PXL_20250211_174301568 from "./images/PXL_20250211_174301568.webm"
+import PXL_20250211_181321910 from "./images/PXL_20250211_181321910.jpg"
+import PXL_20250212_181932180 from "./images/PXL_20250212_181932180.RAW-02.ORIGINAL.jpg"
+
+
+import plant1 from "./images/plants/2025-02-09T11_05_08+00_00.JPEG"
+import plant2 from "./images/plants/2025-02-09T12_48_48+00_00.JPEG"
+import plant3 from "./images/plants/2025-02-09T12_55_24+00_00.JPEG"
+import PXL_20250209_125919043 from "./images/plants/PXL_20250209_125919043.jpg"
+import PXL_20250209_134733435 from "./images/plants/PXL_20250209_134733435.jpg"
+import PXL_20250209_173041299 from "./images/plants/PXL_20250209_173041299.jpg"
+import PXL_20250209_174719071 from "./images/plants/PXL_20250209_174719071.jpg"
+import PXL_20250209_175134355 from "./images/plants/PXL_20250209_175134355.jpg"
+import PXL_20250211_151038493 from "./images/plants/PXL_20250211_151038493.jpg"
+import PXL_20250212_142126974 from "./images/plants/PXL_20250212_142126974.jpg"
+import PXL_20250212_142920774 from "./images/plants/PXL_20250212_142920774.jpg"
+import PXL_20250212_144259621 from "./images/plants/PXL_20250212_144259621.jpg"
+import PXL_20250212_153335886 from "./images/plants/PXL_20250212_153335886.jpg"
+import PXL_20250212_154036484 from "./images/plants/PXL_20250212_154036484.jpg"
+import PXL_20250212_161706087 from "./images/plants/PXL_20250212_161706087.jpg"
+import PXL_20250212_163000971 from "./images/plants/PXL_20250212_163000971.jpg"
+
+<ImageGallery client:load/>
+
+Photos from my trip to Madeira in February 2025.
+
+## Porto Moniz
+
+<Picture caption="The evening coast of Madeira near Porto Moniz" src={MAX_0603} alt="Evening coastal scene, waves crashing over rocks in front of a restaurant"/>
+<Picture caption="Waves in Porto Moniz" src={MAX_0505} alt="Wave crashes over rocks, spray flies high into the air, resembling a horse"/>
+<Picture caption="More pictures of the waves at Porto Moniz" src={MAX_0442} alt="A wave frozen in time breaks over rocks"/>
+<Picture caption="Panorama from Porto Moniz towards Seixal" src={MAX_0447_Panorama} alt="Panoramic view of Madeira’s coastline, large rocks in the water, blue mountains in the distance"/>
+<Picture caption="People fishing in Porto Moniz" src={MAX_0463} alt="Three people standing in the harbor fishing in front of a red car"/>
+
+## Levada Nova Hike
+
+<Picture caption="Maidenhair fern, Adiantum Capillus-veneris, is one of my favorite plants, it is very widespread" src={MAX_0354} alt="Close-up of a green maidenhair fern"/>
+<Image src={PXL_20250209_132548610} alt="Standing on a metal platform in the mountains"/>
+<Image src={PXL_20250209_133848550} alt="Standing in front of a waterfall"/>
+
+## Seixal
+
+<Picture src={PXL_20250210_150929413} caption="Beautiful room with an ocean view in the post office of Seixal" alt=""/>
+<Picture caption="Misty mountain peaks over Seixal" src={MAX_0369} alt="Foggy, densely forested mountain peaks rising high above each other"/>
+
+## Hike around the Pico Areeiro
+
+<video src={PXL_20250211_174301568} controls alt="POV of a person walking over a rocky bridge in the fog"/>
+<Image src={PXL_20250211_181321910} alt="Curvy road between red, earthy hills"/>
+
+## Hike around Porto da Cruz
+
+<Image src={PXL_20250212_181932180} alt="Sitting in a giant fern"/>
+
+## Whale watching
+
+<Picture caption="A young humpback whale practicing jumps for mating season off the coast of Calheta" src={MAX_0646} alt="Humpback whale breaching out of the water"/>
+
+While traveling, I enjoy photographing plants that catch my eye. Here are some pictures of interesting plants I saw on Madeira. To identify them, I used the app [PlantNet](https://identify.plantnet.org/en).
+
+<ImageSlider title="Interesting plants of the island" client:load>
+  <Image src={plant1} alt="Dracaena reflexa (Song of India)"/>
+  <Image src={plant2} alt="Oxalis pes-caprae (Bermuda buttercup)"/>
+  <Image src={PXL_20250212_144259621} alt="Oxalis purpurea (Purple woodsorrel)"/>
+  <Image src={PXL_20250212_154036484} alt="Bituminaria bituminosa (Pitch trefoil)"/>
+  <Image src={PXL_20250209_125919043} alt="Galactites tomentosus (Purple milk thistle)"/>
+  <Image src={PXL_20250209_134733435} alt="Sonchus fruticosus (Tree dandelion)"/>
+  <Image src={PXL_20250209_174719071} alt="Persicaria capitata (Pink knotweed)"/>
+  <Image src={PXL_20250209_175134355} alt="Rhaphiolepis bibas (Loquat)"/>
+  <Image src={PXL_20250211_151038493} alt="Psidium cattleyanum (Strawberry guava)"/>
+  <Image src={PXL_20250212_142920774} alt="Tecoma stans (Yellow trumpetbush)"/>
+  <Image src={PXL_20250212_153335886} alt="Roldana petasitis (Velvet groundsel)"/>
+  <Image src={PXL_20250212_161706087} alt="Bidens pilosa (Spanish needle)"/>
+  <Image src={PXL_20250212_163000971} alt="Crassula multicava (Fairy crassula)"/>
+  <Image src={PXL_20250209_173041299} alt="Some kind of liverwort, possibly Targionia lorbeeriana"/>
+  <Image src={plant3} alt="Aeonium canariense (Canary Island aeonium)"/>
+</ImageSlider>

src/content/photos/madeira-2025/index.mdx

@@ -0,0 +1,104 @@
+---
+title: Madeira
+date: 2025-02-16
+license: "CC-BY-SA:4.0"
+comments: true
+icon: 🏝️
+cover: ./images/MAX_0603.jpg
+tags: ["madeira", "travel"]
+---
+
+import Image from "@components/Image.astro";
+import Picture from "@components/Picture.astro";
+import ImageGallery from "@components/ImageGallery.svelte"
+import ImageSlider from "@components/ImageSlider.svelte"
+
+import MAX_0354 from "./images/MAX_0354.jpg"
+import MAX_0369 from "./images/MAX_0369.jpg"
+import MAX_0442 from "./images/MAX_0442.jpg"
+import MAX_0447_Panorama from "./images/MAX_0447-Panorama.jpg"
+import MAX_0463 from "./images/MAX_0463.jpg"
+import MAX_0505 from "./images/MAX_0505.jpg"
+import MAX_0603 from "./images/MAX_0603.jpg"
+import MAX_0646 from "./images/MAX_0646.jpg"
+
+import PXL_20250209_132548610 from "./images/PXL_20250209_132548610.MP.jpg"
+import PXL_20250209_133848550 from "./images/PXL_20250209_133848550.MP.jpg"
+import PXL_20250210_150929413 from "./images/PXL_20250210_150929413.jpg"
+import PXL_20250211_174301568 from "./images/PXL_20250211_174301568.webm"
+import PXL_20250211_181321910 from "./images/PXL_20250211_181321910.jpg"
+import PXL_20250212_181932180 from "./images/PXL_20250212_181932180.RAW-02.ORIGINAL.jpg"
+
+import plant1 from "./images/plants/2025-02-09T11_05_08+00_00.JPEG"
+import plant2 from "./images/plants/2025-02-09T12_48_48+00_00.JPEG"
+import plant3 from "./images/plants/2025-02-09T12_55_24+00_00.JPEG"
+import PXL_20250209_125919043 from "./images/plants/PXL_20250209_125919043.jpg"
+import PXL_20250209_134733435 from "./images/plants/PXL_20250209_134733435.jpg"
+import PXL_20250209_173041299 from "./images/plants/PXL_20250209_173041299.jpg"
+import PXL_20250209_174719071 from "./images/plants/PXL_20250209_174719071.jpg"
+import PXL_20250209_175134355 from "./images/plants/PXL_20250209_175134355.jpg"
+import PXL_20250211_151038493 from "./images/plants/PXL_20250211_151038493.jpg"
+import PXL_20250212_142126974 from "./images/plants/PXL_20250212_142126974.jpg"
+import PXL_20250212_142920774 from "./images/plants/PXL_20250212_142920774.jpg"
+import PXL_20250212_144259621 from "./images/plants/PXL_20250212_144259621.jpg"
+import PXL_20250212_153335886 from "./images/plants/PXL_20250212_153335886.jpg"
+import PXL_20250212_154036484 from "./images/plants/PXL_20250212_154036484.jpg"
+import PXL_20250212_161706087 from "./images/plants/PXL_20250212_161706087.jpg"
+import PXL_20250212_163000971 from "./images/plants/PXL_20250212_163000971.jpg"
+
+<ImageGallery client:load/>
+
+
+Bilder von meiner Reise nach Madeira im Februar 2025.
+
+## Porto Moniz
+
+<Picture caption="Die abendliche Küste Madeiras for Porto Moniz" src={MAX_0603} alt="Abendliche Küstenszene, Welle brechen über Steinen vor einem Restaurant"/>
+<Picture caption="Wellen in Porto Moniz" src={MAX_0505} alt="Welle bricht über Steinen, Gischt fliegt hoch in die Luft, sieht aus wie ein Pferd"/>
+<Picture caption="Weitere Bilder von den Wellen vor Porto Moniz" src={MAX_0442} alt="Eine in der Zeit gefrorene Welle bricht über Felsen"/>
+<Picture caption="Panorama aus Porto Moniz Richtung Seixal" src={MAX_0447_Panorama} alt="Panorama Aufnahme der Küste von Madeira große Felsen im Wasser, blaue Berge in der Ferne"/>
+<Picture caption="Angelnde Menschen in Porto Moniz" src={MAX_0463} alt="Drei Menschen stehen im Hafen und Angeln vor einem roten Auto"/>
+
+## Levada Nova Wanderung
+
+<Picture caption="Frauenhaarfarn, Adiantum Capillus-veneris ist eine meiner Lieblingspflanzen, sie ist sehr weit verbreitet" src={MAX_0354} alt="Nahaufnahme eines grünen Frauenhaarfarns"/>
+<Image src={PXL_20250209_132548610} alt="Ich stehe auf einem Metalgerüst in den Bergen"/>
+<Image src={PXL_20250209_133848550} alt="Ich vor einem Wasserfall"/>
+
+## Seixal
+
+<Picture src={PXL_20250210_150929413} caption="Wunderschöner Raum mit Aussicht aufs Meer im Postbüro von Seixal" alt=""/>
+<Picture caption="Nebelige Bergspitzen über Seixal" src={MAX_0369} alt="Nebelige, dicht bewaldete Bergspitzen erheben sich hoch übereinander"/>
+
+## Wanderung um den Pico Arieiro
+
+<video src={PXL_20250211_174301568} controls alt="POV von einer Person die über eine felsige Brücke im Nebel geht"/>
+<Image src={PXL_20250211_181321910} alt="Kurvige Straße, zwischen roten, erdigen Hügeln"/>
+
+## Wanderung um Porto da Cruz
+
+<Image src={PXL_20250212_181932180} alt="Ich sitze in einem Riesenfarn"/>
+
+## Whale watching
+
+<Picture caption="Ein junger Buckelwal übt Sprünge für die Paarungszeit an der Küste vor Calheta" src={MAX_0646} alt="Buckelwal springt aus dem Wasser"/>
+
+Während ich unterwegs bin, fotografiere ich gerne Pflanzen die mir auffallen. Hier sind ein paar Bilder von interessanten Pflanzen die ich auf Madeira gesehen habe. Zum identifizieren der Pflanzen habe ich die App [PlantNet](https://identify.plantnet.org/de) benutzt.
+
+<ImageSlider title="Interessante Pflanzen der Insel" client:load>
+  <Image src={plant1} alt="Dracaena reflexa (Drachenbaum)"/>
+  <Image src={plant2} alt="Oxalis pes-caprae (Nickender Sauerklee)"/>
+  <Image src={PXL_20250212_144259621} alt="Oxalis purpurea (Herbst-Sauerklee)"/>
+  <Image src={PXL_20250212_154036484} alt="Bituminaria bituminosa (Gewöhnlicher-Asphaltklee)"/>
+  <Image src={PXL_20250209_125919043} alt="Galactites tomentosus (Milchdistel)"/>
+  <Image src={PXL_20250209_134733435} alt="Sonchus fruticosus (Strauchartige Gänsedistel)"/>
+  <Image src={PXL_20250209_174719071} alt="Persicaria capitata (Kopf-Knöterich)"/>
+  <Image src={PXL_20250209_175134355} alt="Rhaphiolepis bibas (Japanische Mispel)"/>
+  <Image src={PXL_20250211_151038493} alt="Psidium cattleyanum (Erdbeerguave)"/>
+  <Image src={PXL_20250212_142920774} alt="Tecoma stans (Gelber Trompetenstrauch)"/>
+  <Image src={PXL_20250212_153335886} alt="Roldana petasitis (Pestwurz-Greiskraut)"/>
+  <Image src={PXL_20250212_161706087} alt="Bidens pilosa (Zweizahn)"/>
+  <Image src={PXL_20250212_163000971} alt="Crassula multicava  (Affenbrotbaum)"/>
+  <Image src={PXL_20250209_173041299} alt="Irgendeine Sorte Liverwort evt. Targionia lorbeeria"/>
+  <Image src={plant3} alt="Aeonium canariense (Kanaren-Aeonium)"/>
+</ImageSlider>

src/content/photos/peaks-of-the-balkans/index.en.mdx

@@ -0,0 +1,155 @@
+---
+title: "Peaks of the Balkans"
+date: 2024-06-19
+cover: ./images/MAX_9861.jpg
+license: "CC-BY-SA:4.0"
+icon: 🏔️
+tags: ["balkans", "travel"]
+comments: true
+---
+
+import Image from "@components/Image.astro";
+import Picture from "@components/Picture.astro";
+import ImageGallery from "@components/ImageGallery.svelte"
+
+import MAX9689 from "./images/MAX_9689.jpg";
+import MAX9708 from "./images/MAX_9708.jpg";
+import MAX9727 from "./images/MAX_9727.jpg";
+import MAX9747 from "./images/MAX_9747.jpg";
+import MAX9749 from "./images/MAX_9749.jpg";
+import MAX9775 from "./images/MAX_9775.jpg";
+import MAX9839 from "./images/MAX_9839-Panorama.jpg";
+import MAX9849 from "./images/MAX_9849.jpg";
+import MAX9851 from "./images/MAX_9851.jpg";
+import MAX9857 from "./images/MAX_9857.jpg";
+import MAX9861 from "./images/MAX_9861.jpg";
+import MAX9865 from "./images/MAX_9865.jpg";
+import MAX9873 from "./images/MAX_9873.jpg";
+import MAX9882 from "./images/MAX_9882.jpg";
+import MAX9892 from "./images/MAX_9892-Verbessert-NR.jpg";
+
+import PXL_20240527_063005374 from "./images/PXL_20240527_063005374.jpg"
+import PXL_20240526_180330542 from "./images/PXL_20240526_180330542.jpg"
+import PXL_20240601_123821026 from "./images/PXL_20240601_123821026.PORTRAIT.jpg"
+import PXL_20240521_081658742 from "./images/PXL_20240521_081658742.jpg";
+import PXL_20240522_153908533 from "./images/PXL_20240522_153908533.mp4";
+import PXL_20240529_060714783 from "./images/PXL_20240529_060714783.jpg";
+import PXL_20240530_114819240 from "./images/PXL_20240530_114819240.jpg";
+import PXL_20240531_115332318 from "./images/PXL_20240531_115332318.jpg";
+import PXL_20240601_105417352 from "./images/PXL_20240601_105417352.jpg";
+import PXL_20240603_092020564 from "./images/PXL_20240603_092020564.mp4";
+
+<ImageGallery client:load/>
+
+Dies sind die Bilder die bei einer kurzen Reise durch den Balkan und meiner Wanderung über den "Peaks of the Balkan" Trail entstanden sind.
+
+Eigentlich wollte ich nur den Trail wandern, aber ich habe mich dann doch entschieden noch ein paar Tage länger zu bleiben und ein paar Städte zu besuchen. Die Reise war sehr schön und ich habe viele interessante Menschen getroffen.
+
+Angefangen hat die Reise das mich Freunde bis nach Villach in Österreich gebracht haben, von dort aus bin ich mit dem Zug nach Zagreb gefahren wo ich drei Tage im günstigsten Hostel der Stadt verbracht habe.
+
+<Picture src={PXL_20240521_081658742} alt="" caption="Regnerisches Hotel in Villach"/>
+
+Die folgenden Bilder sind in der verlassenen Universitätsklinik in Zagreb entstanden. Die Klinik wurde 1991 während des Kroatienkrieges geschlossen und ist seitdem verlassen.
+
+<Image src={MAX9689} alt=""/>
+<Image src={MAX9708} alt=""/>
+<Image src={MAX9727} alt=""/>
+<Image src={MAX9747} alt=""/>
+<Image src={MAX9749} alt=""/>
+<video controls="" autoplay="" src={PXL_20240522_153908533}/>
+
+<Picture src={MAX9775} alt="" caption="Dieses Bild ist in einem verlassenen Sanatorium in den Bergen um Zagreb entstanden"/>
+
+Danach ging es mit dem Flugzeug nach Podgorica. Eigentlich wollte ich direkt von Podgorica nach Shkodër fahren, da aber der Flug 2,5 Stunden Verspätung hatte, habe ich den letzten Bus verpasst und musste eine Nacht in Podgorica verbringen.
+
+<Picture src={MAX9839} alt="" caption="Verlassenes Haus in Shkoder"/>
+
+Shkoder war ganz anders als die Städte die ich vorher besucht habe. Man merkt langsam das man sich von Zentraleuropa entfernt. Ich bin im Wanderers Hostel untergekommen, abends gab es in dem Hostel Cocktail Happy Hour und kostenlosen Rakia und dazu noch viele interessante Menschen.
+
+## Tag 1 Theth - Valbona
+
+Am nächsten Morgen brachte mich der erste Bus um 7:30 dann endlich nach Theth und so mit zum Anfang des Peaks of the Balkans Trails. Nach den paar Tagen in großen Städten war es sehr schön in der Natur zu sein.
+
+<Picture src={MAX9851} alt="" caption="Auf dem Pass zwischen Theth und Valbona"/>
+
+Der erste Aufstieg war echt steil, circa 1200 Höhenmeter in etwa 3 Stunden. Dieser Teil des Trails war mit Abstand der touristischste aber so kam es auch zu vielen netten Gesprächen.
+
+<Picture src={MAX9849} alt="" caption="Der Ausblick ins Valbona Tal"/>
+
+<Picture src={PXL_20240526_180330542} alt="" caption="Mein erster Schlafplatz im Tarp"/>
+
+Am Abend habe ich mich dazu entschieden im Tarp zu schlafen, weil das Wetter recht gut aussah. Nach etwa einer halben Stunde hatte ich ein schönes Plätzchen in einem Feld aus Bohnenkraut gefunden.
+
+## Tag 2 Valbone - Cerem
+
+<Picture src={PXL_20240527_063005374} alt="" caption="Am nächsten Morgen gab es Porridge mit gesammelten Walderdbeeren"/>
+
+Zum nächsten Ort (Cerem) gab es zwei Routen, einer durchs Tal entlang der Straße und einer über die Berge. Ich habe mich für die Route über die Berge entschieden.
+
+<Image src={MAX9857} alt=""/>
+
+Auf dem Weg über die Berge habe ich Sam und Juliette aus Quebec getroffen. Zusammen haben wir dann versucht über einen Bergsattel nach Cerem zu kommen. Leider haben wir uns vertan und es gab keinen Weg vom Bergsattel nach Cerem.
+
+import PXL_20240527_121312366_small from "./images/PXL_20240527_121312366_small.mp4"
+
+<video src={PXL_20240527_121312366_small} controls="" muted />
+
+<Picture src={MAX9865} alt="" caption="Ich auf dem Prevoj Kolata Bergsattel"/>
+<Picture src={MAX9861} alt="" caption="Der Dobra Kolata Gipfel auf 2550m"/>
+
+In Cerem habe ich mir ein Zimmer in einem Guesthouse genommen. 
+
+## Tag 3 Cerem - Cerem
+
+Leider habe ich am nächsten Morgen den Fehler gemacht meinen Trinkbeutel am Wasserhahn zu füllen. Ich schaffte es noch circa eine Stunde lang zu wandern, danach wurde mir erst übel und ich musste mich übergeben und hatte Durchfall.
+
+Ich schaffte es gerade noch so mein Tarp aufzubauen und mich hinzulegen. Erst dachte ich es läge an dem Käse den ich am Morgen gegessen hatte. Zum Glück kochte ich mir aus dem restlichen Wasser einen Tee.
+
+<Picture src={PXL_20240529_060714783} alt="" caption="Gar kein schlechter Ort für eine kleine Lebensmittelvergiftung"/> 
+
+## Tag 4 Cerem - Millishevc
+
+Am nächsten Morgen ging es mir schon wieder viel besser und so entschied ich mich dazu direkt zwei Tagesetappen zu laufen und so nach Millishevc zu kommen.
+
+<Picture src={MAX9873} alt="" caption="Der Ausblick ins Doberdol Tal"/>
+
+In Millishevc habe ich mein Tarp im Garten eines Guesthouses aufgeschlagen. Am nächsten Morgen ging es dann weiter nach Babino Polje.
+
+## Tag 5 Millishevc - Babino Polje
+
+<Picture src={PXL_20240530_114819240} alt="" caption="Auf dem Guri i Kuq Gipfel"/>
+
+
+Weil es auf dem Weg nach Babino Polje geregnet hatte und meine Schuhe nass waren habe ich mich dazu entschieden in einem Guesthouse zu übernachten.
+
+## Tag 6 Babino Polje - Plav
+
+import PXL_20240531_132410431 from "./images/PXL_20240531_132410431.jpg"
+
+<Image src={MAX9882} alt=""/>
+
+<Picture src={PXL_20240531_115332318} alt="" caption="Schöner Baum"/>
+
+<Picture src={PXL_20240531_132410431} alt="" caption="Das erste mal wieder Zivilisation (Plav)"/>
+
+## Tag 7 Plav - Vusanje
+
+Auf dem Weg nach Vusanje habe ich Sam und Juliette wieder getroffen und mit ihnen kamen 3 wilde Hunde. Die Hunde waren sehr nett und haben uns den ganzen Weg begleitet.
+
+<Image src={PXL_20240601_105417352} alt=""/>
+<Image src={PXL_20240601_123821026} alt=""/>
+<Image src={MAX9892} alt=""/>
+
+## Tag 8 Vusanje - Valley of Lakes
+
+import PXL_20240601_153636710 from "./images/PXL_20240602_153636710.jpg"
+import PXL_20240602_142615670 from "./images/PXL_20240602_142615670.mp4"
+
+<Picture src={PXL_20240601_153636710} alt="" caption="Der zweithöchste Berg Albaniens, Maja e Jezercës 2694m" />
+
+<video src={PXL_20240602_142615670} controls muted />
+
+## Tag 9 Valley of Lakes - Theth
+
+<video controls muted src={PXL_20240603_092020564} />
+

src/content/photos/peaks-of-the-balkans/index.mdx

@@ -0,0 +1,154 @@
+---
+title: "Peaks of the Balkans"
+date: 2024-06-19
+cover: ./images/MAX_9861.jpg
+license: "CC-BY-SA:4.0"
+icon: 🏔️
+tags: ["balkans", "hiking", "travel"]
+comments: true
+---
+
+import Image from "@components/Image.astro";
+import Picture from "@components/Picture.astro";
+import ImageGallery from "@components/ImageGallery.svelte"
+
+import MAX9689 from "./images/MAX_9689.jpg";
+import MAX9708 from "./images/MAX_9708.jpg";
+import MAX9727 from "./images/MAX_9727.jpg";
+import MAX9747 from "./images/MAX_9747.jpg";
+import MAX9749 from "./images/MAX_9749.jpg";
+import MAX9775 from "./images/MAX_9775.jpg";
+import MAX9839 from "./images/MAX_9839-Panorama.jpg";
+import MAX9849 from "./images/MAX_9849.jpg";
+import MAX9851 from "./images/MAX_9851.jpg";
+import MAX9857 from "./images/MAX_9857.jpg";
+import MAX9861 from "./images/MAX_9861.jpg";
+import MAX9865 from "./images/MAX_9865.jpg";
+import MAX9873 from "./images/MAX_9873.jpg";
+import MAX9882 from "./images/MAX_9882.jpg";
+import MAX9892 from "./images/MAX_9892-Verbessert-NR.jpg";
+
+import PXL_20240527_063005374 from "./images/PXL_20240527_063005374.jpg"
+import PXL_20240526_180330542 from "./images/PXL_20240526_180330542.jpg"
+import PXL_20240601_123821026 from "./images/PXL_20240601_123821026.PORTRAIT.jpg"
+import PXL_20240521_081658742 from "./images/PXL_20240521_081658742.jpg";
+import PXL_20240522_153908533 from "./images/PXL_20240522_153908533.mp4";
+import PXL_20240529_060714783 from "./images/PXL_20240529_060714783.jpg";
+import PXL_20240530_114819240 from "./images/PXL_20240530_114819240.jpg";
+import PXL_20240531_115332318 from "./images/PXL_20240531_115332318.jpg";
+import PXL_20240601_105417352 from "./images/PXL_20240601_105417352.jpg";
+import PXL_20240603_092020564 from "./images/PXL_20240603_092020564.mp4";
+
+<ImageGallery client:load/>
+
+Dies sind die Bilder die bei einer kurzen Reise durch den Balkan und meiner Wanderung über den "Peaks of the Balkan" Trail entstanden sind.
+
+Eigentlich wollte ich nur den Trail wandern, aber ich habe mich dann doch entschieden noch ein paar Tage länger zu bleiben und ein paar Städte zu besuchen. Die Reise war sehr schön und ich habe viele interessante Menschen getroffen.
+
+Angefangen hat die Reise das mich Freunde bis nach Villach in Österreich gebracht haben, von dort aus bin ich mit dem Zug nach Zagreb gefahren wo ich drei Tage im günstigsten Hostel der Stadt verbracht habe.
+
+<Picture src={PXL_20240521_081658742} alt="" caption="Regnerisches Hotel in Villach"/>
+
+Die folgenden Bilder sind in der verlassenen Universitätsklinik in Zagreb entstanden. Die Klinik wurde 1991 während des Kroatienkrieges geschlossen und ist seitdem verlassen.
+
+<Image src={MAX9689} alt=""/>
+<Image src={MAX9708} alt=""/>
+<Image src={MAX9727} alt=""/>
+<Image src={MAX9747} alt=""/>
+<Image src={MAX9749} alt=""/>
+<video controls="" autoplay="" src={PXL_20240522_153908533}/>
+
+<Picture src={MAX9775} alt="" caption="Dieses Bild ist in einem verlassenen Sanatorium in den Bergen um Zagreb entstanden"/>
+
+Danach ging es mit dem Flugzeug nach Podgorica. Eigentlich wollte ich direkt von Podgorica nach Shkodër fahren, da aber der Flug 2,5 Stunden Verspätung hatte, habe ich den letzten Bus verpasst und musste eine Nacht in Podgorica verbringen.
+
+<Picture src={MAX9839} alt="" caption="Verlassenes Haus in Shkoder"/>
+
+Shkoder war ganz anders als die Städte die ich vorher besucht habe. Man merkt langsam das man sich von Zentraleuropa entfernt. Ich bin im Wanderers Hostel untergekommen, abends gab es in dem Hostel Cocktail Happy Hour und kostenlosen Rakia und dazu noch viele interessante Menschen.
+
+## Tag 1 Theth - Valbona
+
+Am nächsten Morgen brachte mich der erste Bus um 7:30 dann endlich nach Theth und so mit zum Anfang des Peaks of the Balkans Trails. Nach den paar Tagen in großen Städten war es sehr schön in der Natur zu sein.
+
+<Picture src={MAX9851} alt="" caption="Auf dem Pass zwischen Theth und Valbona"/>
+
+Der erste Aufstieg war echt steil, circa 1200 Höhenmeter in etwa 3 Stunden. Dieser Teil des Trails war mit Abstand der touristischste aber so kam es auch zu vielen netten Gesprächen.
+
+<Picture src={MAX9849} alt="" caption="Der Ausblick ins Valbona Tal"/>
+
+<Picture src={PXL_20240526_180330542} alt="" caption="Mein erster Schlafplatz im Tarp"/>
+
+Am Abend habe ich mich dazu entschieden im Tarp zu schlafen, weil das Wetter recht gut aussah. Nach etwa einer halben Stunde hatte ich ein schönes Plätzchen in einem Feld aus Bohnenkraut gefunden.
+
+## Tag 2 Valbone - Cerem
+
+<Picture src={PXL_20240527_063005374} alt="" caption="Am nächsten Morgen gab es Porridge mit gesammelten Walderdbeeren"/>
+
+Zum nächsten Ort (Cerem) gab es zwei Routen, einer durchs Tal entlang der Straße und einer über die Berge. Ich habe mich für die Route über die Berge entschieden.
+
+<Image src={MAX9857} alt=""/>
+
+Auf dem Weg über die Berge habe ich Sam und Juliette aus Quebec getroffen. Zusammen haben wir dann versucht über einen Bergsattel nach Cerem zu kommen. Leider haben wir uns vertan und es gab keinen Weg vom Bergsattel nach Cerem.
+
+import PXL_20240527_121312366_small from "./images/PXL_20240527_121312366_small.mp4"
+
+<video src={PXL_20240527_121312366_small} controls="" muted />
+
+<Picture src={MAX9865} alt="" caption="Ich auf dem Prevoj Kolata Bergsattel"/>
+<Picture src={MAX9861} alt="" caption="Der Dobra Kolata Gipfel auf 2550m"/>
+
+In Cerem habe ich mir ein Zimmer in einem Guesthouse genommen. 
+
+## Tag 3 Cerem - Cerem
+
+Leider habe ich am nächsten Morgen den Fehler gemacht meinen Trinkbeutel am Wasserhahn zu füllen. Ich schaffte es noch circa eine Stunde lang zu wandern, danach wurde mir erst übel und ich musste mich übergeben und hatte Durchfall.
+
+Ich schaffte es gerade noch so mein Tarp aufzubauen und mich hinzulegen. Erst dachte ich es läge an dem Käse den ich am Morgen gegessen hatte. Zum Glück kochte ich mir aus dem restlichen Wasser einen Tee.
+
+<Picture src={PXL_20240529_060714783} alt="" caption="Gar kein schlechter Ort für eine kleine Lebensmittelvergiftung"/> 
+
+## Tag 4 Cerem - Millishevc
+
+Am nächsten Morgen ging es mir schon wieder viel besser und so entschied ich mich dazu direkt zwei Tagesetappen zu laufen und so nach Millishevc zu kommen.
+
+<Picture src={MAX9873} alt="" caption="Der Ausblick ins Doberdol Tal"/>
+
+In Millishevc habe ich mein Tarp im Garten eines Guesthouses aufgeschlagen. Am nächsten Morgen ging es dann weiter nach Babino Polje.
+
+## Tag 5 Millishevc - Babino Polje
+
+<Picture src={PXL_20240530_114819240} alt="" caption="Auf dem Guri i Kuq Gipfel"/>
+
+
+Weil es auf dem Weg nach Babino Polje geregnet hatte und meine Schuhe nass waren habe ich mich dazu entschieden in einem Guesthouse zu übernachten.
+
+## Tag 6 Babino Polje - Plav
+
+import PXL_20240531_132410431 from "./images/PXL_20240531_132410431.jpg"
+
+<Image src={MAX9882} alt=""/>
+
+<Picture src={PXL_20240531_115332318} alt="" caption="Schöner Baum"/>
+
+<Picture src={PXL_20240531_132410431} alt="" caption="Das erste mal wieder Zivilisation (Plav)"/>
+
+## Tag 7 Plav - Vusanje
+
+Auf dem Weg nach Vusanje habe ich Sam und Juliette wieder getroffen und mit ihnen kamen 3 wilde Hunde. Die Hunde waren sehr nett und haben uns den ganzen Weg begleitet.
+
+<Image src={PXL_20240601_105417352} alt=""/>
+<Image src={PXL_20240601_123821026} alt=""/>
+<Image src={MAX9892} alt=""/>
+
+## Tag 8 Vusanje - Valley of Lakes
+
+import PXL_20240601_153636710 from "./images/PXL_20240602_153636710.jpg"
+import PXL_20240602_142615670 from "./images/PXL_20240602_142615670.mp4"
+
+<Picture src={PXL_20240601_153636710} alt="" caption="Der zweithöchste Berg Albaniens, Maja e Jezercës 2694m" />
+
+<video src={PXL_20240602_142615670} controls muted />
+
+## Tag 9 Valley of Lakes - Theth
+
+<video controls muted src={PXL_20240603_092020564} />

src/content/projects/invoice/index.en.mdx

@@ -0,0 +1,63 @@
+---
+title: "Invoice"
+date: 2023-08-21
+cover: ./images/bg.jpg
+icon: "/projects/invoice.svg"
+tags: ["sveltekit", "unocss", "prisma", "sqlite"]
+toc: true
+links:
+  [
+    ["live", "https://invoice.app.max-richter.dev"],
+    ["git", "https://git.max-richter.dev/max/invoice"],
+  ]
+---
+
+import bg from './images/bg.jpg'
+import invoices from './images/invoices.png'
+import customers from './images/customers.png'
+import editCustomers from './images/edit-customer.png'
+import editProfile from './images/edit-profile.png'
+import overview from './images/overview.png'
+import ImageSlider from '@components/ImageSlider.svelte'
+import Image from '@components/Image.astro'
+
+
+# Introduction
+
+In my free time, I like to take on small jobs, such as deliveries, setups, and pickups for others.  
+
+An unavoidable part of these tasks is creating invoices in PDF format. Initially, I followed a manual process and created my first invoices in Figma. But as programmers often say:
+
+> Why do something manually in 5 minutes when I can automate it in 24 hours?
+
+This thought led to my latest hobby project – **"Invoice."**
+
+<ImageSlider title="Invoice Screens" client:load>
+  <Image src={invoices} alt="Invoices" />
+  <Image src={customers} alt="Customers" />
+  <Image src={editCustomers} alt="Edit Customers" />
+  <Image src={editProfile} alt="Edit Profile" />
+  <Image src={overview} alt="Overview" />
+</ImageSlider>
+
+# Development
+
+During development, I always kept the principle 'K.I.S.S.' in mind: Keep it simple, stupid. For this project, that meant choosing "boring" but well-known technologies:
+
+## [🚀 SvelteKit](https://kit.svelte.dev)  
+For an efficient and reactive user interface.
+
+## [🎨 UNOcss](https://unocss.dev/)  
+The faster alternative to Tailwind.
+
+## [🌍 TypesafeI18n](https://github.com/ivanhofer/typesafe-i18n)  
+To enable multilingual support without complex logic.
+
+## [🛠️ Prisma](https://prisma.io)  
+As a database access layer for smooth data management.
+
+## [🗃️ SQLite](https://www.sqlite.org/index.html)  
+As a reliable backend, ideal for small projects.
+
+## [📄 Playwright](https://playwright.dev)  
+For generating PDFs.