feat: add resume.pdf button

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();
@@ -45,8 +43,6 @@
       render && fishCanvasBack.update(t, timeOffset);
     }
     loaded = true;
-    // @ts-ignore
-    window["updateBackgroundColor"] = updateBackgroundColor;
   });
 </script>
 
@@ -69,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/projects/plantarium/_components/Leaves.svelte

@@ -3,6 +3,7 @@
   import { createLeaves, setRotation } from "./leaves";
   import { Color } from "ogl";
   import { rgbToHex } from "@helpers/colors";
+  import { colors } from "@helpers/colors";
 
   let canvas: HTMLCanvasElement;
 
@@ -14,17 +15,17 @@
 
   const color = new Color("#000000");
 
-  const updateBackgroundColor = () => {
-    const background = window.getComputedStyle(document.body);
-    const d = new Color(rgbToHex(background.backgroundColor));
+  function updateColor(c: string) {
+    const d = new Color(rgbToHex(c));
     color.set(d.r, d.g, d.b);
-  };
+  }
+
+  $: if ($colors.background) {
+    updateColor($colors.background);
+  }
 
   onMount(() => {
-    updateBackgroundColor();
-    createLeaves({ canvas, num: 20, minZ: 0, maxZ: 1, color });
-    // @ts-ignore
-    window["updateBackgroundColor"] = updateBackgroundColor;
+    createLeaves({ canvas, num: 40, minZ: 0, maxZ: 1, color });
     setTimeout(() => {
       loaded = true;
     }, 100);
@@ -48,10 +49,10 @@
     z-index: -1;
     pointer-events: none;
     opacity: 0;
-    transition: opacity 2s;
+    transition: opacity 4s;
   }
 
   .loaded {
-    opacity: 0.2;
+    opacity: 0.6;
   }
 </style>

src/content/projects/plantarium/images/plantarium-screenshot.png:Zone.Identifier

@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+HostUrl=about:internet

src/content/projects/plantarium/index.mdx

@@ -16,6 +16,8 @@ Plantarium ist die Schnittmenge zwischen zwei Dingen die ich sehr faszinierend f
 Es ist eine WebApp die es Nutzern ermöglicht Pflanzen zu erstellen und zu exportieren. 
 Die User legen dabei über ein Node-System fest wie die Pflanze aussieht und Plantarium generiert daraus ein 3D Modell.
 
+<Image src={plantarium_screenshot} alt="Plantarium Screenshot"/>
+
 # Die Anfänge und Herausforderungen
 
 Der erste Prototyp war innerhalb von zwei Wochen intensiver Arbeit fertig und sah ungefähr so aus:
@@ -33,6 +35,7 @@ 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 plantarium_screenshot from "./images/plantarium-screenshot.png"
 import Plantarium from "./images/plantarium.png"
 import ImageGallery from "@components/ImageGallery.svelte"
 
@@ -40,6 +43,7 @@ import ImageGallery from "@components/ImageGallery.svelte"
 
 <Leaves client:load/>
 
+
 <ImageSlider title="Erster Prototyp" client:load>
   <Image src={page01_0} alt="Stem Page"/>
   <Image src={page01_1} alt="Branches page"/>
@@ -83,8 +87,6 @@ In der Beispielgrafik haben wir zwei `input-color` nodes die jeweils eine Farbe
 
 Das coole ist das man dieses System sehr generisch gestalten kann und zum beispiel eine `generate-stem`, `generate-branches` oder eine `add-leaves` node programmieren kann. Aufgrund der 
 
-<Image src={Plantarium} alt="Plantariums uses nodes to create plants"/>
-  
 <ImageSlider title="Beispiele von Node Systemen" client:load>
   <Image src={screenshot_geometry_nodes} alt="Blenders uses nodes to create geometry"/>
   <Image src={screenshot_houdini} alt="Houdini uses nodes for vfx/simulations"/>