# 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:
   ```bash
   git clone <repository-url>
   cd image-gallery
   ```

2. Install dependencies:
   ```bash
   npm install
   ```

3. Start the development server:
   ```bash
   npm run dev
   ```

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

### Building for Production

To create a production build:

```bash
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.