Modern Image Gallery

A beautiful, responsive image gallery built with React, TypeScript, and Tailwind CSS. Features a clean grid layout, category filtering, and modal image previews with smooth animations.

Features

• Responsive Grid Layout: Adapts to different screen sizes using CSS Grid
• Category Filtering: Filter images by categories (Nature, Architecture, Abstract, Wildlife, Portrait, Street)
• Modal Image Preview: Click any image to view it in a larger modal overlay
• Smooth Animations: Hover effects, transitions, and interactive elements
• Modern Design: Dark theme with gradient backgrounds and glass-morphism effects
• Lazy Loading: Images load efficiently as needed
• Keyboard Accessible: Full keyboard navigation support

Technologies Used

• React 18 - Modern React with hooks
• TypeScript - Type-safe development
• Tailwind CSS - Utility-first CSS framework with custom design system
• Vite - Fast build tool and development server
• Lucide React - Beautiful SVG icons

Getting Started

Prerequisites

• Node.js (v16 or higher)
• npm or yarn package manager

Installation

1. Clone the repository:

   git clone <repository-url>
   cd image-gallery

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

4. Open your browser and navigate to http://localhost:8080

Building for Production

To create a production build:

npm run build

The built files will be in the dist directory.

Project Structure

src/
├── components/
│   └── ImageGallery.tsx     # Main gallery component
├── assets/                  # Image assets
├── pages/
│   ├── Index.tsx           # Home page
│   └── NotFound.tsx        # 404 page
├── lib/
│   └── utils.ts            # Utility functions
├── hooks/                  # Custom React hooks
└── index.css              # Global styles and design system

Customization

Adding New Images

1. Add image files to the src/assets/ directory
2. Import them in ImageGallery.tsx
3. Add them to the images array with appropriate metadata

Modifying Categories

Edit the categories array in ImageGallery.tsx to add or remove filter categories.

Design System

The design system is defined in src/index.css and tailwind.config.ts. You can customize:

• Color palette
• Gradients and backgrounds
• Border radius and spacing
• Animation timings

Performance Features

• Lazy Loading: Images load only when needed
• Optimized Animations: CSS transforms for smooth performance
• Efficient Filtering: Client-side filtering without re-renders
• Responsive Images: Optimized for different screen sizes

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

License

MIT License - feel free to use this project for personal or commercial purposes.