so much lol

public/img/align-left.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-align-left"><line x1="17" y1="10" x2="3" y2="10"></line><line x1="21" y1="6" x2="3" y2="6"></line><line x1="21" y1="14" x2="3" y2="14"></line><line x1="17" y1="18" x2="3" y2="18"></line></svg>

src/pages/mystory.astro

@@ -8,20 +8,20 @@ const storyItems: StoryItemType[] = [
   {
     title: "Ctrl-Alt-Grow",
     description:
-      "As a curious kid, I dove headfirst into the world of computers, playing around with code, gaming, and tech wonders, solidifying my enduring passion for all things digital.",
+      "Als neugieriges Kind tauchte ich kopfüber in die Welt der Computer ein, experimentierte mit Computern, spielte und erkundete technische Wunder, wodurch meine anhaltende Leidenschaft für alles Digitale gefestigt wurde.",
     image: "/img/ctrl-alt-grow.png"
   },
   {
     title: "First Code",
     description:
-      "At the age of 13, I penned my first lines of code. Over the following years, I transitioned from crafting Minecraft plugins with Java to entering the world of web development.",
+      "Mit 13 Jahren schrieb ich meine ersten Codezeilen. In den anschließenden Jahren erfolgte der Übergang von der Erstellung von Minecraft-Plugins mit Java zur Webentwicklung.",
     image: "/img/code.png",
     epochTime: "2017 - 2019"
   },
   {
     title: "Apprenticeship",
     description:
-      "During my three-year apprenticeship, I delved into web and backend application development, honing my skills and building a strong foundation in the field.",
+      "Während meiner dreijährigen Ausbildung habe ich mich ausgiebig mit der Entwicklung von Web- und Backend-Anwendungen beschäftigt, um meine Fähigkeiten zu verbessern und einen festen Grund in diesem Bereich zu schaffen.",
     image: "/img/apprenticeship.png",
     epochTime: "2020 - 2023",
     paddingedImage: false
@@ -29,7 +29,7 @@ const storyItems: StoryItemType[] = [
   {
     title: "Coding",
     description:
-      "Now, i'm working professionally at a digital-agency in munich, developing enterprise-level Web-Solutions for small and big companies.",
+      "Jetzt arbeite ich professionell in einer Digitalagentur in München und entwickle mit einem tollen Team Enterprise-Level-Web-Lösungen für kleine und große Unternehmen.",
     image: "/img/work.png",
     epochTime: "since 2023",
     paddingedImage: false

src/pages/products.astro

@@ -0,0 +1,72 @@
+---
+import { Navigation } from "../components/Navigation";
+import Footer from "../views/Footer.astro";
+---
+
+<Navigation />
+<div class="h-screen w-screen flex flex-col">
+  <div class="flex-1 w-screen bg-zinc-900 flex justify-center items-center py-8 px-12">
+    <div class="grid grid-cols-2 grid-rows-3 w-1/2 h-full gap-7">
+      <div
+        class="col-span-1 row-span-2 bg-yellow-300 rounded-2xl transition hover:scale-[1.02] p-6 duration-300 flex flex-col justify-between"
+      >
+        <a target="_blank" class="group" href="https://github.com/ZktSn0w/ColrJS">
+          <p class="text-2xl underline font-bold font-mono group-hover:text-emerald-500 text-emerald-800 transition">
+            Web-Entwicklung
+          </p>
+        </a>
+        <div class="flex flex-col gap-4">
+          <p class="font-mono text-lg break-words">
+            Als Webentwickler nutze ich moderne Frameworks, um erstklassige Websites mit einem herausragenden
+            Nutzererlebnis zu gestalten. Meine Leidenschaft gilt der Schaffung ansprechender Online-Präsenzen.
+          </p>
+          <p class="font-mono text-lg break-words">
+            Gerne unterstütze ich dich dabei, deine Online-Präsenz zu entwickeln.
+          </p>
+        </div>
+
+        <p class="font-mono font-bold text-zinc-700">
+          Colaborated with: <span class="text-emerald-700 underline"
+            ><a target="_blank" href="https://iamsebastian.dev/">IamSebastianDev</a></span
+          >
+        </p>
+      </div>
+      <div
+        class="col-span-1 row-span-1 bg-purple-300 rounded-2xl transition hover:scale-[1.02] p-6 duration-300 flex flex-col justify-between"
+      >
+        <p class="font-mono font-bold text-2xl">Schulungen</p>
+        <p class="font-mono text-lg break-words">
+          Zusätzlich biete ich tolle IT-Schulungen auf Anfrage an, um digitale Kompetenzen zu vermitteln.
+        </p>
+        <p class="ont-mono text-sm break-words">Weitere verwendete Technologien: TailwindCSS, SolidJS</p>
+      </div>
+      <div
+        class="col-span-1 row-start-2 col-start-2 bg-orange-300 rounded-2xl transition hover:scale-[1.02] p-6 duration-300 flex flex-col justify-between"
+      >
+        <div>
+          <p class="font-mono font-bold text-2xl">Server-Deployment</p>
+        </div>
+        <p class="font-mono">
+          Als Spezialist für Server-Deployment und Anwendungsbereitstellung mit Techniken wie Docker sorge ich dafür,
+          dass Anwendungen reibungslos und effizient auf Servern laufen.
+        </p>
+        <p></p>
+      </div>
+      <div
+        class="col-span-2 row-start-3 bg-red-500 rounded-2xl transition hover:scale-[1.02] p-6 duration-300 grid grid-rows-3 grid-cols-1"
+      >
+        <div>
+          <p class="font-mono font-bold text-2xl">WICHTIG!</p>
+        </div>
+        <div>
+          <p class="font-mono text-base">
+            Aktuell bin ich froh ein Teil eines Teams in einer Digital-agentur zu sein, jedoch kann ich dadurch auch
+            einige Dienste nicht als Selbständiger anbieten, trotzdem kannst du dich gerne bei mir melden und ich berate
+            dich dementsprechend.
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+  <Footer />
+</div>

src/pages/projects.astro

@@ -0,0 +1,72 @@
+---
+import { Navigation } from "../components/Navigation";
+import Footer from "../views/Footer.astro";
+---
+
+<Navigation />
+<div class="h-screen w-screen flex flex-col">
+  <div class="flex-1 w-screen bg-zinc-900 flex justify-center items-center py-8 px-12">
+    <div class="grid grid-cols-2 grid-rows-3 w-1/2 h-full gap-7">
+      <div
+        class="col-span-1 row-span-2 bg-purple-300 rounded-2xl transition hover:scale-[1.02] p-6 duration-300 flex flex-col justify-between"
+      >
+        <a target="_blank" class="group" href="https://github.com/ZktSn0w/ColrJS">
+          <p class="text-2xl underline font-bold font-mono group-hover:text-emerald-500 text-emerald-800 transition">
+            ColrJs
+          </p>
+        </a>
+        <div class="flex flex-col gap-4">
+          <p class="font-mono text-lg break-words">
+            Ein schlankes, modernes und erweiterbares Farbpalettenextraktionswerkzeug, das im Browser oder in einem
+            Node.js-Kontext verwendet werden kann.
+          </p>
+          <p class="font-mono text-lg break-words">
+            Dank dieser Bibliothek konnte ich mein Abschlussprojekt während meiner Ausbildung erfolgreich realisieren.
+          </p>
+        </div>
+
+        <p class="font-mono font-bold text-zinc-700">
+          Colaborated with: <span class="text-emerald-700 underline"
+            ><a target="_blank" href="https://iamsebastian.dev/">IamSebastianDev</a></span
+          >
+        </p>
+      </div>
+      <div
+        class="col-span-1 row-span-1 bg-emerald-300 rounded-2xl transition hover:scale-[1.02] p-6 duration-300 flex flex-col justify-between"
+      >
+        <p class="font-mono font-bold text-2xl">Portfolio</p>
+        <p class="font-mono text-lg break-words">
+          Mein Portfolio habe ich dem modernen Framework <span class="text-purple-700 underline font-bold"
+            ><a target="_blank" href="https://astro.build/">Astro</a></span
+          > erstellt, um eine beeindruckende Online-Präsenz zu präsentieren.
+        </p>
+        <p class="ont-mono text-sm break-words">Weitere verwendete Technologien: TailwindCSS, SolidJS</p>
+      </div>
+      <div
+        class="col-span-1 row-start-2 col-start-2 bg-yellow-300 rounded-2xl transition hover:scale-[1.02] p-6 duration-300 flex flex-col justify-between"
+      >
+        <div>
+          <p class="font-mono font-bold text-2xl">SolidJS Component Library</p>
+          <p class="font-mono font-bold text-base text-zinc-500">In Progress...</p>
+        </div>
+        <p class="font-mono">
+          Ich arbeite derzeit an einer Component-Library für SolidJS, um die Entwicklung von Webanwendungen zu
+          optimieren und benutzerfreundlicher zu gestalten.
+        </p>
+        <p></p>
+      </div>
+      <div
+        class="col-span-2 row-start-3 bg-emerald-300 rounded-2xl transition hover:scale-[1.02] p-6 duration-300 grid grid-rows-3 grid-cols-1"
+      >
+        <div>
+          <p class="font-mono font-bold text-2xl">Weitere Projekte</p>
+          <p class="font-mono font-bold text-base text-zinc-500">Soon...</p>
+        </div>
+        <div>
+          <p class="font-mono text-base">Wer weiß, <br />vielleicht kommen bald weitere Projekte dazu &#x1F609;</p>
+        </div>
+      </div>
+    </div>
+  </div>
+  <Footer />
+</div>

src/views/Products.astro

@@ -1,38 +1,23 @@
----import { Button } from "../components/partials/Button";
+---
+import { Button } from "../components/partials/Button";
 
 export type Product = { title: string; icon: string; text: string };
 
-
 const products: Product[] = [
   {
-    icon: "/img/layers.svg",
+    icon: "/img/align-left.svg",
-    title: "ColrJS",
+    title: "Web-Entwicklung",
-    text: "Farbpaletten aus Bildern extrahieren."
+    text: "Entwickeln von Webseiten mit modernen und robusten Technologien."
+  },
+  {
+    icon: "/img/terminal.svg",
+    title: "Server-Deployment",
+    text: "Aufsetzen von Web-Anwendungen sowie weiteren Lösungen in der Cloud oder in ihrem Netzwerk."
   },
   {
     icon: "/img/layers.svg",
-    title: "ColrJS",
+    title: "Und vieles mehr...",
-    text: "Farbpaletten aus Bildern extrahieren."
+    text: "Schreib mir gerne eine kurze Mail mit deinem Anliegen und lass uns gemeinsam eine Lösung finden ;)"
-  },
-  {
-    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."
   }
 ];
 ---
@@ -41,9 +26,9 @@ const products: Product[] = [
   <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">
+    <div class="gap-3 grid grid-cols-1 grid-rows-1 rounded-xl b flex-1 mt-3 sm:grid-cols-3">
       {
-          products.slice(0, 4).map((product, i) => {
+        products.slice(0, 3).map((product, i) => {
           return (
             <div
               class={`sm:flex-col h-auto flex items-center px-3 py-2 gap-4 w-full rounded-lg ${
@@ -61,7 +46,7 @@ const products: Product[] = [
       }
     </div>
     <div class="w-52 mx-auto">
-          <Button link="/projects" text="Mehr" />
+      <Button link="/products" text="Mehr" />
     </div>
   </div>
 </section>

src/views/Projects.astro

@@ -9,35 +9,24 @@ const projects: Project[] = [
   },
   {
     icon: "/img/layers.svg",
-    title: "ColrJS",
+    title: "Portfolio",
-    text: "Farbpaletten aus Bildern extrahieren."
+    text: "Mein Portfolio"
   },
   {
     icon: "/img/layers.svg",
-    title: "ColrJS",
+    title: "SolidJS Komponenten-Bibliothek",
-    text: "Farbpaletten aus Bildern extrahieren."
+    text: "Fertige Komponenten für SolidJS Projekte"
   },
   {
     icon: "/img/layers.svg",
-    title: "ColrJS",
+    title: "Soon...",
-    text: "Farbpaletten aus Bildern extrahieren."
+    text: "Wer weiß, vielleicht kommen bald weitere Projekte dazu."
-  },
-  {
-    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 { 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>
@@ -53,11 +42,7 @@ import { Button } from "../components/partials/Button"
               }  rounded-lg px-2 py-2 gap-5`}
             >
               <div class="max-sm:flex-1 min-w-[2.5rem] flex justify-center">
-                  <img
+                <img class={`w-10 ${i % 2 === 0 ? "" : "invert"}`} src={project.icon} alt={`img of ${project.icon}`} />
-                    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>
@@ -69,7 +54,7 @@ import { Button } from "../components/partials/Button"
       }
       <div class="col-span-2 flex justify-center">
         <div class="w-52">
-          <Button link="/projects" text="Mehr" />
+          <Button link="/projects" text="Mehr Informationen" />
         </div>
       </div>
     </div>