hello

.prettierrc

@@ -3,5 +3,5 @@
     "tabWidth": 2,
     "semi": true,
     "singleQuote": false,
-    "printWidth": 80
+    "printWidth": 120
   }

public/img/arrowDownDark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke="#18181b" fill="none" stroke-linecap="round" stroke-width="1.5" stroke-linejoin="round" stroke-align="center" class="pangolicons pangolicons-arrowDown " ><path  d="M19.69,14.31l-7.69,7.69-7.69-7.69,7.69,7.69V2"/></svg>

public/img/x.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke="#fafafa" fill="none" stroke-linecap="round" stroke-width="1.5" stroke-linejoin="round" stroke-align="center" class="pangolicons pangolicons-x " ><path  d="M2,22L22,2m0,20L2,2"/></svg>

src/components/Navigation.tsx

@@ -1,12 +1,56 @@
+import { Show, createSignal } from "solid-js";
+
+const [mobileNav, showMobileNav] = createSignal(false);
+
+const setShowMobileNav = (val: boolean) => showMobileNav(val);
+
 export const Navigation = () => {
   return (
     <>
+      <Show when={mobileNav()}>
+        <div class={`fixed transition-all z-30 h-screen w-screen bg-zinc-900`}>
+          <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="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="/projects">
+                Projekte
+              </a>
+              <a class="hover:underline transition-all hover:text-zinc-50" href="/products">
+                Produkte
+              </a>
+              <a class="hover:underline transition-all hover:text-zinc-50" href="/mystory">
+                Über Mich
+              </a>
+              <a class="hover:underline transition-all hover:text-zinc-50" href="/skills">
+                Projekte
+              </a>
+            </div>
+          </div>
+        </div>
+      </Show>
       <nav class="md:hidden h-14 w-screen bg-emerald-500 flex items-center">
-        <button>
+        <button onclick={() => setShowMobileNav(true)}>
           <img class="ml-4" src="/img/menu.svg" alt="" />
         </button>
       </nav>
-      <nav class="max-md:hidden h-14 w-screen bg-emerald-500"></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="/projects">
+          Projekte
+        </a>
+        <a class="hover:underline transition-all hover:text-zinc-50" href="/products">
+          Produkte
+        </a>
+        <a class="hover:underline transition-all hover:text-zinc-50" href="/mystory">
+          Über Mich
+        </a>
+        <a class="hover:underline transition-all hover:text-zinc-50" href="/skills">
+          Projekte
+        </a>
+      </nav>
     </>
   );
 };

src/components/partials/ClientLink.tsx

@@ -0,0 +1,12 @@
+export const ClientLink = (props: { mail: string; text: string }) => {
+  const mailTo = () => {
+    console.log(props.mail);
+    location.href = `mailto:${atob(props.mail)}`;
+  };
+
+  return (
+    <div onclick={() => mailTo()} class="cursor-pointer hover:bg-emerald-500 transition-all w-52 h-16 rounded-lg flex items-center justify-center text-zinc-900 text-xl bg-emerald-400">
+      <p >{props.text}</p>
+    </div>
+  );
+};

src/components/partials/NavigationBar.tsx

@@ -1,12 +0,0 @@
-export const NavigationBar = () => {
-    return (
-        <>
-        <nav class="md:hidden h-14 w-screen bg-emerald-500 flex items-center">
-          <button>
-            <img class="ml-4" src="/img/menu.svg" alt="" />
-          </button>
-        </nav>
-        <nav class="max-md:hidden h-14 w-screen bg-emerald-500"></nav>
-      </>
-    )
-}

src/pages/index.astro

@@ -1,19 +1,77 @@
 ---
 import "../styles/global.css";
 import { Navigation } from "../components/Navigation.tsx";
+import { ClientLink } from "../components/partials/ClientLink";
 
-export type Project = {title: string, icon: string, text: string}
+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",
-  {icon: '/img/layers.svg', title: "ColrJS", text:"Farbpaletten aus Bildern extrahieren."},
+    title: "ColrJS",
-  {icon: '/img/layers.svg', title: "ColrJS", text:"Farbpaletten aus Bildern extrahieren."},
+    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."
+  },
+  {
+    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."
+  }
+];
 
+const encryptedMail = btoa('dominik@oceanwave018.de')
 ---
 
 <html lang="en">
@@ -23,65 +81,162 @@ const projects: Project[] = [
     <meta name="viewport" content="width=device-width" />
     <meta name="generator" content={Astro.generator} />
     <title>Dominik - FullStackDev</title>
+
   </head>
   <body class="bg-zinc-900 text-zinc-100">
     <Navigation client:load />
-    <div
+    <div id="whoami" class="w-full h-fit min-h-[66vh] flex justify-center items-center flex-col py-5">
-      id="whoami"
+      <div class="w-5/6 flex-1 flex flex-col md:flex-row justify-center items-center gap-6">
-      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
+            <img class="aspect-square object-contain w-full" src="/img/me.jpg" alt="" />
-              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
+            Ein <span class="text-emerald-300">Full-Stack</span> Web-Developer aus München
-            München
           </p>
           <p>
-            <span class="text-emerald-300">Toll</span> das du da bist, endecke gerne
+            <span class="text-emerald-300">Toll</span> das du da bist, endecke gerne meinen Kosmos! &#128640;
-            meinen Kosmos! &#128640;
           </p>
         </div>
       </div>
       <img class="animate-bounce h-7 sm:hidden" src="/img/arrowDown.svg" alt="" />
     </div>
-    <section
+    <section class="py-5 w-screen h-[66vh] bg-zinc-50 text-zinc-900">
-      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 w-5/6 overflow-hidden px-3">
+        <div
-          {projects.slice(0, 4).map((project, i)=>{
+          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"
-            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">
+            projects.slice(0, 4).map((project, i) => {
-                <img class={`w-10 ${i % 2 === 0 ? '' : 'invert'}`} src={project.icon} alt={`img of ${project.icon}`} /></div>
+              return (
-                <div class="flex flex-col justify-center">
+                <div
-                  <p class="text-lg sm:text-center">{project.title}</p>
+                  class={`sm:flex-col sm:justify-center sm:items-center sm:h-auto h-1/5 flex justify-between sm:py-3 ${
-                  <p class="text-sm sm:text-center" >{project.text}</p>
+                    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>
+              );
-            )
+            })
-          })}
+          }
-          <a href="/projects" class={`col-span-2 text-center justify-center border-2 shadow-md shadow-zinc-500 border-none bg-emerald-200 px-2 py-1 rounded-lg flex` }>
+          <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>
+    <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="" />
+    </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">
+      <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"/>
+    </section>
   </body>
 </html>