feat: add resume.pdf button

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