src/components/CustomCarousel/CustomCarousel.astro

@@ -4,14 +4,37 @@ import {Image} from 'astro:assets';
 import type {carouselGroup} from "@interfaces/image-carousel.ts";
 
 const groupToShow: carouselGroup = Astro.props.carouselGroup;
-
-const limitByHeightClasses = "sm:max-w-xl md:max-w-3xl lg:max-w-5xl xl:max-w-7xl";
-const limitByWidthClasses = "max-h-fit";
 ---
 
 <custom-carousel class="flex flex-col relative w-full"
                  data-custom-carousel={groupToShow.animation}
                  data-custom-carousel-interval={groupToShow.interval}>
+    <!-- Modal for fullscreen viewing -->
+    <div tabindex="-1" aria-hidden="true"
+         class="hidden fixed z-100 justify-center items-center w-full inset-0"
+         data-custom-carousel-modal>
+        <div class="relative p-4 w-full h-full">
+            <!-- Modal content -->
+            <div class="relative h-full max-h-screen max-w-screen bg-black rounded-lg shadow-sm border-2 border-caperren-green">
+                <!-- Modal header -->
+                <div class="flex items-center justify-between p-1 rounded-t">
+                    <button type="button"
+                            class="z-100 text-caperren-green bg-transparent ring-2 ring-caperren-green-dark hover:ring-caperren-green-light hover:text-caperren-green-light rounded-lg text-sm size-8 ms-auto inline-flex justify-center items-center"
+                            data-custom-carousel-modal-hide>
+                        <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
+                             viewBox="0 0 14 14">
+                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                  d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
+                        </svg>
+                        <span class="sr-only">Close modal</span>
+                    </button>
+                </div>
+                <!-- Modal body -->
+                <div class="flex items-center justify-center overflow-hidden h-full w-full"
+                     data-custom-carousel-modal-image/>
+            </div>
+        </div>
+    </div>
 
     <!-- Carousel wrapper -->
     <div class="relative overflow-hidden w-full h-56 md:h-120">

src/components/CustomCarousel/custom-carousel.ts

@@ -1,10 +1,21 @@
-import {Carousel, type CarouselItem, type CarouselOptions, type IndicatorItem} from 'flowbite';
+import {
+    Carousel,
+    type CarouselItem,
+    type CarouselInterface,
+    type CarouselOptions,
+    type IndicatorItem,
+    Modal,
+    type ModalInterface,
+} from 'flowbite';
 
 class CustomCarousel extends HTMLElement {
     _slide: boolean;
     _items: CarouselItem[];
     _options: CarouselOptions;
-    _carousel: Carousel;
+    _carousel: CarouselInterface;
+
+    _modalEl: HTMLElement;
+    _modal: ModalInterface;
 
     constructor() {
         super();
@@ -16,6 +27,9 @@ class CustomCarousel extends HTMLElement {
 
         if (this._slide && this._items.length > 0) this._carousel.cycle();
 
+        this._modalEl = this.querySelector('[data-custom-carousel-modal]') as HTMLElement || undefined;
+        this._modal = new Modal(this._modalEl);
+
         window.addEventListener("load", this._attachHandlers);
 
     }
@@ -24,8 +38,11 @@ class CustomCarousel extends HTMLElement {
         let customItems = this.querySelectorAll('[data-custom-carousel-item]') || [];
 
         return Array.from(customItems).map(
-            (item, index): CarouselItem => {
+            (item): CarouselItem => {
-                return {el: item as HTMLElement, position: index}
+                return {
+                    el: item as HTMLElement,
+                    position: Number(item.getAttribute("data-custom-carousel-item"))
+                }
             }
         )
     }
@@ -52,29 +69,32 @@ class CustomCarousel extends HTMLElement {
         }
     }
 
+
     _attachHandlers = (): void => {
-        // Controls
+        // Carousel controls
-        const carouselNextEl = this.querySelector(
+        this.querySelector(
             '[data-custom-carousel-next]'
-        );
+        )?.addEventListener('click', () => this._carousel.next());
-        const carouselPrevEl = this.querySelector(
+        this.querySelector(
             '[data-custom-carousel-prev]'
-        );
+        )?.addEventListener('click', () => this._carousel.prev());
 
-        if (carouselNextEl) {
+        // Close fullscreen modal
-            carouselNextEl.addEventListener('click', () => {
+        this._modalEl.querySelector('[data-custom-carousel-modal-hide]')?.addEventListener('click', () => this._modal.hide())
-                this._carousel.next();
+
-            });
+        // Click to open fullscreen modal
+        this._items.forEach((item) => {
+            item.el.addEventListener('click', () => {
+                const imgCloned = item.el.querySelector('img')?.cloneNode() as Node;
+                const imageDiv = this._modalEl.querySelector('[data-custom-carousel-modal-image]') as HTMLElement || undefined;
+
+                imageDiv.innerHTML = '';
+                imageDiv?.appendChild(imgCloned);
+
+                this._modal.show();
+            })
+        })
     }
-
-        if (carouselPrevEl) {
-            carouselPrevEl.addEventListener('click', () => {
-                this._carousel.prev();
-            });
-        }
-    }
-
-
 }
 
 customElements.define('custom-carousel', CustomCarousel)

src/components/Navbar.astro

@@ -11,9 +11,7 @@ import {Image} from "astro:assets";
     <div class="flex flex-wrap items-center justify-between mx-auto p-6">
         <a href="/">
             <Image src={logo_title_large}
-                   height="56"
+                   class="h-10 sm:h-14 w-auto"
-                   width="139"
-                   class="h-14 w-auto"
                    alt="logo title"
                    loading="eager"
             />

src/components/NestedNavbarEntries.astro

@@ -12,7 +12,7 @@ const getHrefPath = (entry: navLink): string => {
     return entry.pubpath ? entry.pubpath : ("/" + (paths && paths.length ? [...paths, entry.path].join("/") : entry.path));
 }
 ---
-<ul class={"flex flex-col p-4 bg-black border-caperren-green " + (depth ? "" : "md:flex-row md:space-x-8 md:mt-0")}>
+<ul class={"flex flex-col p-4 bg-black border-caperren-green " + (depth ? "space-y-2" : "md:flex-row md:space-x-8 md:mt-0")}>
     {
         items.map((entry, index) => (
             (entry.enabled ?? true) && (

src/layouts/BaseLayout.astro

@@ -16,7 +16,6 @@ const pageEnabled = pathToMetadata(Astro.url.pathname).enabled ?? true;
 <head>
     <meta charset="UTF-8"/>
     <link rel="icon" href="/favicon-solid.png" type="image/png"/>
-    <!--suppress HtmlUnknownTarget -->
     <link rel="sitemap" href="/sitemap-index.xml"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <title>{pageEnabled ? pageTitle : "Corwin Perren"}</title>

src/pages/index.astro

@@ -6,7 +6,7 @@ import type {carouselGroup} from "@interfaces/image-carousel.ts";
 
 import alaska_bike_mountain_ocean from "@assets/about/alaska-bike-mountain-ocean.jpg"
 import circ_champions from "@assets/about/circ-champions.jpg"
-import headshot from "@assets/about/headshot.png";
+import headshot from "@assets/about/headshot.jpg";
 
 
 const headerCarouselGroup: carouselGroup = {