HTML Templates •
Last updated: January 21, 2026

Portfolio and Showcase

Brandflow HTML Site Template

Table of Contents

The Portfolio is the heart of Brandflow. It supports grid layouts and detailed hover effects.

Main Showcase (Index Page)

On the homepage, the portfolio is a list of large, interactive cards.

Adding a Project

Find the showcase-item div:

   <div class="showcase-item relative group overflow-hidden">
      <!-- Overlay -->
      <div class="overlay-images ..."></div>
      
      <!-- Image -->
      <img src="assets/images/showcase-1.webp" ...>
      
      <!-- Hover Card Info -->
      <div class="hover-card ...">
         <h2>Project Title</h2>
         <p>Category</p>
      </div>
   </div>

Important: Ensure you keep the group and overflow-hidden classes on the parent, and the group-hover classes on the inner elements. This controls the sliding overlay animation.

Portfolio Page (Grid View)

In portfolio_v1.html or portfolio_v2.html, projects are arranged in a grid.

  • To add a new row, simply duplicate the project column divs.
  • Ensure images are consistent in size (e.g., all landscape or all portrait) to keep the grid aligned.

Filtering (Isotope)

If your template uses Isotope for filtering (buttons like “All”, “Branding”, “Design”):

  1. Add a data-filter category to the button:
<button data-filter=".branding">
  1. Add the corresponding class to the portfolio item:
<div class="portfolio-item branding">