I recently revamped my personal website after a long time. I implemented a projects section which had a filter gallery based on the category of the project. It felt important to make such an interface as it targets those people who want to see a specific section of your work based on a technical category like web development, data analysis etc.
This filter interface allows you to:
- Serve instant filtering of your work and save the other person’s time who came to your website.
- Keep your portfolio of work organized.
Author: Akshay Nagpal (github.com/akshaynagpal)
// clicking button with class "category-button"
// get the data-filter value of the button
var filterValue = $(this).attr('data-filter');
// show all items
if(filterValue == "all")
// hide all items
// and then, show only items with selected data-filter value
Hope it helps. Thanks for reading.