---
import { Navigation } from "../components/Navigation";
import { StoryItems } from "../components/StoryItems";
import { StoryItemType } from "../components/partials/StoryItem";
import PageLayout from "../layouts/PageLayout.astro";
import Footer from "../views/Footer.astro";

const storyItems: StoryItemType[] = [
  {
    title: "Ctrl-Alt-Grow",
    description:
      "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:
      "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 Full-Stack Webentwicklung.",
    image: "/img/code.png",
    epochTime: "2017 - 2019"
  },
  {
    title: "Apprenticeship",
    description:
      "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
  },
  {
    title: "Coding",
    description:
      "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
  }
];
---

<PageLayout>
  <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
      class="w-full rounded-md p-5 justify-between items-center flex gap-5 flex-row h-80 max-lg:flex-col max-lg:h-auto border-2 border-neutral-800 bg-neutral-100"
    >
      <div class="flex flex-col gap-5">
        <p class="text-2xl font-bold">Meine Hobbys</p>
        <p class="w-">
          Zusätzlich zu meinen beruflichen Qualifikationen engagiere ich mich in meiner Freizeit intensiv in der Musik
          und koche mit großer Begeisterung. Ebenso habe ich ein faible für Autos.
        </p>
      </div>
      <img class="rounded-md h-full w-auto object-cover" src="/img/Bild002_Neg.Nr.1A.jpg" alt="" />
    </div>
  </div>
</PageLayout>