8 files changed, 120 insertions, 0 deletions
diff --git a/src/components/BlogPost.astro b/src/components/BlogPost.astro
new file mode 100644
index 0000000..0070f2b
--- /dev/null
+++ b/src/components/BlogPost.astro
@@ -0,0 +1,14 @@
+---
+const { post } = Astro.props;
+const date: Date = new Date(post.frontmatter.date);
+---
+
+<a class="block" href={post.url}>
+    <h2>
+        {post.frontmatter.title}<span class="text-xs no-underline">
+            {date.toLocaleDateString("de-DE")}</span
+        >
+    </h2>
+    <p>{post.frontmatter.description}</p>
+    <p class="text-xs">Tags: {post.frontmatter.tags.join(", ")}</p>
+</a>
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
new file mode 100644
index 0000000..f2f265f
--- /dev/null
+++ b/src/components/Footer.astro
@@ -0,0 +1,4 @@
+<footer class="flex justify-center gap-5">
+    <a href="/impressum">Impressum</a>
+    <a href="/datenschutz">Datenschutz</a>
+</footer>
diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
new file mode 100644
index 0000000..ec561bb
--- /dev/null
+++ b/src/components/Navbar.astro
@@ -0,0 +1,20 @@
+---
+import { Image } from "astro:assets";
+import logo from "../../public/logo.png";
+---
+
+<header class="flex justify-between items-center my-2">
+  <a href="/"
+    ><Image
+      loading="eager"
+      src={logo}
+      alt="GTZ Logo"
+      width={50}
+      height={50}
+    /></a
+  >
+  <nav class="flex gap-5">
+    <a href="/projects" class="hover:underline">Projekte</a>
+    <a href="/blog" class="hover:underline">Blog</a>
+  </nav>
+</header>
diff --git a/src/components/ProjectCard.astro b/src/components/ProjectCard.astro
new file mode 100644
index 0000000..a4fa4f7
--- /dev/null
+++ b/src/components/ProjectCard.astro
@@ -0,0 +1,14 @@
+---
+const { projects } = Astro.props;
+---
+
+{
+    projects.map((project: Project) => (
+        <div>
+            <a class="block" href={project.url}>
+                <h2 class="underline underline-offset-2">{project.name}</h2>
+            </a>
+            <p>{project.description}</p>
+        </div>
+    ))
+}
diff --git a/src/components/sections/AboutMe.astro b/src/components/sections/AboutMe.astro
new file mode 100644
index 0000000..234bee2
--- /dev/null
+++ b/src/components/sections/AboutMe.astro
@@ -0,0 +1,11 @@
+---
+
+---
+
+<div>
+  <h2 class="underline underline-offset-3 mb-2">Über mich</h2>
+  <p>
+    Ich bin Leo, 18 Jahre alt und programmiere gerne in Javascript/Typescript.
+    Meine Hobbys sind Schach spielen, Lesen und Chalistenics
+  </p>
+</div>
diff --git a/src/components/sections/Additional.astro b/src/components/sections/Additional.astro
new file mode 100644
index 0000000..6fa8b4a
--- /dev/null
+++ b/src/components/sections/Additional.astro
@@ -0,0 +1,20 @@
+---
+
+---
+
+<div class="mb-5">
+    <p>
+        -> Meine <a href="/projects" class="underline">Projekte</a>
+    </p>
+    <p>
+        -> Mein <a href="/blog" class="underline">Blog</a>
+    </p>
+    <p>
+        -> Git: <a href="https://git.leogtz.de" class="underline"
+            >git.leogtz.de</a
+        >
+    </p>
+    <p>
+        -> Email: <span class="underline">me [at] leogtz.de</span>
+    </p>
+</div>
diff --git a/src/components/sections/Hero.astro b/src/components/sections/Hero.astro
new file mode 100644
index 0000000..76f8011
--- /dev/null
+++ b/src/components/sections/Hero.astro
@@ -0,0 +1,18 @@
+---
+import pfp from "../../../public/leo.png";
+import { Image } from "astro:assets";
+---
+
+<div class="flex flex-col sm:flex-row items-center mt-2 gap-5">
+  <Image
+    src={pfp}
+    alt="leos profilbild (ein pixel charakter)"
+    }
+    class="rounded-full"
+    loading="eager"
+  />
+  <div class="text-center sm:text-start">
+    <h1 class="text-2xl">Leo Götz</h1>
+    <p>Webentwickler</p>
+  </div>
+</div>
diff --git a/src/components/sections/TechStack.astro b/src/components/sections/TechStack.astro
new file mode 100644
index 0000000..0b536e1
--- /dev/null
+++ b/src/components/sections/TechStack.astro
@@ -0,0 +1,19 @@
+---
+
+---
+
+<div>
+  <h2 class="underline underline-offset-3 mb-2">Technologien</h2>
+  <p>
+    <a href="https://justfuckingusehtml.com/" class="underline">HTML</a> | <a
+      href="https://justfuckingusecss.com/"
+      class="underline">CSS</a
+    > | JS / TS | Nodejs |
+    <a href="https://justfuckingusereact.com/" class="underline">React</a> | <a
+      href="https://justfuckinguseastro.com/"
+      class="underline">Astro</a
+    > | <a href="https://justfuckingusetailwind.com/" class="underline"
+      >Tailwind</a
+    > | Nix/NixOS
+  </p>
+</div>