feat: add some stuff

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,
 };