67 lines
2.6 KiB
TypeScript
67 lines
2.6 KiB
TypeScript
// 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>
|
|
);
|
|
} |