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>