Photo gallery with a masonry grid layout built with Astro 6 and Vanilla CSS. Loads images in batches via infinite scroll using the Intersection Observer API, with staggered entrance animations and a responsive dark mode design.
- Premium Design: Dark mode aesthetic with glassmorphism and modern typography.
- Responsive Masonry: Fluid multi-column layout that adapts to all screen sizes.
- Infinite Scroll: Images load in batches using the Intersection Observer API.
- Dynamic Animations: Smooth staggered entrance transitions and hover effects.
- Modern Tech Stack: Astro 6, Tailwind CSS 4, and Vanilla CSS.
-
Install dependencies:
npm install
-
Start the development server:
npm run dev
-
Build for production:
npm run build
src/pages/index.astro: Main page with the masonry grid and infinite scroll logic.src/styles/global.css: Global styles including Tailwind 4 integration and custom design system.public/: Static assets including the preview image.
Built with ❤️ by Sebastian Vasquez