Big City Life - Astro Photography Portfolio

Big City Life - Modern Photography Portfolio

Big City Life is a modern photography portfolio built with Astro, featuring MDX-based content collections, React-powered interactive components, and responsive Tailwind-styled design. It offers optimized performance with static generation, image optimization (WebP, lazy loading), and SEO-ready outputs (sitemap, RSS), plus features like vertical carousel, real-time search, and mobile-friendly navigation.

Project Architecture

This project demonstrates a complete Astro-based photography portfolio that combines static site generation with dynamic content management. The architecture follows Astro’s file-based routing system and content collections pattern.

Key Technologies

• Astro 5.14.1 - Static site generator with hybrid rendering
• React 19.1.0 - Interactive components
• TypeScript - Type safety and better DX
• Tailwind CSS 4.1.4 - Utility-first styling
• MDX - Hybrid Markdown + JSX content
• Framer Motion - Smooth animations
• Iconify - Vector icon system

Key Features

Interactive Components

• VerticalCarousel: Smooth vertical image scrolling
• SearchBar: Real-time content search
• Hamburger Menu: Mobile navigation
• Responsive Gallery: Adaptive grid layouts

Performance Optimizations

• Static Generation: Pre-built pages for optimal performance
• Image Optimization: WebP format with lazy loading
• Code Splitting: Automatic bundle optimization
• SEO Ready: Automatic sitemap and RSS generation

Ideal for Photographers and Creators

Perfect for photographers and creators to showcase work with fast loads, smooth animations, and easy content management.

Explore the Project

• Live demo: bigcitylife.netlify.app
• GitHub repository: Big City Life

---

Big City Life represents my approach to modern web development: using technologies like Astro to create photography portfolios that are not only visually stunning, but also technically excellent in terms of performance and user experience.