feat: some stuff

public/app.css

@@ -55,3 +55,12 @@ video {
   justify-content: center;
   align-items: center;
 }
+
+.astro-code {
+  padding: 20px;
+  border-radius: 10px;
+}
+
+article iframe {
+  border-radius: 10px;
+}

src/components/SmallCard.astro

@@ -1,5 +1,8 @@
 ---
 import markdownToText from "@helpers/markdownToText";
+import { useTranslatedPath } from "@i18n/utils";
+
+const tp = useTranslatedPath(Astro.url);
 
 interface Props {
   post: {
@@ -19,7 +22,7 @@ const { post } = Astro.props;
 ---
 
 <a
-  href={`/${post.collection}/${post.slug.split("/").pop()}`}
+  href={tp(`/${post.collection}/${post.slug.split("/")[0]}`)}
   class="rounded-diag-md border border-neutral p-4 overflow-hidden"
 >
   <h2

src/components/ThemeToggle.svelte

@@ -34,7 +34,7 @@
     ><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path
       d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"
     /><path
-      d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7"
+      d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.q7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7"
     /></svg
   >
   <svg

src/content/blog/alpine-valley/index.en.mdx

@@ -4,7 +4,19 @@ date: 2016-12-22
 cover: ./images/Render.png
 comments: true
 ---
+
+This piece was inspired by a picture I took in 2013 on the way to Italy
+
+<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";
@@ -12,13 +24,6 @@ import Render4 from "./images/Render4.png";
 import UntitledPng from "./images/untitled1-1.png"
 import Render6 from "./images/Render6.png";
 
-<Image
-  src={ValleyView}
-  alt="ValleyView"
-  />
-
-This piece was inspired by a picture I took in 2013 on the way to Italy
-
 <Image
   src={DSC_1601}
   alt="DSC_1601"

src/content/blog/random-renders-02/index.en.mdx

@@ -8,6 +8,7 @@ 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 ImageGallery from "@components/ImageGallery.svelte"
 import Image from "@components/Image.astro"
 import Palma from "./images/palma.png"
 import Render05 from "./images/render_05.png"
@@ -17,6 +18,7 @@ import Cabin_new from "./images/Cabin_new.png";
 import Home from "./images/Home.png";
 import Workroom from "./images/Workroom.png";
 
+<ImageGallery client:load/>
 
 ## Palma
 <Image src={Palma} alt="Duude" />

src/content/blog/random-renders-02/index.mdx

@@ -9,6 +9,7 @@ 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"

src/content/blog/random-renders-no1/index.en.mdx

@@ -5,13 +5,16 @@ cover: ./images/myown.png
 comments: true
 ---
 
+A small collection of new and older renders:
+
 import Image from "@components/Image.astro"
 import SoupKitchen from "./images/render_11.png"
 import Guadelajara from "./images/Render_03.png"
 import Benzema from "./images/untitled2.png"
 import Wallpaper from "./images/myown.png"
+import ImageGallery from "@components/ImageGallery.svelte"
 
-A small collection of new and older renders:
+<ImageGallery client:load/>
 
 ## Ilse Crawfords Soup Kitchen
 

src/content/blog/random-renders-no1/index.mdx

@@ -5,13 +5,16 @@ cover: ./images/myown.png
 comments: true
 ---
 
+Einfach ne kleine Sammlung von aktuellen und nicht aktuellen Szenen:
+
 import Image from "@components/Image.astro"
 import SoupKitchen from "./images/render_11.png"
 import Guadelajara from "./images/Render_03.png"
 import Benzema from "./images/untitled2.png"
 import Wallpaper from "./images/myown.png"
+import ImageGallery from "@components/ImageGallery.svelte"
 
-Einfach ne kleine Sammlung von aktuellen und nicht aktuellen Szenen:
+<ImageGallery client:load/>
 
 ## Ilse Crawfords Soup Kitchen
 

src/content/blog/server-setup/index.en.mdx

@@ -4,12 +4,12 @@ date: 2020-06-09
 comments: true
 ---
 
-import Image from "@components/Image.astro"
-
 So, this topic has been on my mind for a long time. And in the past two weeks i have finally realized it. This blog post is not meant as a guide, but as a way for future me to understand my current me's decision processes.
 
+import Image from "@components/Image.astro"
+import ServerSetup from "./images/new-server.svg"
+
 > **My plan is to publish the guides as separate posts later:**
->
 > - [ ] _🔗 Proxying local servers with Tinc_
 > - [ ] _☕+🛸=♥ Setting up a Gitea server with drone.io CI/CD_
 > - [ ] _Setting up Nginx+SFTP+Traefik_
@@ -49,7 +49,7 @@ In my previous setup i used a mixture of external services. For **git hosting**
 
 ## My new Setup
 
-![New Setup](./images/new-server.svg)
+<Image src={ServerSetup} alt="Server Setup" />
 
 Now, the first question that may come to mind is, "Why do you use both cloud and local servers?". There are some drawbacks and some benefits to both. Cloud servers provide fast network speeds and static public IPs but storing large amount of data is kind of expensive. Disk space is comparably cheap with local servers I paid around 60€ for my 1tb harddrive which is made specifically for nas situations with drives running 24/7. Also i really like the idea of having physical access to my own data and not having to trust a third party with it. Another benefit to having physical access to my own server is that i can tinker with hardware aspects like networking, drives and cooling as well as taking physical measurements like room temperature and humidity.
 

src/content/blog/server-setup/index.mdx

@@ -4,12 +4,11 @@ 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.
 
+import Image from "@components/Image.astro"
+import ServerSetup from "./images/new-server.svg"
+
 > **Mein Plan ist es, die Leitfäden später als separate Beiträge zu veröffentlichen:** 
 > > - [ ] _🔗 Proxying lokaler Server mit Tinc_ 
 > > - [ ] _☕+🛸=♥ Einrichten eines Gitea-Servers mit Drone.io CI/ CD_ 

src/content/blog/speed_scene_03/index.en.mdx

@@ -8,6 +8,9 @@ comments: true
 import Image from "@components/Image.astro"
 import Render04 from "./images/Render_04.png";
 import Render05 from "./images/Render_05-2.png";
+import ImageGallery  from "@components/ImageGallery.svelte"
+
+<ImageGallery client:load/>
 
 <Image src={Render04} alt="Speed_Scene_03" />
 

src/content/blog/speed_scene_03/index.mdx

@@ -8,6 +8,9 @@ comments: true
 import Image from "@components/Image.astro"
 import Render04 from "./images/Render_04.png";
 import Render05 from "./images/Render_05-2.png";
+import ImageGallery  from "@components/ImageGallery.svelte"
+
+<ImageGallery client:load/>
 
 <Image src={Render04} alt="Speed_Scene_03" />
 

src/content/blog/speed_scene_0405/index.en.mdx

@@ -8,6 +8,9 @@ comments: true
 import Image from "@components/Image.astro";
 import Render01 from "./images/Render_01.jpg";
 import Untitled from "./images/untitled.png";
+import ImageGallery from "@components/ImageGallery.svelte";
+
+<ImageGallery client:load/>
 
 <Image alt="Render 01" src={Render01} />
 <Image alt="Untitled" src={Untitled} />

src/content/blog/speed_scene_0405/index.mdx

@@ -8,6 +8,9 @@ comments: true
 import Image from "@components/Image.astro";
 import Render01 from "./images/Render_01.jpg";
 import Untitled from "./images/untitled.png";
+import ImageGallery from "@components/ImageGallery.svelte";
+
+<ImageGallery client:load/>
 
 <Image alt="Render 01" src={Render01} />
 <Image alt="Untitled" src={Untitled} />

src/content/blog/station-b3-4-offline/index.en.mdx

@@ -11,7 +11,9 @@ import Snowy_Mountains from "./images/Snowy_Mountains.png"
 import Car from "./images/Car.png"
 import Station from "./images/Station.jpg"
 import Human from "./images/human.png"
+import ImageGallery from "@components/ImageGallery.svelte"
 
+<ImageGallery client:load/>
 
 Einheit B3-4 wurde entsandt um zu überprüfen, was den Ausfall verursacht hat, und um die Einheit wieder ins Netz zu bringen. Sein Fahrzeug bringt ihn so weit wie die letzten Straßen gehen.
 

src/content/blog/station-b3-4-offline/index.mdx

@@ -11,9 +11,11 @@ import Snowy_Mountains from "./images/Snowy_Mountains.png"
 import Car from "./images/Car.png"
 import Station from "./images/Station.jpg"
 import Human from "./images/human.png"
+import ImageGallery from "@components/ImageGallery.svelte"
+
+<ImageGallery client:load/>
 
 
-Unit
 Unit B54 was dispatched to check what caused the failure, and to get the unit back on the net. His vehicle brings him as far as the last roads go.
 
 From there on he has to use his climbing skills and his highly developed equipment to get to the station.

src/content/blog/surfirvorcamp-esmoriz/index.mdx

@@ -4,6 +4,12 @@ date: 2017-04-18
 cover: ./images/MAX_4978.jpg
 comments: true
 ---
+
+
+<YouTube id="xREriF-WuOA"/>
+
+Letzten Freitag habe ich sehr spontan eine Woche Surfkurs in Esmoriz gebucht zum einen weil ich nen bisschen irgendwo absacken wollte und zum anderen weil Pella auch da war. Ich hatte ne super Woche das Surfivorcamp kann ich nur jedem empfehlen tolle Leute super entspannte Atmosphäre.
+
 import YouTube from "@components/YouTube.astro";
 import Image from "@components/Image.astro";
 
@@ -18,9 +24,11 @@ import MAX_5075 from "./images/MAX_5075.jpg";
 import IMG_20170416_WA0001 from "./images/IMG-20170416-WA0001.jpg";
 import MAX_5112 from "./images/MAX_5112.jpg";
 
-<YouTube id="xREriF-WuOA"/>
 
-Letzten Freitag habe ich sehr spontan eine Woche Surfkurs in Esmoriz gebucht zum einen weil ich nen bisschen irgendwo absacken wollte und zum anderen weil Pella auch da war. Ich hatte ne super Woche das Surfivorcamp kann ich nur jedem empfehlen tolle Leute super entspannte Atmosphäre.
+import ImageGallery from "@components/ImageGallery.svelte"
+
+<ImageGallery client:load/>
+
 
 <Image src={MAX_4978} alt="Surfivorcamp"/>
 

src/content/blog/the-end/index.mdx

@@ -9,6 +9,9 @@ import Image from "@components/Image.astro";
 import YouTube from "@components/YouTube.astro";
 import Render01 from "./images/Render_01.jpg";
 import Render05 from "./images/Render_05.png";
+import ImageGallery from "@components/ImageGallery.svelte"
+
+<ImageGallery client:load/>
 
 <Image src={Render01} alt="Render 01" />
 

src/content/blog/timelapse-rig-pi-zero-project/index.mdx

@@ -8,6 +8,9 @@ import Image from "@components/Image.astro";
 import YouTube from "@components/YouTube.astro";
 import Untitled1_low from "./images/untitled1_low.png";
 import Untitled3 from "./images/untitled3.png";
+import ImageGallery from "@components/ImageGallery.svelte"
+
+<ImageGallery client:load/>
 
 Ich habe schon seid längerem den Plan, mit dem Pi-Zero eine Art Zeitraffer Rig zu bauen ungefähr so:
 

src/content/blog/webgl-showcase/index.mdx

@@ -13,6 +13,9 @@ import Screenshot2 from "./images/Bildschirmfoto-2018-01-03-um-13.18.27-2.png";
 import Screenshot3 from "./images/Bildschirmfoto-2018-01-03-um-13.17.57-2.png";
 import Screenshot4 from "./images/Bildschirmfoto-2018-01-03-um-13.09.42-2.png";
 import WHarG from "./images/wHarG.jpg";
+import ImageGallery from "@components/ImageGallery.svelte"
+
+<ImageGallery client:load/>
 
 Vorerst etwas Story:
 

src/content/blog/workroom-no2/index.en.mdx

@@ -10,7 +10,9 @@ import YouTube from "@components/YouTube.astro";
 import Untitled6 from "./images/untitled6.png";
 import Untitled7 from "./images/untitled7.png";
 import Untitled8 from "./images/untitled8.png";
+import ImageGallery from "@components/ImageGallery.svelte"
 
+<ImageGallery client:load/>
 
 This time i made a lot of changes to the wood material, i basically completely redid it. So this time the normal map looks a lot better. In the last material you could see the wooden fibers as structur in on the surface, which is highly unnatural for a polished surface.
 

src/content/blog/workroom/index.en.mdx

@@ -12,6 +12,9 @@ import Untitled1 from "./images/untitled1.png";
 import Untitled2 from "./images/untitled2.png";
 import Untitled from "./images/untitled.png";
 import Untitled5 from "./images/untitled5.png";
+import ImageGallery from "@components/ImageGallery.svelte"
+
+<ImageGallery client:load/>
 
 Okay, this time its another scene i did for the second time, but this one has a bit more story, a friend of mine smuggled me into his uni in a course were a professional showed us his photogrammetry workflow. And we got to try Reality Capture a 15.000€ piece of photogrammetry software. My friend scanned a small dragon statue he got as a present:
 

src/content/photos/bigge-changes/index.mdx

@@ -15,6 +15,9 @@ import Image35 from "./images/35_1.jpg"
 import Image39 from "./images/39_1.jpg"
 import MAX_0511 from "./images/MAX_0511_1.jpg"
 import MAX_0513 from "./images/MAX_0513_1.jpg"
+import ImageGallery from "@components/ImageGallery.svelte"
+
+<ImageGallery client:load/>
 
 Der Sommer '18 war einer der trockensten der letzten Jahre _(irgendwie scheint das bei jedem neuen Sommer der Fall zu sein)_. Zu der Zeit habe ich bei "Des Wahnsinns Fette Beute" in Attendorn meine Ausbildung als Mediengestalter gemacht. Attendorn liegt tief im Sauerland an einem See namens Bigge. Jeden morgen um 8:30 bin ich an diesem See vorbeigefahren.
 

src/content/photos/bilder-caen-ogrove/index.mdx

@@ -5,8 +5,6 @@ cover: ./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";
@@ -21,6 +19,9 @@ 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"
+import ImageGallery from "@components/ImageGallery.svelte"
+
+<ImageGallery client:load/>
 
 <Image src={SoulacSurMer01} alt=""/>
 

src/content/photos/bilder-duenkirchen-bolougne-sur-mer/index.mdx

@@ -11,6 +11,9 @@ import Gris_Nez_Klippen_02 from "./images/Gris-Nez_Klippen_02.jpg"
 import Audresselles_01 from "./images/audresselles_01.jpg"
 import Audresselles_03 from "./images/Audresselles_03.jpg";
 import Wimereux from "./images/Wimereux.jpg";
+import ImageGallery from "@components/ImageGallery.svelte"
+
+<ImageGallery client:load/>
 
 So, es gibt jetzt erst mal nen klassischen Blogbeitrag, da mein Laptop nicht mit AfterEffects klarkommt (Ich weiß das Effects in AE steht dafür dass das Programm für Effekte gedacht ist und nicht zum Video schneiden, schon klar). Die erste Nacht habe ich in Dünkirchen gepennt, ich würde sagen für die erste Nacht wars ganz okay. Nach Dünkirchen bin ich die Küste runter Richtung Süden gefahren. Über Calais bis nach Wimereux, Calais ist keine klassische schöne Stadt, aber ich mag den industriellen Hafenflair. Sobald man aus Calais raus ist wird die Landschaft viel schöner. Vor allem Gris-Nez ist ein superschöner Ort, direkt an der Küste in einem Tal, und auf dem Hügel darüber thront ein 10 Meter großer Obelisk, der an die größte Artillerie der Nazis erinnert.
 

src/content/photos/cologne-spring/index.mdx

@@ -10,6 +10,10 @@ import Unbenanntes_Panorama2 from "./images/Unbenanntes_Panorama2.jpg";
 import Unbenanntes_Panorama3 from "./images/Unbenanntes_Panorama3.jpg";
 import Unbenanntes_Panorama4 from "./images/Unbenanntes_Panorama4.jpg";
 import Unbenanntes_Panorama6 from "./images/Unbenanntes_Panorama6.jpg";
+import ImageGallery from "@components/ImageGallery.svelte"
+
+<ImageGallery client:load/>
+
 
 Some pictures in the first spring i had in cologne.
 

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

@@ -36,6 +36,9 @@ 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";
+import ImageGallery from "@components/ImageGallery.svelte"
+
+<ImageGallery client:load/>
 
 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.
 

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

@@ -36,6 +36,9 @@ 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";
+import ImageGallery from "@components/ImageGallery.svelte"
+
+<ImageGallery client:load/>
 
 2022 hatte ich das Privileg mit der Unterstützung von Erasmus 5 Monate in Valencia zu studieren, dass hier sind die Bilder, die dabei entstanden sind.
 

src/content/photos/sestri-levante/index.mdx

@@ -11,6 +11,9 @@ import MAX_7053 from "./images/MAX_7053.jpg";
 import MAX_7054 from "./images/MAX_7054.jpg";
 import MAX_7055_Panorama from "./images/MAX_7055-Panorama.jpg";
 import MAX_7076_Panorama from "./images/MAX_7076-Panorama.jpg";
+import ImageGallery from "@components/ImageGallery.svelte"
+
+<ImageGallery client:load/>
 
 Best images from a short trip to liguria in italy
 

src/content/projects/gamez/index.mdx

@@ -0,0 +1,5 @@
+---
+title: "Gamez"
+date: 2020-07-01
+draft: true
+---

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

@@ -0,0 +1,25 @@
+---
+date: 2019-06-10
+title: "Isyncrasy"
+draft: false
+cover: ./images/main.png
+icon: "/projects/isyncrasy/favicon.ico"
+description: "A small fun virtual OS build with svelte"
+tags: ["svelte", "web", "os"]
+---
+
+# Isyncrasy
+
+
+import Image from "@components/Image.astro"
+import Main from "./images/main.png"
+import Mail from "./images/mail.png"
+import Terminal from "./images/terminal.png"
+import ImageGallery from "@components/ImageGallery.svelte"
+
+<ImageGallery client:load/>
+
+<Image src={Main} alt="Isyncrasy" />
+<Image src={Mail} alt="Isyncrasy" />
+<Image src={Terminal} alt="Isyncrasy" />
+

src/content/projects/isyncrasy/index.mdx

@@ -2,9 +2,23 @@
 date: 2019-06-10
 title: "Isyncrasy"
 draft: false
+cover: ./images/main.png
 icon: "/projects/isyncrasy/favicon.ico"
 description: "A small fun virtual OS build with svelte"
 tags: ["svelte", "web", "os"]
 ---
 
 # Isyncrasy
+
+import Image from "@components/Image.astro"
+import Main from "./images/main.png"
+import Mail from "./images/mail.png"
+import Terminal from "./images/terminal.png"
+import ImageGallery from "@components/ImageGallery.svelte"
+
+<ImageGallery client:load/>
+
+<Image src={Main} alt="Isyncrasy" />
+<Image src={Mail} alt="Isyncrasy" />
+<Image src={Terminal} alt="Isyncrasy" />
+

src/content/projects/karl/index.mdx

@@ -4,6 +4,7 @@ date: 2021-04-01
 cover: ./images/Indicatrices_of_Distortion.png
 license: "CC-BY-SA:4.0"
 comments: true
+featured: true
 links:
   [
     ["live", "https://max-richter.dev/karl"],
@@ -11,30 +12,34 @@ links:
   ]
 ---
 
+import Crosswalk from "./images/crosswalk.jpg"
+import CrosswalkMask from "./images/crosswalk_mask.png"
+import Image from "@components/Image.astro"
+import Distorion from "./images/Indicatrices_of_Distortion.png"
+import ImageGallery from "@components/ImageGallery.svelte"
+
+<ImageGallery client:load/>
+
 *[Header by Justin Kunimune - Own work, CC BY-SA 4.0](https://commons.wikimedia.org/w/index.php?curid=66467577*)*
 
 
-{{<toc>}}
-
-```
-K.A.R.L ist eine WebApp die einem dabei hilft 360Grad Panoramas in Sektionen einzuteilen, (Himmel, Boden, Bäume usw...) und dann den Anteil der einzelnen Sektionen am Gesamtbild festzustellen.
-```
+> K.A.R.L ist eine WebApp die einem dabei hilft 360Grad Panoramas in Sektionen einzuteilen, (Himmel, Boden, Bäume usw...) und dann den Anteil der einzelnen Sektionen am Gesamtbild festzustellen.
 
 ## Einleitung
 
 Das Projekt ist aus der Zusammenarbeit mit zwei Freunden entstanden. Der eine steckt gerade mitten in der Konzeptionsphase seiner Bachelorarbeit (Geographie), die sich mit der Auswirkung von Vegetation auf das Stadtklima beschäftigt. Dazu hat er an verschiedenen Orten in Köln Albedo Messungen vorgenommen, also quasi "wieviel Licht kommt vom Himmel, und wieviel davon wird vom Boden reflektiert". Um diese Messungen in den richtigen Kontext zu setzen hat er von jedem Messort 360 Panoramas angelegt, diese sehen ungefähr so aus:
 
-{{<figure src="images/crosswalk.jpg" alt="Image of a crosswalk" caption="bild von hdrihaven.com">}}
+<Image src={Crosswalk} alt="Image of a crosswalk" caption="bild von hdrihaven.com" />
 
 Dazu brauchte er jetzt Angaben wieviel Prozent der Sicht zum Beispiel Vegetation, Himmel und Boden sind. Um das zu messen hat er in Gimp per Hand eine Segmentationsmap erstellt, eine Segmentationsmap sieht etwas so aus:
 
-{{<figure src="images/crosswalk_mask.png" alt="Segmentationsmap">}}
+<Image src={CrosswalkMask} alt="Segmentationsmap" />
 
 ## Problemstellung
 
 Wenn wir jetzt einfach naiv hingehen und die Pixel der einzelnen Farben zählen und daraus eine prozentuale Verteilung machen kriegen wir das klassische Problem mit der Verzerrung das die Menschheit schon seit Jahrhunderten mit Karten hat. Undzwar lassen sich Kugeln nur sehr ungern zwei dimensional darstellen, dabei kommt es immer zu Verzerrungen, wie folgendes Bild visualisiert.
 
-{{<figure src="images/Indicatrices_of_Distortion.png" alt="Image of a crosswalk" caption="by Justin Kunimune - Own work, CC BY-SA 4.0">}}
+<Image src={Distorion} alt="Indicatrices of Distortion" caption="by Justin Kunimune - Own work, CC BY-SA 4.0" />
 
 Zum Glück passiert diese Verzerrung nur in der Breite, wir brauchen also eine Formel die uns für die Höhe eines Pixels eine Gewichtung gibt um diese Verzerrung auszugleichen. Nach vielen Versuchen sind wir bei dieser Formel gelandet:
 
@@ -55,7 +60,7 @@ Diese Formel ist eigentlich dafür gedacht für einen bestimmten Breitengrad den
 
 Hier noch einiger der ersten Versuch in Desmos (fantastisches Tool btw):
 
-{{<iframe "https://www.desmos.com/calculator/52ph4thjah?embed" >}}
+<iframe src="https://www.desmos.com/calculator/52ph4thjah?embed"/>
 
 ## Die Technologien
 
@@ -96,7 +101,7 @@ Das Tool funktioniert ungefähr so:
 
 Ich fand es immer kompliziert State über mehrere Komponenten hinweg zu regeln. Ein Beispiel wäre der Editor, er besteht aus drei einzelnen Komponenten (Toolbar, Topbar, PaintArea) die alle wissen müssen welches Farbe und welches Werkzeug gerade aktiv sind. Man könnte diesen State in einen globalen Store schreiben und in jedem der einzelnen Komponenten darauf zugreifen, aber eigentlich ist das aktive Werkzeug nur in dem Editor Kontext wichtig. Also liegt dieser State jetzt in dem Editor Komponent der in per binding an seine Unterkomponenten weitergibt, das ganze sieht dan ungefähr so aus:
 
-```html
+```svelte
 <!-- Editor.svelte -->
 <script lang="ts">
   import TopBar from "./TopBar.svelte";
@@ -117,7 +122,6 @@ Ich fand es immer kompliziert State über mehrere Komponenten hinweg zu regeln.
 </script>
 
 {{activeColor}}
-
 ```
 
 

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

@@ -0,0 +1,33 @@
+---
+title: "Modern"
+date: 2020-06-09T11:55:24+02:00
+cover: ./images/screenshot.png
+links:
+  [
+    ["live", "https://max-richter.dev/modern?scene=modern"],
+    ["git", "https://git.max-richter.dev/max/modern"],
+  ]
+---
+
+import Screenshot from "./images/screenshot.png"
+import Image from "@components/Image.astro"
+
+<a href="https://max-richter.dev/modern?scene=modern" target="_blank">
+<Image alt="Screenshot" src={Screenshot} />
+</a>
+
+A very old project of mine, back then I worked as a trainee at "Des Wahnsinns Fette Beute". Must have been around 2017. Some things I find really cool about the project:
+
+1. Lazyloading
+
+All textures are first loaded as placeholders and then in high resolution. This means that the user has to load a little more data overall, but the website is interactive much faster.
+
+2. Die Controls
+
+Three.js, the framework I used to implement the website, has a built-in OrbitControl class that you can use in most cases but unfortunately was not flexible enough for this use case. That's why I implemented my own control class and I have to say I'm really happy with the usability.
+
+3. Die Settings
+
+I think the settings animate beautifully and are nicely laid out. I especially like the quality slider with its quick feedback.
+
+Not bad at all for such an old project, I don't want to say anything about the code quality here. If you want to take a look at it yourself, here is the [Link](https://git.max-richter.dev/max/modern).

src/content/projects/modern/index.mdx

@@ -9,6 +9,14 @@ links:
   ]
 ---
 
+import Screenshot from "./images/screenshot.png"
+import Image from "@components/Image.astro"
+
+
+<a href="https://max-richter.dev/modern?scene=modern" target="_blank">
+  <Image alt="Screenshot" src={Screenshot} />
+</a>
+
 Ein sehr altes Projekt von mir, damals habe ich als Azubi bei des Wahnsinns Fette Beute gearbeitet. Muss so rund 2017 gewesen sein. Einige Sachen die ich echt cool find an dem Projekt:
 
 1. Lazyloading

src/content/projects/plantarium/_components/Leaves.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
   import { onMount } from "svelte";
   import { createLeaves, setRotation } from "./leaves";
+  import { Color } from "ogl";
+  import { rgbToHex } from "@helpers/colors";
 
   let canvas: HTMLCanvasElement;
 
@@ -10,8 +12,17 @@
     setRotation(window.scrollY / window.innerHeight);
   }
 
+  const color = new Color("#000000");
+
+  const updateBackgroundColor = () => {
+    const background = window.getComputedStyle(document.body);
+    const d = new Color(rgbToHex(background.backgroundColor));
+    color.set(d.r, d.g, d.b);
+  };
+
   onMount(() => {
-    createLeaves({ canvas, num: 20, minZ: 0, maxZ: 1 });
+    updateBackgroundColor();
+    createLeaves({ canvas, num: 20, minZ: 0, maxZ: 1, color });
     setTimeout(() => {
       loaded = true;
     }, 100);
@@ -19,6 +30,7 @@
 </script>
 
 <svelte:window on:scroll={handleScroll} />
+<svelte:body on:transitionend={updateBackgroundColor} />
 
 <canvas bind:this={canvas} class:loaded />
 

src/content/projects/plantarium/_components/leaves.ts

@@ -3,7 +3,6 @@ import { rand, randMinMax } from "./random";
 
 import fragment from "./Leaf.frag";
 import vertex from "./Leaf.vert";
-import { rgbToHex } from '@helpers/colors';
 
 let rotation = 0;
 
@@ -11,14 +10,12 @@ export function setRotation(r: number) {
   rotation = r;
 }
 
-export function createLeaves({ canvas, num = 20, alpha = false, minZ = -1, maxZ = 1 }: { canvas: HTMLCanvasElement, num?: number, alpha?: boolean, minZ?: number, maxZ?: number }) {
+export function createLeaves({ canvas, num = 20, color, minZ = -1, maxZ = 1 }: { canvas: HTMLCanvasElement, num?: number, color?: Color, minZ?: number, maxZ?: number }) {
 
 
   const renderer = new Renderer({ dpr: 1, canvas, alpha: true });
   const gl = renderer.gl;
 
-  const background = window.getComputedStyle(document.body);
-  const d = new Color(rgbToHex(background.backgroundColor));
 
   const camera = new Camera(gl, { fov: 15 });
   camera.position.z = 5;
@@ -40,7 +37,7 @@ export function createLeaves({ canvas, num = 20, alpha = false, minZ = -1, maxZ
     uniforms: {
       uTime: { value: 0 },
       uRot: { value: 0 },
-      uBackground: { value: d },
+      uBackground: { value: color },
     },
   });
 

src/content/projects/plantarium/index.mdx

@@ -27,6 +27,9 @@ import screenshot_geometry_nodes  from "./images/screenshot-geometry-nodes.jpg"
 import screenshot_houdini  from "./images/screenshot-houdini.jpg"
 import screenshot_unreal  from "./images/screenshot-unreal.jpg"
 import screenshot_davinci from "./images/screenshot-davinci.jpg"
+import ImageGallery from "@components/ImageGallery.svelte"
+
+<ImageGallery client:load/>
 
 <Leaves client:load/>
 

src/i18n/utils.ts

@@ -22,9 +22,10 @@ export function parseSlug(id: string) {
   return [splitPath.join("/"), lang]
 }
 
-export function filterCollection<T extends { id: string, data: { date: Date } }>(collection: T[], locale: string): T[] {
+export function filterCollection<T extends { id: string, data: { draft: boolean, date: Date } }>(collection: T[], locale: string): T[] {
   return collection.filter(post => {
     const [_, lang] = parseSlug(post?.id);
+    if (post?.data?.draft) return false;
     return lang === locale;
   }).sort((a, b) => {
     return (a?.data?.date > b?.data?.date) ? -1 : 1;

src/layouts/Layout.astro

@@ -118,7 +118,6 @@ const { title, width = "compact" } = Astro.props;
           if (!mode && supportDarkMode)
             document.documentElement.classList.add("dark");
           if (!mode) return;
-          console.log({ mode });
           document.documentElement.classList.add(mode);
         } catch (e) {}
       })();