From 712212c42008c5db100c816e73c9b43ae3e8880a Mon Sep 17 00:00:00 2001
From: Dominik Strangas <dominik.strangas@adabay.rocks>
Date: Fri, 11 Aug 2023 00:03:01 +0200
Subject: [PATCH] alskdjf

---
 src/components/Navigation.tsx         |  12 +-
 src/components/partials/Button.astro  |   4 -
 src/components/partials/Button.tsx    |  54 ++++++
 src/components/partials/StoryItem.tsx |  14 ++
 src/env.d.ts                          |   1 +
 src/pages/impress.astro               |   0
 src/pages/index.astro                 | 233 ++------------------------
 src/pages/mystory.astro               |   0
 src/pages/products.astro              |   0
 src/pages/projects.astro              |   0
 src/pages/skills.astro                |   0
 src/views/AboutMe.astro               |  50 ++++++
 src/views/Footer.astro                |   8 +
 src/views/LandingHero.astro           |  22 +++
 src/views/Products.astro              |  67 ++++++++
 src/views/Projects.astro              |  77 +++++++++
 16 files changed, 320 insertions(+), 222 deletions(-)
 delete mode 100644 src/components/partials/Button.astro
 create mode 100644 src/components/partials/Button.tsx
 create mode 100644 src/components/partials/StoryItem.tsx
 create mode 100644 src/pages/impress.astro
 create mode 100644 src/pages/mystory.astro
 create mode 100644 src/pages/products.astro
 create mode 100644 src/pages/projects.astro
 create mode 100644 src/pages/skills.astro
 create mode 100644 src/views/AboutMe.astro
 create mode 100644 src/views/Footer.astro
 create mode 100644 src/views/LandingHero.astro
 create mode 100644 src/views/Products.astro
 create mode 100644 src/views/Projects.astro

diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx
index 62e3d63..0371771 100644
--- a/src/components/Navigation.tsx
+++ b/src/components/Navigation.tsx
@@ -8,14 +8,18 @@ export const Navigation = () => {
   return (
     <>
       <Show when={mobileNav()}>
-        <div class={`fixed transition-all z-30 h-screen w-screen bg-zinc-900`}>
+        <div class={`fixed transition-all z-30 h-screen w-screen bg-zinc-900 flex flex-col`}>
           <div class="w-screen border-b-2 border-b-zinc-50 h-14 bg-zinc-900 flex items-center">
             <button class="h-full w-auto aspect-square hover:bg-zinc-700" onclick={() => showMobileNav(false)}>
               <img class="ml-4 h-5 w-5" src="/img/x.svg" alt="" />
             </button>
           </div>
-          <div class="h-full flex justify-center items-center">
+          <div class="flex-1 flex justify-center items-center">
             <div class="h-1/3 items-center my-auto text-zinc-50  flex flex-col font-mono font-bold text-3xl justify-around">
+              <a class="hover:underline transition-all hover:text-zinc-50" href="/">
+                Home
+              </a>
+              
               <a class="hover:underline transition-all hover:text-zinc-50" href="/projects">
                 Projekte
               </a>
@@ -38,6 +42,10 @@ export const Navigation = () => {
         </button>
       </nav>
       <nav class="max-md:hidden h-14 w-screen  bg-emerald-500 text-zinc-900 font-mono text-xl flex justify-around items-center font-bold">
+        <a class="hover:underline transition-all hover:text-zinc-50" href="/">
+          Home
+        </a>
+        
         <a class="hover:underline transition-all hover:text-zinc-50" href="/projects">
           Projekte
         </a>
diff --git a/src/components/partials/Button.astro b/src/components/partials/Button.astro
deleted file mode 100644
index 8d92cb9..0000000
--- a/src/components/partials/Button.astro
+++ /dev/null
@@ -1,4 +0,0 @@
----
-let link: string
-let action: ()=>{}
----
\ No newline at end of file
diff --git a/src/components/partials/Button.tsx b/src/components/partials/Button.tsx
new file mode 100644
index 0000000..924ecb2
--- /dev/null
+++ b/src/components/partials/Button.tsx
@@ -0,0 +1,54 @@
+import { Show, createSignal } from "solid-js"
+
+type ButtonProps = {
+    link?: string,
+    action?: () => void,
+    disabled?: boolean,
+    text: string,
+    encryptedMail?: string
+}
+
+const [showHint, setShowHint] = createSignal(false)
+
+const executeThenHref = async (action: ()=>void, link: string) => {
+    await action()
+    window.location.href = link
+}
+
+const routeToEncryptedMail = (mail: string) => {
+    location.href = `mailto:${atob(mail)}`;
+    setTimeout(() => {
+        setShowHint(true)
+    }, 2000);
+}
+
+
+export const Button = (props: ButtonProps) => {
+    return (
+        <>
+            <Show when={props.link}>
+                <a href={props.link} class={`col-span-2 w-full h-16 text-center items-center text-xl justify-center shadow-md shadow-zinc-500 border-none bg-emerald-400 transition-all hover:bg-emerald-500 px-2 py-1 rounded-lg flex`}>
+                    {props.text}
+                </a>
+            </Show>
+            <Show when={props.action}>
+                <button onclick={()=>props.action} class={`col-span-2 w-full h-16 text-center items-center text-xl justify-center shadow-md shadow-zinc-500 border-none bg-emerald-400 transition-all hover:bg-emerald-500 px-2 py-1 rounded-lg flex`}>
+                    {props.text}
+                </button>
+            </Show>
+            <Show when={props.action && props.link}>
+                <button onclick={()=>executeThenHref(props.action, props.link)} class={`col-span-2 w-full h-16 text-center items-center text-xl justify-center shadow-md shadow-zinc-500 border-none bg-emerald-400 transition-all hover:bg-emerald-500 px-2 py-1 rounded-lg flex`}>
+                    {props.text}
+                </button>
+            </Show>
+            <Show when={props.encryptedMail}>
+                <button onclick={()=>routeToEncryptedMail(props.encryptedMail)} class={`col-span-2 w-full h-16 text-center items-center text-xl justify-center shadow-md border-none bg-emerald-400 transition-all hover:bg-emerald-500 px-2 py-1 rounded-lg flex`}>
+                    {props.text}
+                </button>
+                <Show when={showHint()}>
+                    <p class="text-zinc-50 text-left mt-5">E-Mail App öffnet sich nicht? Hier die E-Mail adresse: <span class="mt-2 text-emerald-200">{atob(props.encryptedMail)}</span></p>
+                </Show>
+            </Show>
+        </>
+    )
+}
\ No newline at end of file
diff --git a/src/components/partials/StoryItem.tsx b/src/components/partials/StoryItem.tsx
new file mode 100644
index 0000000..660168e
--- /dev/null
+++ b/src/components/partials/StoryItem.tsx
@@ -0,0 +1,14 @@
+type StoryItemProps = {
+    index: number,
+    epochTime: string,
+    epochTitle: string,
+    epochDescription: string
+}
+
+const StoryItem = (props: StoryItemProps) => {
+    return (
+        <div>
+
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/src/env.d.ts b/src/env.d.ts
index f964fe0..6d1a068 100644
--- a/src/env.d.ts
+++ b/src/env.d.ts
@@ -1 +1,2 @@
 /// <reference types="astro/client" />
+
diff --git a/src/pages/impress.astro b/src/pages/impress.astro
new file mode 100644
index 0000000..e69de29
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 38690b4..ea3c619 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,75 +1,13 @@
 ---
 import "../styles/global.css";
-import { Navigation } from "../components/Navigation.tsx";
+import { Navigation } from "../components/Navigation";
 import { ClientLink } from "../components/partials/ClientLink";
-
-export type Project = { title: string; icon: string; text: string };
-
-const projects: Project[] = [
-  {
-    icon: "/img/layers.svg",
-    title: "ColrJS",
-    text: "Farbpaletten aus Bildern extrahieren."
-  },
-  {
-    icon: "/img/layers.svg",
-    title: "ColrJS",
-    text: "Farbpaletten aus Bildern extrahieren."
-  },
-  {
-    icon: "/img/layers.svg",
-    title: "ColrJS",
-    text: "Farbpaletten aus Bildern extrahieren."
-  },
-  {
-    icon: "/img/layers.svg",
-    title: "ColrJS",
-    text: "Farbpaletten aus Bildern extrahieren."
-  },
-  {
-    icon: "/img/layers.svg",
-    title: "ColrJS",
-    text: "Farbpaletten aus Bildern extrahieren."
-  },
-  {
-    icon: "/img/layers.svg",
-    title: "ColrJS",
-    text: "Farbpaletten aus Bildern extrahieren."
-  }
-];
-
-const products: Project[] = [
-  {
-    icon: "/img/layers.svg",
-    title: "ColrJS",
-    text: "Farbpaletten aus Bildern extrahieren."
-  },
-  {
-    icon: "/img/layers.svg",
-    title: "ColrJS",
-    text: "Farbpaletten aus Bildern extrahieren."
-  },
-  {
-    icon: "/img/layers.svg",
-    title: "ColrJS",
-    text: "Farbpaletten aus Bildern extrahieren."
-  },
-  {
-    icon: "/img/layers.svg",
-    title: "ColrJS",
-    text: "Farbpaletten aus Bildern extrahieren."
-  },
-  {
-    icon: "/img/layers.svg",
-    title: "ColrJS",
-    text: "Farbpaletten aus Bildern extrahieren."
-  },
-  {
-    icon: "/img/layers.svg",
-    title: "ColrJS",
-    text: "Farbpaletten aus Bildern extrahieren."
-  }
-];
+import { Button } from "../components/partials/Button"
+import Projects from "../views/Projects.astro" 
+import AboutMe from "../views/AboutMe.astro"
+import Products from "../views/Products.astro"
+import LandingHero from "../views/LandingHero.astro"
+import Footer from "../views/Footer.astro"
 
 const encryptedMail = btoa('dominik@oceanwave018.de')
 ---
@@ -85,158 +23,21 @@ const encryptedMail = btoa('dominik@oceanwave018.de')
   </head>
   <body class="bg-zinc-900 text-zinc-100">
     <Navigation client:load />
-    <div id="whoami" class="w-full h-fit min-h-[66vh] flex justify-center items-center flex-col py-5">
-      <div class="w-5/6 flex-1 flex flex-col md:flex-row justify-center items-center gap-6">
-        <div class="w-full flex flex-col items-center gap-3">
-          <div
-            class="flex justify-center items-center w-3/5 border-4 border-emerald-500 aspect-square rounded-2xl overflow-hidden"
-          >
-            <img class="aspect-square object-contain w-full" src="/img/me.jpg" alt="" />
-          </div>
-          <p class="text-2xl">Das bin ich!</p>
-        </div>
-        <div class="flex flex-col gap-1 max-md:items-center text-center md:text-left md:text-2xl w-full">
-          <p class="md:text-3xl md:underline">Hi, ich bin Dominik</p>
-          <p>
-            Ein <span class="text-emerald-300">Full-Stack</span> Web-Developer aus München
-          </p>
-          <p>
-            <span class="text-emerald-300">Toll</span> das du da bist, endecke gerne meinen Kosmos! &#128640;
-          </p>
-        </div>
-      </div>
-      <img class="animate-bounce h-7 sm:hidden" src="/img/arrowDown.svg" alt="" />
-    </div>
-    <section class="py-5 w-screen h-[66vh] bg-zinc-50 text-zinc-900">
-      <div class="w-5/6 flex flex-col justify-around items-center h-full mx-auto gap-2">
-        <p class="text-2xl underline">Meine Projekte</p>
-        <div
-          class="max-sm:flex-1 border-2 sm:grid sm:grid-cols-2 sm:gap-4 sm:grid-rows-1 py-3 justify-around flex flex-col rounded-2xl border-zinc-900 border-dashed overflow-hidden px-3"
-        >
-          {
-            projects.slice(0, 4).map((project, i) => {
-              return (
-                <div
-                  class={`sm:flex-col sm:justify-center sm:items-center sm:h-auto h-1/5 flex justify-between sm:py-3 ${
-                    i % 2 === 0 ? "flex-row-reverse bg-emerald-200" : "flex-row bg-zinc-900 text-zinc-100"
-                  }  rounded-lg px-2 py-2 gap-5`}
-                >
-                  <div class="max-sm:flex-1 min-w-[2.5rem] flex justify-center">
-                    <img
-                      class={`w-10 ${i % 2 === 0 ? "" : "invert"}`}
-                      src={project.icon}
-                      alt={`img of ${project.icon}`}
-                    />
-                  </div>
-                  <div class="flex flex-col justify-center">
-                    <p class="text-lg sm:text-center">{project.title}</p>
-                    <p class="text-sm sm:text-center">{project.text}</p>
-                  </div>
-                </div>
-              );
-            })
-          }
-          <div class="col-span-2 flex justify-center">
-          <a
-            href="/projects"
-            class={`col-span-2 w-52 h-16 text-center  items-center text-xl justify-center border-2 shadow-md shadow-zinc-500 border-none bg-emerald-400 transition-all hover:bg-emerald-500 px-2 py-1 rounded-lg flex`}
-          >
-            Mehr
-          </a>
-        </div>
-        </div>
-      </div>
-    </section>
-    <section class="py-5 w-screen max-sm:min-h-[66vh] bg-zinc-900 text-zinc-50">
-      <div class="w-5/6 flex flex-col justify-around items-center h-full mx-auto gap-2">
-        <p class="text-2xl underline">Mehr zu mir</p>
-        <div
-          class="max-sm:flex-1 sm:justify-center sm:items-center sm:grid sm:grid-cols-2 sm:gap-4 sm:grid-rows-1 py-3 justify-around flex flex-col gap-5 w-full overflow-hidden px-3"
-        >
-          <div class="p-4 sm:flex-1 sm:flex sm:flex-col sm:items-center">
-            <p class="text-lg underline">Meine Skills</p>
-            <ul class="ml-1.5 py-4 gap-5">
-              <li><img src="" alt="" /><p>- Fullstack Web-entwicklung</p></li>
-              <li><img src="" alt="" /><p>- SEO</p></li>
-              <li><img src="" alt="" /><p>- Web-App Deployment</p></li>
-            </ul>
-            <a class="underline text-emerald-300 visited:text-purple-300" href="/skills" class="underline">Siehe alle</a
-            >
-          </div>
-          <div class="w-full border border-dashed border-emerald-300 sm:hidden"></div>
-          <div class="p-4 flex flex-col gap-4 sm:flex-1 sm:flex sm:flex-col sm:items-center">
-            <p class="flex gap-2 flex-col text-lg underline">Mein Werdegang</p>
-            <div class="flex gap-2 flex-col">
-              <p>
-                Ausbildung bei <a
-                  target="_blank"
-                  href="https://adabay.rocks"
-                  class="underline text-emerald-300 visited:text-purple-300">adabay</a
-                > und der BSInfo. <span class="text-zinc-300 font-mono">2020-2023</span>
-              </p>
-              <p>
-                Übernahme bei <a
-                  target="_blank"
-                  href="https://adabay.rocks"
-                  class="underline text-emerald-300 visited:text-purple-300">adabay.</a
-                ><span class="text-zinc-300 font-mono"> 2023</span>
-              </p>
-              <p>
-                Angestellt als Technical Consultant bei <a
-                  target="_blank"
-                  href="https://adabay.rocks"
-                  class="underline text-emerald-300 visited:text-purple-300">adabay</a
-                >
-                <span class="text-zinc-300 font-mono">seit 07/2023</span>.
-              </p>
-            </div>
-            <a href="mystory" class="underline text-emerald-300 visited:text-purple-300" class="underline"
-              >Meine vollständige Geschichte</a
-            >
-          </div>
-        </div>
-      </div>
-    </section>
+    <LandingHero />
+    <Projects />
+    <AboutMe />
     <section class="w-screen h-28 bg-emerald-500 text-zinc-900 flex flex-col justify-center items-center gap-4">
       <p class="text-2xl text-center w-full">Services und Produkte</p>
-      <img class="animate-bounce h-7 sm:hidden" src="/img/arrowDownDark.svg" alt="" />
+      <img class="animate-bounce h-7 w-7" src="/img/arrowDownDark.svg" alt="arrowDark" />
     </section>
-    <section class="py-5 w-screen bg-zinc-50 text-zinc-900 flex flex-col items-center">
-      <div class="w-5/6 flex flex-col p-4 gap-4">
-        <p class="text-xl text-center">Willkommen an der Bar! &#127864;</p>
-        <p class="text-sm text-center">Was darfs denn heute sein?</p>
-        <div class="gap-3 grid grid-cols-1 grid-rows-2  rounded-xl b flex-1 mt-3 sm:grid-cols-3">
-          {
-            products.slice(0, 4).map((product, i) => {
-              return (
-                <div
-                  class={`sm:flex-col h-auto flex items-center px-3 py-2 gap-4 w-full rounded-lg ${
-                    i % 2 === 0 ? "bg-emerald-500 text-zinc-900 flex-row" : "bg-zinc-900 text-zinc-100 flex-row-reverse"
-                  }`}
-                >
-                  <img class={`h-8 sm:h-12 ${i % 2 == 0 ? "" : "invert"}`} src={product.icon} alt="" />
-                  <div class="flex-1">
-                    <p class="text-lg sm:text-center">{product.title}</p>
-                    <p class="sm:text-center">{product.text}</p>
-                  </div>
-                </div>
-              );
-            })
-          }
-        </div>
-        <a
-          href="/products"
-          class={`mx-auto col-span-2 w-52 h-16 text-center justify-center items-center text-xl border-2 shadow-md shadow-zinc-500 border-none transition-all bg-emerald-400 hover:bg-emerald-500 px-2 py-1 rounded-lg flex`}
-
-        >
-          Mehr
-        </a>
-      </div>
-    </section>
-    <section class="py-10 w-screen gap-5  bg-zinc-900 text-zinc-50 flex flex-col items-center">
+    <Products />
+    <section class="py-10 w-screen gap-5 transition-all bg-zinc-900 text-zinc-50 flex flex-col items-center">
       <p class="text-3xl text-emerald-500">Interesse geweckt?</p>
       <p class="text-xl">Lass mir doch eine Nachricht da!</p>
-        <ClientLink client:load mail={encryptedMail} text="E-Mail schreiben"/>
+      <div class="w-52 text-zinc-900">
+        <Button client:load encryptedMail={encryptedMail} text="E-Mail schreiben"/>
+      </div>      
     </section>
+    <Footer />
   </body>
 </html>
diff --git a/src/pages/mystory.astro b/src/pages/mystory.astro
new file mode 100644
index 0000000..e69de29
diff --git a/src/pages/products.astro b/src/pages/products.astro
new file mode 100644
index 0000000..e69de29
diff --git a/src/pages/projects.astro b/src/pages/projects.astro
new file mode 100644
index 0000000..e69de29
diff --git a/src/pages/skills.astro b/src/pages/skills.astro
new file mode 100644
index 0000000..e69de29
diff --git a/src/views/AboutMe.astro b/src/views/AboutMe.astro
new file mode 100644
index 0000000..c8bb7df
--- /dev/null
+++ b/src/views/AboutMe.astro
@@ -0,0 +1,50 @@
+<section class="py-5 w-screen max-sm:min-h-[66vh] bg-zinc-900 text-zinc-50">
+    <div class="w-5/6 flex flex-col justify-around items-center h-full mx-auto gap-2">
+      <p class="text-2xl underline">Mehr zu mir</p>
+      <div
+        class="max-sm:flex-1 sm:justify-center sm:items-center sm:grid sm:grid-cols-2 sm:gap-4 sm:grid-rows-1 py-3 justify-around flex flex-col gap-5 w-full overflow-hidden px-3"
+      >
+        <div class="p-4 sm:flex-1 sm:flex sm:flex-col sm:items-center">
+          <p class="text-lg underline">Meine Skills</p>
+          <ul class="ml-1.5 py-4 gap-5">
+            <li><img src="" alt="" /><p>- Fullstack Web-entwicklung</p></li>
+            <li><img src="" alt="" /><p>- SEO</p></li>
+            <li><img src="" alt="" /><p>- Web-App Deployment</p></li>
+          </ul>
+          <a class="underline text-emerald-300 visited:text-purple-300" href="/skills" class="underline">Siehe alle</a
+          >
+        </div>
+        <div class="w-full border border-dashed border-emerald-300 sm:hidden"></div>
+        <div class="p-4 flex flex-col gap-4 sm:flex-1 sm:flex sm:flex-col sm:items-center">
+          <p class="flex gap-2 flex-col text-lg underline">Mein Werdegang</p>
+          <div class="flex gap-2 flex-col">
+            <p>
+              Ausbildung bei <a
+                target="_blank"
+                href="https://adabay.rocks"
+                class="underline text-emerald-300 visited:text-purple-300">adabay</a
+              > und der BSInfo. <span class="text-zinc-300 font-mono">2020-2023</span>
+            </p>
+            <p>
+              Übernahme bei <a
+                target="_blank"
+                href="https://adabay.rocks"
+                class="underline text-emerald-300 visited:text-purple-300">adabay.</a
+              ><span class="text-zinc-300 font-mono"> 2023</span>
+            </p>
+            <p>
+              Angestellt als Technical Consultant bei <a
+                target="_blank"
+                href="https://adabay.rocks"
+                class="underline text-emerald-300 visited:text-purple-300">adabay</a
+              >
+              <span class="text-zinc-300 font-mono">seit 07/2023</span>.
+            </p>
+          </div>
+          <a href="mystory" class="underline text-emerald-300 visited:text-purple-300" class="underline"
+            >Meine vollständige Geschichte</a
+          >
+        </div>
+      </div>
+    </div>
+  </section>
\ No newline at end of file
diff --git a/src/views/Footer.astro b/src/views/Footer.astro
new file mode 100644
index 0000000..9ac7bed
--- /dev/null
+++ b/src/views/Footer.astro
@@ -0,0 +1,8 @@
+---
+let blogUrl = "https://blog.oceanwave018.de"
+---
+
+<section class="py-5 h-20 w-screen border-t-zinc-200 border-t font-mono bg-zinc-900 text-zinc-50 flex flex-row justify-center gap-5 items-center">
+    <a class="hover:underline text-emerald-300" href="/impress">Impressum</a>
+    <a class="hover:underline text-emerald-300" href={blogUrl}>Blog</a>
+</section>
\ No newline at end of file
diff --git a/src/views/LandingHero.astro b/src/views/LandingHero.astro
new file mode 100644
index 0000000..5235902
--- /dev/null
+++ b/src/views/LandingHero.astro
@@ -0,0 +1,22 @@
+<section id="whoami" class="w-full h-fit min-h-[66vh] flex justify-center items-center flex-col py-5">
+    <div class="w-5/6 flex-1 flex flex-col md:flex-row justify-center items-center gap-6">
+      <div class="w-full flex flex-col items-center gap-3">
+        <div
+          class="flex justify-center items-center w-3/5 border-4 border-emerald-500 aspect-square rounded-2xl overflow-hidden"
+        >
+          <img class="aspect-square object-contain w-full" src="/img/me.jpg" alt="" />
+        </div>
+        <p class="text-2xl">Das bin ich!</p>
+      </div>
+      <div class="flex flex-col gap-1 max-md:items-center text-center md:text-left md:text-2xl w-full">
+        <p class="md:text-3xl md:underline">Hi, ich bin Dominik</p>
+        <p>
+          Ein <span class="text-emerald-300">Full-Stack</span> Web-Developer aus München
+        </p>
+        <p>
+          <span class="text-emerald-300">Toll</span> das du da bist, endecke gerne meinen Kosmos! &#128640;
+        </p>
+      </div>
+    </div>
+    <img class="animate-bounce h-7 sm:hidden" src="/img/arrowDown.svg" alt="" />
+  </section>
\ No newline at end of file
diff --git a/src/views/Products.astro b/src/views/Products.astro
new file mode 100644
index 0000000..a3e3e8c
--- /dev/null
+++ b/src/views/Products.astro
@@ -0,0 +1,67 @@
+---import { Button } from "../components/partials/Button";
+
+export type Product = { title: string; icon: string; text: string };
+
+
+const products: Product[] = [
+  {
+    icon: "/img/layers.svg",
+    title: "ColrJS",
+    text: "Farbpaletten aus Bildern extrahieren."
+  },
+  {
+    icon: "/img/layers.svg",
+    title: "ColrJS",
+    text: "Farbpaletten aus Bildern extrahieren."
+  },
+  {
+    icon: "/img/layers.svg",
+    title: "ColrJS",
+    text: "Farbpaletten aus Bildern extrahieren."
+  },
+  {
+    icon: "/img/layers.svg",
+    title: "ColrJS",
+    text: "Farbpaletten aus Bildern extrahieren."
+  },
+  {
+    icon: "/img/layers.svg",
+    title: "ColrJS",
+    text: "Farbpaletten aus Bildern extrahieren."
+  },
+  {
+    icon: "/img/layers.svg",
+    title: "ColrJS",
+    text: "Farbpaletten aus Bildern extrahieren."
+  }
+];
+---
+
+<section class="py-5 w-screen bg-zinc-50 text-zinc-900 flex flex-col items-center">
+    <div class="w-5/6 flex flex-col p-4 gap-4">
+      <p class="text-xl text-center">Willkommen an der Bar! &#127864;</p>
+      <p class="text-sm text-center">Was darfs denn heute sein?</p>
+      <div class="gap-3 grid grid-cols-1 grid-rows-2  rounded-xl b flex-1 mt-3 sm:grid-cols-3">
+        {
+          products.slice(0, 4).map((product, i) => {
+            return (
+              <div
+                class={`sm:flex-col h-auto flex items-center px-3 py-2 gap-4 w-full rounded-lg ${
+                  i % 2 === 0 ? "bg-emerald-400 text-zinc-900 flex-row" : "bg-zinc-900 text-zinc-100 flex-row-reverse"
+                }`}
+              >
+                <img class={`h-8 sm:h-12 ${i % 2 == 0 ? "" : "invert"}`} src={product.icon} alt="" />
+                <div class="flex-1">
+                  <p class="text-lg sm:text-center">{product.title}</p>
+                  <p class="sm:text-center">{product.text}</p>
+                </div>
+              </div>
+            );
+          })
+        }
+      </div>
+      <div class="w-52 mx-auto">
+          <Button link="/projects" text="Mehr" />
+      </div>
+    </div>
+  </section>
\ No newline at end of file
diff --git a/src/views/Projects.astro b/src/views/Projects.astro
new file mode 100644
index 0000000..674b296
--- /dev/null
+++ b/src/views/Projects.astro
@@ -0,0 +1,77 @@
+---
+export type Project = { title: string; icon: string; text: string };
+
+const projects: Project[] = [
+  {
+    icon: "/img/layers.svg",
+    title: "ColrJS",
+    text: "Farbpaletten aus Bildern extrahieren."
+  },
+  {
+    icon: "/img/layers.svg",
+    title: "ColrJS",
+    text: "Farbpaletten aus Bildern extrahieren."
+  },
+  {
+    icon: "/img/layers.svg",
+    title: "ColrJS",
+    text: "Farbpaletten aus Bildern extrahieren."
+  },
+  {
+    icon: "/img/layers.svg",
+    title: "ColrJS",
+    text: "Farbpaletten aus Bildern extrahieren."
+  },
+  {
+    icon: "/img/layers.svg",
+    title: "ColrJS",
+    text: "Farbpaletten aus Bildern extrahieren."
+  },
+  {
+    icon: "/img/layers.svg",
+    title: "ColrJS",
+    text: "Farbpaletten aus Bildern extrahieren."
+  }
+];
+
+import { Button } from "../components/partials/Button"
+---
+
+
+<section class="py-5 w-screen h-[66vh] bg-zinc-50 text-zinc-900">
+    <div class="w-5/6 flex flex-col justify-around items-center h-full mx-auto gap-2">
+      <p class="text-2xl underline">Meine Projekte</p>
+      <div
+        class="max-sm:flex-1 border-2 sm:grid sm:grid-cols-2 sm:gap-4 sm:grid-rows-1 py-3 justify-around flex flex-col rounded-2xl border-zinc-900 border-dashed overflow-hidden px-3"
+      >
+        {
+          projects.slice(0, 4).map((project, i) => {
+            return (
+              <div
+                class={`sm:flex-col sm:justify-center sm:items-center sm:h-auto h-1/5 flex justify-between sm:py-3 ${
+                  i % 2 === 0 ? "flex-row-reverse bg-emerald-400" : "flex-row bg-zinc-900 text-zinc-100"
+                }  rounded-lg px-2 py-2 gap-5`}
+              >
+                <div class="max-sm:flex-1 min-w-[2.5rem] flex justify-center">
+                  <img
+                    class={`w-10 ${i % 2 === 0 ? "" : "invert"}`}
+                    src={project.icon}
+                    alt={`img of ${project.icon}`}
+                  />
+                </div>
+                <div class="flex flex-col justify-center">
+                  <p class="text-lg sm:text-center">{project.title}</p>
+                  <p class="text-sm sm:text-center">{project.text}</p>
+                </div>
+              </div>
+            );
+          })
+        }
+        <div class="col-span-2 flex justify-center">
+        <div class="w-52">
+          <Button link="/projects" text="Mehr" />
+        </div>
+      </div>
+      </div>
+    </div>
+  </section>
\ No newline at end of file