feat: some stuff

2024-04-08 01:06:23 +02:00 · 2024-04-08 01:06:23 +02:00 · 146c8d5279
commit 146c8d5279
parent 187fd302fb
13 changed files with 85 additions and 46 deletions
--- a/public/projects/plantarium/favicon.svg
+++ 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>
--- 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;
--- 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>
--- 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>
--- 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>
--- 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() {
--- 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 />

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

--- 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"
--- 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"
--- 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");
 }
--- 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;
 }
--- a/src/pages/404.astro
+++ 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>