feat: some stuff

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/>