Main pages

2026-03-10 23:45:14 +01:00
parent 2b4897ad65
commit b6a78abae8
17 changed files with 2244 additions and 116 deletions
@@ -0,0 +1,64 @@
+// app/components/PhotoGallery.tsx
+
+'use client';
+
+import { Gallery, Item } from 'react-photoswipe-gallery';
+import 'photoswipe/dist/photoswipe.css';
+import Image from 'next/image';
+
+interface GalleryImage {
+    src: string;
+    width: number;
+    height: number;
+    name: string;
+}
+
+export default function PhotoGallery({ images }: { images: GalleryImage[] }) {
+    return (
+        <div className="bg-[#0a0d11] flex justify-center w-full min-h-screen border-t border-white/5">
+            <Gallery>
+                <div className="grid grid-cols-2 lg:grid-cols-4 2xl:grid-cols-6 grid-flow-dense w-full">
+                    {images.map((img, index) => {
+                        const isHorizontal = img.width > img.height;
+
+                        return (
+                            <div
+                                key={index}
+                                className={`relative bg-[#0d1117] overflow-hidden group cursor-pointer border-[0.5px] border-white/5 ${isHorizontal ? 'col-span-2' : 'col-span-1'}`}
+                            >
+                                <Item
+                                    original={img.src}
+                                    thumbnail={img.src}
+                                    width={img.width}
+                                    height={img.height}
+                                    alt={`Gallery image ${img.name}`}
+                                >
+                                    {({ ref, open }) => (
+                                        <div
+                                            ref={ref as React.RefCallback<HTMLDivElement>}
+                                            onClick={open}
+                                            className="w-full h-full relative block min-h-75"
+                                        >
+                                            <div className="absolute inset-0 border-8 border-[#0d1117]/50 transition-all duration-300 z-10 pointer-events-none"></div>
+                                            <div className="absolute inset-4 border-2 border-white/10 transition-all duration-500 z-10 pointer-events-none group-hover:scale-95 group-hover:border-[#84c0a0]/60 [clip-path:polygon(0_calc(100%-1rem),0_100%,1rem_100%,1rem_0,0_0,0_1rem,100%_1rem,100%_0,calc(100%-1rem)_0,calc(100%-1rem)_100%,100%_100%,100%_calc(100%-1rem))]"></div>
+
+                                            <Image
+                                                src={img.src}
+                                                alt={`Photo of ${img.name.replace('.jpg', '')}`}
+                                                width={isHorizontal ? 1200 : 800}
+                                                height={isHorizontal ? 800 : 800}
+                                                quality={90}
+                                                sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+                                                className="w-full h-full object-cover block opacity-80 transition-all duration-700 group-hover:scale-110 group-hover:opacity-100"
+                                            />
+                                        </div>
+                                    )}
+                                </Item>
+                            </div>
+                        );
+                    })}
+                </div>
+            </Gallery>
+        </div>
+    );
+}