🖼️ Filterable Image Gallery with JavaScript

An interactive and stylish Filterable Image Gallery created using HTML, CSS, and Vanilla JavaScript. This project allows users to filter images by category with smooth transitions and responsive design.

✨ Features

• 🔍 Filter images by categories
• 🖼️ Grid-based image layout
• 💻 Responsive and mobile-friendly design
• 🎨 Smooth CSS animations on filter change
• 👆 Click effect for active buttons

🧰 Technologies Used

• HTML5
• CSS3
• JavaScript (ES6+)

🚀 Getting Started

1. Clone the Repository

git clone https://github.com/viktor-rumiievskyi/Filterable-Image-Gallery-JS.git
cd Filterable-Image-Gallery-JS

2. Open the Project

You can open index.html directly in your browser, or launch a local development server:

python -m http.server

Then go to http://localhost:8000.

📁 File Structure

Filterable-Image-Gallery-JS/
│
├── index.html       # Main layout of the gallery
├── style.css        # Styles for layout, grid, filters
├── script.js        # Filtering logic and interactivity
├── images/          # Image assets organized by category
└── README.md        # Project documentation

🔧 Customization

• Replace images inside the images/ folder
• Update category names in HTML and JS
• Change styles in style.css for personal branding

🌟 Future Ideas

• 🖼️ Add lightbox feature for viewing full-size images
• 🧠 Store categories and images dynamically from a JSON file
• 🌀 Add loading animations or transitions
• ☁️ Host and deploy the project online (GitHub Pages, Netlify)

👨‍💻 Author

Viktor Rumiievskyi
GitHub: @viktor-rumiievskyi

📄 License

This project is open-source under the MIT License.

---