feat: some stuff

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>

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;
+    max-width: 50px;
-    height: 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;
+    max-width: 50px;
-    height: 50px;
+    max-height: 50px;
+    width: 10vw;
+    height: 10vw;
     border-radius: 50%;
     background-color: white;
     display: flex;

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>

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>

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"
+    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
+      <Image
-      src={MaxImg}
+        src={MaxImg}
-      alt="its mee"
+        alt="its mee"
-      class="object-bottom h-full object-cover w-1/2 xs:w-full"
+        class="object-bottom h-full object-cover"
-      hash={false}
+        hash={false}
-      maxWidth={700}
+        maxWidth={700}
-      loader={false}
+        loader={false}
-    />
+      />
-    <div class="eye right">
+      <div class="eye right">
-      <GoogleyEye client:load />
+        <GoogleyEye client:load />
-    </div>
+      </div>
-    <div class="eye left">
+      <div class="eye left">
-      <GoogleyEye client:load />
+        <GoogleyEye client:load />
+      </div>
     </div>
   </div>
 
@@ -81,11 +81,11 @@ const t = useTranslations(Astro.url);
     position: absolute;
   }
   .eye.left {
-    top: 29%;
+    top: 24%;
-    right: 28%;
+    right: 27%;
   }
   .eye.right {
-    top: 31%;
+    top: 26%;
-    right: 12%;
+    right: 13%;
   }
 </style>

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() {

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

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

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"

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"

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");
 }

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;
 }

src/pages/404.astro

@@ -0,0 +1,7 @@
+---
+import Layout from "@layouts/Layout.astro";
+---
+
+<Layout title="Max Richter">
+  <h1>Thats a 404</h1>
+</Layout>