feat: add some stuff

src/content/projects/plantarium/index.en.mdx

@@ -0,0 +1,18 @@
+---
+title: "Plantarium"
+date: 2022-08-31
+headerImg: "/projects/plantarium/plantarium.png"
+featured: true
+links: [["website", "https://plant.max-richter.com"], ["git", "https://github.com/jim-fx/plantarium"]]
+draft: true
+---
+
+One of the projects I spent the most time with. As a Waldorf student and village kid, a bit cliché, I know, but I've always been passionate about plants, their structure and aesthetics. I'm also an absolute [Blender](https://blender.org) nerd and from these two interests Plantarium was born.
+
+Plantarium is a tool that allows users to generate procedural plants. The first prototype was finished within two weeks of intensive work and looked something like this:
+
+<img src="images/page01-0.jpg"/>
+
+
+The interface was divided into 4 different levels, "Stems", "Branches", "Leaves" and "Import/Export". The idea was not bad because parts of the interface belonged to parts of the plant and you could quickly find the right settings if you wanted to change something. This way of designing the interface limits the freedom of the user(s) to generate the plants they want. Also, the interface code was unattractive, to say the least. It worked but it was not fun to work on. Also, I was mixing UI code with code that generated the plant.
+

src/content/projects/plantarium/index.mdx

@@ -0,0 +1,80 @@
+---
+title: "Plantarium"
+date: 2022-08-31T20:46:26+02:00
+headerImg: "/projects/plantarium/plantarium.png"
+featured: true
+links: [["website", "https://plant.max-richter.dev"], ["git", "https://github.com/jim-fx/plantarium"]]
+tags: ["Web", "3D", "Svelte", "Node-Systeme"]
+draft: true
+---
+
+# Einführung
+
+Plantarium ist wohl das Hobby Projekt, mit dem ich am meisten Zeit verbracht habe. Als Waldorfschüler und Dorfkind ein bisschen Klischeemäßig, ich weiß, aber der Aufbau und die Ästhetik von Pflanzen haben mich schon immer begeistert. Außerdem bin ich bekennender [Blender](https://blender.org) (das 3D Programm) Fan und aus diesen beiden Interessen entstand dieses Projekt.
+
+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:
+
+<svelte component="image-slider" title="Prototype Design">
+  <img src="./images/page01-0.jpg" alt="Stem Page"/>
+  <img src="./images/page01-1.jpg" alt="Branches page"/>
+  <img src="./images/page01-2.jpg" alt="Leaves page"/>
+  <img src="./images/page01-3.jpg" alt="Import/Export page"/>
+  <img src="./images/page01-5.jpg" alt="Design of UI Components"/>
+  <img src="./images/page01-6.jpg" alt="Data flow inside app"/>
+</svelte>
+
+Schon gar nicht schlecht, aber wie das mit Prototypen so ist gab es noch einiges zu verbessern. Also eine Kurze Historie der größten Änderungen bis heute:
+
+## Refactors
+
+### Svelte Rewrite
+
+Der erste Prototyp war handgeschriebenes ungetestes Javascript. Das kann man sich etwa so vorstellen als ob man ein Auto nur aus Zahnstochern und Ducttape bauen muss.
+Man kriegt es eventuell hin, ist vielleicht sogar ganz begeistert von seiner Kreation, wenn man sich das ganze aber dann ne Woche später nochmal anschaut oder schlimmer noch Verbesserungen daran machen will wird es recht schnell schwierig. Das hieß es war Zeit für die Lieblingsbeschäftigung eines jeden Web Entwicklers; herausfinden was gerade der heiße Scheiß in der Welt der Webentwicklung ist. Sobald man sich dann für eine der tausenden möglichen Technologien entschieden hat, macht man diese zu seiner persönlichen Religion und verteidigt sie mit religiösem Fanatismus. Ganz einfach, oder?
+
+Also hab ich mich für das einfachste, schnellste und rundherum beste Framework entschieden: ["Svelte"](https://svelte.dev).
+
+Im Grunde helfen einem Frameworks die Daten einer App, also zum Beispiel Nutzernamen, Loginstatus usw. in HTML und CSS zu verwandeln, was der Browser dann anzeigt.
+
+
+### Node-Systeme
+
+Das Interface war in 4 verschiedene Stufen aufgeteilt, "Stamm", "Äste","Blätter" und "Import/Export". 
+Die Idee war gar nicht schlecht da jeder Teil an der Pflanze eine eigene Ansicht hatte und man recht schnell die richtigen Einstellungen fand, wenn man etwas ändern wollte. 
+Leider werden dadurch die Nutzer extrem eingeschränkt und man kann nur Pflanzen bauen die dem Schema Stam->Ast->Blatt entsprechen. Was ist aber wenn ich mehrere Ebenen von Ästen haben will oder unterschiedliche Blätter an Stamm und Ast? Das war mit dem Model nicht möglich also wie man so schön sagt:
+"Back to the drawing board."
+Im Hinterkopf hatte ich eigentlich schon die Lösung für das Problem, war mir nur nicht ganz sicher, ob ich die nötigen Skills hatte um es zu implementieren.
+
+Die Lösung sind Node-Systeme! Hmm, was ist das denn?
+
+![Node-Systeme](./images/nodes.svg)
+
+Node-Systeme bestehen aus Nodes und Connections. Nodes haben inputs und outputs und man kann diese miteinander verbinden.
+
+In der Beispielgrafik haben wir zwei `input-color` nodes die jeweils eine Farbe produzieren und eine `mix-color` node die farben miteinander vermixt.
+
+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 
+
+<img src="/projects/plantarium/screenshot-plantarium.png" alt="Plantariums uses nodes to create plants"/>
+
+<svelte component="image-slider" title="Beispiele von Node Systemen">
+  <img src="images/screenshot-geometry-nodes.jpg" alt="Blenders uses nodes to create geometry"/>
+  <img src="images/screenshot-houdini.jpg" alt="Houdini uses nodes for vfx/simulations"/>
+  <img src="images/screenshot-unreal.jpg" alt="Unreal uses nodes for game logic"/>
+  <img src="images/screenshot-davinci.jpg" alt="Davinvi uses nodes for vfx"/>
+</svelte>
+
+### Svelte-Kit Rewrite
+
+## Architektur
+
+## Design
+
+## Zukunft
+
+## Abschluss
+
+Aktuell sieht die Architectur in etwa so aus:
+
+![Architecture](./images/architecture.svg)
+