Portfolio filter with isotope.js 💻

|

A filter on a personal portfolio is a standard feature. I wanted to try a javascript library that could do this with some transitions to create a slick experience, and have flexibility to pick the set of values you can filter on.

Isotope does this well, it has different grid-based layouts, and you use classes on items to define what you want filtered. The website has some good examples. It is an open-source license for non-commercial use.

I specifically wanted to create a “logical or” filter with multiple values, for example, you can find all projects that use “java” or “python”. You can toggle the selection of all of the checkboxes with the “all” checkbox.

See the Pen Responsive Portfolio with filter by rob (@robjoeol) on CodePen.

Related Posts