Vary widths

Author: hasparus

src/app/conf/2025/components/gallery-strip/images/index.ts

@@ -27,17 +27,17 @@ import image2024_13 from "./2024/13.webp"
 export const imagesByYear = {
   "2023": [
     image2023_8,
-    image2023_3,
     image2023_11,
+    image2023_3,
     image2023_1,
     image2023_13,
     image2023_6,
     image2023_9,
     image2023_4,
     image2023_12,
     image2023_2,
-    image2023_7,
     image2023_10,
+    image2023_7,
     image2023_5,
   ],
   "2024": [
@@ -50,7 +50,7 @@ export const imagesByYear = {
     image2024_13,
     image2024_11,
     image2024_8,
-    image2024_1,
     image2024_4,
+    image2024_1,
   ],
 }

src/app/conf/2025/components/gallery-strip/index.tsx

@@ -52,24 +52,39 @@ export function GalleryStrip({ className, ...rest }: GalleryStripProps) {
           {imagesByYear[selectedYear].map((image, i) => {
             const key = `${selectedYear}-${i}`
 
-            return <GalleryStripImage key={key} image={image} />
+            return <GalleryStripImage key={key} image={image} index={i} />
           })}
         </Marquee>
       </div>
     </section>
   )
 }
 
-function GalleryStripImage({ image }: { image: StaticImageData }) {
+function GalleryStripImage({
+  image,
+  index,
+}: {
+  image: StaticImageData
+  index: number
+}) {
   return (
     <div role="presentation" className="relative md:px-2">
       <Image
         src={image}
         alt=""
         role="presentation"
-        width={799}
-        height={533}
-        className="pointer-events-none aspect-[799/533] h-[320px] w-auto object-cover"
+        // intrinsic 799x533
+        height={320}
+        width={480}
+        className={clsx(
+          "pointer-events-none h-[320px] w-auto object-cover",
+          // Alternate between 3 widths
+          index % 4 === 2
+            ? "w-[200px]"
+            : index % 3 === 2
+              ? "w-[420px]"
+              : "w-[480px]",
+        )}
       />
     </div>
   )