diff --git a/public/max-richter-resume.pdf b/public/max-richter-resume.pdf new file mode 100644 index 0000000..9afb813 Binary files /dev/null and b/public/max-richter-resume.pdf differ diff --git a/src/components/Max.astro b/src/components/Max.astro index 2002d96..7b5bc24 100644 --- a/src/components/Max.astro +++ b/src/components/Max.astro @@ -10,14 +10,15 @@ const t = useTranslations(Astro.url); --- + classes="googley-eye-target relative rounded-diag-md border border-neutral bg-dark grid xs:grid-cols-[200px_1fr] sm:grid-cols-[300px_1fr] mt-8">
-
+ class="relative xs:h-full self-end items-end flex order-last xs:order-first"> +
its mee
-
+

{t("home.title")}

{t("home.subtitle")}

+ + {t("resume").toLowerCase()}.pdf + +
diff --git a/src/components/ThemeToggle.svelte b/src/components/ThemeToggle.svelte index 571f326..1d9b0f6 100644 --- a/src/components/ThemeToggle.svelte +++ b/src/components/ThemeToggle.svelte @@ -3,6 +3,7 @@ import { writable } from "svelte/store"; import IconSun from "~icons/tabler/Sun"; import IconMoon from "~icons/tabler/Moon"; + import { colors } from "@helpers/colors"; let theme = writable(""); @@ -10,8 +11,12 @@ document.documentElement.classList.remove("light", "dark"); document.documentElement.classList.add($theme); localStorage.setItem("theme", $theme); - // @ts-ignore - window["updateBackgroundColor"]?.(); + + const background = window.getComputedStyle(document.body); + + $colors = { + background: background.backgroundColor, + }; } function toggleTheme() { diff --git a/src/content/blog/zentralwerk_2051/Fishes.svelte b/src/content/blog/zentralwerk_2051/Fishes.svelte index e082f28..50915ff 100644 --- a/src/content/blog/zentralwerk_2051/Fishes.svelte +++ b/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; 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; }); @@ -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; } diff --git a/src/content/projects/plantarium/_components/Leaves.svelte b/src/content/projects/plantarium/_components/Leaves.svelte index 9e86395..c9d683e 100644 --- a/src/content/projects/plantarium/_components/Leaves.svelte +++ b/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; } diff --git a/src/content/projects/plantarium/images/plantarium-screenshot.png b/src/content/projects/plantarium/images/plantarium-screenshot.png new file mode 100644 index 0000000..325f585 --- /dev/null +++ b/src/content/projects/plantarium/images/plantarium-screenshot.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:212b2483599fcc0e219ea712285e2c742fcdf2adfc355f0290b4f99c3044ba47 +size 153501 diff --git a/src/content/projects/plantarium/images/plantarium-screenshot.png:Zone.Identifier b/src/content/projects/plantarium/images/plantarium-screenshot.png:Zone.Identifier new file mode 100644 index 0000000..053d112 --- /dev/null +++ b/src/content/projects/plantarium/images/plantarium-screenshot.png:Zone.Identifier @@ -0,0 +1,3 @@ +[ZoneTransfer] +ZoneId=3 +HostUrl=about:internet diff --git a/src/content/projects/plantarium/index.mdx b/src/content/projects/plantarium/index.mdx index 2913b67..97794d6 100644 --- a/src/content/projects/plantarium/index.mdx +++ b/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. +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" + Stem Page 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 -Plantariums uses nodes to create plants - Blenders uses nodes to create geometry Houdini uses nodes for vfx/simulations diff --git a/src/env.d.ts b/src/env.d.ts index f14436a..9fffa5a 100644 --- a/src/env.d.ts +++ b/src/env.d.ts @@ -1,3 +1,12 @@ /// /// /// + +declare global { + interface Window { + colors: import("svelte/store").Writable<{ + background: string; + }> + } +} + diff --git a/src/helpers/colors.ts b/src/helpers/colors.ts index 5bddaac..af051de 100644 --- a/src/helpers/colors.ts +++ b/src/helpers/colors.ts @@ -1,3 +1,5 @@ +import { writable } from "svelte/store"; + // function to turn css rgb() strings to hex export function rgbToHex(rgb: string) { let hex = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/); @@ -12,3 +14,7 @@ export function rgbToHex(rgb: string) { .join("") ); } + +export const colors = writable({ + background: "#f0f0f0", +}); diff --git a/src/i18n/ui.ts b/src/i18n/ui.ts index f9e4ac6..e18e813 100644 --- a/src/i18n/ui.ts +++ b/src/i18n/ui.ts @@ -23,6 +23,7 @@ export const ui = { 'nav.videos': 'Videos', 'nav.photos': 'Photos', 'toc.title': 'Table of Contents', + "resume": "Resume", }, de: { "en": "English", @@ -39,6 +40,7 @@ export const ui = { 'nav.projects': 'Projekte', 'nav.videos': 'Videos', 'nav.photos': 'Fotos', + "resume": "Lebenslauf", 'toc.title': 'Inhaltsverzeichnis', }, } as const; diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index 80b399b..3ddfafb 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -74,11 +74,44 @@ import "./global.css"; body { max-width: 700px; margin: 0 auto; + position: relative; } - body > * { + main, + header, + footer { background: var(--background-dark); padding: 0.5rem 3rem; } + + body::after { + content: ""; + position: fixed; + height: 100vh; + width: 200px; + top: 0; + transform: translateX(-100%); + background: red; + background: linear-gradient( + to left, + var(--background-dark), + transparent + ); + } + + main::before { + content: ""; + position: absolute; + top: -200px; + right: -200px; + bottom: -100px; + width: 200px; + background: linear-gradient( + to right, + var(--background-dark), + transparent + ); + } + @media (max-width: 700px) { body > * { padding: 0.5rem 1rem; @@ -90,10 +123,10 @@ import "./global.css";
-
+
-