How to Create a Responsive, Filterable Portfolio

As a web developer, I usually read questions on StackOverflow or Quora to see what kind of challenges people have faced and want to find an easier solution. One of the most popular challenges which I've noticed was developing a portfolio with a filter. In this article, you will learn how to develop a portfolio with a filter by using Bootstrap. Here are the several steps that we should follow to get our portfolio ready. 

1. Create a Link for Each Category   

 First, we need to create a link for every single category in our HTML file.

<section id="portfolio" class="bg-light-gray">
    <div class="gallary animate-grid">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center">
                    <h2 class="section-heading">Portfolio</h2>
                    <h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
                </div>
            </div>
                <div class="row">
                <div class="col-xs-12">
                    <div class="categories">
                        <ul>
                            <li>
                                <ol>
                                    <li><a href="#" data-filter="*" class="active">All</a></li>
                                    <li><a href="#" data-filter=".architecture">Architecture</a></li>
                                    <li><a href="#" data-filter=".fashion">Fashion</a></li>
                                    <li><a href="#" data-filter=".land">Landscape</a></li>
                                    <li><a href="#" data-filter=".food">Food</a></li>
                                </ol>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

As you can see, we have added special data filters for each category which will help us to filter portfolio items by its category.

Now we can work on styling the portfolio's filtering links.

.gallary ul {
    padding: 10px 0;
    text-align: center;
}

.gallary ul li {
    display: inline-block;
    margin-top: 10px;
    margin-bottom: 50px
}

.gallary ol li {
    display: inline-block;
    margin-left: 20px;
}

.gallary ol li:after {
    margin-left: 20px;
}

.gallary ol li a {
    color: #00c9ff;
    border-width: 1px;
    border-radius: 50px;
    border-color: #00c9ff;
    border-style: solid;
    font-weight: 500;
    font-size: 25px;
    padding-left: 15px;
    padding-right: 15px;
    text-decoration: none;
}

.gallary ol li a.active {
    font-weight: 700;
    font-weight: 500;
    border-radius: 50px;
    background-color: #00c9ff;
    color: white;
    font-size: 25px;
    padding-left: 15px;
    padding-right: 15px;
    text-decoration: none;
}

.gallary ol li a:hover,
.gallary ol li a:focus{
    font-weight: 500;
    border-radius: 50px;
    background-color: #00c9ff;
    color: white;
    font-size: 25px;
    padding-left: 15px;
    padding-right: 15px;
    text-decoration: none;
}

2. Create a Portfolio Item

Now we need to add our portfolio items by including a category class for each one.

In this case, our categories are architecture, fashion, landscape, and food.

<div class="row gallary-thumbs">
                <div class="col-md-4 col-sm-6 portfolio-item architecture">
                    <a href="#portfolioModal1" class="portfolio-link" data-toggle="modal">
                        <div class="portfolio-hover">
                            <div class="portfolio-hover-content">
                                <i class="fa fa-search-plus"></i>
                            </div>
                        </div>
                        <img src="img/architecture1.jpg" class="img-responsive" alt="">
                    </a>
                    <div class="portfolio-caption">
                        <h4> San Francisco</h4>
                        <p class="text-muted">Architecture</p>
                    </div>
                </div>

As you can see, this portfolio item has an architecture class. Let's copy and paste this snippet several times and change the class name for each one.

Now we need to style our portfolio items to make them more attractive.

#portfolio .portfolio-item {
    margin: 0 0 15px;
    right: 0
}

#portfolio .portfolio-item .portfolio-link {
    display: block;
    position: relative;
    max-width: 400px;
    margin: 0 auto
}

#portfolio .portfolio-item .portfolio-link .portfolio-hover {
    background: #03bcf7;
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all ease .5s;
    -webkit-transition: all ease .5s;
    -moz-transition: all ease .5s;
}

#portfolio .portfolio-item .portfolio-link .portfolio-hover:hover {
    opacity: 0.7;
}

#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content {
    position: absolute;
    width: 100%;
    height: 20px;
    font-size: 20px;
    text-align: center;
    top: 50%;
    margin-top: -12px;
    color: #fff
}

#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content i {
    margin-top: -30px;
}

    .fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 80px;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
} 

#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h3,
#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h4 {
    margin: 0
}

#portfolio .portfolio-item .portfolio-caption {
    max-width: 400px;
    margin: 0 auto;
    background-color: #fff;
    text-align: center;
    padding: 25px
}

#portfolio .portfolio-item .portfolio-caption h4 {
    text-transform: none;
    margin: 0
}

#portfolio .portfolio-item .portfolio-caption p {
    font-size: 16px;
    margin: 0
}

#portfolio * {
    z-index: 2
}

@media (min-width:767px) {
    #portfolio .portfolio-item {
        margin: 0 0 30px
    }
}

3. Make Your Portfolio Items More Functional

You may want to make a portfolio item clickable, which will open the larger version of the item with its description. In the HTML script above, you may notice these lines.

 <a href="#portfolioModal1" class="portfolio-link" data-toggle="modal">
                        <div class="portfolio-hover">
                            <div class="portfolio-hover-content">
                                <i class="fa fa-search-plus"></i>
                            </div>
                        </div>
                        <img src="img/architecture1.jpg" class="img-responsive" alt="">
                    </a>

Through the link, it will open a larger version of the portfolio item with its description, but before that, we need to add some code to make it ready.

<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true" style="display: none;">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="close-modal" data-dismiss="modal">
                    <div class="lr">
                        <div class="rl">
                        </div>
                    </div>
                </div>
                <div class="container">
                    <div class="row">
                        <div class="col-lg-8 col-lg-offset-2">
                            <div class="modal-body">
                                <!-- Project Details Go Here -->
                                <h2>Project Name</h2>
                                <p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p>
                                <img class="img-responsive img-centered" src="img/architecture1.jpg" alt="">
                                <ul class="list-inline">                                                                                    
                                </ul>                              
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

This script is for the first portfolio item which has an architecture class. You need to copy and paste this script for each item again. Don't forget to make needed changes for each portfolio item. Now we can add styling for this part.

.portfolio-modal .modal-dialog {
    margin: 0;
    height: 100%;
    width: auto
}

.portfolio-modal .modal-content {
    border-radius: 0;
    background-clip: border-box;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: none;
    min-height: 100%;
    padding: 100px 0;
    text-align: center
}

.portfolio-modal .modal-content h2 {
    margin-bottom: 15px;
    font-size: 3em
}

.portfolio-modal .modal-content p {
    margin-bottom: 30px
}

.portfolio-modal .modal-content p.item-intro {
    margin: 20px 0 30px;
    font-family: "Droid Serif", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-style: italic;
    font-size: 16px
}

.portfolio-modal .modal-content ul.list-inline {
    margin-bottom: 30px;
    margin-top: 0
}

.portfolio-modal .modal-content img {
    margin-bottom: 30px
}

.portfolio-modal .close-modal {
    position: absolute;
    width: 75px;
    height: 75px;
    background-color: transparent;
    top: 25px;
    right: 25px;
    cursor: pointer
}

.portfolio-modal .close-modal:hover {
    opacity: .3
}

.portfolio-modal .close-modal .lr {
    height: 75px;
    width: 1px;
    margin-left: 35px;
    background-color: #222;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    z-index: 1051
}

.portfolio-modal .close-modal .lr .rl {
    height: 75px;
    width: 1px;
    background-color: #222;
    transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    z-index: 1052
}

.portfolio-modal .modal-backdrop {
    opacity: 0;
    display: none
}

4. Filtering With Animation

What's next?

Now we will work on the most interesting and challenging part of the portfolio's filtering feature.

Fortunately, there are a variety of jQuery plugins that you can use. Here are some of the most popular portfolio filtering plugins:

• Quicksand 
• Isotope
• MixItUp

 In this tutorial, we will use Isotope plugin. Let's add this snippet to the index HTML. 

 <script src="https://unpkg.com/isotope-layout@3.0.3/dist/isotope.pkgd.js"></script>

Now it's time to write our JavaScript code.

$(window).load(function() {
    var $container = $('.animate-grid .gallary-thumbs');
    $container.isotope({
        filter: '*',
        transitionDuration: '0.6s',
    });
    $('.animate-grid .categories a').click(function() {
        $('.animate-grid .categories .active').removeClass('active');
        $(this).addClass('active');
        var selector = $(this).attr('data-filter');
        $container.isotope({
            filter: selector
        });
        return false;
    });
});

As you can see, the transition duration is 0.6 seconds. You can change the value and make the animation slower or faster. Let's add a couple of lines in our CSS file as the last step.  

@media (max-width: 767px) {

    .isotope-item {
        text-align: center;
    }
}

As they update this plugin regularly, it's recommended to check updates for animating.

Also, you can download full the source code of this tutorial on Github. It will include all the files as well as their minified versions.