FlowCraft UI: Filterable Portfolio Grid
Zero-dependency filterable portfolio grid built with Tailwind CSS and Vanilla JS (no Isotope). Includes index.html (UI), app.js (filtering and animation), style.css (transitions), six sample project images and .htaccess (hosting settings).
What it does:
- Category filter buttons with automatic counts and a clear active state
- Non-matching cards fade out while the rest glide smoothly into place
- Responsive grid: 1 column on phones, 2 on tablets, 3 on desktops
- Add projects or new categories in the HTML, with no JavaScript changes
- A card can belong to more than one category
- Keyboard and screen-reader friendly; respects reduced-motion settings
- Heavily commented JavaScript explaining the animation step by step
No npm install or build step. Works from any web host, or opened directly from your computer.
Try the live demo: https://haveinsights.com/flowcraft/portfolio-grid/
License: One purchase may be used and modified in unlimited personal and client projects. Standalone resale, sharing, and redistribution are not permitted.
• Built-in "Get a Free Quote" form sends each visitor's email (and the category they were browsing) to your own form service, CRM or webhook.
Support: support@haveinsights.com