feat: mystpry and more

public/img/ArrowMyStory.svg

@@ -0,0 +1,3 @@
+<svg width="491" height="177" viewBox="0 0 491 177" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.5 0C2.29086 0 0.5 1.79086 0.5 4C0.5 6.20914 2.29086 8 4.5 8V0ZM467.5 176.5L490.594 136.5H444.406L467.5 176.5ZM4.5 8H433.5V0H4.5V8ZM463.5 38V140.5H471.5V38H463.5ZM433.5 8C450.069 8 463.5 21.4315 463.5 38H471.5C471.5 17.0132 454.487 0 433.5 0V8Z" fill="#3F3F46"/>
+</svg>

public/img/L-To-R.svg

@@ -0,0 +1,3 @@
+<svg width="460" height="176" viewBox="0 0 460 176" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 0C1.79086 0 0 1.79086 0 4C0 6.20914 1.79086 8 4 8V0ZM436 176L459.094 136H412.906L436 176ZM4 8H402V0H4V8ZM432 38V140H440V38H432ZM402 8C418.569 8 432 21.4315 432 38H440C440 17.0132 422.987 0 402 0V8Z" fill="#3F3F46"/>
+</svg>

public/img/R-To-L.svg

@@ -0,0 +1,3 @@
+<svg width="460" height="176" viewBox="0 0 460 176" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M456 0C458.209 0 460 1.79086 460 4C460 6.20914 458.209 8 456 8V0ZM24 176L0.906003 136H47.094L24 176ZM456 8H58V0H456V8ZM28 38V140H20V38H28ZM58 8C41.4315 8 28 21.4315 28 38H20C20 17.0132 37.0132 0 58 0V8Z" fill="#3F3F46"/>
+</svg>

src/components/Navigation.tsx

@@ -26,7 +26,7 @@ export const Navigation = () => {
               <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">
+              <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">
@@ -56,7 +56,7 @@ export const Navigation = () => {
           Über Mich
         </a>
         <a class="hover:underline transition-all hover:text-zinc-50" href="/skills">
-        Skills
+          Skills
         </a>
       </nav>
     </>

src/components/StoryItems.tsx

@@ -0,0 +1,22 @@
+import { For } from "solid-js";
+import { StoryItem, StoryItemType } from "./partials/StoryItem";
+
+
+
+type StoryItemsProps = {
+    storyItems: StoryItemType[]
+}
+
+export const StoryItems = (props: StoryItemsProps) => {
+
+    return (
+        <div class="w-full grid grid-cols-1 gap-5 xl:grid-cols-2">
+            <For each={props.storyItems}>{(item, index) =>
+                <StoryItem item={item} mirrored={index() % 2 === 0} />
+            }</For>
+        </div>
+    )
+
+
+
+}

src/components/partials/StoryItem.tsx

@@ -1,14 +1,32 @@
+export type StoryItemType = {
+    title: string;
+    description: string;
+    image: string;
+    epochTime?: string,
+    epochTitle?: string,
+    epochDescription?: string
+};
+
+
 type StoryItemProps = {
-    index: number,
-    epochTime: string,
-    epochTitle: string,
-    epochDescription: string
+    mirrored?: boolean,
+    item: StoryItemType
 }
 
-const StoryItem = (props: StoryItemProps) => {
+export const StoryItem = (props: StoryItemProps) => {
     return (
-        <div>
+        <div class="p-6 group inline-block w-full relative">
+            <div class="h-44 delay-75 flex flex-col justify-between group-hover:scale-[1.01] transition-all shadow-md shadow-gray-400 border-2 border-zinc-800 rounded-md p-3">
+                <div>
+                    <p class="text-lg font-bold">{props.item.title}</p>
+                    <p class="w-1/2">{props.item.description}</p>
+                </div>
+                {props.item.epochTime && <p class="font-mono text-zinc-500 font-bold">{props.item.epochTime}</p>}
 
+            </div>
+            <div class="shadow-md delay-75 group-hover:scale-105 transition-all overflow-hidden flex justify-center shadow-gray-500 right-2 top-1 bg-gradient-to-br from-emerald-600 to-emerald-500 w-3/12 h-2/3 absolute">
+                {props.item.image && <img class="h-auto w-full opacity-70 object-cover" src={props.item.image} alt="" />}
+            </div>
         </div>
     )
 }

src/pages/mystory.astro

@@ -1,23 +1,36 @@
 ---
 import { Navigation } from "../components/Navigation";
+import { StoryItems } from "../components/StoryItems";
+import { StoryItemType } from "../components/partials/StoryItem";
 import Footer from "../views/Footer.astro";
 
-type StoryItem = {
-    title: string,
-    description: string,
-    image: string,
-}
-
-
-const StoryItems: StoryItem[] = [
-    {title: "Pre-Work", description:"", image:""}
-]
-
+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.",
+    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.",
+    image: "",
+    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.",
+    image: "",
+    epochTime: "2020 - 2023"
+  }
+];
 ---
 
-
 <Navigation />
-<div class="min-h-screen w-screen p-10 bg-zinc-100 ">
-<h1 class="text-4xl font-bold ">Meine Geschichte</h1>
+<div class="min-h-screen w-screen p-10 bg-zinc-100">
+  <h1 class="text-4xl font-bold">Meine Geschichte</h1>
+  <StoryItems client:load storyItems={storyItems} />
 </div>
 <Footer />