Portfolio components

Components that are related to the portfolio section of the website.

Around component

Make sure to link to Shuffle plugin js file in your document for masonry grid and filtering to work: vendor/shuffle/dist/shuffle.min.js . Use this page as a reference.

Basic card

Mobile App Icon Design

Mobile App Design

<!-- Basic portfolio card -->
<a href="#" class="card card-hover border-0 box-shadow">
  <img src="path-to-image" class="card-img-top" alt="Portfolio thumb"/>
  <div class="card-body text-center">
    <h3 class="h5 nav-heading mb-2">Mobile App Icon Design</h3>
    <p class="font-size-sm text-muted mb-2">Mobile App Design</p>
  </div>
</a>

// Basic portfolio card
a(href="#").card.card-hover.border-0.box-shadow
  +image("path-to-image", "Portfolio thumb").card-img-top
  .card-body.text-center
    h3.h5.nav-heading.mb-2 Mobile App Icon Design
    p.font-size-sm.text-muted.mb-2 Mobile App Design

Hover effect: Flip

Smart Toothbrush

in Product Design

View project

<!-- Flip hover effect -->
<div class="card card-flip">
  <div class="card-flip-inner">
    <div class="card-flip-front">
      <img class="card-img" src="path-to-image" alt="Portfolio thumb"/>
    </div>
    <a class="card-flip-back" href="#">
      <div class="card-body">
        <div class="card-body-inner">
          <h3 class="h5 card-title mb-2">Smart Toothbrush</h3>
          <p class="font-size-sm text-muted">in Product Design</p>
          <span class="btn btn-primary btn-sm">View project</span>
        </div>
      </div>
    </a>
  </div>
</div>

// Flip hover effect
.card.card-flip
  .card-flip-inner
    .card-flip-front
      +image("path-to-image", "Portfolio thumb").card-img
    a(href="#").card-flip-back
      .card-body
        .card-body-inner
          h3.h5.card-title.mb-2 Smart Toothbrush
          p.font-size-sm.text-muted in Product Design
          span.btn.btn-primary.btn-sm View project

Hover effect: Slide up

Cosmetics Packaging

in Package Design

<!-- Slide up hover effect -->
<div class="card card-curved-body box-shadow card-slide">
  <div class="card-slide-inner">
    <img class="card-img" src="path-to-image" alt="Portfolio thumb"/>
    <a class="card-body text-center" href="#">
      <h3 class="h5 nav-heading mt-1 mb-2">Cosmetics Packaging</h3>
      <p class="font-size-sm text-muted mb-1">in Package Design</p>
    </a>
  </div>
</div>

// Slide up hover effect
.card.card-curved-body.box-shadow.card-slide
  .card-slide-inner
    +image("path-to-image", "Portfolio thumb").card-img
    a(href="#").card-body.text-center
      h3.h5.nav-heading.mt-1.mb-2 Cosmetics Packaging
      p.font-size-sm.text-muted.mb-1 in Package Design

Masonry grid with filters

Hand Cream Bottle

in Package Design

View project

Clay Glass Render

in 3D Modelling

View project

Promo Flyer Design

in Stationery

View project

Cosmetics Packaging

in Package Design

View project

Package Branding

in Identity Design

View project

Company Branding

in Identity Design

View project

<!-- Masonry grid with filters -->
<div class="cs-masonry-filterable">

  <!-- Filters -->
  <ul class="cs-masonry-filters nav nav-tabs justify-content-center pb-4">
    <li class="nav-item">
      <a class="nav-link active" href="#" data-group="all">All</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#" data-group="branding">Branding</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#" data-group="stationery">Stationery</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#" data-group="packaging">Packaging</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#" data-group="3d">3D modelling</a>
    </li>
  </ul>

  <!-- Grid -->
  <div class="cs-masonry-grid" data-columns="3">

    <!-- Item -->
    <div class="cs-grid-item" data-groups='["packaging"]'>
      <div class="card card-flip">
        <div class="card-flip-inner">
          <div class="card-flip-front">
            <img class="card-img" src="path-to-image" alt="Portfolio thumb"/>
          </div>
          <a class="card-flip-back" href="#">
            <div class="card-body">
              <div class="card-body-inner">
                <h3 class="h5 card-title mb-2">Hand Cream Bottle</h3>
                <p class="font-size-sm text-muted">in Package Design</p>
                <span class="btn btn-primary btn-sm">View project</span>
              </div>
            </div>
          </a>
        </div>
      </div>
    </div>

    <!-- Item -->
    <div class="cs-grid-item" data-groups='["3d"]'>
      <div class="card card-flip">
        <div class="card-flip-inner">
          <div class="card-flip-front">
            <img class="card-img" src="path-to-image" alt="Portfolio thumb"/>
          </div>
          <a class="card-flip-back" href="#">
            <div class="card-body">
              <div class="card-body-inner">
                <h3 class="h5 card-title mb-2">Clay Glass Render</h3>
                <p class="font-size-sm text-muted">in 3D Modelling</p>
                <span class="btn btn-primary btn-sm">View project</span>
              </div>
            </div>
          </a>
        </div>
      </div>
    </div>

    <!-- Item -->
    <div class="cs-grid-item" data-groups='["stationery", "branding"]'>
      <div class="card card-flip">
        <div class="card-flip-inner">
          <div class="card-flip-front">
            <img class="card-img" src="path-to-image" alt="Portfolio thumb"/>
          </div>
          <a class="card-flip-back" href="#">
            <div class="card-body">
              <div class="card-body-inner">
                <h3 class="h5 card-title mb-2">Promo Flyer Design</h3>
                <p class="font-size-sm text-muted">in Stationery</p>
                <span class="btn btn-primary btn-sm">View project</span>
              </div>
            </div>
          </a>
        </div>
      </div>
    </div>

    <!-- More items... -->
  </div>
</div>

// Masonry grid with filters
.cs-masonry-filterable

  // Filters
  ul.cs-masonry-filters.nav.nav-tabs.justify-content-center.pb-4
    li.nav-item
      a(href="#", data-group="all").nav-link.active
        | All
    li.nav-item
      a(href="#", data-group="branding").nav-link
        | Branding
    li.nav-item
      a(href="#", data-group="stationery").nav-link
        | Stationery
    li.nav-item
      a(href="#", data-group="packaging").nav-link
        | Packaging
    li.nav-item
      a(href="#", data-group="3d").nav-link
        | 3D modelling

  // Grid
  .cs-masonry-grid(data-columns='3')

    // Item
    .cs-grid-item(data-groups='["packaging"]')
      .card.card-flip
        .card-flip-inner
          .card-flip-front
            +image("path-to-image", "Portfolio thumb").card-img
          a(href="#").card-flip-back
            .card-body
              .card-body-inner
                h3.h5.card-title.mb-2 Hand Cream Bottle
                p.font-size-sm.text-muted in Package Design
                span.btn.btn-primary.btn-sm View project

    // Item
    .cs-grid-item(data-groups='["3d"]')
      .card.card-flip
        .card-flip-inner
          .card-flip-front
            +image("path-to-image", "Portfolio thumb").card-img
          a(href="#").card-flip-back
            .card-body
              .card-body-inner
                h3.h5.card-title.mb-2 Clay Glass Render
                p.font-size-sm.text-muted in 3D Modelling
                span.btn.btn-primary.btn-sm View project

    // Item
    .cs-grid-item(data-groups='["stationery", "branding"]')
      .card.card-flip
        .card-flip-inner
          .card-flip-front
            +image("path-to-image", "Portfolio thumb").card-img
          a(href="#").card-flip-back
            .card-body
              .card-body-inner
                h3.h5.card-title.mb-2 Promo Flyer Design
                p.font-size-sm.text-muted in Stationery
                span.btn.btn-primary.btn-sm View project

    // More items...