Big City Life - Astro Photography Portfolio
A modern photography portfolio built with Astro, featuring MDX-based content collections, React-powered interactive components, and responsive Tailwind-styled design.
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.
Related
Other articles that may interest you
- Modern Linux Documentation: A Call for Collaboration
- How I Helped a Restaurant Triple Online Reservations
- From 3 Seconds to 0.8: Real Web Optimization Case
- Web Monitoring: Detect Problems Before Your Customers
- Renovating your WordPress: when to change technology?
- Quality code: when to invest in premium development?
Author
Written by
Jose Ramos
Web developer