From 146c8d5279f8d7a148e6ef05c37897c3643adcb9 Mon Sep 17 00:00:00 2001
From: Max Richter <jim-x@web.de>
Date: Mon, 8 Apr 2024 01:06:23 +0200
Subject: [PATCH] feat: some stuff

---
 public/projects/plantarium/favicon.svg        |  9 ++++
 src/components/GoogleyEye.svelte              | 15 ++++---
 src/components/HeroCard.astro                 |  5 +--
 src/components/Image.astro                    |  5 ++-
 src/components/Max.astro                      | 42 +++++++++----------
 src/components/ThemeToggle.svelte             |  2 +
 .../blog/zentralwerk_2051/Fishes.svelte       |  7 ++--
 .../plantarium/_components/Leaves.svelte      |  3 +-
 src/content/projects/plantarium/index.mdx     |  9 +++-
 src/layouts/Layout.astro                      | 15 +++++--
 src/layouts/global.css                        | 10 +++--
 src/layouts/theme.css                         |  2 -
 src/pages/404.astro                           |  7 ++++
 13 files changed, 85 insertions(+), 46 deletions(-)
 create mode 100644 public/projects/plantarium/favicon.svg
 create mode 100644 src/pages/404.astro

diff --git a/public/projects/plantarium/favicon.svg b/public/projects/plantarium/favicon.svg
new file mode 100644
index 0000000..cfee174
--- /dev/null
+++ b/public/projects/plantarium/favicon.svg
@@ -0,0 +1,9 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M55.2154 77.6602L52.2788 78.3944L49.2607 60.6933L52.2788 33.0404L47.6293 18.0312L45.9162 18.6838L41.6745 28.7987L31.6412 33.4483H20.2211L21.6894 24.0675L31.6412 15.9919L45.9162 15.1762L49.7501 15.9919L55.2154 32.6326L54.5628 38.5873L64.8409 33.0404L69.5721 37.69L80.1764 43.1553L84.1734 52.8624L83.113 64.1193L73.8954 61.8353L66.3092 52.4545V38.5873L64.1068 36.7112L54.155 42.4212L52.2788 60.6933L55.2154 77.6602Z" fill="url(#paint0_linear)"/>
+<defs>
+<linearGradient id="paint0_linear" x1="34.3903" y1="15.1762" x2="52.1972" y2="78.3944" gradientUnits="userSpaceOnUse">
+<stop stop-color="#4CAF7B"/>
+<stop offset="1" stop-color="#347452"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/components/GoogleyEye.svelte b/src/components/GoogleyEye.svelte
index 13ea1f8..fce46d1 100644
--- a/src/components/GoogleyEye.svelte
+++ b/src/components/GoogleyEye.svelte
@@ -95,8 +95,7 @@
   role="img"
   aria-label="Toggle Googley Eyes"
   aria-hidden="true"
-  on:keydown={(ev) => (ev.key === "Enter" ? ($visible = !$visible) : "")}
->
+  on:keydown={(ev) => (ev.key === "Enter" ? ($visible = !$visible) : "")}>
   {#if $visible}
     <div class="eye" bind:this={eye} transition:scale>
       <div class="pupil"></div>
@@ -110,8 +109,10 @@
     width: 100%;
     height: 100%;
     display: flex;
-    width: 50px;
-    height: 50px;
+    max-width: 50px;
+    max-height: 50px;
+    width: 10vw;
+    height: 10vw;
     justify-content: center;
     align-items: center;
   }
@@ -119,8 +120,10 @@
   .eye {
     position: relative;
     overflow: hidden;
-    width: 50px;
-    height: 50px;
+    max-width: 50px;
+    max-height: 50px;
+    width: 10vw;
+    height: 10vw;
     border-radius: 50%;
     background-color: white;
     display: flex;
diff --git a/src/components/HeroCard.astro b/src/components/HeroCard.astro
index c92ceab..9376df6 100644
--- a/src/components/HeroCard.astro
+++ b/src/components/HeroCard.astro
@@ -32,11 +32,10 @@ const link = translatePath(`/${collection}/${slug.split("/")[0]}`);
 ---
 
 <Card
-  classes={`grid gradient border-1 border-neutral overflow-hidden  ${cover ? "grid-rows-[200px_1fr] xs:grid-rows-none xs:grid-cols-[1fr_200px]" : ""}`}
->
+  classes={`grid gradient border-1 border-neutral overflow-hidden  ${cover ? "grid-rows-[200px_1fr] xs:grid-rows-none xs:grid-cols-[1fr_200px]" : ""}`}>
   <Card.Content classes="px-8 py-7 order-last xs:order-first">
     <Card.Title classes="text-4xl flex items-center gap-2">
-      {icon && <img src={icon} class="h-6" />}
+      {icon && <img src={icon} class="h-6 w-6" />}
       {title}
     </Card.Title>
     <Card.Description>
diff --git a/src/components/Image.astro b/src/components/Image.astro
index d18dd9d..5f077da 100644
--- a/src/components/Image.astro
+++ b/src/components/Image.astro
@@ -54,5 +54,6 @@ const sizes = [
   widths={sizes.map((size) => size.width)}
   sizes={sizes
     .map((size) => `${size.media || "100vw"} ${size.width}px`)
-    .join(", ")}
-/>
+    .join(", ")}>
+  <slot />
+</AstroImage>
diff --git a/src/components/Max.astro b/src/components/Max.astro
index 6ae9f9b..2002d96 100644
--- a/src/components/Max.astro
+++ b/src/components/Max.astro
@@ -10,24 +10,24 @@ const t = useTranslations(Astro.url);
 ---
 
 <Card
-  classes="googley-eye-target relative rounded-diag-md border border-neutral bg-dark grid xs:grid-cols-[250px_1fr] min-h-[180px] sm:h-[180px] mt-8"
->
+  classes="googley-eye-target relative rounded-diag-md border border-neutral bg-dark grid xs:grid-cols-[250px_1fr] min-h-[180px] sm:h-[180px] mt-8">
   <div
-    class="image relative h-[130%] self-end items-end flex overflow-hidden order-last xs:order-first"
-  >
-    <Image
-      src={MaxImg}
-      alt="its mee"
-      class="object-bottom h-full object-cover w-1/2 xs:w-full"
-      hash={false}
-      maxWidth={700}
-      loader={false}
-    />
-    <div class="eye right">
-      <GoogleyEye client:load />
-    </div>
-    <div class="eye left">
-      <GoogleyEye client:load />
+    class="image relative h-[130%] self-end items-end flex overflow-hidden order-last xs:order-first">
+    <div class="relative inline w-1/2 xs:w-full">
+      <Image
+        src={MaxImg}
+        alt="its mee"
+        class="object-bottom h-full object-cover"
+        hash={false}
+        maxWidth={700}
+        loader={false}
+      />
+      <div class="eye right">
+        <GoogleyEye client:load />
+      </div>
+      <div class="eye left">
+        <GoogleyEye client:load />
+      </div>
     </div>
   </div>
 
@@ -81,11 +81,11 @@ const t = useTranslations(Astro.url);
     position: absolute;
   }
   .eye.left {
-    top: 29%;
-    right: 28%;
+    top: 24%;
+    right: 27%;
   }
   .eye.right {
-    top: 31%;
-    right: 12%;
+    top: 26%;
+    right: 13%;
   }
 </style>
diff --git a/src/components/ThemeToggle.svelte b/src/components/ThemeToggle.svelte
index bf62490..571f326 100644
--- a/src/components/ThemeToggle.svelte
+++ b/src/components/ThemeToggle.svelte
@@ -10,6 +10,8 @@
     document.documentElement.classList.remove("light", "dark");
     document.documentElement.classList.add($theme);
     localStorage.setItem("theme", $theme);
+    // @ts-ignore
+    window["updateBackgroundColor"]?.();
   }
 
   function toggleTheme() {
diff --git a/src/content/blog/zentralwerk_2051/Fishes.svelte b/src/content/blog/zentralwerk_2051/Fishes.svelte
index 89d7970..e082f28 100644
--- a/src/content/blog/zentralwerk_2051/Fishes.svelte
+++ b/src/content/blog/zentralwerk_2051/Fishes.svelte
@@ -45,18 +45,17 @@
       render && fishCanvasBack.update(t, timeOffset);
     }
     loaded = true;
+    // @ts-ignore
+    window["updateBackgroundColor"] = updateBackgroundColor;
   });
 </script>
 
-<svelte:body on:transitionend={updateBackgroundColor} />
-
 <svelte:window
   on:resize={handleResize}
   on:scroll={() => {
     speed = Math.min(speed + 0.001, 0.15);
     timeOffset += speed;
-  }}
-/>
+  }} />
 
 <canvas id="bottom" bind:this={canvasBottom} class:loaded />
 
diff --git a/src/content/projects/plantarium/_components/Leaves.svelte b/src/content/projects/plantarium/_components/Leaves.svelte
index d85ee62..9e86395 100644
--- a/src/content/projects/plantarium/_components/Leaves.svelte
+++ b/src/content/projects/plantarium/_components/Leaves.svelte
@@ -23,6 +23,8 @@
   onMount(() => {
     updateBackgroundColor();
     createLeaves({ canvas, num: 20, minZ: 0, maxZ: 1, color });
+    // @ts-ignore
+    window["updateBackgroundColor"] = updateBackgroundColor;
     setTimeout(() => {
       loaded = true;
     }, 100);
@@ -30,7 +32,6 @@
 </script>
 
 <svelte:window on:scroll={handleScroll} />
-<svelte:body on:transitionend={updateBackgroundColor} />
 
 <canvas bind:this={canvas} class:loaded />
 
diff --git a/src/content/projects/plantarium/index.mdx b/src/content/projects/plantarium/index.mdx
index d2ebb6b..8ba8a65 100644
--- a/src/content/projects/plantarium/index.mdx
+++ b/src/content/projects/plantarium/index.mdx
@@ -5,13 +5,20 @@ cover: ./images/plantarium.png
 featured: true
 links: [["website", "https://plant.max-richter.dev"], ["git", "https://github.com/jim-fx/plantarium"]]
 tags: ["Web", "3D", "Svelte", "Node-Systeme"]
+icon: /projects/plantarium/favicon.svg
 draft: false
 toc: true
 ---
 
 # Einführung
 
-Plantarium ist eine WebApp mit der Nutzer 3D Model von Pflanzen generieren können. Der erste Prototyp war innerhalb von zwei Wochen intensiver Arbeit fertig und sah ungefähr so aus:
+Plantarium ist die Schnittmenge zwischen zwei Dingen die ich sehr faszinierend finde, Pflanzen und 3D Modellierung.
+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.
+
+# Die Anfänge und Herausforderungen
+
+Der erste Prototyp war innerhalb von zwei Wochen intensiver Arbeit fertig und sah ungefähr so aus:
 
 import ImageSlider from "@components/ImageSlider.svelte"
 import Leaves from "./_components/Leaves.svelte"
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 015d488..c4abe79 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -72,19 +72,28 @@ import "./global.css";
     </script>
     <style>
       body {
-        max-width: 600px;
+        max-width: 700px;
         margin: 0 auto;
       }
+      body > * {
+        background: var(--background-dark);
+        padding: 0.5rem 3rem;
+      }
+      @media (max-width: 700px) {
+        body > * {
+          padding: 0.5rem 1rem;
+        }
+      }
     </style>
   </head>
-  <body class="text-neutral p-2 flex flex-col gap-4">
+  <body class="text-neutralflex flex-col">
     <header class="sticky top-0 z-2">
       <Nav />
     </header>
     <main id="main-content" class="flex flex-col gap-4">
       <slot />
     </main>
-    <footer class="px-4 flex gap-8 mb-4">
+    <footer class="px-4 flex gap-8">
       <LanguagePicker />
       <a
         href="https://git.max-richter.dev/max/website"
diff --git a/src/layouts/global.css b/src/layouts/global.css
index 9097c90..265d486 100644
--- a/src/layouts/global.css
+++ b/src/layouts/global.css
@@ -99,14 +99,18 @@ picture.thumb-loading::before {
   }
 }
 
-.dark header::before {
+
+header::before {
   content: "";
   position: absolute;
   width: 10px;
   height: 10px;
-  right: 0px;
+  right: 3rem;
   bottom: -10px;
   transform: rotate(90deg);
-  color: red;
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 249 249' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M248.5 0H0V249C0.268799 111.435 111.423 0 248.5 0Z' fill='white'/%3E%3C/svg%3E");
+}
+
+.dark header::before {
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 249 249' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M248.5 0H0V249C0.268799 111.435 111.423 0 248.5 0Z' fill='%2316161e'/%3E%3C/svg%3E");
 }
diff --git a/src/layouts/theme.css b/src/layouts/theme.css
index bb03c89..993e294 100644
--- a/src/layouts/theme.css
+++ b/src/layouts/theme.css
@@ -24,7 +24,6 @@ body {
   --text: var(--neutral-800);
   --text-light: black;
 
-  transition: background-color 0.2s;
   color: var(--text);
   font-family: "Nunito Sans", sans-serif;
   background-color: var(--neutral-000);
@@ -45,5 +44,4 @@ body {
 
 header {
   background-color: var(--background-dark);
-  transition: background-color 0.2s;
 }
diff --git a/src/pages/404.astro b/src/pages/404.astro
new file mode 100644
index 0000000..4d29dc0
--- /dev/null
+++ b/src/pages/404.astro
@@ -0,0 +1,7 @@
+---
+import Layout from "@layouts/Layout.astro";
+---
+
+<Layout title="Max Richter">
+  <h1>Thats a 404</h1>
+</Layout>