feat: some shit

2024-04-03 14:27:48 +02:00 · 2024-04-03 14:27:48 +02:00 · 93baa3b6b0
commit 93baa3b6b0
parent d4128840b9
67 changed files with 2513 additions and 703 deletions
--- a/package.json
+++ b/package.json
@ -18,6 +18,7 @@
    "astro-i18n-aut": "^0.7.0",
    "astro-imagetools": "^0.9.0",
    "svelte": "^4.2.12",
+    "svelte-gestures": "^4.0.0",
    "tailwindcss": "^3.4.1",
    "typescript": "^5.4.2"
  },
@ -25,6 +26,7 @@
    "@afordin/unocss-preset-token": "0.1.0-beta.0",
    "@astrojs/sitemap": "^3.1.1",
    "@iconify-json/tabler": "^1.1.109",
+    "@igor.dvlpr/astro-post-excerpt": "^2.1.0",
    "@types/markdown-it": "^13.0.7",
    "@unocss/preset-icons": "^0.58.8",
    "@unocss/reset": "^0.58.8",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/public/app.css
+++ b/public/app.css
@ -3,27 +3,40 @@ p {
 }

 h1,
-h2 {
+h2,
+h3 {
+  color: var(--text-light);
  font-family: 'Roboto', sans-serif;
 }

+article h2 {
+  font-size: 24px;
+  margin-top: 20px;
+}
+
+article h3 {
+  font-size: 20px;
+  margin-top: 16px;
+}
+
 :root {
  --neutral-1000: #000000;
  --neutral-800: #16161E;
  --neutral-500: #252530;
  --neutral-400: #2C2C3A;
  --neutral-300: #414152;
-  --neutral-100: #AAAABB;
+  --neutral-100: #D5D5D7;
  --neutral-000: #F1F1F4;
+  --fill: #cb5a5a;
 }

 body {
-  --background-dark: var(--neutral800);
-  --background: var(--neutral000);
-  --background-light: var(--neutral400);
-  --outline: var(--neutral300);
-  --text: var(--neutral1000);
-  --layer100: var(--neutral000);
+  --background-dark: var(--neutral-800);
+  --background: var(--neutral-000);
+  --background-light: var(--neutral-400);
+  --outline: var(--neutral-300);
+  --text: var(--neutral-800);
+  --text-light: black;

  --border-radius-md: 20px;

@ -34,9 +47,26 @@ body {
  transition: background-color 0.1s;
  color: var(--text);
  font-family: 'Nunito Sans', sans-serif;
+  background-color: var(--neutral-000);
+}
+
+.dark body {
+  --background-dark: var(--neutral-800);
+  --background: var(--neutral-500);
+  --background-light: var(--neutral-400);
+  --background-gradient: linear-gradient(-30deg, var(--neutral-500) 0%, var(--neutral-400) 100%);
+  --outline: var(--neutral-300);
+  --text: var(--neutral-100);
+  --text-light: white;
+  background-color: var(--neutral-1000);
+}
+
+.dark .noise::before {
+  opacity: 1;
 }

 .noise::before {
+  opacity: 0.3;
  content: "";
  position: absolute;
  height: 100%;
@ -47,21 +77,15 @@ body {
  /* opacity: 0.3; */
 }

-.theme-dark {
-  --background-dark: var(--neutral800);
-  --background: var(--neutral500);
-  --background-light: var(--neutral400);
-  --background-gradient: linear-gradient(-30deg, var(--neutral500) 0%, var(--neutral400) 100%);
-  --outline: var(--neutral300);
-  --text: var(--neutral100);
-  --layer100: var(--background-dark);
-}
-
 img {
  max-width: 100%;
  height: auto;
 }

+video {
+  border-radius: 10px;
+}
+
 .center {
  display: flex;
  justify-content: center;
--- a/public/blog/random-renders-02/palma.png
+++ b/public/blog/random-renders-02/palma.png
--- a/public/images/arrow_a.svg
+++ b/public/images/arrow_a.svg
@ -0,0 +1,3 @@
+<svg width="153" height="41" viewBox="0 0 153 41" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.604426 7.50762C0.252586 7.28903 0.144563 6.82661 0.36315 6.47477L3.92525 0.741183C4.14384 0.389342 4.60626 0.28132 4.9581 0.499908C5.30994 0.718496 5.41796 1.18092 5.19938 1.53276L2.03307 6.62928L7.12959 9.79559C7.48143 10.0142 7.58945 10.4766 7.37087 10.8284C7.15228 11.1803 6.68986 11.2883 6.33802 11.0697L0.604426 7.50762ZM96.315 39.0315L96.551 39.7434L96.315 39.0315ZM64.2152 8.78029C57.8106 11.4477 52.836 12.1939 48.4085 11.913C44.0022 11.6333 40.1814 10.3355 36.1448 9.01019C32.0953 7.68065 27.7817 6.30471 22.2711 5.76803C16.7635 5.23164 10.0288 5.53165 1.17083 7.60089L0.829611 6.14022C9.82605 4.03863 16.7259 3.72089 22.4165 4.2751C28.1042 4.82902 32.5526 6.25203 36.6127 7.58504C40.6855 8.92225 44.3217 10.1506 48.5035 10.416C52.6643 10.68 57.409 9.99013 63.6385 7.39558L64.2152 8.78029ZM63.6385 7.39558C70.1382 4.68854 77.4556 4.66764 84.2447 6.28707C91.0332 7.90638 97.3523 11.1788 101.885 15.1378C106.387 19.0708 109.27 23.8177 108.823 28.3903C108.368 33.0384 104.53 37.0978 96.551 39.7434L96.079 38.3196C103.826 35.7512 106.961 32.0201 107.33 28.2443C107.707 24.393 105.265 20.0825 100.898 16.2675C96.5602 12.4787 90.4642 9.31274 83.8966 7.74614C77.3296 6.17966 70.3498 6.22533 64.2152 8.78029L63.6385 7.39558ZM96.551 39.7434C92.8525 40.9697 89.6552 40.9308 87.071 39.9217C84.4836 38.9113 82.5882 36.9576 81.4502 34.5026C79.1849 29.6158 79.9006 22.7402 83.9827 16.9695C92.2346 5.30416 113.921 -1.68242 152.757 19.1066L152.049 20.429C113.422 -0.247958 92.7773 7.13427 85.2073 17.8358C81.3784 23.2485 80.8105 29.5558 82.8111 33.8718C83.8061 36.0182 85.4311 37.671 87.6167 38.5245C89.8055 39.3792 92.6339 39.4619 96.079 38.3196L96.551 39.7434Z" fill="#414152"/>
+</svg>
--- a/public/images/arrow_b.svg
+++ b/public/images/arrow_b.svg
@ -0,0 +1,3 @@
+<svg width="94" height="21" viewBox="0 0 94 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M93.3536 4.35355C93.5488 4.15829 93.5488 3.84171 93.3536 3.64645L90.1716 0.464466C89.9763 0.269204 89.6597 0.269204 89.4645 0.464466C89.2692 0.659728 89.2692 0.976311 89.4645 1.17157L92.2929 4L89.4645 6.82843C89.2692 7.02369 89.2692 7.34027 89.4645 7.53553C89.6597 7.7308 89.9763 7.7308 90.1716 7.53553L93.3536 4.35355ZM0.792401 20.4056C11.4392 12.73 26.4625 8.74294 42.8747 6.68361C59.2771 4.62552 76.9975 4.5 93 4.5V3.5C77.0025 3.5 59.2229 3.62448 42.7503 5.69139C26.2875 7.75706 11.0608 11.77 0.207599 19.5944L0.792401 20.4056Z" fill="#414152"/>
+</svg>
--- a/public/models/leaf.glb
+++ b/public/models/leaf.glb
--- a/public/projects/argenti.png
+++ b/public/projects/argenti.png
--- a/public/projects/invoice.svg
+++ b/public/projects/invoice.svg
@ -0,0 +1,10 @@
+<svg width="119" height="112" viewBox="0 0 119 112" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="57" cy="56" r="56" fill="url(#paint0_linear_20_29)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M65 15L108.5 15C114.023 15 118.5 19.4772 118.5 25L118.5 69L98.5 69L98.5 49.1421L64.0711 83.571C60.2105 87.4316 53.9671 87.4822 50.0445 83.6848L20 54.5991L20 104.5L-1.95608e-06 104.5L-3.49691e-07 31C-2.61938e-07 26.9849 2.40147 23.3591 6.09839 21.7925C9.7953 20.226 14.0707 21.0225 16.9555 23.8152L56.8863 62.4716L84.3579 35L65 35L65 15Z" fill="black"/>
+<defs>
+<linearGradient id="paint0_linear_20_29" x1="20.5" y1="2" x2="93" y2="106.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF8E3C"/>
+<stop offset="1" stop-color="#D9376E"/>
+</linearGradient>
+</defs>
+</svg>
--- a/public/projects/isyncrasy/favicon.ico
+++ b/public/projects/isyncrasy/favicon.ico
--- a/public/projects/plantarium/plantarium.png:Zone.Identifier
+++ b/public/projects/plantarium/plantarium.png:Zone.Identifier
@ -1,3 +0,0 @@
-[ZoneTransfer]
-ZoneId=3
-HostUrl=about:internet
--- a/public/projects/plantarium/screenshot-plantarium.png
+++ b/public/projects/plantarium/screenshot-plantarium.png
--- a/src/components/HeroCard.astro
+++ b/src/components/HeroCard.astro
@ -0,0 +1,60 @@
+---
+import markdownToText from "@helpers/markdownToText";
+import { Card } from "./card";
+import { useTranslatedPath } from "@i18n/utils";
+import Image from "@components/Image.astro";
+
+interface Props {
+  post: {
+    data: {
+      title: string;
+      icon?: string;
+      headerImg?: string;
+    };
+    collection: string;
+    slug: string;
+    body: string;
+  };
+}
+
+const {
+  data: { title, headerImg, icon },
+  collection,
+  body,
+  slug,
+} = Astro.props.post;
+
+const translatePath = useTranslatedPath(Astro);
+
+const imagePath = `../content/${collection}/${slug.split("/")[0]}/${headerImg}`;
+
+const image = headerImg && (await import(imagePath)).default;
+
+const link = translatePath(`/${collection}/${slug.split("/")[0]}`);
+---
+
+<Card
+  classes={`grid gradient border-1 border-neutral overflow-hidden  ${image ? "grid-rows-[200px_1fr] sm:grid-rows-none sm:grid-cols-[1fr_200px]" : ""}`}
+>
+  <Card.Content classes="px-8 py-7 order-last sm:order-first">
+    <Card.Title classes="text-4xl flex items-center gap-2">
+      {icon && <img src={icon} class="h-6" />}
+      {title}
+    </Card.Title>
+    <Card.Description>
+      {markdownToText(body).slice(0, 200)}
+    </Card.Description>
+    <Card.ReadMoreButton link={link} />
+  </Card.Content>
+  {
+    image?.format && (
+      <a href={link}>
+        <Image
+          src={image}
+          alt={"cover for " + title}
+          class="right-0 h-full object-cover object-center rounded-none border-l border-neutral"
+        />
+      </a>
+    )
+  }
+</Card>
--- a/src/components/HeroCard.svelte
+++ b/src/components/HeroCard.svelte
@ -1,46 +0,0 @@
-<script lang="ts">
-  import Card from "./Card.svelte";
-
-  export let title: string;
-  export let subtitle: string;
-  export let image: string;
-  export let description: string;
-  export let link: string;
-</script>
-
-<Card></Card>
-
-<style>
-  .hero-card-wrapper {
-    display: flex;
-    border-radius: var(--border-radius-md);
-    background-color: var(--background);
-    border: solid thin var(--outline);
-  }
-
-  .hero-card-image {
-    flex: 1;
-    background-size: cover;
-    background-position: center;
-    border-radius: var(--border-radius-md) 0px 0px var(--border-radius-md);
-    min-height: 200px;
-  }
-
-  .hero-card-content {
-    flex: 1;
-    padding: var(--spacing-md);
-  }
-
-  h2 {
-    margin: 0;
-  }
-
-  h3 {
-    margin: 0;
-  }
-
-  a {
-    color: var(--primary);
-    text-decoration: none;
-  }
-</style>
--- a/src/components/Image.astro
+++ b/src/components/Image.astro
@ -1,15 +1,18 @@
 ---
 import type { ImageMetadata } from "astro";
-import { Image as AstroImage } from "astro:assets";
+import { Picture as AstroImage } from "astro:assets";
 interface Props {
  src: ImageMetadata;
  alt: string;
+  class?: string;
  caption?: string;
  maxWidth?: number;
 }

 const { src: image, alt, maxWidth } = Astro.props;

+console.log({ image, alt, maxWidth });
+
 const sizes = [
  {
    width: 240,
@ -32,14 +35,9 @@ const sizes = [
 <AstroImage
  src={image}
  alt={alt}
+  class={Astro.props.class}
  widths={sizes.map((size) => size.width)}
  sizes={sizes
    .map((size) => `${size.media || "100vw"} ${size.width}px`)
    .join(", ")}
 />
-
-<style>
-  img {
-    border-radius: 0.5rem;
-  }
-</style>
--- a/src/components/ImageGallery.svelte
+++ b/src/components/ImageGallery.svelte
@ -0,0 +1,391 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { fade } from "svelte/transition";
+  import normalizeWheel from "@helpers/normalizeWheel";
+  let images = [];
+  let progress = [];
+  let currentIndex = -1;
+  const maxZoom = 5;
+  import { swipe } from "svelte-gestures";
+
+  const mod = (a: number, b: number) => ((a % b) + b) % b;
+
+  const lerp = (a: number, b: number, t: number) => a * t + b * (1 - t);
+
+  const addIndex = (offset: number) => {
+    return setIndex(mod(currentIndex + offset, images.length));
+  };
+
+  let mx = 0,
+    my = 0,
+    _mx = 0,
+    _my = 0,
+    scale = 1;
+
+  const setIndex = (index: number) => {
+    mx = window.innerWidth / 2;
+    my = window.innerHeight / 2;
+    scale = 1;
+    if (index < 0) {
+      document.body.style.overflowY = "auto";
+    } else {
+      document.body.style.overflowY = "hidden";
+    }
+    currentIndex = index;
+  };
+
+  const handleKeyDown = ({ key }) => {
+    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) => {
+    if (!image.startedLoading) {
+      image.startedLoading = true;
+      let cIndex = currentIndex;
+      if (image.original) {
+        const response = await fetch(image.original, {
+          headers: {
+            "Accept-Encoding": "gzip, deflate, br",
+            "Content-Type":
+              "image/avif,image/webp,image/apng,image/svg+xml,image/jpeg,image/png,image/*,*/*;q=0.8",
+          },
+        });
+        const total = Number(response.headers.get("content-length"));
+        const reader = response.body.getReader();
+        let bytesReceived = 0;
+        let chunks = [];
+        console.log("[SLIDER] started loading " + image.original);
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) {
+            console.log("[SLIDER] Image complete");
+            break;
+          }
+          chunks.push(value);
+          if (total) {
+            bytesReceived += value.length;
+            progress[cIndex] = bytesReceived / total;
+            console.log(
+              "[SLIDER] " + Math.floor(progress[cIndex] * 1000) / 10 + "%",
+            );
+            progress = progress;
+          }
+        }
+
+        const b = new Blob(chunks);
+        images[cIndex].loaded = URL.createObjectURL(b);
+        images = images;
+      }
+    }
+  };
+
+  function handleSwipe(ev: any) {
+    if (currentIndex === -1) return;
+    if (ev.detail.direction === "right") addIndex(-1);
+    if (ev.detail.direction === "left") addIndex(+1);
+  }
+
+  const handleScroll = (ev: WheelEvent) => {
+    const { pixelY } = normalizeWheel(ev);
+    scale = Math.min(Math.max(scale - pixelY / 100, 1), maxZoom);
+    if (scale > 3) {
+      handleOriginalLoading(images[currentIndex]);
+    }
+  };
+
+  let isUpdating = false;
+  const update = () => {
+    isUpdating && requestAnimationFrame(update);
+
+    let dist = Math.abs(mx - _mx) + Math.abs(my - _my);
+
+    if (dist < 0.1 || scale == 1) {
+      mx = _mx;
+      my = _my;
+      isUpdating = false;
+    } else {
+      let s = (0.2 + (1 - scale / maxZoom) * 0.8) * 0.3;
+      mx = lerp(mx, _mx, 1 - s);
+      my = lerp(my, _my, 1 - s);
+    }
+  };
+
+  const startUpdate = () => {
+    if (!isUpdating && scale !== 1) {
+      isUpdating = true;
+      update();
+    }
+  };
+
+  const handleMouseMove = (ev: MouseEvent) => {
+    _mx = ev.clientX;
+    _my = ev.clientY;
+    startUpdate();
+  };
+
+  const handlePointerMove = () => {
+    // console.log(ev);
+  };
+
+  onMount(() => {
+    const wrappers = Array.prototype.slice.call(
+      document.querySelectorAll("[data-image-component]"),
+    );
+    console.log({ wrappers });
+
+    images = wrappers.map((image, i: number) => {
+      console.log({ image });
+      image.classList.add("image-active");
+      image.addEventListener("click", () => setIndex(i));
+      image.addEventListener("touch", () => setIndex(i));
+      image.style.cursor = "pointer";
+
+      image.addEventListener("error", () => {
+        console.log("Error loading", image);
+      });
+
+      let exif = null;
+
+      try {
+        let rawExif = image.getAttribute("data-exif");
+        exif = JSON.parse(rawExif);
+      } catch (error) {
+        // No biggie
+      }
+
+      return {
+        exif,
+        // preview: preview.getAttribute("src"),
+        src: image.getAttribute("srcset"),
+        alt: image.getAttribute("alt"),
+        sizes: image.getAttribute("sizes"),
+        original: image.getAttribute("data-original"),
+        originalLoaded: false,
+      };
+    });
+
+    return () => {
+      wrappers.forEach(({ children: [_, image] }, i: number) => {
+        image.removeEventListener("click", () => setIndex(i));
+      });
+    };
+  });
+</script>
+
+<svelte:window on:keydown={handleKeyDown} />
+
+<div class="image-wrapper">
+  <slot />
+</div>
+
+<div class="gallery-wrapper" class:visible={currentIndex > -1}>
+  {#if images.length > 1}
+    <div class="controls">
+      {#each images as _, i}
+        <button
+          class:active={currentIndex === i}
+          on:click={() => {
+            currentIndex = i;
+          }}
+        />
+      {/each}
+    </div>
+  {/if}
+
+  <button class="left" on:click={() => addIndex(-1)}>&lt;</button>
+  <button class="right" on:click={() => addIndex(+1)}>&gt;</button>
+  <button class="close" on:click={() => setIndex(-1)}>X</button>
+
+  {#if currentIndex > -1}
+    <div
+      class="image"
+      use:swipe
+      on:swipe={handleSwipe}
+      on:wheel|passive={handleScroll}
+      on:mousemove={handleMouseMove}
+      on:pointermove={handlePointerMove}
+    >
+      {#if progress[currentIndex] && progress[currentIndex] < 0.99}
+        <div
+          transition:fade
+          id="progress"
+          style={`transform: scaleX(${progress[currentIndex]});`}
+        />
+      {/if}
+
+      <img
+        class="background"
+        src={images[currentIndex].preview}
+        alt="background blur"
+      />
+
+      <span>
+        <img
+          style={`transform: scale(${scale}); transform-origin: ${
+            window.innerWidth - mx
+          }px ${window.innerHeight - my}px`}
+          srcset={images[currentIndex].loaded ? "" : images[currentIndex].src}
+          src={images[currentIndex].loaded}
+          alt={images[currentIndex].alt}
+        />
+      </span>
+    </div>
+    {#if images[currentIndex].exif}
+      {@const exif = images[currentIndex].exif}
+      <div class="exif" on:click={() => console.log(exif)}>
+        {#if "FocalLength" in exif}
+          {exif.FocalLength}mm |
+        {/if}
+
+        {#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}
+</div>
+
+<style>
+  #progress {
+    position: absolute;
+    bottom: 0px;
+    height: 10px;
+    z-index: 99;
+    left: 47px;
+    background-color: black;
+    width: calc(100% - 94px);
+    transform-origin: left;
+    transition: transform 0.3s ease;
+  }
+  .gallery-wrapper {
+    position: fixed;
+    z-index: 199;
+    top: 0;
+    left: 0;
+    height: 100vh;
+    width: 100vw;
+    background-color: rgba(24, 24, 24, 0.99);
+
+    opacity: 0;
+    transition: opacity 0.1s ease;
+    pointer-events: none;
+    backdrop-filter: blur(20px);
+  }
+
+  .gallery-wrapper.visible {
+    pointer-events: all;
+    opacity: 1;
+  }
+
+  .image {
+    position: relative;
+    display: grid;
+    place-items: center;
+    width: 100%;
+    height: 100%;
+  }
+
+  .image > span {
+    height: calc(100vh - 70px);
+    width: 95%;
+  }
+
+  .image img {
+    position: relative;
+    max-width: 100vw;
+    max-height: 100vh;
+    width: 100%;
+    height: 100%;
+    z-index: 98;
+    object-fit: contain;
+    image-rendering: pixelated;
+    transition:
+      transform 0.2s ease,
+      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;
+    padding: 5px;
+    position: absolute;
+    z-index: 99;
+    display: flex;
+  }
+
+  .controls > button {
+    width: 15px;
+    height: 15px;
+    border-style: none;
+    background: black;
+    border: solid 1px white;
+    cursor: pointer;
+    margin: 2px;
+    padding: 0px;
+  }
+
+  .controls > button.active {
+    background: white;
+  }
+
+  .exif {
+    position: absolute;
+    bottom: 0px;
+    left: 50vw;
+    transform: translateX(-50%);
+    z-index: 99;
+    background-color: black;
+    color: white;
+    padding: 5px;
+    font-size: 0.8em;
+    white-space: pre;
+  }
+
+  .gallery-wrapper > button {
+    background: black;
+    color: white;
+    border-radius: 0px;
+    border: none;
+    padding: 10px 20px;
+    position: fixed;
+    z-index: 200;
+  }
+
+  .close {
+    top: 0;
+    right: 0;
+  }
+
+  .left {
+    bottom: 0;
+    left: 0;
+  }
+
+  .right {
+    bottom: 0;
+    right: 0;
+  }
+</style>
--- a/src/components/ImageSlider.svelte
+++ b/src/components/ImageSlider.svelte
@ -0,0 +1,122 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+
+  let slot: HTMLDivElement;
+  let images: HTMLImageElement[];
+
+  export let title: string;
+
+  let altText: string;
+  let height: number;
+  let loaded = false;
+
+  function hide(img: HTMLImageElement) {
+    img.classList.remove("active");
+  }
+
+  function show(img: HTMLImageElement) {
+    img.classList.add("active");
+    if (img?.alt) altText = img.alt;
+    else altText = "";
+    height = img.getBoundingClientRect().height;
+    setTimeout(() => {
+      height = img.getBoundingClientRect().height;
+    }, 100);
+  }
+
+  let index = 0;
+  function setIndex(i: number) {
+    if (i < 0) i = images.length - 1;
+    if (i >= images.length) i = 0;
+    hide(images[index]);
+    index = i;
+    show(images[index]);
+  }
+
+  $: if (slot) {
+    images = Array.from(slot.querySelectorAll("img"));
+    if (images?.length) {
+      images.forEach(hide);
+      show(images[index]);
+      images[index].onload = () => {
+        loaded = true;
+        height = images[index].getBoundingClientRect().height;
+      };
+    }
+    setTimeout(() => {
+      loaded = true;
+    }, 100);
+  }
+</script>
+
+<div
+  class="wrapper grid overflow-hidden rounded-xl border border-light"
+  class:title
+  class:loaded
+  style={`--height:${height}px`}
+>
+  {#if title}
+    <div class="flex items-center p-x-4 bg">
+      <h3>{title}</h3>
+    </div>
+  {/if}
+
+  <div class="images" bind:this={slot}>
+    <slot />
+  </div>
+  <div class="p-2 flex place-content-between bg">
+    <p>{index + 1}/{images?.length}</p>
+    {#if altText}
+      <p class="text-right">{altText}</p>
+    {/if}
+    <div class="overflow-hidden rounded-md bg-light gap-2 flex p-1">
+      <button
+        class="flex-1 i-tabler-arrow-left"
+        aria-label="previous image"
+        on:click={() => setIndex(index - 1)}
+      />
+      <button
+        class="flex-1 i-tabler-arrow-right"
+        aria-label="next image"
+        on:click={() => setIndex(index + 1)}
+      />
+    </div>
+  </div>
+</div>
+
+<style>
+  .wrapper {
+    grid-template-rows: 1fr 40px;
+    transition: height 0.3s;
+  }
+
+  .wrapper :global(.image-wrapper) {
+    margin: 0 !important;
+  }
+
+  .wrapper.title {
+    grid-template-rows: 40px 1fr 40px;
+  }
+
+  .loaded {
+    height: calc(var(--height) + 40px);
+  }
+
+  .wrapper.title.loaded {
+    height: calc(var(--height) + 80px);
+  }
+
+  .images :global(img) {
+    border-radius: 0px;
+    display: none;
+  }
+
+  .images :global(.active) {
+    position: relative;
+    display: block !important;
+    opacity: 1;
+    transition:
+      opacity 0.3s ease,
+      display 0.3s 0.3s;
+  }
+</style>
--- a/src/components/LinkCard.astro
+++ b/src/components/LinkCard.astro
@ -0,0 +1,33 @@
+---
+interface Props {
+  link: string;
+  title: string;
+  icon?: string;
+}
+---
+
+<a
+  href={Astro.props.link}
+  class="rounded-diag-md border border-neutral p-4 overflow-hidden flex items-center justify-center pacity-50"
+>
+  <h2
+    class="text-2xl flex gap-3 transition-gap items-center line-clamp text-ellipsis overflow-hidden"
+  >
+    {Astro.props.title}
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="icon icon-tabler icons-tabler-outline icon-tabler-circle-arrow-right"
+      ><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path
+        d="M12 3a9 9 0 1 0 0 18a9 9 0 0 0 0 -18"></path><path d="M16 12l-4 -4"
+      ></path><path d="M16 12h-8"></path><path d="M12 16l4 -4"></path></svg
+    >
+  </h2>
+</a>
--- a/src/components/Logo.astro
+++ b/src/components/Logo.astro
@ -16,6 +16,7 @@
      }
    </style>
  </defs>
+  <title>home icon</title>
  <path
    id="l1"
    d="M1 1H30C41.0457 1 50 9.95431 50 21V50H21C9.9543 50 1 41.0457 1 30V1Z"
--- a/src/components/Max.astro
+++ b/src/components/Max.astro
@ -10,7 +10,7 @@ const t = useTranslations(Astro);
 ---

 <Card
-  classes="googley-eye-target relative rounded-diag-md border border-light gradient grid grid-cols-[250px_1fr] h-[180px] my-8xl"
+  classes="googley-eye-target relative rounded-diag-md border border-neutral gradient grid grid-cols-[250px_1fr] h-[180px] mt-8"
 >
  <div class="image">
    <Image src={MaxImg} alt="its mee" maxWidth={700} />
@ -39,6 +39,16 @@ const t = useTranslations(Astro);
    align-items: flex-end;
  }

+  .image::before {
+    content: "";
+    position: absolute;
+    height: 80%;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(-12deg, var(--background) 0%, transparent 50%);
+  }
+
  .image > :global(img) {
    height: 100%;
    object-fit: contain;
@ -50,7 +60,7 @@ const t = useTranslations(Astro);
  }
  .eye.left {
    top: 29%;
-    right: 27%;
+    right: 28%;
  }
  .eye.right {
    top: 31%;
--- a/src/components/SmallCard.astro
+++ b/src/components/SmallCard.astro
@ -0,0 +1,45 @@
+---
+import markdownToText from "@helpers/markdownToText";
+
+interface Props {
+  post: {
+    data: {
+      title: string;
+      description: string;
+      icon: string;
+      tags: string[];
+    };
+    collection: string;
+    body: string;
+    slug: string;
+  };
+}
+
+const { post } = Astro.props;
+---
+
+<a
+  href={`/${post.collection}/${post.slug.split("/").pop()}`}
+  class="rounded-diag-md border border-neutral p-4 overflow-hidden"
+>
+  <h2
+    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.title}
+  </h2>
+  <p class="text-ellipsis overflow-hidden line-clamp-2">
+    {post.data.description || markdownToText(post.body).slice(0, 200)}
+  </p>
+  {
+    post.data.tags && (
+      <div class="flex gap-2 mt-2">
+        {post.data.tags.map((tag) => (
+          <span class="text-xs border border-neutral p-2 rounded-md">
+            {tag}
+          </span>
+        ))}
+      </div>
+    )
+  }
+</a>
--- a/src/components/arrows/ArrowA.astro
+++ b/src/components/arrows/ArrowA.astro
@ -0,0 +1,21 @@
+---
+import { useTranslations } from "@i18n/utils";
+const t = useTranslations(Astro);
+---
+
+<div class="arrow flex items-center gap-2">
+  <img src="/images/arrow_a.svg" alt="Arrow" />
+  <p class="text-xl">{t("latest-projects")}</p>
+</div>
+
+<style>
+  .arrow {
+    position: absolute;
+    right: 0;
+    transform: rotate(10deg) translateX(110%) translateY(50px);
+  }
+  .arrow > p {
+    color: #414152;
+    transform: rotate(15deg) translateY(16px) translateX(4px);
+  }
+</style>
--- a/src/components/arrows/ArrowB.astro
+++ b/src/components/arrows/ArrowB.astro
@ -0,0 +1,21 @@
+---
+import { useTranslations } from "@i18n/utils";
+const t = useTranslations(Astro);
+---
+
+<div class="arrow flex items-center gap-2">
+  <p class="text-xl">{t("latest-posts")}</p>
+  <img src="/images/arrow_b.svg" alt="Arrow" />
+</div>
+
+<style>
+  .arrow {
+    position: absolute;
+    left: 0;
+    transform: translateX(-110%) translateY(-160px);
+  }
+  .arrow > p {
+    color: #414152;
+    transform: rotate(-26deg) translateY(34px) translateX(-10px);
+  }
+</style>
--- a/src/components/card/Content.svelte
+++ b/src/components/card/Content.svelte
@ -2,6 +2,6 @@
  export let classes = "";
 </script>

-<div class="flex flex-1 flex-col gap-4 {classes} w-[66%]">
+<div class="flex flex-2 flex-col gap-4 {classes}">
  <slot />
 </div>
--- a/src/components/card/Image.svelte
+++ b/src/components/card/Image.svelte
@ -1,11 +1,11 @@
 <script lang="ts">
  export let alt: string;
  export let src: string;
-  export let width: number;
-  export let height: number;
+  export let width: number | undefined;
+  export let height: number | undefined;
 </script>

-<img {src} {alt} {width} {height} />
+<img {src} {alt} {width} {height} class="flex-1" />

 <style>
  img {
--- a/src/components/card/ReadMoreButton.svelte
+++ b/src/components/card/ReadMoreButton.svelte
@ -1,11 +1,11 @@
 <script lang="ts">
  export let link: string;
+  export let text = "read more";
 </script>

 <a
  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"
->
-  read more <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" />
 </a>
--- a/src/components/card/Title.svelte
+++ b/src/components/card/Title.svelte
@ -1,6 +1,7 @@
 <script lang="ts">
+  export let classes = "";
 </script>

-<h2 class="text-2xl">
+<h2 class="text-3xl {classes}">
  <slot />
 </h2>
--- a/src/components/card/Wrapper.svelte
+++ b/src/components/card/Wrapper.svelte
@ -2,18 +2,8 @@
  export let classes = "flex bg";
 </script>

-<div class="relative rounded-diag-md {classes} noise">
+<div
+  class="relative rounded-diag-md {classes} noise card-wrapper items-stretch"
+>
  <slot />
 </div>
-
-<style>
-  .card-wrapper {
-    align-items: stretch;
-
-    min-height: 200px;
-    border: solid thin var(--outline);
-    max-width: 100%;
-    max-height: 300px;
-    overflow: hidden;
-  }
-</style>
--- a/src/content/blog/alpine-valley/index.mdx
+++ b/src/content/blog/alpine-valley/index.mdx
@ -5,7 +5,19 @@ headerImg: "images/Render.png"
 comments: true
 ---

+
+Die Inspiration diesen Render zu machen kam von einem Bild was 2013 auf dem Weg nach Italien entstanden ist.
+
+<ImageGallery client:load/>
+
+<Image
+  loading="eager"
+  src={ValleyView}
+  alt="ValleyView"
+  />
+
 import Image from "@components/Image.astro";
+import ImageGallery from "@components/ImageGallery.svelte";
 import ValleyView from "./images/Render.png";
 import DSC_1601 from "./images/DSC_1601.jpg";
 import Unbenannt1 from "./images/Unbenannt-1.jpg";
@ -13,15 +25,8 @@ import Render4 from "./images/Render4.png";
 import UntitledPng from "./images/untitled1-1.png"
 import Render6 from "./images/Render6.png";

-
-<Image
-  src={ValleyView}
-  alt="ValleyView"
-  />
-
-Die Inspiration diesen Render zu machen kam von einem Bild was 2013 auf dem Weg nach Italien entstanden ist.
-
 <Image
+  loading="eager"
  src={DSC_1601}
  alt="DSC_1601"
  />
--- a/src/content/blog/random-renders-02/index.en.mdx
+++ b/src/content/blog/random-renders-02/index.en.mdx
@ -1,9 +1,13 @@
 ---
 title: "Random Renders NO°2"
 date: 2023-05-11
-headerImg: "images/render_05.png"
+headerImg: "images/palma.png"
+featured: true
 comments: true
 ---
+
+Last month I felt like creating some renderings again. I also found a few old renderings that haven't ended up on my blog yet.
+
 import Image from "@components/Image.astro"
 import Palma from "./images/palma.png"
 import Render05 from "./images/render_05.png"
@ -13,7 +17,6 @@ import Cabin_new from "./images/Cabin_new.png";
 import Home from "./images/Home.png";
 import Workroom from "./images/Workroom.png";

-Last month I felt like creating some renderings again. I also found a few old renderings that haven't ended up on my blog yet.

 ## Palma
 <Image src={Palma} alt="Duude" />
--- a/src/content/blog/random-renders-02/index.mdx
+++ b/src/content/blog/random-renders-02/index.mdx
@ -1,38 +1,41 @@
 ---
 title: "Random Renders NO°2"
 date: 2023-05-11
-headerImg: "images/render_05.png"
+headerImg: "images/palma.png"
+featured: true
 comments: true
 ---

+Im letzten Monat hatte ich wieder Lust, einige Renderings zu erstellen. Außerdem habe ich noch ein paar alte Renderings gefunden die noch nicht auf meinem Blog gelandet sind.
+
+import ImageGallery from "@components/ImageGallery.svelte"
 import Image from "@components/Image.astro"
 import Palma from "./images/palma.png"
 import Render05 from "./images/render_05.png"
+import Poster_var2 from "./images/Poster_var2.jpg";
+import Cabin_old from "./images/Cabin_old.jpg";
+import Cabin_new from "./images/Cabin_new.png";
+import Home from "./images/Home.png";
+import Workroom from "./images/Workroom.png";

-Im letzten Monat hatte ich wieder Lust, einige Renderings zu erstellen. Außerdem habe ich noch ein paar alte Renderings gefunden die noch nicht auf meinem Blog gelandet sind.
-
+<ImageGallery client:load/>

 ## Palma
-<Image
-  src={Palma}
-  alt="Duude"
-/>
+<Image src={Palma} alt="Duude" />

 ## [Sudoku.nvim](https://github.com/jim-fx/sudoku.nvim)

-<Image
-  src={Render05}
-  alt="Duude"
-/>
+<Image src={Render05} alt="Duude" />

-![](./images/Poster_var2.jpg)
+<Image src={Poster_var2} alt="Poster_var2" />

 ## Super old renders:

-![](./images/Cabin_old.jpg)
+<Image src={Cabin_old} alt="Cabin_old" />

-![](./images/Cabin_new.png)
+<Image src={Cabin_new} alt="Cabin_new" />

-![](./images/Home.png)
+<Image src={Home} alt="Home" />
+
+<Image src={Workroom} alt="Workroom" />

-![](./images/Workroom.png)
--- a/src/content/blog/server-setup/index.mdx
+++ b/src/content/blog/server-setup/index.mdx
@ -1,11 +1,13 @@
 ---
-title: "Wie ich mein Server-Setup komplett neu aufbaue."
+title: "Mein neues Server-Setup"
 date: 2020-06-09
 comments: true
 ---

 import Image from "@components/Image.astro"

+import ServerSetup from "./images/new-server.svg"
+
 Dieses Thema beschäftigt mich also schon seit längerem. Und in den letzten zwei Wochen ist es mir endlich klar geworden. Dieser Blogbeitrag ist nicht als Leitfaden gedacht, sondern als Möglichkeit für mein zukünftiges Ich, die Entscheidungsprozesse meines jetzigen Ichs zu verstehen.

 > **Mein Plan ist es, die Leitfäden später als separate Beiträge zu veröffentlichen:** 
@ -44,7 +46,7 @@ In meinem vorherigen Setup habe ich eine Mischung aus externen Diensten verwende

 ## My new Setup

-<img src="./images/new-server.svg"/>
+<Image src={ServerSetup} alt="Server Setup" />

 Eine Frage, die man sich jetzt stellen könnte wäre: „Warum benutzt du Cloud und lokale Server?“ Beide haben einige Nachteile und einige Vorteile. Cloud-Server bieten schnelle Netzwerkgeschwindigkeiten und statische öffentliche IPs, aber die Speicherung großer Datenmengen ist recht teuer. Der Festplattenspeicher ist bei lokalen Servern vergleichsweise günstig. Ich habe etwa 60 € für meine 1-TB-Festplatte bezahlt, die speziell für NAS-Situationen entwickelt wurde, bei denen die Laufwerke rund um die Uhr laufen. Außerdem gefällt mir die Idee sehr gut, physischen Zugriff auf meine eigenen Daten zu haben und diese nicht einem Dritten anvertrauen zu müssen. Ein weiterer Vorteil des physischen Zugriffs auf meinen eigenen Server besteht darin, dass ich an Hardwareaspekten wie Netzwerk, Laufwerken und Kühlung herumbasteln und physische Messungen wie Raumtemperatur und Luftfeuchtigkeit vornehmen kann.

--- a/src/content/blog/zentralwerk_2051/Fishes.svelte
+++ b/src/content/blog/zentralwerk_2051/Fishes.svelte
@ -2,6 +2,7 @@
  import { onMount } from "svelte";
  import createFishes from "./fishes/webgl-fishes";
  import { Color } from "ogl";
+  import { rgbToHex } from "@helpers/colors";

  let canvasBottom: HTMLCanvasElement;

@ -26,20 +27,7 @@
    fishCanvasBack.resize();
  };

-  // function to turn css rgb() strings to hex
-  function rgbToHex(rgb: string) {
-    let hex = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
-    if (!hex) return rgb;
-    return (
-      "#" +
-      hex
-        .slice(1)
-        .map((x) => {
-          return ("0" + parseInt(x).toString(16)).slice(-2);
-        })
-        .join("")
-    );
-  }
+  let loaded = false;

  onMount(async () => {
    const background = window.getComputedStyle(document.body);
@ -56,6 +44,7 @@
      speed *= 0.99;
      render && fishCanvasBack.update(t, timeOffset);
    }
+    loaded = true;
  });
 </script>

@ -69,7 +58,7 @@
  }}
 />

-<canvas id="bottom" bind:this={canvasBottom} />
+<canvas id="bottom" bind:this={canvasBottom} class:loaded />

 <!-- <canvas id="top" bind:this={canvasTop} /> -->
 <style>
@ -80,6 +69,11 @@
    top: 0px;
    left: 0px;
    z-index: -1;
-    opacity: 0.5;
+    opacity: 0;
+    transition: opacity 0.5s;
+  }
+
+  canvas.loaded {
+    opacity: 0.2;
  }
 </style>
--- a/src/content/blog/zentralwerk_2051/index.mdx
+++ b/src/content/blog/zentralwerk_2051/index.mdx
@ -1,7 +1,6 @@
 ---
 title: "Zentralwerk_2051"
 date: 2021-01-07
-_layout: "transparent"
 links: [["PDF", "/Zentralwerk_2051.pdf"]]
 license: "CC-BY-SA:4.0"
 comments: true
--- a/src/content/config.ts
+++ b/src/content/config.ts
@ -5,8 +5,11 @@ const blogCollection = defineCollection({
    title: z.string(),
    date: z.date(),
    headerImg: z.string().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(),
  })
 });
--- a/src/content/photos/bigge-changes/index.mdx
+++ b/src/content/photos/bigge-changes/index.mdx
@ -1,7 +1,7 @@
 ---
 title: "Bilder Bigge Changes"
 date: 2020-11-23
-headerImg: "images/Image6.jpg"
+headerImg: "images/6_1.jpg"
 ---

 import Image from "@components/Image.astro"
@ -21,22 +21,13 @@ Der Sommer '18 war einer der trockensten der letzten Jahre _(irgendwie scheint d
 Zurück zur Trockenheit, durch den fehlenden Regen ist der Zulauf der Bigge fast komplett versiegt; und so war der See bist fast auf den Grund ausgetrocknet. Das war ein seltsamer trauriger und schöner Anblick zugleich. Im Laufe der Zeit habe ich viele Bilder gemacht, viele auch bei einer Wanderung mit meinem Papa zusammen.

 <Image src={Image6} alt=""/>
-
 <Image src={Image7} alt=""/>
-
 <Image src={Image11} alt=""/>
-
 <Image src={Image14} alt=""/>
-
 <Image src={Image20} alt=""/>
-
 <Image src={Image27} alt=""/>
-
 <Image src={Image35} alt=""/>
-
 <Image src={Image39} alt=""/>
-
 <Image src={MAX_0511} alt=""/>
-
 <Image src={MAX_0513} alt=""/>

--- a/src/content/photos/bilder-caen-ogrove/index.mdx
+++ b/src/content/photos/bilder-caen-ogrove/index.mdx
@ -1,10 +1,23 @@
 ---
 title: "Bilder Caen-OGrove"
 date: 2017-04-07
-headerImg: "images/Thumb.jpg"
+headerImg: "images/HameuxDeLaMer_03.jpg"
 ---

 import Image from "@components/Image.astro"
+
+
+import Zumaia_01 from "./images/Zumaia_01.jpg";
+import HameuxDeLaMer_04 from "./images/HameuxDeLaMer_04.jpg";
+import Barqueiro_01 from "./images/Barqueiro_01.jpg";
+import untitled_panorama1 from "./images/untitled_panorama1.jpg";
+import untitled_panorama5 from "./images/untitled_panorama5.jpg";
+import pointedupenhir_02 from "./images/pointedupenhir_02.jpg";
+import Lannion_01 from "./images/Lannion_01.jpg";
+import untitled_panorama2 from "./images/untitled_panorama2.jpg";
+import HameuxDeLaMer_03 from "./images/HameuxDeLaMer_03.jpg";
+import PointeDuPenhir_01 from "./images/PointeDuPenhir_01.jpg";
+import RandomHotel from "./images/RandomHotel.jpg";
 import SoulacSurMer01 from "./images/SoulacSurMer_01.jpg"
 import UntitledChairs1 from "./images/Untitled_Chairs1.jpg"
 import Untitled_Panorama10 from "./images/Untitled_Panorama10.jpg"
@ -25,18 +38,6 @@ Ich fand die Fassade amüsierend, da sie offensichtlich gedacht ist um dem Kohle

 Zumaia in Spanien, die Felsformation heißt Flysch und angeblich können Geologen hier das Aussterben der durch einen Meteorit begründen, und die Erderwärmung in ganz großen Masstab verfolgen. Außerdem soll hier das Intro für die neue Staffel Game of Thrones gedreht worden sein.

-import Zumaia_01 from "./images/Zumaia_01.jpg";
-import HameuxDeLaMer_04 from "./images/HameuxDeLaMer_04.jpg";
-import Barqueiro_01 from "./images/Barqueiro_01.jpg";
-import untitled_panorama1 from "./images/untitled_panorama1.jpg";
-import untitled_panorama5 from "./images/untitled_panorama5.jpg";
-import pointedupenhir_02 from "./images/pointedupenhir_02.jpg";
-import Lannion_01 from "./images/Lannion_01.jpg";
-import untitled_panorama2 from "./images/untitled_panorama2.jpg";
-import HameuxDeLaMer_03 from "./images/HameuxDeLaMer_03.jpg";
-import PointeDuPenhir_01 from "./images/PointeDuPenhir_01.jpg";
-import RandomHotel from "./images/RandomHotel.jpg";
-
 <Image src={HameuxDeLaMer_04} alt=""/>

 Eigentlich gehört das Foto eher in den letzten Blogbeitrag aber irgendwie habe ich es damals nicht dazugefügt. Die Nachbearbeitung ist sehr von dem MadMax Grading inspiriert. Der Ort ist Les Hameux de la Mer ein super schöner Ort.
--- a/src/content/photos/erasmus-valencia/index.en.mdx
+++ b/src/content/photos/erasmus-valencia/index.en.mdx
@ -1,85 +1,87 @@
 ---
 title: "Erasmus Valencia"
 date: 2022-09-02
+headerImg: "images/MAX_8218 - MAX_8230.jpg"
 ---

-import Image from "@components/Image.astro";
+import Image from "@components/Image.astro"
+import MAX_8126 from "./images/MAX_8126.jpg"
+import MAX_8133 from "./images/MAX_8133.jpg"
+import MAX_8154 from "./images/MAX_8154.jpg"
+import MAX_8194 from "./images/MAX_8194.jpg"
+import MAX_8416_NEF_shotwell from "./images/MAX_8416_NEF_shotwell.jpg"
+import MAX_8197_NEF_shotwell from "./images/MAX_8197_NEF_shotwell.jpg"
+import MAX_8212_NEF_shotwell from "./images/MAX_8212_NEF_shotwell.jpg"
+import MAX_8404_NEF_shotwell from "./images/MAX_8404_NEF_shotwell.jpg"
+import MAX_8249 from "./images/MAX_8249.jpg"
+import MAX_8310_NEF_shotwell from "./images/MAX_8310_NEF_shotwell.jpg"
+import MAX_8342 from "./images/MAX_8342.jpg"
+import MAX_8360 from "./images/MAX_8360.jpg"
+import MAX_8361 from "./images/MAX_8361.jpg"
+import MAX_8366 from "./images/MAX_8366.jpg"
+import MAX_8386 from "./images/MAX_8386.jpg"
+import MAX_8396 from "./images/MAX_8396.jpg"
+import MAX_8551_NEF_shotwell from "./images/MAX_8551_NEF_shotwell.jpg";
+import MAX_8218_MAX_8230 from "./images/MAX_8218 - MAX_8230.jpg";
+import MAX_8276 from "./images/MAX_8276.jpg";
+import MAX_8426 from "./images/MAX_8426.jpg";
+import MAX_8527 from "./images/MAX_8527.jpg";
+import MAX_8547_NEF_shotwell from "./images/MAX_8547_NEF_shotwell.jpg";
+import MAX_8561 from "./images/MAX_8561.jpg";
+import MAX_8570 from "./images/MAX_8570.jpg";
+import MAX_8582 from "./images/MAX_8582.jpg";
+import MAX_8781 from "./images/MAX_8781.jpg";
+import MAX_8791 from "./images/MAX_8791.jpg";
+import MAX_8794 from "./images/MAX_8794.jpg";
+import MAX_8887 from "./images/MAX_8887.jpg";
+import Panorama_01 from "./images/Panorama_01.jpg";
+import Panorama_02 from "./images/Panorama_02.jpg";

 In 2022 I had the privilege of studying in Valencia for 5 months with the support of Erasmus, here are the pictures that were taken.

 ## Hiking in Chullila

-import MAX_8126 from "./images/MAX_8126.jpg";
-<Image src={ MAX_8126 } alt="Single tree on the side of a mountain, foggy light"/>
-import MAX_8133 from "./images/MAX_8133.jpg";
-<Image src={ MAX_8133 } alt="Side of a mountain with a single road, large lake in the distance"/>
-import MAX_8154 from "./images/MAX_8154.jpg";
-<Image src={ MAX_8154 } alt="Guy is standing on a street under a bridge that is very big"/>
+<Image src={MAX_8126} alt="Single tree on the side of a mountain, foggy light"/>
+<Image src={MAX_8133} alt="Side of a mountain with a single road, large lake in the distance"/>
+<Image src={MAX_8154} alt="Guy is standing on a street under a bridge that is very big"/>

 ## Valencia Harbour

-import MAX_8194 from "./images/MAX_8194.jpg";
-<Image src={ MAX_8194 }/>
-import MAX_8416_NEF_shotwell from "./images/MAX_8416_NEF_shotwell.jpg";
-<Image src={ MAX_8416_NEF_shotwell }/>
+<Image src={MAX_8194} alt=""/>
+<Image src={MAX_8416_NEF_shotwell} alt=""/>

 ## Dogs

-import MAX_8197_NEF_shotwell from "./images/MAX_8197_NEF_shotwell.jpg";
-<Image src={ MAX_8197_NEF_shotwell }/>
-import MAX_8212_NEF_shotwell from "./images/MAX_8212_NEF_shotwell.jpg";
-<Image src={ MAX_8212_NEF_shotwell }/>
-import MAX_8404_NEF_shotwell from "./images/MAX_8404_NEF_shotwell.jpg";
-<Image src={ MAX_8404_NEF_shotwell }/>
+<Image src={MAX_8197_NEF_shotwell} alt=""/>
+<Image src={MAX_8212_NEF_shotwell} alt=""/>
+<Image src={MAX_8404_NEF_shotwell} alt=""/>

 ## Botanical

-import MAX_8249 from "./images/MAX_8249.jpg";
-<Image src={ MAX_8249 }/>
-import MAX_8310_NEF_shotwell from "./images/MAX_8310_NEF_shotwell.jpg";
-<Image src={ MAX_8310_NEF_shotwell }/>
-import MAX_8342 from "./images/MAX_8342.jpg";
-<Image src={ MAX_8342 }/>
-import MAX_8360 from "./images/MAX_8360.jpg";
-<Image src={ MAX_8360 }/>
-import MAX_8361 from "./images/MAX_8361.jpg";
-<Image src={ MAX_8361 }/>
-import MAX_8366 from "./images/MAX_8366.jpg";
-<Image src={ MAX_8366 }/>
-import MAX_8386 from "./images/MAX_8386.jpg";
-<Image src={ MAX_8386 }/>
-import MAX_8396 from "./images/MAX_8396.jpg";
-<Image src=src={ MAX_8396 } caption="Hand made vase"/>
-import MAX_8551_NEF_shotwell from "./images/MAX_8551_NEF_shotwell.jpg";
-<Image src={ MAX_8551_NEF_shotwell }/>
+<Image src={MAX_8249} alt=""/>
+<Image src={MAX_8310_NEF_shotwell} alt=""/>
+<Image src={MAX_8342} alt=""/>
+<Image src={MAX_8360} alt=""/>
+<Image src={MAX_8361} alt=""/>
+<Image src={MAX_8366} alt=""/>
+<Image src={MAX_8386} alt=""/>
+<Image src={MAX_8396} alt="Hand made vase"/>
+<Image src={MAX_8551_NEF_shotwell} alt=""/>
+
+## Landscapes
+