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

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>
      <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 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/5 flex justify-between sm:py-3 ${
                  i % 2 === 0 ? "flex-row-reverse bg-emerald-400" : "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 class="col-span-2 flex justify-center">
        <div class="w-52">
          <Button link="/projects" text="Mehr" />
        </div>
      </div>
      </div>
    </div>
  </section>