feat: track images with git lfs

.gitattributes

@@ -0,0 +1,5 @@
+*.png filter=lfs diff=lfs merge=lfs -text
+*.jpg filter=lfs diff=lfs merge=lfs -text
+*.gif filter=lfs diff=lfs merge=lfs -text
+*.woff2 filter=lfs diff=lfs merge=lfs -text
+*.ttf filter=lfs diff=lfs merge=lfs -text

astro.config.mjs

@@ -1,9 +1,10 @@
 import { defineConfig } from 'astro/config';
 import { i18n, filterSitemapByDefaultLocale } from "astro-i18n-aut/integration";
 import sitemap from "@astrojs/sitemap";
+import mdx from '@astrojs/mdx';
+import glsl from 'vite-plugin-glsl';
 
 import svelte from "@astrojs/svelte";
-import tailwind from "@astrojs/tailwind";
 
 const defaultLocale = "de";
 const locales = {
@@ -18,7 +19,13 @@ export default defineConfig({
   build: {
     format: "file",
   },
+  vite: {
+    plugins: [
+      glsl(),
+    ],
+  },
   integrations: [
+    mdx(),
     svelte(),
     i18n({
       exclude: ["pages/**/*.json.ts", "pages/api/**/*",],

package.json

@@ -11,17 +11,22 @@
   },
   "dependencies": {
     "@astrojs/check": "^0.5.9",
+    "@astrojs/mdx": "^2.2.1",
     "@astrojs/svelte": "^5.2.0",
     "@astrojs/tailwind": "^5.1.0",
     "astro": "^4.5.5",
     "astro-i18n-aut": "^0.7.0",
+    "astro-imagetools": "^0.9.0",
     "svelte": "^4.2.12",
     "tailwindcss": "^3.4.1",
     "typescript": "^5.4.2"
   },
   "devDependencies": {
     "@astrojs/sitemap": "^3.1.1",
+    "astro-font": "^0.0.78",
+    "ogl": "^1.0.6",
     "prettier": "^3.2.5",
-    "prettier-plugin-astro": "^0.13.0"
+    "prettier-plugin-astro": "^0.13.0",
+    "vite-plugin-glsl": "^1.3.0"
   }
 }

public/app.css

@@ -1,4 +1,45 @@
+/* @font-face { */
+/*   font-display: swap; */
+/*   font-family: 'Nunito Sans'; */
+/*   font-style: normal; */
+/*   font-weight: 300; */
+/*   src: url('/fonts/nunito-sans-v15-latin-300.woff2') format('woff2'), */
+/*     url('/fonts/nunito-sans-v15-latin-300.ttf') format('truetype'); */
+/* } */
+/**/
+/* @font-face { */
+/*   font-display: swap; */
+/*   font-family: 'Roboto'; */
+/*   font-style: normal; */
+/*   font-weight: 300; */
+/*   src: url('/fonts/roboto-v30-latin-300.woff2') format('woff2'), */
+/*     url('/fonts/roboto-v30-latin-300.ttf') format('truetype'); */
+/* } */
+
+h1 {
+  font-weight: 300;
+  font-size: 2rem;
+  margin: 0;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p {
+  margin: 0px;
+  padding: 0px;
+}
+
+p {
+  font-family: 'Nunito Sans', sans-serif;
+  font-size: 16px;
+}
+
 :root {
+  --neutral1000: #000000;
   --neutral800: #16161E;
   --neutral500: #252530;
   --neutral400: #2C2C3A;
@@ -8,13 +49,38 @@
 }
 
 body {
+
   --background-dark: var(--neutral800);
-  --background: var(--neutral500);
+  --background: var(--neutral000);
   --background-light: var(--neutral400);
   --outline: var(--neutral300);
-  --text: var(--neutral100);
+  --text: var(--neutral1000);
+  --layer100: var(--neutral000);
 
-  background-color: var(--background-dark);
+  background-color: var(--layer100);
+  transition: background-color 0.1s;
   color: var(--text);
   font-family: 'Roboto', sans-serif;
 }
+
+.theme-dark {
+
+  --background-dark: var(--neutral800);
+  --background: var(--neutral500);
+  --background-light: var(--neutral400);
+  --background-gradient: linear-gradient(-30deg, var(--neutral500) 0%, var(--neutral400) 100%);
+  --outline: var(--neutral300);
+  --text: var(--neutral100);
+  --layer100: var(--background-dark);
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+.center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

src/components/GoogleyEye.svelte

@@ -0,0 +1,178 @@
+<script context="module" lang="ts">
+  let mouse = { x: 0, y: 0 };
+
+  let visible = writable(false);
+
+  const maxDistance = globalThis.innerWidth / 3;
+  let frameId: number;
+  function update() {
+    frameId = requestAnimationFrame(update);
+    for (const eye of eyes) {
+      const dx = eye.x - mouse.x;
+      const dy = eye.y - mouse.y;
+      const angle = Math.atan2(dy, dx);
+
+      const distance = Math.hypot(dx, dy);
+      if (distance < maxDistance) {
+        eye.rotation = angle * (180 / Math.PI) - 90;
+        eye.distance = -Math.min(17, distance);
+        eye.el.style.setProperty("--distance", `${eye.distance}px`);
+        eye.el.style.setProperty(
+          "--rotation",
+          `${Math.floor(eye.rotation)}deg`,
+        );
+        eye.el.classList.add("active");
+      } else {
+        eye.el.classList.remove("active");
+      }
+    }
+  }
+
+  const eyes: {
+    x: number;
+    y: number;
+    rotation: number;
+    distance: number;
+    el: HTMLDivElement;
+    pupil: HTMLDivElement;
+  }[] = [];
+
+  function register(eye: HTMLDivElement) {
+    const { x, y, width, height } = eye.getBoundingClientRect();
+    eyes.push({
+      x: x + width / 2,
+      y: y + height / 2,
+      rotation: 0,
+      distance: 0,
+      el: eye,
+      pupil: eye.children[0] as HTMLDivElement,
+    });
+    if (frameId) cancelAnimationFrame(frameId);
+    update();
+  }
+
+  function unregister(eye: HTMLDivElement) {
+    const index = eyes.findIndex((e) => e.el === eye);
+    eyes.splice(index, 1);
+    if (eyes.length === 0) cancelAnimationFrame(frameId);
+  }
+
+  function handleMouseMove(ev: MouseEvent) {
+    mouse.x = ev.clientX;
+    mouse.y = ev.clientY;
+  }
+</script>
+
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { writable } from "svelte/store";
+  import { scale } from "svelte/transition";
+
+  let eye: HTMLDivElement;
+  let _old_eye: HTMLDivElement;
+  $: if (eye !== _old_eye) {
+    if (_old_eye) {
+      unregister(_old_eye);
+    }
+    if (eye) {
+      register(eye);
+    }
+    _old_eye = eye;
+  }
+
+  onMount(() => {
+    return () => {
+      unregister(eye);
+    };
+  });
+</script>
+
+<svelte:window on:mousemove={handleMouseMove} />
+
+<div
+  class="googley-eyes"
+  on:click={() => ($visible = !$visible)}
+  role="button"
+  tabindex="0"
+  aria-label="Toggle Googley Eyes"
+  aria-hidden="true"
+  on:keydown={(ev) => (ev.key === "Enter" ? ($visible = !$visible) : "")}
+>
+  {#if $visible}
+    <div class="eye" bind:this={eye} transition:scale>
+      <div class="pupil"></div>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .googley-eyes {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    width: 50px;
+    height: 50px;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .eye {
+    position: relative;
+    overflow: hidden;
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    background-color: white;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transform: rotate(var(--rotation));
+    box-shadow: 0px 0px 30px #00000094;
+    outline: solid 1px #737373;
+  }
+
+  .eye::before {
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background-color: rgba(200, 200, 200, 0.01);
+    transform: rotate(calc(var(--rotation) * -1));
+    box-shadow:
+      5px 5px 10px #ffffff70 inset,
+      1px 1px 4px #ffffff96 inset,
+      -2px -2px 10px black inset,
+      2px 2px 5px #00000078;
+  }
+
+  .googley-eyes > :global(.active > .pupil) {
+    transform: translateY(var(--distance)) scale(0.7);
+  }
+
+  .pupil {
+    position: absolute;
+    width: 50%;
+    height: 50%;
+    border-radius: 50%;
+    transition: transform cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s;
+  }
+
+  .pupil::after {
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background-color: black;
+    box-shadow:
+      -5px -5px 10px #ffffff70 inset,
+      -1px -1px 4px #ffffff96 inset,
+      2px 2px 2px black inset,
+      -2px -2px 5px #00000078;
+    transform: translate(-50%, -50%) rotate(calc(var(--rotation) * -1 + 180deg));
+    top: 50%;
+    left: 50%;
+  }
+</style>

src/components/Image.astro

@@ -0,0 +1,46 @@
+---
+import type { ImageMetadata } from "astro";
+import { Image as AstroImage } from "astro:assets";
+interface Props {
+  src: ImageMetadata;
+  alt: string;
+  maxWidth?: number;
+}
+
+const { src, alt, maxWidth } = Astro.props;
+
+const image = typeof src === "string" ? await import(src) : src;
+
+const sizes = [
+  {
+    width: 240,
+    media: "(max-width: 360px)",
+  },
+  {
+    width: 540,
+    media: "(max-width: 720px)",
+  },
+  {
+    width: 720,
+    media: "(max-width: 1600px)",
+  },
+  {
+    width: image.width,
+  },
+].filter((size) => !maxWidth || size.width <= maxWidth);
+---
+
+<AstroImage
+  src={image}
+  alt={alt}
+  widths={sizes.map((size) => size.width)}
+  sizes={sizes
+    .map((size) => `${size.media || "100vw"} ${size.width}px`)
+    .join(", ")}
+/>
+
+<style>
+  img {
+    border-radius: 0.5rem;
+  }
+</style>

src/components/LanguagePicker.astro

@@ -2,11 +2,18 @@
 import { locales, defaultLocale, getLocale } from "astro-i18n-aut";
 import { useTranslations } from "../i18n/utils";
 
-const reg = new RegExp(`^\/(${Object.keys(locales).join("|")})\/`);
 function translatePath(lang: string) {
-  const p = Astro.url.pathname.replace(reg, "").replace(/^\//, "");
-  if (lang === defaultLocale) return `/${p}`;
-  return `/${lang}/${p}`;
+  const split = Astro.url.pathname.split("/").filter((s) => s.length);
+
+  if (split[0] in locales) {
+    split.shift();
+  }
+
+  if (lang === defaultLocale) {
+    return `/${split.join("/")}`;
+  }
+
+  return `/${[lang, ...split].join("/")}`;
 }
 
 const locale = getLocale(Astro.url);

src/components/Logo.astro

@@ -1,8 +1,9 @@
 <svg
-  width="51"
-  height="51"
+  width="50"
+  height="50"
   viewBox="0 0 51 51"
   fill="none"
+  style="height: 100%; width: auto"
   xmlns="http://www.w3.org/2000/svg"
 >
   <defs>

src/components/Max.astro

@@ -0,0 +1,86 @@
+---
+import MaxImg from "./Max.png";
+import Image from "./Image.astro";
+import GoogleyEye from "./GoogleyEye.svelte";
+
+import { useTranslations } from "@i18n/utils";
+
+import { getLocale } from "astro-i18n-aut";
+
+const locale = getLocale(Astro.url);
+
+const t = useTranslations(locale);
+---
+
+<section class="googley-eye-target">
+  <div class="image">
+    <Image src={MaxImg} alt="its mee" maxWidth={700} />
+    <div class="eye right">
+      <GoogleyEye client:load />
+    </div>
+    <div class="eye left">
+      <GoogleyEye client:load />
+    </div>
+  </div>
+
+  <div class="content">
+    <h1>{t("home.title")}</h1>
+    <p>{t("home.subtitle")}</p>
+  </div>
+</section>
+
+<style>
+  .image {
+    position: relative;
+    height: 130%;
+    align-self: end;
+    overflow: hidden;
+    border-bottom-left-radius: 20px;
+    display: flex;
+    align-items: flex-end;
+  }
+
+  .image > :global(img) {
+    height: 100%;
+    object-fit: contain;
+    object-position: top;
+  }
+
+  section {
+    position: relative;
+    margin-top: 100px;
+    height: 180px;
+    background-color: var(--background);
+    border-radius: 0px 20px 0px 20px;
+    border: solid thin var(--outline);
+    display: grid;
+    grid-template-columns: 300px 1fr;
+    background: var(--background-gradient);
+    background: linear-gradient(
+      150deg,
+      var(--neutral400) 0%,
+      var(--neutral500) 100%
+    );
+  }
+
+  .eye {
+    position: absolute;
+  }
+
+  .eye.left {
+    top: 25%;
+    right: 30%;
+  }
+  .eye.right {
+    top: 27%;
+    right: 15%;
+  }
+
+  .content {
+    padding: 30px;
+    padding-left: 15px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+</style>

src/components/Nav.astro

@@ -3,17 +3,43 @@ import { getLocale } from "astro-i18n-aut";
 import { useTranslations, useTranslatedPath } from "../i18n/utils";
 import Logo from "./Logo.astro";
 
+function isActive(path) {
+  return Astro.url.pathname === path ? "active" : "";
+}
+
 const lang = getLocale(Astro.url);
 const t = useTranslations(lang);
 const translatePath = useTranslatedPath(lang);
+const paths = [
+  {
+    link: translatePath("/"),
+    component: Logo,
+  },
+  {
+    link: translatePath("/blog"),
+    text: t("nav.blog"),
+  },
+  {
+    link: translatePath("/projects"),
+    text: t("nav.projects"),
+  },
+  {
+    link: translatePath("/photos"),
+    text: t("nav.photos"),
+  },
+  {
+    link: translatePath("/videos"),
+    text: t("nav.videos"),
+  },
+];
 ---
 
 <style>
   ul {
     display: flex;
-    gap: 1rem;
     list-style: none;
     padding: 0;
+    height: 50px;
   }
   li {
     display: flex;
@@ -22,26 +48,71 @@ const translatePath = useTranslatedPath(lang);
   a {
     color: var(--text-color);
     text-decoration: none;
+    max-height: 100%;
+    height: 100%;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-transform: lowercase;
+  }
+
+  ul > li {
+    border: solid thin var(--outline);
+    border-left: none;
+    position: relative;
+    background: var(--background);
+    flex: 1;
+  }
+
+  ul > li.logo {
+    flex: unset;
+    border: none;
+    padding: 0px;
+    background: none;
+    height: 34px;
+    margin: 8px;
+    margin-left: 0px;
+    --fill: #cb5a5a;
+    --background-fill: none;
+  }
+
+  .logo > a {
+    height: 100%;
+  }
+
+  ul > li > a {
+    padding: 0px;
+  }
+
+  ul > li {
+    display: flex;
+    align-items: center;
+  }
+
+  ul > li.active {
+    background-color: var(--background-color);
+  }
+
+  ul > li:nth-child(2) {
+    border-radius: 0px 0px 0px 10px;
+    border-left: solid thin var(--outline);
+    margin-left: 20px;
+  }
+
+  ul > li:last-child {
+    border-radius: 0px 10px 0px 0px;
   }
 </style>
 
 <ul>
-  <li>
-    <a
-      href={translatePath("/")}
-      style="--fill: red; --background-fill: transparent;"
-    >
-      <Logo />
-    </a>
-  </li>
-  <li>
-    <a href={translatePath("/blog")}>
-      {t("nav.blog")}
-    </a>
-  </li>
-  <li>
-    <a href={translatePath("/about")}>
-      {t("nav.about")}
-    </a>
-  </li>
+  {
+    paths.map(({ link, text, component }, index) => (
+      <li
+        class={`${component ? "logo" : ""} ${isActive(link) ? "active" : ""}`}
+      >
+        <a href={link}>{component ? <Logo /> : text}</a>
+      </li>
+    ))
+  }
 </ul>

src/components/YouTube.astro

@@ -0,0 +1,19 @@
+---
+interface Props {
+  id: string;
+}
+---
+
+<iframe
+  width="420"
+  height="315"
+  src={`https://www.youtube.com/embed/${Astro.props.id}`}></iframe>
+
+<style>
+  iframe {
+    border: none;
+    width: 100%;
+    height: 315px;
+    border-radius: 10px;
+  }
+</style>

src/content/blog/alpine-valley/index.en.mdx

@@ -0,0 +1,53 @@
+---
+title: "Alpine Valley"
+date: 2016-12-22
+headerImg: "images/Render.png"
+comments: true
+---
+import Image from "@components/Image.astro";
+import ValleyView from "./images/Render.png";
+import DSC_1601 from "./images/DSC_1601.jpg";
+import Unbenannt1 from "./images/Unbenannt-1.jpg";
+import Render4 from "./images/Render4.png";
+import UntitledPng from "./images/untitled1-1.png"
+import Render6 from "./images/Render6.png";
+
+<Image
+  src={ValleyView}
+  alt="ValleyView"
+  />
+
+This piece was inspired by a picture I took in 2013 on the way to Italy
+
+<Image
+  src={DSC_1601}
+  alt="DSC_1601"
+  />
+<Image
+  src={Unbenannt1}
+  alt="Unbenannt1"
+  />
+
+The scene consists of three basic Elements, the foreground, the valley and the background image. The foreground consists of some lowpoly tree models which i created party from photoscanning and partly by handmodelling.
+
+<Image
+  src={Render4}
+  alt="Render4"
+  />
+
+Some photoscanned rocks, centipede grass from Andrew Prices grass essentials and some plant models i created myself. As an eyecatcher i created a quick human in makehuman but didnt spend a lot of time on that as it wasnt my focus in this project.
+
+<Image
+  src={UntitledPng}
+  alt="UntitledPng"
+  />
+
+
+The valley was created as usual in World Machine. For the textures i used screenshots from google maps and edited them in PixPlant to make them seamless. In Blender i used a mixture from slope, height and " noise mask to apply them to the model.
+
+<Image
+  src={Render6}
+  alt="Render6"
+  />
+
+The background was just the picture.

src/content/blog/alpine-valley/index.mdx

@@ -0,0 +1,55 @@
+---
+title: "Alpine Valley"
+date: 2016-12-22
+headerImg: "images/Render.png"
+comments: true
+---
+
+import Image from "@components/Image.astro";
+import ValleyView from "./images/Render.png";
+import DSC_1601 from "./images/DSC_1601.jpg";
+import Unbenannt1 from "./images/Unbenannt-1.jpg";
+import Render4 from "./images/Render4.png";
+import UntitledPng from "./images/untitled1-1.png"
+import Render6 from "./images/Render6.png";
+
+
+<Image
+  src={ValleyView}
+  alt="ValleyView"
+  />
+
+Die Inspiration diesen Render zu machen kam von einem Bild was 2013 auf dem Weg nach Italien entstanden ist.
+
+<Image
+  src={DSC_1601}
+  alt="DSC_1601"
+  />
+<Image
+  src={Unbenannt1}
+  alt="Unbenannt1"
+  />
+
+Die Szene besteht aus drei ELementen, dem Vordergrund, dem Tal und dem Hintergrund Bild. Der Vordergrund besteht aus einigen Lowpoly Baum Modellen, die ich aus gescannten und handgemodellten Modellen erstellt habe.
+
+<Image
+  src={Render4}
+  alt="Render4"
+  />
+
+Einige 3D gescannte Steine, Centipede Grass Models aus Andrew Prices Grass Essentials Pack und einige Pflanzenmodelle die ich selber erstellt habe. Um einen gewissen Fokuspunkt im Bild zu haben habe ich in Makehuman einen Menschen erstellt wollte aber nicht allzu viel Zeit damit verbringen, weil es nicht der Hauptfokus in der Szene war.
+
+<Image
+  src={UntitledPng}
+  alt="UntitledPng"
+  />
+
+Wie die meisten 3D Landschaften habe ich das Tal in World Machine erstellt. Die Texturen der Landschaft sind Screenshots aus Google Maps die ich mit PixPlant nahtlos gemacht habe, und danach in Blender mit verschiedenen Steigungs/Höhen und Rauschtexturen miteinander vermischt habe.
+
+<Image
+  src={Render6}
+  alt="Render6"
+  />
+
+Der Hintergrund ist das Bild das die Inspiration für den Render war.
+

src/content/blog/colonial/index.en.mdx

@@ -0,0 +1,45 @@
+---
+title: "Colonial"
+date: 2017-02-15
+comments: true
+---
+import Image from "@components/Image.astro";
+import YouTube from "@components/YouTube.astro";
+
+import T_MacroVariation from  "./images/T_MacroVariation.png";
+import Mask_01 from  "./images/Mask_01.gif";
+import Mask_02 from  "./images/Mask_02.gif";
+import Pebbles from  "./images/Pebbles.gif";
+import Butterflies from  "./images/Butterflies_1.gif";
+
+<YouTube id="s9Z9Yh6Yu0I" />
+
+This project kind of went a little further than i first anticipated, I first thought of it just as a little 3D modelling practice. At the same time i played around in WorldMachine to create some sort of northern atlantic style Island. After i brought the House into Unreal, i simply added the island heightmap as a Landscape and went on from there. 
+
+Gladly i still had a Landscape Material which i created a while ago, so i didnt need to set up a whole new one. The landscape utilizes a set of slope, paint and perlin noise masks to determine which parts of the landscape are grass, rock, forest, and gravel. Every single material blends between two texture sizes based on distance to the actor in the level to avoid texture tiling on distant materials. After that another layer of textures is overlayed, to add some variation to the color.
+
+<div class="center">
+  <Image src={T_MacroVariation} alt="T_MacroVariation" />
+</div>
+
+I learned this technique from the materials that Unreal provides with the startup content, and it really adds to the realism of materials, i also used it in the roof material. With UnrealEngine it's also possible to create material instances to manipulate attributes of the material at runtime, i also included an option to preview the mmask live, green represents the near tiling and the pebbles, red represents the distant texture.
+
+<Image src={Mask_01} alt="Mask_01" />
+
+The material also utilizes Unreal engines Foliage Type feature to distribute foliage like Grass, Rocks, Forest Plants and Flowthaton their according ground. The material also blends the material according to their heightmaps which produces a very natural gradient. Notice how the grass, expand to the cracks of the rock material first.
+
+<Image src={Mask_02} alt="Mask_02" />
+
+
+The heightmap can be used to displace the physical vertices of the Landscape mesh  together with adaptive tesselation that will make the material look fucking amazing, but this feature takes a huge hit on the performance and is for live gameplay, atleast on my pc, not feasable.
+
+<Image src={Pebbles} alt="Pebbles"/>
+
+Another material that im really proud of is the ocean material, there is no physical displacement happening, just a lot of normal map magic. Another difficulty that i faced was the animation of the butterflies, as i am more used to the particle systems in Blender, 3DSMax and C4D Unreals so called Cascade System was not very intuituve for me.
+
+After some time i found a solution which looks, atleast to me, natural. Now the Butterflies spawn in a small radius around a sphere which moves to a random position every two seconds, the sphere also poses as a force to the Butterflies, so they fly towards it.
+
+<Image src={Butterflies} alt="Butterflies"/>
+
+
+

src/content/blog/post-01/index.en.md

@@ -1,7 +0,0 @@
----
-date: 2021-01-01
-author: MaxEN
-title: "First Post"
----
-
-# First Post

src/content/blog/post-01/index.md

@@ -1,7 +0,0 @@
----
-date: 2021-01-01
-author: MaxDE
-title: "Erster Post"
----
-
-# Erster post

src/content/blog/post-02/index.en.md

@@ -1,7 +0,0 @@
----
-date: 2021-01-01
-author: MaxEN
-title: "Second Post"
----
-
-# 2. post

src/content/blog/post-02/index.md

@@ -1,7 +0,0 @@
----
-date: 2021-01-01
-author: MaxDE
-title: "Zweiter Post"
----
-
-# 2. post

src/content/blog/post-03/index.en.md

@@ -1,7 +0,0 @@
----
-date: 2021-01-01
-author: MaxEN
-title: "Third Post"
----
-
-# Third Post

src/content/blog/post-03/index.md

@@ -1,7 +0,0 @@
----
-date: 2021-01-01
-author: MaxDE
-title: "Dritter Post"
----
-
-# Dritter Post

src/content/blog/random-renders-02/index.en.mdx

@@ -0,0 +1,35 @@
+---
+title: "Random Renders NO°2"
+date: 2023-05-11
+headerImg: "images/render_05.png"
+comments: true
+---
+import Image from "@components/Image.astro"
+import Palma from "./images/palma.png"
+import Render05 from "./images/render_05.png"
+import Poster_var2 from "./images/Poster_var2.jpg";
+import Cabin_old from "./images/Cabin_old.jpg";
+import Cabin_new from "./images/Cabin_new.png";
+import Home from "./images/Home.png";
+import Workroom from "./images/Workroom.png";
+
+Last month I felt like creating some renderings again. I also found a few old renderings that haven't ended up on my blog yet.
+
+## Palma
+<Image src={Palma} alt="Duude" />
+
+## [Sudoku.nvim](https://github.com/jim-fx/sudoku.nvim)
+
+<Image src={Render05} alt="Duude" />
+
+<Image src={Poster_var2} alt="Poster_var2" />
+
+## Super old renders:
+
+<Image src={Cabin_old} alt="Cabin_old" />
+
+<Image src={Cabin_new} alt="Cabin_new" />
+
+<Image src={Home} alt="Home" />
+
+<Image src={Workroom} alt="Workroom" />

src/content/blog/random-renders-02/index.mdx

@@ -0,0 +1,37 @@
+---
+title: "Random Renders NO°2"
+date: 2023-05-11
+headerImg: "images/render_05.png"
+comments: true
+---
+import Image from "@components/Image.astro"
+import Palma from "./images/palma.png"
+import Render05 from "./images/render_05.png"
+
+Im letzten Monat hatte ich wieder Lust, einige Renderings zu erstellen. Außerdem habe ich noch ein paar alte Renderings gefunden die noch nicht auf meinem Blog gelandet sind.
+
+
+## Palma
+<Image
+  src={Palma}
+  alt="Duude"
+/>
+
+## [Sudoku.nvim](https://github.com/jim-fx/sudoku.nvim)
+
+<Image
+  src={Render05}
+  alt="Duude"
+/>
+
+![](./images/Poster_var2.jpg)
+
+## Super old renders:
+
+![](./images/Cabin_old.jpg)
+
+![](./images/Cabin_new.png)
+
+![](./images/Home.png)
+
+![](./images/Workroom.png)

src/content/blog/random-renders-no1/index.en.mdx

@@ -0,0 +1,30 @@
+---
+title: "Random Renders NO°1"
+date: 2018-12-30
+headerImg: "images/myown.png"
+comments: true
+---
+
+import Image from "@components/Image.astro"
+import SoupKitchen from "./images/render_11.png"
+import Guadelajara from "./images/Render_03.png"
+import Benzema from "./images/untitled2.png"
+import Wallpaper from "./images/myown.png"
+
+A small collection of new and older renders:
+
+## Ilse Crawfords Soup Kitchen
+
+<Image src={SoupKitchen} alt="Ilse Crawfords Soup Kitchen"/>
+
+## Guadelajara
+
+<Image src={Guadelajara} alt=""/>
+
+## Benzema
+
+<Image src={Benzema} alt=""/>
+
+## Wallpaper
+
+<Image src={Wallpaper} alt=""/>

src/content/blog/random-renders-no1/index.mdx

@@ -0,0 +1,31 @@
+---
+title: "Random Renders NO°1"
+date: 2018-12-30
+headerImg: "images/myown.png"
+comments: true
+---
+
+import Image from "@components/Image.astro"
+import SoupKitchen from "./images/render_11.png"
+import Guadelajara from "./images/Render_03.png"
+import Benzema from "./images/untitled2.png"
+import Wallpaper from "./images/myown.png"
+
+Einfach ne kleine Sammlung von aktuellen und nicht aktuellen Szenen:
+
+## Ilse Crawfords Soup Kitchen
+
+<Image src={SoupKitchen} alt="Ilse Crawfords Soup Kitchen"/>
+
+## Guadelajara
+
+<Image src={Guadelajara} alt=""/>
+
+## Benzema
+
+<Image src={Benzema} alt=""/>
+
+## Wallpaper
+
+<Image src={Wallpaper} alt=""/>
+

src/content/blog/server-setup/index.en.mdx

@@ -0,0 +1,97 @@
+---
+title: "How I completely rebuild my server setup."
+date: 2020-06-09
+comments: true
+---
+
+import Image from "@components/Image.astro"
+
+So, this topic has been on my mind for a long time. And in the past two weeks i have finally realized it. This blog post is not meant as a guide, but as a way for future me to understand my current me's decision processes.
+
+> **My plan is to publish the guides as separate posts later:**
+>
+> - [ ] _🔗 Proxying local servers with Tinc_
+> - [ ] _☕+🛸=♥ Setting up a Gitea server with drone.io CI/CD_
+> - [ ] _Setting up Nginx+SFTP+Traefik_
+> - [ ] _Including Svelte elements in a Hugo site_
+
+## Requirements
+
+But before we begin to dive into the technical details of my new setup i would like to talk about the requirements i have:
+
+### Git
+
+This one is relatively simple; I code, so i need git. Preferably hosted publicly so that i can share code with other people, and preferably with a CI/CD pipeline attached for the benefits that CI/CD has.
+
+### PAAS
+
+I don't really like to worry about infrastructure, (i know ironic right). At least when I'm working on a project and the infrastructure is not the main focus for that I need a way to easily deploy any application i have to the cloud.
+
+### Static Hosting
+
+Because I code a lot of small static HTML+CSS+Javascript websites and experiments I want to have a way to quickly host them somewhere. Also this Blog needs to be hosted somewhere.
+
+### Blogging
+
+I dont write a lot of blog posts at all, but i still like to have a central platform to put my thoughts onto.
+
+### Filesharing
+
+Most of the time i keep my project file both on my laptop and my main pc. If i work on a coding project i can sync those with git, but for that i need to commit and push every time i switch my pc. For 3D/Media that workflow is not very feasible. To achieve a better workflow I need a File sharing platform, which i definitely want to self host for one because storing a lot of data with a third party is expensive and because i want to be in control of my own data.
+
+ 
+
+## My previous setup
+
+In my previous setup i used a mixture of external services. For **git hosting** i have experience with Github, Gitlab and Bitbucket. I have experience with a few **PaaS** providers, IBM Cloud, Google Cloud but mostly Heroku because it is very easy to use. My **static website** was hosted with one.com, again because it was very easy to use. I have tried a few different **Filesharing** solutions in the past, from Google Drive, Dropbox and Mega and some self hosted solutions like Koken.me, Syncthing and Nextcloud. But in the last year i did not use any File sharing at all.
+
+ 
+
+## My new Setup
+
+![New Setup](./images/new-server.svg)
+
+Now, the first question that may come to mind is, "Why do you use both cloud and local servers?". There are some drawbacks and some benefits to both. Cloud servers provide fast network speeds and static public IPs but storing large amount of data is kind of expensive. Disk space is comparably cheap with local servers I paid around 60€ for my 1tb harddrive which is made specifically for nas situations with drives running 24/7. Also i really like the idea of having physical access to my own data and not having to trust a third party with it. Another benefit to having physical access to my own server is that i can tinker with hardware aspects like networking, drives and cooling as well as taking physical measurements like room temperature and humidity.
+
+To be totally honest the main reason for me to use a cloud server is because i cant use port forwarding on my local network because we (me and my flatmates) dont know the password to our router 🤦. The solution to that is to create a vpn network with my cloud server and proxy all requests through it.
+
+The whole process of setting up my new infrastructure was mainly my trying out different tech stacks until i found one i liked. So, what i choose in the end:
+
+ 
+
+### Git
+
+I definitely wanted to setup a git server on my local raspberry pi, because i want to own my own code, if that makes sense. My first instinct was to use Gitlab, because i really like the integrated ci/cd pipeline, so i downloaded the appropriate docker-compose.yml, started and made my pi instantly unusable because it was so performance intensive. So Gitlab was definitely not the right choice for me.
+
+After that i tried Gogs, which is a lightweight git server build with Go. I really liked the simplicity of the setup and the configuration, but the integration with my ci/cd server of choice, drone.io was not very easy.
+
+So finally i ended up with my current setup which is running a Gitea, and Drone.io Instance on my pi, with the Drone.io CI/CD runner running in the cloud. I started the Drone.io runner in the cloud because the pi is arm based and that caused some problems with certain docker images.
+
+### PAAS
+
+My first idea was to use Dokku, but for some reason i had a lot of problems setting up dokku as a docker image. Then i tried caprover which is a rebranding of a project called CaptainDuckDuck, which is imho a wayyy better name. Caprover was super easy to setup and its super easy to deploy to.
+
+### Static Hosting
+
+This was a very easy decision, as i already had some good experience with nginx and some not so good experience with the configuration of apache. On my cloud server i provisioned a harddrive with a folder which is being mounted into a nginx docker image and a sftp docker image.
+
+### Blogging
+
+Coming from some experience with developing wordpress sites i definitely did not want to keep my old wordpress site. Honestly i did not try a lot of different solutions as Hugo just seemed to click with me, from the blazing fast site generation to the very minimal overhead to the incredible flexible asset pipelines.
+
+### Filesharing
+
+Nextcloud, easy. I just like it and it does not seem to have any competitors with the same amount of functionality.
+
+ 
+
+## Conclusion
+
+This was a very good learning experience for me and just so much fun. My future plans are to expand my local server setup to a cluster build out of pies and also maybe to try out wireguard instead of tinc because it seems to be way faster.
+
+ 
+ 
+
+Cheers thats all for now,
+
+Max

src/content/blog/server-setup/index.mdx

@@ -0,0 +1,85 @@
+---
+title: "Wie ich mein Server-Setup komplett neu aufbaue."
+date: 2020-06-09
+comments: true
+---
+
+import Image from "@components/Image.astro"
+
+Dieses Thema beschäftigt mich also schon seit längerem. Und in den letzten zwei Wochen ist es mir endlich klar geworden. Dieser Blogbeitrag ist nicht als Leitfaden gedacht, sondern als Möglichkeit für mein zukünftiges Ich, die Entscheidungsprozesse meines jetzigen Ichs zu verstehen.
+
+> **Mein Plan ist es, die Leitfäden später als separate Beiträge zu veröffentlichen:** 
+> > - [ ] _🔗 Proxying lokaler Server mit Tinc_ 
+> > - [ ] _☕+🛸=♥ Einrichten eines Gitea-Servers mit Drone.io CI/ CD_ 
+> > - [ ] _Nginx+SFTP+Traefik einrichten_
+> > - [ ] _Svelte-Elemente in eine Hugo-Site einbinden_
+
+## Anforderungen
+
+Bevor wir uns jedoch mit den technischen Details meines neuen Setups befassen, möchte ich über meine Anforderungen sprechen:
+
+### Git
+
+Dieser ist relativ einfach; Ich programmiere, also brauche ich Git. Vorzugsweise öffentlich gehostet, damit ich Code mit anderen Leuten teilen kann, und vorzugsweise mit angeschlossener CI/CD-Pipeline, um die Vorteile von CI/CD nutzen zu können.
+
+### PAAS
+
+Ich mag es nicht wirklich, mich um die Infrastruktur zu kümmern, (ich weiß, ironisch, oder?). Zumindest, wenn ich an einem Projekt arbeite und die Infrastruktur nicht der Hauptfokus ist, brauche ich eine Möglichkeit, jede Anwendung, die ich habe, einfach in die Cloud zu deployen.
+
+### Static Hosting
+
+Weil ich viele kleine statische HTML+CSS+Javascript-Websites und -Experimente programmiere, möchte ich eine Möglichkeit haben, sie schnell irgendwo zu hosten. Auch dieser Blog muss irgendwo gehostet werden.
+
+### Blogging
+
+Ich schreibe nicht viele Blogbeiträge, aber ich möchte trotzdem eine zentrale Plattform haben, um meine Gedanken festzuhalten.
+
+### Filesharing
+
+Die meiste Zeit halte ich meine Projektdatei sowohl auf meinem Laptop als auch auf meinem Haupt-PC. Wenn ich an einem Codierungsprojekt arbeite, kann ich diese mit Git synchronisieren, aber dafür muss ich jedes Mal, wenn ich meinen PC wechsle, committen und pushen. Für 3D/Media ist dieser Workflow nicht sehr praktikabel. Um einen besseren Workflow zu erreichen, benötige ich eine Filesharing-Plattform, die ich definitiv selbst hosten möchte, zum einen, weil das Speichern einer großen Datenmenge bei einem Drittanbieter teuer ist, und zum anderen, weil ich die Kontrolle über meine eigenen Daten haben möchte.
+
+## Mein vorheriges Setup
+
+In meinem vorherigen Setup habe ich eine Mischung aus externen Diensten verwendet. Für **Git-Hosting** habe ich Erfahrung mit Github, Gitlab und Bitbucket. Ich habe Erfahrung mit einigen **PaaS**-Anbietern, IBM Cloud, Google Cloud, aber hauptsächlich Heroku, weil es sehr einfach zu bedienen ist. Meine **statische Website** wurde mit one.com gehostet, wiederum, weil es sehr einfach zu bedienen war. Ich habe ein paar verschiedene **Filesharing**-Lösungen ausprobiert, von Google Drive, Dropbox und Mega und einigen selbst gehosteten Lösungen wie Koken.me, Syncthing und Nextcloud. Aber im letzten Jahr habe ich überhaupt kein Filesharing genutzt.
+
+## My new Setup
+
+![New Setup](./images/new-server.svg)
+
+Eine Frage, die man sich jetzt stellen könnte wäre: „Warum benutzt du Cloud und lokale Server?“ Beide haben einige Nachteile und einige Vorteile. Cloud-Server bieten schnelle Netzwerkgeschwindigkeiten und statische öffentliche IPs, aber die Speicherung großer Datenmengen ist recht teuer. Der Festplattenspeicher ist bei lokalen Servern vergleichsweise günstig. Ich habe etwa 60 € für meine 1-TB-Festplatte bezahlt, die speziell für NAS-Situationen entwickelt wurde, bei denen die Laufwerke rund um die Uhr laufen. Außerdem gefällt mir die Idee sehr gut, physischen Zugriff auf meine eigenen Daten zu haben und diese nicht einem Dritten anvertrauen zu müssen. Ein weiterer Vorteil des physischen Zugriffs auf meinen eigenen Server besteht darin, dass ich an Hardwareaspekten wie Netzwerk, Laufwerken und Kühlung herumbasteln und physische Messungen wie Raumtemperatur und Luftfeuchtigkeit vornehmen kann.
+
+Um ganz ehrlich zu sein, der Hauptgrund für mich, einen Cloud-Server zu verwenden, ist, dass ich auf meinem lokalen Netzwerk kein Port-Forwarding verwenden kann, weil wir (meine Mitbewohner und ich) das Passwort zu unserem Router nicht kennen 🤦. Die Lösung dafür ist, ein VPN-Netzwerk mit meinem Cloud-Server zu erstellen und alle Anfragen darüber zu proxyen.
+
+Die Idee ist also, dass ich meinen lokalen Server als Hauptserver verwende und den Cloud-Server als Proxy verwende, um auf meinen lokalen Server zuzugreifen. Der Cloud-Server wird auch als Backup-Server für meine Dateien verwendet, falls mein lokaler Server ausfällt.
+
+### Git
+
+Ich wollte definitiv einen Git-Server auf meinem lokalen Raspberry Pi einrichten, weil ich meinen eigenen Code besitzen wollte, wenn das Sinn macht. Mein erster Instinkt war, Gitlab zu verwenden, weil ich die integrierte CI/CD-Pipeline wirklich mag, also habe ich die entsprechende docker-compose.yml heruntergeladen, gestartet und meinen Pi sofort unbrauchbar gemacht, weil es so leistungsintensiv war. Also war Gitlab definitiv nicht die richtige Wahl für mich.
+
+Danach habe ich Gogs ausprobiert, das ist ein leichtgewichtiger Git-Server, der mit Go erstellt wurde. Mir gefiel die Einfachheit des Setups und der Konfiguration wirklich gut, aber die Integration mit meinem CI/CD-Server der Wahl, drone.io, war nicht sehr einfach.
+
+Also landete ich schließlich bei meinem aktuellen Setup, das einen Gitea- und einen Drone.io-Server auf meinem Pi mit einem in der Cloud laufenden Drone.io CI/CD-Runner umfasst. Ich habe den Drone.io-Runner in der Cloud gestartet, weil der Pi arm-basiert ist und das bei bestimmten Docker-Images Probleme verursacht hat.
+
+### PAAS
+
+Meine erste Idee war, Dokku zu verwenden, aber aus irgendeinem Grund hatte ich viele Probleme, Dokku als Docker-Image einzurichten. Dann habe ich Caprover ausprobiert, das eine Neubrandung eines Projekts namens CaptainDuckDuck ist, was meiner Meinung nach ein viel besserer Name ist. Caprover war super einfach einzurichten und es ist super einfach zu deployen.
+
+### Static Hosting
+
+Ich habe mich für Nginx entschieden. Dies war eine sehr einfache Entscheidung, da ich bereits einige gute Erfahrungen mit nginx und einige nicht so gute Erfahrungen mit der Konfiguration von Apache hatte. Auf meinem Cloud-Server habe ich eine Festplatte mit einem Ordner bereitgestellt, der in ein Nginx-Docker-Image und ein SFTP-Docker-Image eingebunden ist.
+
+### Blogging
+
+Aufgrund einiger Erfahrung in der Entwicklung von WordPress-Sites wollte ich meine alte WordPress-Site definitiv nicht behalten. Ehrlich gesagt habe ich nicht viele verschiedene Lösungen ausprobiert, da Hugo einfach zu mir passte, von der rasend schnellen Site-Generierung über den sehr minimalen Overhead bis hin zu den unglaublich flexiblen Asset-Pipelines.
+
+### Filesharing
+
+Ich habe mich für Nextcloud entschieden, weil ich es einfach mag und es keine Konkurrenz mit der gleichen Funktionalität zu geben scheint.
+
+## Abschluss
+
+Alles in allem bin ich sehr zufrieden mit meinem neuen Setup. Ich habe viel gelernt und es hat mir viel Spaß gemacht. Meine zukünftigen Pläne sind, mein lokales Server-Setup zu einem Cluster-Build aus Pies zu erweitern und auch vielleicht Wireguard anstelle von Tinc auszuprobieren, weil es anscheinend viel schneller ist.
+
+Cheers,
+
+Max

src/content/blog/sketche-01/index.en.mdx

@@ -0,0 +1,12 @@
+---
+title: "Sketche 01"
+date: 2017-05-08
+headerImg: "images/Baakk.jpg"
+---
+
+import Image from "@components/Image.astro";
+import SketcheNo1 from "./images/Sketche_No1.jpg";
+
+Yup, i bought a graphics tablet.
+
+<Image src={SketcheNo1} alt="Sketche No1" />

src/content/blog/sketche-01/index.mdx

@@ -0,0 +1,13 @@
+---
+title: "Sketche 01"
+date: 2017-05-08
+headerImg: "images/Baakk.jpg"
+---
+
+import Image from "@components/Image.astro";
+import SketcheNo1 from "./images/Sketche_No1.jpg";
+
+Ratet mal wer sich gerade ein Zeichentablett gekauft hat :)
+
+<Image src={SketcheNo1} alt="Sketche No1" />
+

src/content/blog/speed_scene_03/index.en.mdx

@@ -0,0 +1,18 @@
+---
+title: "Speed_Scene_03"
+date: 2017-02-03
+headerImg: "images/Render_04.png"
+comments: true
+---
+
+import Image from "@components/Image.astro"
+import Render04 from "./images/Render_04.png";
+import Render05 from "./images/Render_05-2.png";
+
+<Image src={Render04} alt="Speed_Scene_03" />
+
+After some corrections, (thanks /r/blender).
+
+<Image src={Render05} alt="Speed_Scene_03" />
+
+Basically a small exercise to improve my skills with architecture scenes. Here is the original scene, I took a template to not spend time with concept work.

src/content/blog/speed_scene_03/index.mdx

@@ -0,0 +1,18 @@
+---
+title: "Speed_Scene_03"
+date: 2017-02-03
+headerImg: "images/Render_04.png"
+comments: true
+---
+
+import Image from "@components/Image.astro"
+import Render04 from "./images/Render_04.png";
+import Render05 from "./images/Render_05-2.png";
+
+<Image src={Render04} alt="Speed_Scene_03" />
+
+Nach einigen Korrekturen, (danke /r/blender).
+
+<Image src={Render05} alt="Speed_Scene_03" />
+
+Im Grunde ne kleine Übung um meine Skills mit Architektur Szenen zu verbessern. Hier ist die Ursprungsszene, ich habe ne Vorlage genommen, um keine Zeit mit Konzeptarbeit zu verbringen:

src/content/blog/speed_scene_0405/index.en.mdx

@@ -0,0 +1,13 @@
+---
+title: "Speed_Scene_04/05"
+date: 2017-03-13
+headerImg: "Render_01.jpg"
+comments: true
+---
+
+import Image from "@components/Image.astro";
+import Render01 from "./images/Render_01.jpg";
+import Untitled from "./images/untitled.png";
+
+<Image alt="Render 01" src={Render01} />
+<Image alt="Untitled" src={Untitled} />

src/content/blog/speed_scene_0405/index.mdx

@@ -0,0 +1,14 @@
+---
+title: "Speed_Scene_04/05"
+date: 2017-03-13
+headerImg: "Render_01.jpg"
+comments: true
+---
+
+import Image from "@components/Image.astro";
+import Render01 from "./images/Render_01.jpg";
+import Untitled from "./images/untitled.png";
+
+<Image alt="Render 01" src={Render01} />
+<Image alt="Untitled" src={Untitled} />
+

src/content/blog/station-b3-4-offline/index.en.mdx

@@ -0,0 +1,35 @@
+---
+title: "Station B3-4 Offline"
+date: 2016-12-21
+headerImg: "Station.jpg"
+comments: true
+---
+
+import Image from "@components/Image.astro"
+import Untitled2 from "./images/untitled-2.png"
+import Snowy_Mountains from "./images/Snowy_Mountains.png"
+import Car from "./images/Car.png"
+import Station from "./images/Station.jpg"
+import Human from "./images/human.png"
+
+
+Einheit B3-4 wurde entsandt um zu überprüfen, was den Ausfall verursacht hat, und um die Einheit wieder ins Netz zu bringen. Sein Fahrzeug bringt ihn so weit wie die letzten Straßen gehen.
+
+Von dort an muss er seine Kletterfähigkeiten und seine hochentwickelte Ausrüstung nutzen, um zur Station zu gelangen.
+
+<Image src={Untitled2} alt="Station B3-4 Offline" />
+
+Die Berge wurden in World Machine generiert, von dort exportierte ich die Berge als Objektdatei, eine Farbkarte und eine Normalenkarte. In Blender habe ich die Berge von etwa 1 Million Vertices auf 150.000 Vertices reduziert und die Normalenkarte verwendet, um die verlorenen Details zurückzugewinnen.
+
+<Image src={Snowy_Mountains} alt="Snowy Mountains" />
+
+Das Auto ist ein sogenannter Whillys Jeep, den ich vor einiger Zeit für ein Spielprojekt modelliert habe.
+
+<Image src={Car} alt="Car" />
+
+<Image src={Station} alt="Station" />
+
+Der Mensch begann als ein Projekt, um einen hochtechnologisch fortgeschrittenen Kletterer zu modellieren, und ist tatsächlich der erste Mensch, den ich je modelliert habe.
+
+<Image src={Human} alt="Human" />
+

src/content/blog/station-b3-4-offline/index.mdx

@@ -0,0 +1,35 @@
+---
+title: "Station B3-4 Offline"
+date: 2016-12-21
+headerImg: "Station.jpg"
+comments: true
+---
+
+import Image from "@components/Image.astro"
+import Untitled2 from "./images/untitled-2.png"
+import Snowy_Mountains from "./images/Snowy_Mountains.png"
+import Car from "./images/Car.png"
+import Station from "./images/Station.jpg"
+import Human from "./images/human.png"
+
+
+Unit
+Unit B54 was dispatched to check what caused the failure, and to get the unit back on the net. His vehicle brings him as far as the last roads go.
+
+From there on he has to use his climbing skills and his highly developed equipment to get to the station.
+
+<Image src={Untitled2} alt="Station B3-4 Offline" />
+
+I used world machine to generate the mountains, from wm I exported the mountains as obj file a color map and an normal map. In blender i decimated the mountains from around 1 million vertices to 150.000 vertices, and used the normal map to gain back the lost detail.
+
+<Image src={Snowy_Mountains} alt="Snowy Mountains" />
+
+The car is a so called Whillys Jeep which i modelled a while ago for a game project.
+
+<Image src={Car} alt="Car" />
+
+<Image src={Station} alt="Station" />
+
+The human started as an project to model a highly technologically advanced climber, and is actually the first human I've ever modelled.
+
+<Image src={Human} alt="Human" />

src/content/blog/surfirvorcamp-esmoriz/index.mdx

@@ -0,0 +1,53 @@
+---
+title: "Surfirvorcamp | Esmoriz"
+date: 2017-04-18
+headerImg: "MAX_4978.jpg"
+comments: true
+---
+import YouTube from "@components/YouTube.astro";
+import Image from "@components/Image.astro";
+
+import MAX_4978 from "./images/MAX_4978.jpg";
+import MAX_4758 from "./images/MAX_4758-Recovered-1.jpg";
+import MAX_4888 from "./images/MAX_4888-Recovered.jpg";
+import MAX_4997 from "./images/MAX_4997-Recovered.jpg";
+import MAX_4967 from "./images/MAX_4967-Recovered.jpg";
+import MAX_4945 from "./images/MAX_4945-Recovered.jpg";
+import IMG_20170416_WA0007 from "./images/IMG-20170416-WA0007.jpg";
+import MAX_5075 from "./images/MAX_5075.jpg";
+import IMG_20170416_WA0001 from "./images/IMG-20170416-WA0001.jpg";
+import MAX_5112 from "./images/MAX_5112.jpg";
+
+<YouTube id="xREriF-WuOA"/>
+
+Letzten Freitag habe ich sehr spontan eine Woche Surfkurs in Esmoriz gebucht zum einen weil ich nen bisschen irgendwo absacken wollte und zum anderen weil Pella auch da war. Ich hatte ne super Woche das Surfivorcamp kann ich nur jedem empfehlen tolle Leute super entspannte Atmosphäre.
+
+<Image src={MAX_4978} alt="Surfivorcamp"/>
+
+Freitag an dem Tag sind wir das erste Mal ohne Trainer surfen gewesen und Pella hat sich nettwerweise bereiterklärt Paparazzi zu spielen. Von Links nach Rechts, Thomas, Jamie, Ich und Florian. Thomas und Florian sind Lehrer und Jamie hat ne Woche Saufurlaub mit seinen Kumpels hinter sich. Sehr korrekte Leute. An den ersten Tagen waren noch Ellen, Alba und Lucas dabei aber zur Zeit des Fotos waren die schon abgereist.
+
+<Image src={MAX_4758} alt="Surfivorcamp"/>
+
+<Image src={MAX_4888} alt="Surfivorcamp"/>
+
+Das war kurz nach dem ich meinen Dreifachen Rückwärtssalto auf der 7 Meter Welle hingelegt habe.
+
+<Image src={MAX_4997} alt="Surfivorcamp"/>
+
+Flo wollte mir nochmal sagen wie siiiiiiick der Rückwärtssalto war.
+
+<Image src={MAX_4967} alt="Surfivorcamp"/>
+
+<Image src={IMG_20170416_WA0007} alt="Surfivorcamp"/>
+
+Ausflug nach Porto, was macht man in Porto? Richtig Portwein trinken. Sponsored by Flo. Rechts von der Mitte war noch Juri dazugekommen, ein Surfer-Softwareentwickler dem es in Lissabon zu voll geworden war.
+
+<Image src={MAX_5075} alt="Surfivorcamp"/>
+
+Pella die Profi Weinprobiererin.
+
+<Image src={IMG_20170416_WA0001} alt="Surfivorcamp"/>
+
+Nach dem Portwein haben wir Francesinha gegessen, ich glaube mein neues dritt Lieblingsessen. Nichts kommt vor frittierten Meeresfrüchten in Italien und dem Thunfischsandwich von Papa. Das Grundkonzept ist, man stapelt soviele fettige Sachen wie möglich übereinander sprich, Wurst, Steak, Schinken Würstchen packt das alles zwischen zwei Scheiben Brot überbackt das alles mit Käse, manchmal nen Spiegelei obendrauf, setzt alles in ne Schale mit Soße und fertig ist der Arterienalbtraum. Aber ein sooooo leckerer.
+
+<Image src={MAX_5112} alt="Surfivorcamp"/>