From 2943ace31b7cdd8a38282b697690be80a04df280 Mon Sep 17 00:00:00 2001
From: Alexander Daichendt <git@daichendt.one>
Date: Thu, 14 Aug 2025 22:20:44 +0200
Subject: [PATCH] more project sectioning

---
 src/components/Carousel.astro           | 214 ++++++++++++++++++++++++
 src/components/ProjectSection.astro     | 114 ++++++++++---
 src/components/ThreeColumnSection.astro |  49 ++++++
 src/consts.ts                           |  49 +++---
 src/pages/index.astro                   |  45 ++---
 5 files changed, 401 insertions(+), 70 deletions(-)
 create mode 100644 src/components/Carousel.astro
 create mode 100644 src/components/ThreeColumnSection.astro

diff --git a/src/components/Carousel.astro b/src/components/Carousel.astro
new file mode 100644
index 0000000..74d21ad
--- /dev/null
+++ b/src/components/Carousel.astro
@@ -0,0 +1,214 @@
+---
+// ──────────────────────────────────────────────────────────────
+//  Types & Props
+// ──────────────────────────────────────────────────────────────
+import type { ImageMetadata } from "astro";
+
+interface Props {
+  /** Array of images for the carousel */
+  images: {
+    /** Astro image metadata – we only need the `src` field */
+    src: ImageMetadata;
+    /** Alt text for the image (required for accessibility) */
+    alt: string;
+  }[];
+}
+
+const { images } = Astro.props;
+
+// ──────────────────────────────────────────────────────────────
+//  Unique ID – needed so multiple carousels on the same page don’t
+//  clash when we query the DOM from the <script> block.
+// ──────────────────────────────────────────────────────────────
+const carouselId = `carousel-${Math.random().toString(36).slice(2, 11)}`;
+---
+
+<!-- ──────────────────────────────────────────────────────────────
+     Carousel markup – all styling is done with Tailwind classes.
+     The outer <section> gets the proper ARIA roles/labels.
+   ────────────────────────────────────────────────────────────── -->
+<section
+  id={carouselId}
+  class="relative overflow-hidden rounded-lg"
+  role="region"
+  aria-roledescription="carousel"
+  aria-label="Image carousel"
+  data-carousel-id={carouselId}
+>
+  <!-- Slides -->
+  <div class="relative h-0 pb-[56.25%]">
+    <!-- 16:9 ratio placeholder -->
+    {
+      images.map((image, i) => (
+        <img
+          src={image.src.src}
+          alt={image.alt}
+          class={`
+          absolute inset-0 w-full h-full object-cover
+          transition-opacity duration-500 ease-in-out
+          ${i === 0 ? "opacity-100" : "opacity-0"}
+          carousel-slide
+        `}
+          data-index={i}
+        />
+      ))
+    }
+  </div>
+
+  <!-- Navigation Buttons -->
+  <button
+    type="button"
+    class="absolute left-4 top-1/2 -translate-y-1/2
+      flex h-10 w-10 items-center justify-center
+      rounded-full bg-white/70 backdrop-blur-sm
+      text-gray-800 hover:bg-white focus:outline-none
+      focus-visible:ring-2 focus-visible:ring-indigo-600
+      transition-colors"
+    aria-label="Previous slide"
+    data-dir="prev"
+  >
+    <!-- Heroicon: chevron‑left -->
+    <svg
+      class="h-5 w-5"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke-width="2"
+      stroke="currentColor"
+      aria-hidden="true"
+    >
+      <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"
+      ></path>
+    </svg>
+    <span class="sr-only">Previous</span>
+  </button>
+
+  <button
+    type="button"
+    class="absolute right-4 top-1/2 -translate-y-1/2
+      flex h-10 w-10 items-center justify-center
+      rounded-full bg-white/70 backdrop-blur-sm
+      text-gray-800 hover:bg-white focus:outline-none
+      focus-visible:ring-2 focus-visible:ring-indigo-600
+      transition-colors"
+    aria-label="Next slide"
+    data-dir="next"
+  >
+    <!-- Heroicon: chevron‑right -->
+    <svg
+      class="h-5 w-5"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke-width="2"
+      stroke="currentColor"
+      aria-hidden="true"
+    >
+      <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"
+      ></path>
+    </svg>
+    <span class="sr-only">Next</span>
+  </button>
+
+  <!-- Live region for screen‑reader announcements -->
+  <div
+    class="sr-only"
+    aria-live="polite"
+    aria-atomic="true"
+    data-live-announcer
+  >
+  </div>
+</section>
+
+<!-- ──────────────────────────────────────────────────────────────
+     Tailwind utilities are already available in the project.
+     No extra CSS is required – everything lives in the classes above.
+   ────────────────────────────────────────────────────────────── -->
+
+<script define:vars={{ carouselId }}>
+  // -----------------------------------------------------------------
+  //  Carousel logic – runs once the component is in the DOM.
+  // -----------------------------------------------------------------
+  document.addEventListener("DOMContentLoaded", () => {
+    const carousel = document.getElementById(carouselId);
+    if (!carousel) return;
+
+    const slides = carousel.querySelectorAll(".carousel-slide");
+    const prevBtn = carousel.querySelector('[data-dir="prev"]');
+    const nextBtn = carousel.querySelector('[data-dir="next"]');
+    const liveAnnouncer = carousel.querySelector("[data-live-announcer]");
+
+    let current = 0;
+    const total = slides.length;
+    let autoRotateTimer;
+
+    // -----------------------------------------------------------------
+    // Helper – show a slide by index (with fade transition)
+    // -----------------------------------------------------------------
+    const showSlide = (index) => {
+      slides[current].classList.remove("opacity-100");
+      slides[current].classList.add("opacity-0");
+
+      current = index;
+
+      slides[current].classList.remove("opacity-0");
+      slides[current].classList.add("opacity-100");
+
+      // Update screen‑reader announcement
+      if (liveAnnouncer) {
+        liveAnnouncerContent = `Slide ${current + 1} of ${total}`;
+      }
+    };
+
+    // -----------------------------------------------------------------
+    // Navigation button handlers
+    // -----------------------------------------------------------------
+    const goPrev = () => {
+      const prev = (current - 1 + total) % total;
+      showSlide(prev);
+    };
+    const goNext = () => {
+      const next = (current + 1) % total;
+      showSlide(next);
+    };
+
+    prevBtn?.addEventListener("click", goPrev);
+    nextBtn?.addEventListener("click", goNext);
+
+    // -----------------------------------------------------------------
+    // Keyboard navigation (left / right arrows)
+    // -----------------------------------------------------------------
+    carousel.addEventListener("keydown", (e) => {
+      if (e.key === "ArrowLeft") {
+        e.preventDefault();
+        goPrev();
+      } else if (e.key === "ArrowRight") {
+        e.preventDefault();
+        goNext();
+      }
+    });
+
+    // -----------------------------------------------------------------
+    // Auto‑rotate (pause on hover / focus)
+    // -----------------------------------------------------------------
+    const startAutoRotate = () => {
+      stopAutoRotate(); // safety
+      autoRotateTimer = window.setInterval(goNext, 5000);
+    };
+    const stopAutoRotate = () => {
+      if (autoRotateTimer) {
+        clearInterval(autoRotateTimer);
+        autoRotateTimer = undefined;
+      }
+    };
+
+    // Start rotating when the component mounts
+    startAutoRotate();
+
+    // Pause when the user hovers or focuses inside the carousel
+    carousel.addEventListener("mouseenter", stopAutoRotate);
+    carousel.addEventListener("mouseleave", startAutoRotate);
+    carousel.addEventListener("focusin", stopAutoRotate);
+    carousel.addEventListener("focusout", startAutoRotate);
+  });
+</script>
diff --git a/src/components/ProjectSection.astro b/src/components/ProjectSection.astro
index e8785c4..164ecf0 100644
--- a/src/components/ProjectSection.astro
+++ b/src/components/ProjectSection.astro
@@ -1,6 +1,8 @@
 ---
-import { Picture } from "astro:assets";
+import { Icon } from "astro-icon/components";
 import { projects } from "../consts";
+import Carousel from "./Carousel.astro";
+import ThreeColumnSection from "./ThreeColumnSection.astro";
 ---
 
 <section class="py-16 bg-mytheme-200/70 dark:bg-mytheme-700/50">
@@ -10,31 +12,95 @@ import { projects } from "../consts";
     Software I developed
   </h2>
 
-  <div
-    class="max-w-7xl mx-auto
-      grid grid-cols-1 lg:grid-cols-[auto,1fr,auto]
-      items-center md:items-start
-      gap-8
-      py-8 md:py-12"
-  >
-    <div class="w-72 md:block">project details</div>
+  <div class="space-y-16">
+    {
+      projects.map((project) => (
+        <ThreeColumnSection maxWidth="8xl" py="py-8">
+          {/* ---------- LEFT: Project details ---------- */}
+          <div
+            slot="left"
+            class="max-w-xs justify-self-center lg:justify-self-end"
+          >
+            <article class="space-y-4">
+              {/* Title + optional company */}
+              <h3 class="text-2xl font-semibold text-slate-900 dark:text-slate-100">
+                {project.title}
 
-    <div class="max-w-2xl px-4 order-2 md:order-none">
-      {
-        projects.map((project, index) => (
-          <div class="">
-            -- TODO: make it rotate through images, create new component for
-            this
-            <Picture
-              src={project.images[0].src}
-              alt={project.images[0].alt}
-              class="w-full"
-            />
+                {/* Duration */}
+                <p class="text-sm text-slate-500 dark:text-slate-400 flex items-center mt-1">
+                  <Icon name="mdi:calendar" class="mr-2" />
+                  {project.duration}
+                </p>
+              </h3>
+
+              {/* Description */}
+              <p class="text-base text-slate-800 dark:text-slate-200">
+                {project.description}
+              </p>
+
+              {/* Tech stack */}
+              <div class="flex flex-wrap gap-2 mt-2">
+                {project.tech_stack.map((tech) => (
+                  <span class="px-2 py-0.5 text-xs font-medium bg-slate-200 dark:bg-slate-600 text-slate-800 dark:text-slate-100 rounded">
+                    {tech}
+                  </span>
+                ))}
+              </div>
+
+              {/* Deliverables (optional) */}
+              {project.deliverables?.length && (
+                <ul class="list-disc list-inside text-sm text-slate-700 dark:text-slate-300 mt-3">
+                  {project.deliverables.map((item) => (
+                    <li class="mb-1">{item}</li>
+                  ))}
+                </ul>
+              )}
+
+              {/* Links */}
+              <div class="flex space-x-4 mt-4">
+                {project.live_url && (
+                  <a
+                    href={project.live_url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="inline-flex items-center gap-1.5 rounded px-3 py-1.5 text-sm font-medium
+                           transition-colors duration-150
+                           bg-slate-100 hover:bg-slate-200 focus-visible:outline focus-visible:outline-2
+                           focus-visible:outline-offset-2 focus-visible:outline-slate-500
+                           dark:bg-slate-800 dark:hover:bg-slate-700 dark:focus-visible:outline-slate-400"
+                  >
+                    <Icon name="mdi:aspect-ratio" /> Live
+                  </a>
+                )}
+                {project.repo_url && (
+                  <a
+                    href={project.repo_url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="inline-flex items-center gap-1.5 rounded px-3 py-1.5 text-sm font-medium
+                           transition-colors duration-150
+                           bg-slate-100 hover:bg-slate-200 focus-visible:outline focus-visible:outline-2
+                           focus-visible:outline-offset-2 focus-visible:outline-slate-500
+                           dark:bg-slate-800 dark:hover:bg-slate-700 dark:focus-visible:outline-slate-400"
+                  >
+                    <Icon name="mdi:github" /> Repo
+                  </a>
+                )}
+              </div>
+            </article>
           </div>
-        ))
-      }
-    </div>
 
-    <div class="w-48 md-w-64 md:block hidden"></div>
+          {/* ---------- CENTER: Carousel ---------- */}
+          <div slot="center" class="w-full">
+            <div class="rounded-lg overflow-hidden shadow-lg">
+              <Carousel images={project.images} />
+            </div>
+          </div>
+
+          {/* ---------- RIGHT: Empty for now ---------- */}
+          <div slot="right" class="hidden lg:block" />
+        </ThreeColumnSection>
+      ))
+    }
   </div>
 </section>
diff --git a/src/components/ThreeColumnSection.astro b/src/components/ThreeColumnSection.astro
new file mode 100644
index 0000000..5f17777
--- /dev/null
+++ b/src/components/ThreeColumnSection.astro
@@ -0,0 +1,49 @@
+---
+export interface Props {
+  bgClass?: string;
+  containerClass?: string;
+  maxWidth?: "sm" | "md" | "lg" | "xl" | "2xl" | "4xl" | "6xl" | "8xl";
+  py?: string;
+  reverseOnMobile?: boolean;
+}
+
+const {
+  bgClass = "",
+  containerClass = "",
+  maxWidth = "8xl",
+  py = "py-8 md:py-12",
+  reverseOnMobile = false,
+} = Astro.props;
+
+const maxWidthClasses = {
+  sm: "max-w-sm",
+  md: "max-w-md",
+  lg: "max-w-lg",
+  xl: "max-w-xl",
+  "2xl": "max-w-2xl",
+  "4xl": "max-w-4xl",
+  "6xl": "max-w-6xl",
+  "8xl": "max-w-8xl",
+};
+---
+
+<section class={`${bgClass} ${py}`}>
+  <div
+    class={`${maxWidthClasses[maxWidth]} mx-auto grid grid-cols-1 lg:grid-cols-[1fr_640px_1fr] items-center md:items-start gap-8 px-4 ${containerClass}`}
+  >
+    <!-- Left Column (Hidden on mobile, visible on desktop) -->
+    <div class={`${reverseOnMobile ? "order-3 lg:order-1" : "order-1"}`}>
+      <slot name="left" />
+    </div>
+
+    <!-- Center Column (Main content) -->
+    <div class={`order-1 lg:order-2`}>
+      <slot name="center" />
+    </div>
+
+    <!-- Right Column -->
+    <div class={`${reverseOnMobile ? "order-1 lg:order-3" : "order-3"}`}>
+      <slot name="right" />
+    </div>
+  </div>
+</section>
diff --git a/src/consts.ts b/src/consts.ts
index e6ea557..3c82246 100644
--- a/src/consts.ts
+++ b/src/consts.ts
@@ -45,29 +45,30 @@ export const projects: Project[] = [
   // complexity: 4,
   // company: "TV1 GmbH",
   // },
-  // {
-  //   title: "VIDEO.TAXI Meetings",
-  //   live_url: "https://meetings.video.taxi/",
-  //   description:
-  //     "Records, transcribes, and translates meetings (Webex, Teams, Zoom). Interfaces with the GraphQL API of VIDEO.TAXI. Architecure, development, and deployment all done by me. Greenfield project.",
-  //   tech_stack: [
-  //     "Svelte",
-  //     "TypeScript",
-  //     "Tailwind CSS",
-  //     "Express",
-  //     "GraphQL",
-  //     "PostgreSQL",
-  //     "Docker",
-  //     "OpenAPI",
-  //   ],
-  //   duration: "2024 - Present",
-  //   company: "TV1 GmbH",
-  //   deliverables: [
-  //     "Live Updating Dashboard",
-  //     "Meeting Bots for Teams, Zoom and Webex",
-  //     "Keycloak integration",
-  //   ],
-  // },
+  {
+    title: "VIDEO.TAXI Meetings",
+    live_url: "https://meetings.video.taxi/",
+    description:
+      "Records, transcribes, and translates meetings (Webex, Teams, Zoom). Interfaces with the GraphQL API of VIDEO.TAXI. Architecure, development, and deployment all done by me. Greenfield project.",
+    tech_stack: [
+      "Svelte",
+      "TypeScript",
+      "Tailwind CSS",
+      "Express",
+      "GraphQL",
+      "PostgreSQL",
+      "Docker",
+      "OpenAPI",
+    ],
+    duration: "2024 - Present",
+    company: "TV1 GmbH",
+    deliverables: [
+      "Live Updating Dashboard",
+      "Meeting Bots for Teams, Zoom and Webex",
+      "Keycloak integration",
+    ],
+    images: [],
+  },
   // {
   //   title: "Netbox PDU Plugin",
   //   repo_url: "https://github.com/AlexDaichendt/axians-netbox-plugin-pdu",
@@ -107,7 +108,7 @@ export const projects: Project[] = [
   //   company: "TV1 GmbH",
   // },
   {
-    title: "Discretize -- Gear Optimizer",
+    title: "Discretize: Gear Optimizer",
     live_url: "https://optimizer.discretize.eu/",
     repo_url: "https://github.com/discretize/discretize-gear-optimizer",
     description:
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 803df97..811b3f2 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,11 +1,10 @@
 ---
-import BaseLayout from "../layouts/BaseLayout.astro";
 import me from "../assets/me.jpg";
-import { Image } from "astro:assets";
-import Picture from "../components/Picture.astro";
 import Link from "../components/Link.astro";
-import { projects } from "../consts";
+import Picture from "../components/Picture.astro";
 import ProjectSection from "../components/ProjectSection.astro";
+import ThreeColumnSection from "../components/ThreeColumnSection.astro";
+import BaseLayout from "../layouts/BaseLayout.astro";
 
 const love = [
   {
@@ -59,16 +58,10 @@ const skills = {
   subtitle="Software Engineer, Linux Enthusiast, Lightweight Systems Advocate"
   className="w-full py-16 flex flex-col"
 >
-  <section
-    class="max-w-8xl mx-auto
-        grid grid-cols-1 lg:grid-cols-[auto,1fr,auto]
-        items-center md:items-start
-        gap-8
-        py-8 md:py-12"
-  >
-    <div class="w-72 hidden md:block"></div>
+  <ThreeColumnSection reverseOnMobile={true}>
+    <div slot="left"></div>
 
-    <div class="max-w-2xl px-4 order-2 md:order-none">
+    <div slot="center" class="max-w-2xl">
       <p class="mb-4">
         I am a privacy-first software engineer passionate about building web
         applications that are efficient, user-friendly, and respectful of your
@@ -86,13 +79,18 @@ const skills = {
       </p>
     </div>
 
-    <div class="px-4 order-1 md:order-none">
-      <Picture src={me} alt="me" class="w-48 md:w-64 h-auto mx-auto" />
+    <div slot="right" class="flex justify-center md:justify-start items-start">
+      <Picture
+        src={me}
+        alt="My profile picture"
+        class="w-48 md:w-64 h-auto rounded-lg"
+      />
     </div>
-  </section>
+  </ThreeColumnSection>
 
-  <section class="py-16 bg-mytheme-200/70 dark:bg-mytheme-700/50">
-    <div class="max-w-2xl mx-auto px-4">
+  <ThreeColumnSection bgClass="bg-mytheme-200/70 dark:bg-mytheme-700/50">
+    <div slot="left"></div>
+    <div slot="center" class="max-w-2xl">
       <h2
         class="text-3xl md:text-4xl font-bold mb-12 text-center text-slate-800 dark:text-slate-100"
       >
@@ -111,10 +109,12 @@ const skills = {
         }
       </div>
     </div>
-  </section>
+    <div slot="right"></div>
+  </ThreeColumnSection>
 
-  <section class="py-16">
-    <div class="max-w-2xl mx-auto px-4">
+  <ThreeColumnSection>
+    <div slot="left"></div>
+    <div slot="center">
       <h2
         class="text-3xl md:text-4xl font-bold mb-12 text-center text-slate-800 dark:text-slate-100"
       >
@@ -139,7 +139,8 @@ const skills = {
         }
       </div>
     </div>
-  </section>
+    <div slot="right"></div>
+  </ThreeColumnSection>
 
   <ProjectSection />
 </BaseLayout>