Portfolio

There are many different types of portfolio in the template. The standard portfolio looks like this:

Standard portfolio structure:

<section class="portfolio-layout large-section">
        <div class="container">
            <div class="button-group button-group-default d-flex justify-content-center">
                <button data-filter="*" class="active-button">Show All</button>
                <button data-filter=".branding">Branding</button>
                <button data-filter=".design">Design</button>
                <button data-filter=".packaging">Packaging</button>
                <button data-filter=".advertising">Advertising</button>
            </div>
        </div>
        <div class="container-fluid grid-three-columns">
            <div class="row grid grid-columns"
                 data-aos="fade-up"
                 data-aos-delay="250"
                 data-aos-anchor-placement="top-bottom"
                 data-aos-easing="ease-in-out"
                 data-aos-duration="600">
                <div class="grid-item branding advertising">
                    <a href="project-mixed-3.html">
                        <div class="img-wrapper">
                            <img src="assets/img/assets/mockup13.jpg" alt="" class="img-fluid">
                            <div class="description-box">
                                <h5 class="title">Business Card</h5>
                                <p class="category">Branding / Advertising</p>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </section>

Grid initialization:

isotope_grid_init(isotope_grid, button_group);

You can edit a single project for each portfolio item. Standard single post looks like this:

Standard single post structure:

<section class="single-project-wrapper">
        <!-- [4] Video project -->
        <section class="video-project d-flex align-items-center small-section"
                 data-aos="slide-right"
                 data-aos-delay="100"
                 data-aos-anchor-placement="top-bottom"
                 data-aos-easing="ease-in-out"
                 data-aos-duration="700">
            <div class="container">
                <div class="row">
                    <div class="col">
                        <div class="hs-responsive-embed"
                             data-aos="fade-right"
                             data-aos-delay="100"
                             data-aos-anchor-placement="top-bottom"
                             data-aos-easing="ease-in-out"
                             data-aos-duration="700">
                            <iframe src="https://www.youtube.com/embed/T9ANjrkz0pY"
                                    allowfullscreen></iframe>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- [5] Description Project -->
        <section class="description-project-default large-section gray-section">
            <div class="container description-wrapper">
                <div class="row">
                    <div class="col-md-8 col-lg-7 col-xl-6"
                         data-aos="fade-right"
                         data-aos-delay="100"
                         data-aos-anchor-placement="top-bottom"
                         data-aos-easing="ease-in-out"
                         data-aos-duration="700">
                        <h2 class="section-title">Creative Website for a professional web studio.</h2>
                        <p class="description"> Donec lacus nunc, viverra nec, blandit vel, egestas et, augue vestibulum
                            tincidunt malesuada
                            tellus.
                            Ut ultrices ultrices enim curabitur sit amet mauris.
                            Lorem ipsum dolor sit amet</p>
                        <p class="description">Morbi in dui quis est pulvinar ullamcorper nulla facilisi. Integer
                            lacinia
                            sollicitudin massa.
                            Cras metus sed aliquet risus a tortor. Integer id quam morbi mi quisque nisl felis</p>
                        <div class="btn-wrap d-flex">
                            <a href="#" class="button-default-black"><i class="fa fa-link"></i>View website</a>
                        </div>
                    </div>
                    <div class="col-lg-1 col-xl-2 divider"></div>
                    <div class="col-md-4 col-lg-4 col-xl-4">
                        <ul class="project-information"
                            data-aos="fade-left"
                            data-aos-delay="100"
                            data-aos-anchor-placement="top-bottom"
                            data-aos-easing="ease-in-out"
                            data-aos-duration="700">
                            <li>
                                <p class="title">Client: </p>
                                <p class="info-text">Jonathan Doe inc.</p>
                            </li>
                            <li>
                                <p class="title">Date: </p>
                                <p class="info-text">2022-04-25</p>
                            </li>
                            <li>
                                <p class="title">Website: </p>
                                <p class="info-text"><a href="#">Example.com</a></p>
                            </li>
                            <li>
                                <p class="title">Categories: </p>
                                <p class="info-text">Development, Modern, Design</p>
                            </li>
                            <li>
                                <p class="title">Price: </p>
                                <p class="info-text">1500$</p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>
        <!-- [6] Navigation Project -->
        <section class="navigation-project white-section border-bottom-simple border-top-simple">
            <div class="container-fluid"
                 data-aos="fade"
                 data-aos-delay="100"
                 data-aos-anchor-placement="top-bottom"
                 data-aos-easing="ease-in-out"
                 data-aos-duration="700">
                <div class="row d-flex justify-content-between align-items-center">
                    <div class="nav-link">
                        <a href="#" class="additional-link">
                            <i class="fa fa-angle-left"></i>
                            <span>Previous project</span>
                        </a>
                    </div>
                    <div class="nav-link main-link">
                        <a href="#">
                            <i class="fa fa-th-large"></i>
                        </a>
                    </div>
                    <div class="nav-link">
                        <a href="#" class="additional-link">
                            <span>Next project</span>
                            <i class="fa fa-angle-right"></i>
                        </a>
                    </div>
                </div>
            </div>
        </section>
    </section>