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,67 @@
+// app/gallery/page.tsx
+
+import fs from 'fs';
+import path from 'path';
+import sizeOf from 'image-size';
+import PhotoGallery from '@/app/components/PhotoGallery';
+
+async function getImages() {
+    const galleryDir = path.join(process.cwd(), 'public/gallery');
+    const files = fs.readdirSync(galleryDir);
+    const images = files
+        .filter((file) => file.endsWith('.jpg') || file.endsWith('.png') || file.endsWith('.jpeg'))
+        .map((file) => {
+            const filePath = path.join(galleryDir, file);
+            const buffer = fs.readFileSync(filePath);
+            const dimensions = sizeOf(buffer);
+
+            return {
+                src: `/gallery/${file}`,
+                width: dimensions.width || 1000,
+                height: dimensions.height || 1000,
+                name: file,
+            };
+        });
+
+    return images;
+}
+
+export default async function GalleryPage() {
+    const images = await getImages();
+
+    return (
+        <main className="flex flex-col flex-1 relative bg-[#0d1117] overflow-hidden">
+
+            {/* 1. Background Ambient Glow */}
+            <div className="absolute top-0 left-1/2 -translate-x-1/2 w-150 h-150 bg-[#84c0a0]/10 blur-[150px] rounded-full pointer-events-none z-0"></div>
+
+            <div className="h-25 shrink-0"></div>
+
+            {/* 2. Modernized Header */}
+            <section className="relative z-10 flex flex-col justify-center items-center py-20 px-6">
+                <div className="text-center">
+                    <h1 className="text-white text-[40px] md:text-[55px] uppercase font-black tracking-tighter drop-shadow-lg mb-4">
+                        Visual Archives
+                    </h1>
+
+                    <div className="flex items-center justify-center gap-4 mb-6">
+                        <div className="w-12 h-px bg-[#84c0a0]"></div>
+                        <p className="text-[#84c0a0] font-mono font-bold tracking-widest uppercase text-sm">
+                            Photography Collection
+                        </p>
+                        <div className="w-12 h-px bg-[#84c0a0]"></div>
+                    </div>
+
+                    <p className="text-gray-400 font-light max-w-2xl mx-auto text-lg leading-relaxed">
+                        A curated collection of photographic captures. Finding the best subjects to capture on film, from natural landscapes to the night sky.
+                    </p>
+                </div>
+            </section>
+
+            {/* 3. The Gallery Grid */}
+            <div className="relative z-10 w-full">
+                <PhotoGallery images={images} />
+            </div>
+        </main>
+    );
+}