Better resolution headshot, fullscreen modal for carousel, no fixed height and width on logo title for better resolution, spacing between dropdown entries in navbar

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">