feat: add some stuff

astro.config.mjs

@@ -2,9 +2,11 @@ import { defineConfig } from 'astro/config';
 import { i18n, filterSitemapByDefaultLocale } from "astro-i18n-aut/integration";
 import sitemap from "@astrojs/sitemap";
 import mdx from '@astrojs/mdx';
+import tailwind from '@astrojs/tailwind';
 import glsl from 'vite-plugin-glsl';
 
 import svelte from "@astrojs/svelte";
+import UnoCSS from 'unocss/astro'
 
 const defaultLocale = "de";
 const locales = {
@@ -16,6 +18,7 @@ const locales = {
 export default defineConfig({
   site: "https://max-richter.dev",
   trailingSlash: "never",
+  prefetch: true,
   build: {
     format: "file",
   },
@@ -27,6 +30,9 @@ export default defineConfig({
   integrations: [
     mdx(),
     svelte(),
+    UnoCSS({
+      injectReset: true
+    }),
     i18n({
       exclude: ["pages/**/*.json.ts", "pages/api/**/*",],
       locales,

package.json

@@ -22,11 +22,19 @@
     "typescript": "^5.4.2"
   },
   "devDependencies": {
+    "@afordin/unocss-preset-token": "0.1.0-beta.0",
     "@astrojs/sitemap": "^3.1.1",
+    "@iconify-json/tabler": "^1.1.109",
+    "@types/markdown-it": "^13.0.7",
+    "@unocss/preset-icons": "^0.58.8",
+    "@unocss/reset": "^0.58.8",
     "astro-font": "^0.0.78",
+    "markdown-it": "^14.1.0",
     "ogl": "^1.0.6",
     "prettier": "^3.2.5",
     "prettier-plugin-astro": "^0.13.0",
+    "sharp": "^0.33.3",
+    "unocss": "^0.58.8",
     "vite-plugin-glsl": "^1.3.0"
   }
 }

public/app.css

@@ -1,55 +1,23 @@
-/* @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;
 }
 
+h1,
+h2 {
+  font-family: 'Roboto', sans-serif;
+}
+
 :root {
-  --neutral1000: #000000;
-  --neutral800: #16161E;
-  --neutral500: #252530;
-  --neutral400: #2C2C3A;
-  --neutral300: #414152;
-  --neutral100: #AAAABB;
-  --neutral000: #F1F1F4;
+  --neutral-1000: #000000;
+  --neutral-800: #16161E;
+  --neutral-500: #252530;
+  --neutral-400: #2C2C3A;
+  --neutral-300: #414152;
+  --neutral-100: #AAAABB;
+  --neutral-000: #F1F1F4;
 }
 
 body {
-
   --background-dark: var(--neutral800);
   --background: var(--neutral000);
   --background-light: var(--neutral400);
@@ -57,14 +25,29 @@ body {
   --text: var(--neutral1000);
   --layer100: var(--neutral000);
 
+  --border-radius-md: 20px;
+
+  --spacing-sm: 10px;
+  --spacing-md: 20px;
+
   background-color: var(--layer100);
   transition: background-color 0.1s;
   color: var(--text);
-  font-family: 'Roboto', sans-serif;
+  font-family: 'Nunito Sans', sans-serif;
+}
+
+.noise::before {
+  content: "";
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  background: url(/noise.png);
+  background-size: 200px;
+  pointer-events: none;
+  /* opacity: 0.3; */
 }
 
 .theme-dark {
-
   --background-dark: var(--neutral800);
   --background: var(--neutral500);
   --background-light: var(--neutral400);

public/projects/plantarium/plantarium.png:Zone.Identifier

@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+HostUrl=about:internet

src/components/Card.astro

@@ -1,61 +0,0 @@
----
-interface Props {
-	title: string;
-	body: string;
-	href: string;
-}
-
-const { href, title, body } = Astro.props;
----
-
-<li class="link-card">
-	<a href={href}>
-		<h2>
-			{title}
-			<span>&rarr;</span>
-		</h2>
-		<p>
-			{body}
-		</p>
-	</a>
-</li>
-<style>
-	.link-card {
-		list-style: none;
-		display: flex;
-		padding: 1px;
-		background-color: #23262d;
-		background-image: none;
-		background-size: 400%;
-		border-radius: 7px;
-		background-position: 100%;
-		transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
-		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
-	}
-	.link-card > a {
-		width: 100%;
-		text-decoration: none;
-		line-height: 1.4;
-		padding: calc(1.5rem - 1px);
-		border-radius: 8px;
-		color: white;
-		background-color: #23262d;
-		opacity: 0.8;
-	}
-	h2 {
-		margin: 0;
-		font-size: 1.25rem;
-		transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
-	}
-	p {
-		margin-top: 0.5rem;
-		margin-bottom: 0;
-	}
-	.link-card:is(:hover, :focus-within) {
-		background-position: 0;
-		background-image: var(--accent-gradient);
-	}
-	.link-card:is(:hover, :focus-within) h2 {
-		color: rgb(var(--accent-light));
-	}
-</style>

src/components/GoogleyEye.svelte

@@ -169,8 +169,7 @@
     box-shadow:
       -5px -5px 10px #ffffff70 inset,
       -1px -1px 4px #ffffff96 inset,
-      2px 2px 2px black inset,
-      -2px -2px 5px #00000078;
+      2px 2px 2px black inset;
     transform: translate(-50%, -50%) rotate(calc(var(--rotation) * -1 + 180deg));
     top: 50%;
     left: 50%;

src/components/HeroCard.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  import Card from "./Card.svelte";
+
+  export let title: string;
+  export let subtitle: string;
+  export let image: string;
+  export let description: string;
+  export let link: string;
+</script>
+
+<Card></Card>
+
+<style>
+  .hero-card-wrapper {
+    display: flex;
+    border-radius: var(--border-radius-md);
+    background-color: var(--background);
+    border: solid thin var(--outline);
+  }
+
+  .hero-card-image {
+    flex: 1;
+    background-size: cover;
+    background-position: center;
+    border-radius: var(--border-radius-md) 0px 0px var(--border-radius-md);
+    min-height: 200px;
+  }
+
+  .hero-card-content {
+    flex: 1;
+    padding: var(--spacing-md);
+  }
+
+  h2 {
+    margin: 0;
+  }
+
+  h3 {
+    margin: 0;
+  }
+
+  a {
+    color: var(--primary);
+    text-decoration: none;
+  }
+</style>

src/components/Image.astro

@@ -4,12 +4,11 @@ import { Image as AstroImage } from "astro:assets";
 interface Props {
   src: ImageMetadata;
   alt: string;
+  caption?: string;
   maxWidth?: number;
 }
 
-const { src, alt, maxWidth } = Astro.props;
-
-const image = typeof src === "string" ? await import(src) : src;
+const { src: image, alt, maxWidth } = Astro.props;
 
 const sizes = [
   {

src/components/LanguagePicker.astro

@@ -1,5 +1,5 @@
 ---
-import { locales, defaultLocale, getLocale } from "astro-i18n-aut";
+import { locales, defaultLocale } from "astro-i18n-aut";
 import { useTranslations } from "../i18n/utils";
 
 function translatePath(lang: string) {
@@ -16,15 +16,16 @@ function translatePath(lang: string) {
   return `/${[lang, ...split].join("/")}`;
 }
 
-const locale = getLocale(Astro.url);
-const t = useTranslations(locale);
+const t = useTranslations(Astro);
 ---
 
 <ul>
   {
     Object.entries(locales).map(([lang, label]) => (
       <li>
-        <a href={translatePath(lang)}>{t(label as "de")}</a>
+        <a href={translatePath(lang)} data-astro-prefetch>
+          {t(label as "de")}
+        </a>
       </li>
     ))
   }

src/components/Max.astro

@@ -2,17 +2,16 @@
 import MaxImg from "./Max.png";
 import Image from "./Image.astro";
 import GoogleyEye from "./GoogleyEye.svelte";
+import { Card } from "./card";
 
 import { useTranslations } from "@i18n/utils";
 
-import { getLocale } from "astro-i18n-aut";
-
-const locale = getLocale(Astro.url);
-
-const t = useTranslations(locale);
+const t = useTranslations(Astro);
 ---
 
-<section class="googley-eye-target">
+<Card
+  classes="googley-eye-target relative rounded-diag-md border border-light gradient grid grid-cols-[250px_1fr] h-[180px] my-8xl"
+>
   <div class="image">
     <Image src={MaxImg} alt="its mee" maxWidth={700} />
     <div class="eye right">
@@ -23,11 +22,11 @@ const t = useTranslations(locale);
     </div>
   </div>
 
-  <div class="content">
-    <h1>{t("home.title")}</h1>
+  <div class="content gap-2">
+    <h1 class="text-2xl">{t("home.title")}</h1>
     <p>{t("home.subtitle")}</p>
   </div>
-</section>
+</Card>
 
 <style>
   .image {
@@ -35,7 +34,7 @@ const t = useTranslations(locale);
     height: 130%;
     align-self: end;
     overflow: hidden;
-    border-bottom-left-radius: 20px;
+    border-bottom-left-radius: var(--border-radius-md);
     display: flex;
     align-items: flex-end;
   }
@@ -43,37 +42,19 @@ const t = useTranslations(locale);
   .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%
-    );
+    object-position: bottom;
   }
 
   .eye {
     position: absolute;
   }
-
   .eye.left {
-    top: 25%;
-    right: 30%;
+    top: 29%;
+    right: 27%;
   }
   .eye.right {
-    top: 27%;
-    right: 15%;
+    top: 31%;
+    right: 12%;
   }
 
   .content {
@@ -81,6 +62,6 @@ const t = useTranslations(locale);
     padding-left: 15px;
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
+    justify-content: space-around;
   }
 </style>

src/components/Nav.astro

@@ -1,15 +1,14 @@
 ---
-import { getLocale } from "astro-i18n-aut";
 import { useTranslations, useTranslatedPath } from "../i18n/utils";
 import Logo from "./Logo.astro";
 
-function isActive(path) {
+function isActive(path: string) {
   return Astro.url.pathname === path ? "active" : "";
 }
 
-const lang = getLocale(Astro.url);
-const t = useTranslations(lang);
-const translatePath = useTranslatedPath(lang);
+const t = useTranslations(Astro);
+const translatePath = useTranslatedPath(Astro);
+
 const paths = [
   {
     link: translatePath("/"),
@@ -34,85 +33,37 @@ const paths = [
 ];
 ---
 
-<style>
-  ul {
-    display: flex;
-    list-style: none;
-    padding: 0;
-    height: 50px;
-  }
-  li {
-    display: flex;
-    align-items: center;
-  }
-  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>
+<ul class="flex my-4 divide-x divide-x-1 divide-x-neutral">
   {
-    paths.map(({ link, text, component }, index) => (
+    paths.map(({ link, text, component }, i) => (
       <li
-        class={`${component ? "logo" : ""} ${isActive(link) ? "active" : ""}`}
+        class={`
+          flex items-center flex-1 border-t-1 border-b-1 border-neutral
+          ${isActive(link) ? "bg-light" : "bg"}
+          ${i === 1 ? "rounded-bl-md" : ""}
+          ${i === paths.length - 1 ? "rounded-tr-md !border-r-1" : ""}
+          ${component ? "border-none bg-transparent my-2 mr-4 logo" : ""} 
+        `}
       >
-        <a href={link}>{component ? <Logo /> : text}</a>
+        <a
+          class="text-neutral w-full h-full flex items-center justify-center lowercase"
+          href={link}
+          data-astro-prefetch
+        >
+          {component ? <Logo /> : text}
+        </a>
       </li>
     ))
   }
 </ul>
+
+<style>
+  ul > li.logo {
+    background: none;
+    flex: 0;
+    height: 34px;
+    margin-left: 0px;
+    --fill: #cb5a5a;
+    --background-fill: none;
+  }
+</style>

src/components/button/Button.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  export let classes = "";
+</script>
+
+<button class="bg-light p-2 rounded-md ml-2 px-4 {classes}">
+  <slot />
+</button>
+
+<style>
+  button {
+    background-color: var(--background-light);
+    border-radius: var(--border-radius-md);
+    border: none;
+    cursor: pointer;
+    font-size: var(--font-size-md);
+    transition: background-color 0.3s;
+  }
+</style>

src/components/button/Icon.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+  export let icon: string;
+</script>
+
+<span class="i-tabler-{icon}" />

src/components/button/index.ts

@@ -0,0 +1,12 @@
+import _Button from './Button.svelte';
+import Icon from './Icon.svelte';
+
+const Button = {
+  ..._Button,
+  Icon,
+} as typeof _Button & {
+  Icon: typeof Icon;
+};
+
+
+export { Button }

src/components/card/Content.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  export let classes = "";
+</script>
+
+<div class="flex flex-1 flex-col gap-4 {classes} w-[66%]">
+  <slot />
+</div>

src/components/card/Description.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+</script>
+
+<p class="max-h-32 text-ellipsis overflow-hidden line-clamp-4">
+  <slot />
+</p>
+
+<style>
+</style>

src/components/card/Image.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  export let alt: string;
+  export let src: string;
+  export let width: number;
+  export let height: number;
+</script>
+
+<img {src} {alt} {width} {height} />
+
+<style>
+  img {
+    width: 33%;
+    object-fit: cover;
+  }
+</style>

src/components/card/ReadMoreButton.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  export let link: string;
+</script>
+
+<a
+  href={link}
+  data-astro-prefetch
+  class="bg-light p-2 text-s rounded-md px-4 flex flex-0 items-center gap-2 w-fit"
+>
+  read more <span class="i-tabler-arrow-right inline-block w-4 h-4" />
+</a>

src/components/card/Title.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">
+</script>
+
+<h2 class="text-2xl">
+  <slot />
+</h2>

src/components/card/Wrapper.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  export let classes = "flex bg";
+</script>
+
+<div class="relative rounded-diag-md {classes} noise">
+  <slot />
+</div>
+
+<style>
+  .card-wrapper {
+    align-items: stretch;
+
+    min-height: 200px;
+    border: solid thin var(--outline);
+    max-width: 100%;
+    max-height: 300px;
+    overflow: hidden;
+  }
+</style>

src/components/card/index.ts

@@ -0,0 +1,23 @@
+import Wrapper from './Wrapper.svelte';
+import Image from './Image.svelte';
+import Content from './Content.svelte';
+import Title from './Title.svelte';
+import Description from './Description.svelte';
+import ReadMoreButton from './ReadMoreButton.svelte';
+
+const Card = {
+  ...Wrapper,
+  Image,
+  Content,
+  Title,
+  Description,
+  ReadMoreButton
+} as typeof Wrapper & {
+  Image: typeof Image;
+  Content: typeof Content;
+  Title: typeof Title;
+  Description: typeof Description;
+  ReadMoreButton: typeof ReadMoreButton;
+}
+
+export { Card };

src/content/blog/colonial/images/Mask_01-ezgif.com-gif-to-webm-converter.webm:Zone.Identifier

@@ -0,0 +1,4 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=https://ezgif.com/gif-to-webm/ezgif-1-af9e72fcc6.gif
+HostUrl=https://ezgif.com/save/ezgif-1-78ce3365b7.webm

src/content/blog/colonial/images/Mask_02-ezgif.com-gif-to-webm-converter.webm:Zone.Identifier

@@ -0,0 +1,4 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=https://ezgif.com/gif-to-webm/ezgif-1-74cf771d87.gif
+HostUrl=https://ezgif.com/save/ezgif-1-93f790072e.webm

src/content/blog/colonial/images/Pebbles-ezgif.com-gif-to-webm-converter.webm:Zone.Identifier

@@ -0,0 +1,4 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=https://ezgif.com/gif-to-webm/ezgif-1-70f1c50104.gif
+HostUrl=https://ezgif.com/save/ezgif-1-28f4d917d4.webm

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

@@ -7,10 +7,6 @@ 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" />
 
@@ -24,22 +20,21 @@ Gladly i still had a Landscape Material which i created a while ago, so i didnt
 
 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" />
+<video src="/blog/colonial/Mask_01.webm" mute controls/>
 
 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" />
-
+<video src="/blog/colonial/Mask_02.webm" mute controls/>
 
 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"/>
+<video src="/blog/colonial/Pebbles.webm" mute controls/>
 
 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"/>
+<video src="/blog/colonial/Butterflies_1.webm" mute controls/>
 
 
 

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

@@ -4,6 +4,7 @@ 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"

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

@@ -44,7 +44,7 @@ In meinem vorherigen Setup habe ich eine Mischung aus externen Diensten verwende
 
 ## My new Setup
 
-![New Setup](./images/new-server.svg)
+<img src="./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.
 

src/content/blog/zentralwerk_2051/fishes/webgl-fishes.ts

@@ -90,7 +90,7 @@ export default (canvas: HTMLCanvasElement, { amount = 100, color = new Color(0xf
   mesh.setParent(scene);
 
   return {
-    update: (t, timeOffset) => {
+    update: (t: number, timeOffset: number) => {
       program.uniforms.uTime.value = t * 0.001 + timeOffset;
       fishMesh.program.uniforms.uTime.value = t * 0.001;
       renderer.render({ scene, camera });

src/content/blog/zentralwerk_2051/index.mdx

@@ -1,6 +1,7 @@
 ---
 title: "Zentralwerk_2051"
 date: 2021-01-07
+_layout: "transparent"
 links: [["PDF", "/Zentralwerk_2051.pdf"]]
 license: "CC-BY-SA:4.0"
 comments: true

src/content/config.ts

@@ -4,10 +4,15 @@ const blogCollection = defineCollection({
   schema: z.object({
     title: z.string(),
     date: z.date(),
-    headerImg: z.string().optional()
+    headerImg: z.string().optional(),
+    draft: z.boolean().optional(),
+    featured: z.boolean().optional(),
+    _layout: z.enum(['normal', 'transparent']).optional(),
   })
 });
 
 export const collections = {
-  'blog': blogCollection
+  'blog': blogCollection,
+  "projects": blogCollection,
+  "photos": blogCollection,
 };

src/content/photos/bigge-changes/index.mdx

@@ -0,0 +1,42 @@
+---
+title: "Bilder Bigge Changes"
+date: 2020-11-23
+headerImg: "images/Image6.jpg"
+---
+
+import Image from "@components/Image.astro"
+import Image6 from "./images/6_1.jpg"
+import Image7 from "./images/7_1.jpg"
+import Image11 from "./images/11_1.jpg"
+import Image14 from "./images/14_1.jpg"
+import Image20 from "./images/20_1.jpg"
+import Image27 from "./images/27_1.jpg"
+import Image35 from "./images/35_1.jpg"
+import Image39 from "./images/39_1.jpg"
+import MAX_0511 from "./images/MAX_0511_1.jpg"
+import MAX_0513 from "./images/MAX_0513_1.jpg"
+
+Der Sommer '18 war einer der trockensten der letzten Jahre _(irgendwie scheint das bei jedem neuen Sommer der Fall zu sein)_. Zu der Zeit habe ich bei "Des Wahnsinns Fette Beute" in Attendorn meine Ausbildung als Mediengestalter gemacht. Attendorn liegt tief im Sauerland an einem See namens Bigge. Jeden morgen um 8:30 bin ich an diesem See vorbeigefahren.
+
+Zurück zur Trockenheit, durch den fehlenden Regen ist der Zulauf der Bigge fast komplett versiegt; und so war der See bist fast auf den Grund ausgetrocknet. Das war ein seltsamer trauriger und schöner Anblick zugleich. Im Laufe der Zeit habe ich viele Bilder gemacht, viele auch bei einer Wanderung mit meinem Papa zusammen.
+
+<Image src={Image6} alt=""/>
+
+<Image src={Image7} alt=""/>
+
+<Image src={Image11} alt=""/>
+
+<Image src={Image14} alt=""/>
+
+<Image src={Image20} alt=""/>
+
+<Image src={Image27} alt=""/>
+
+<Image src={Image35} alt=""/>
+
+<Image src={Image39} alt=""/>
+
+<Image src={MAX_0511} alt=""/>
+
+<Image src={MAX_0513} alt=""/>
+

src/content/photos/bilder-caen-ogrove/index.mdx

@@ -0,0 +1,79 @@
+---
+title: "Bilder Caen-OGrove"
+date: 2017-04-07
+headerImg: "images/Thumb.jpg"
+---
+
+import Image from "@components/Image.astro"
+import SoulacSurMer01 from "./images/SoulacSurMer_01.jpg"
+import UntitledChairs1 from "./images/Untitled_Chairs1.jpg"
+import Untitled_Panorama10 from "./images/Untitled_Panorama10.jpg"
+
+<Image src={SoulacSurMer01} alt=""/>
+
+Ein verlassenes Haus in der Nähe von Sourlac-Sur-Mer, viele Häuser wurden in den Siebziger für Touristen gebaut aber da das Meer sich jedes Jahr Meter für Meter Land zurück holt wurden viele Häuser in der Gegend verlassen.
+
+<Image src={UntitledChairs1} alt=""/>
+
+Ich weiß nicht mehr genau wo das Bild entstanden ist, aber die Landspitze war nur über eine kleine Straße zu erreichen, die ich eher durch Zufall entdeckt habe, und überall waren so kleine "Miniinstallationen"
+
+<Image src={Untitled_Panorama10} alt=""/>
+
+Ich fand die Fassade amüsierend, da sie offensichtlich gedacht ist um dem Kohlekraftwerk ein freundlicheres Gesicht zu geben, aber meiner Meinung sieht es dadurch viel mehr wie der Hauptsitz eines Superbösewicht aus. Gefunden habe ich es eher durch Zufall auf einer meiner kleineren "Abkürzungen".
+
+<Image src={Zumaia_01} alt=""/>
+
+Zumaia in Spanien, die Felsformation heißt Flysch und angeblich können Geologen hier das Aussterben der durch einen Meteorit begründen, und die Erderwärmung in ganz großen Masstab verfolgen. Außerdem soll hier das Intro für die neue Staffel Game of Thrones gedreht worden sein.
+
+import Zumaia_01 from "./images/Zumaia_01.jpg";
+import HameuxDeLaMer_04 from "./images/HameuxDeLaMer_04.jpg";
+import Barqueiro_01 from "./images/Barqueiro_01.jpg";
+import untitled_panorama1 from "./images/untitled_panorama1.jpg";
+import untitled_panorama5 from "./images/untitled_panorama5.jpg";
+import pointedupenhir_02 from "./images/pointedupenhir_02.jpg";
+import Lannion_01 from "./images/Lannion_01.jpg";
+import untitled_panorama2 from "./images/untitled_panorama2.jpg";
+import HameuxDeLaMer_03 from "./images/HameuxDeLaMer_03.jpg";
+import PointeDuPenhir_01 from "./images/PointeDuPenhir_01.jpg";
+import RandomHotel from "./images/RandomHotel.jpg";
+
+<Image src={HameuxDeLaMer_04} alt=""/>
+
+Eigentlich gehört das Foto eher in den letzten Blogbeitrag aber irgendwie habe ich es damals nicht dazugefügt. Die Nachbearbeitung ist sehr von dem MadMax Grading inspiriert. Der Ort ist Les Hameux de la Mer ein super schöner Ort.
+
+<Image src={Barqueiro_01} alt=""/>
+
+Barqueiro, super schöne Gegend, dichte Eukalyptuswälder, die Straßen wurden irgendwie von der EU runderneuert und es ist ein absolutes Vergnügen auf ihnen durch die Hügel zu fahren.
+
+<Image src={untitled_panorama1} alt=""/>
+
+Pointe du Penhir, ja ich denke ich es reicht jetzt langsam auch mit den Klippenbildern. Super super Windig.
+
+<Image src={untitled_panorama5} alt=""/>
+
+Saint Michel Chef Chef, ja der Ort heißt so ist kein Schreibfehler das Bild ist eher so lala, aber ich fand diese Fischerhütten super spannend.
+
+<Image src={pointedupenhir_02} alt=""/>
+
+Pointe du Penhir die Zweite, ich denke der Ford verdient neben den schönen Landschaften auch nen bisschen Beachtung. Falls einer von Ford dass hier ließt ich würde auch zu nem Sponsoring nicht nein sagen ;)
+
+<Image src={Lannion_01} alt=""/>
+
+Lannion, super schöner Ort, ich glaube relativ reiche Gegend. Das Foto hat irgendwie was träumerisches obwohl ich es kaum nachbearbeitet habe.
+
+<Image src={untitled_panorama2} alt=""/>
+
+Pointe du Penhir die Dritte, von der spezifischen Klippe sogar das zweite Bild, man beachte Mann mit Hund.
+
+<Image src={HameuxDeLaMer_03} alt=""/>
+
+Hameux de la Mer.
+
+<Image src={PointeDuPenhir_01} alt=""/>
+
+Pointe du Penhir.
+
+<Image src={RandomHotel} alt=""/>
+
+Hotel das aussieht als ob es aus einer anderen Zeit kommt. Frankreich, Laxe
+

src/content/photos/bilder-duenkirchen-bolougne-sur-mer/index.mdx

@@ -0,0 +1,38 @@
+---
+title: "Bilder Dünkirchen-Bolougne Sur-Mer"
+date: 2017-03-24
+headerImg: "images/Blogs.jpg"
+---
+import Image from "@components/Image.astro"
+import gris_nez_01 from "./images/gris-nez_01.jpg"
+import Gris_Nez_02 from "./images/Gris-Nez_02.jpg"
+import Gris_Nez_Klippen_01 from "./images/Gris-Nez_Klippen_01.jpg"
+import Gris_Nez_Klippen_02 from "./images/Gris-Nez_Klippen_02.jpg"
+import Audresselles_01 from "./images/audresselles_01.jpg"
+import Audresselles_03 from "./images/Audresselles_03.jpg";
+import Wimereux from "./images/Wimereux.jpg";
+
+So, es gibt jetzt erst mal nen klassischen Blogbeitrag, da mein Laptop nicht mit AfterEffects klarkommt (Ich weiß das Effects in AE steht dafür dass das Programm für Effekte gedacht ist und nicht zum Video schneiden, schon klar). Die erste Nacht habe ich in Dünkirchen gepennt, ich würde sagen für die erste Nacht wars ganz okay. Nach Dünkirchen bin ich die Küste runter Richtung Süden gefahren. Über Calais bis nach Wimereux, Calais ist keine klassische schöne Stadt, aber ich mag den industriellen Hafenflair. Sobald man aus Calais raus ist wird die Landschaft viel schöner. Vor allem Gris-Nez ist ein superschöner Ort, direkt an der Küste in einem Tal, und auf dem Hügel darüber thront ein 10 Meter großer Obelisk, der an die größte Artillerie der Nazis erinnert.
+
+<Image src={gris_nez_01} alt=""/>
+
+<Image src={Gris_Nez_02} alt=""/>
+
+Besonders die Küste ist sehr malerisch, der Strand scheint sich zu beiden Seite bis ins Unendliche zu erstrecken, und durch die diesige Luft an dem Tag wurde das nur verstärkt wurde.
+
+<Image src={ Gris_Nez_Klippen_01 } alt=""/>
+
+<Image src={ Gris_Nez_Klippen_02 } alt=""/>
+
+Nach Gris-Nez kam Audresselles ein Postkartenmotivörtchen.
+
+<Image src={ Audresselles_01 } alt=""/>
+
+<Image src={ Audresselles_03 } alt=""/>
+
+Übernachtet habe ich in Wimereux auf dem Camping Municipale de' Olymp, Wimereux ist ein unscheinbarer Ort dessen einzige Besonderheit der breite Fluss ist der die Stadt teilt und von zahlreichen Brücken überspannt ist.
+
+<Image src={ Wimereux } alt=""/>
+
+Heute bin ich bis nach Touquet-Paris-Plage gekommen, wo ich gerade im Mäckes sitze und das hier tippe. Das Wetter, was die letzten paar Tage diesig und frisch war ist warm geworden, und die Sonne ist super angenehm.
+

src/content/photos/cologne-spring/index.mdx

@@ -0,0 +1,21 @@
+---
+title: "Cologne Spring"
+date: 2020-14-04
+headerImg: "images/Unbenanntes_Panorama4.jpg"
+---
+
+import Image from "@components/Image.astro";
+import Unbenanntes_Panorama0 from "./images/Unbenanntes_Panorama1.jpg";
+import Unbenanntes_Panorama2 from "./images/Unbenanntes_Panorama2.jpg";
+import Unbenanntes_Panorama3 from "./images/Unbenanntes_Panorama3.jpg";
+import Unbenanntes_Panorama4 from "./images/Unbenanntes_Panorama4.jpg";
+import Unbenanntes_Panorama6 from "./images/Unbenanntes_Panorama6.jpg";
+
+Some pictures in the first spring i had in cologne.
+
+<Image src={ Unbenanntes_Panorama0 } alt=""/>
+<Image src={ Unbenanntes_Panorama2 } alt=""/>
+<Image src={ Unbenanntes_Panorama3 } alt=""/>
+<Image src={ Unbenanntes_Panorama4 } alt=""/>
+<Image src={ Unbenanntes_Panorama6 } alt=""/>
+