---
import "../styles/global.css";
import { Navigation } from "../components/Navigation.tsx";

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."}
]


---

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <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
      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"
              src="/img/me.jpg"
              alt=""
            />
          </div>
          <p class="text-2xl">Das bin ich!</p>
        </div>
        <div class="flex flex-col gap-1 items-center text-center">
          <p>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" 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:grid-rows-1 py-5 gap-6 flex flex-col rounded-2xl border-zinc-900 border-dashed w-5/6 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/6 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-1 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 border-2 border-zinc-900 bg-emerald-500 px-2 py-1 rounded-lg flex` }>
            <p class="m-auto">Mehr</p>
          </div>
        </div>
      </div>
    </section>
  </body>
</html>
