How to Create a Portfolio Gallery With Filtering

how-to-create-a-portfolio-gallery-with-filtering

As a web developer, showcasing your portfolio is a critical aspect of your personal brand and career advancement.

An attractive and user-friendly portfolio can help you stand out from the crowd, attract clients, and demonstrate your skills to potential employers.

One way to make your portfolio stand out is by incorporating a filtering system that allows users to easily navigate your work and find what they are looking for.

In this tutorial, we will walk through how to create a portfolio gallery with filtering using HTML, CSS, and JavaScript.

Step 1: HTML Structure

The first step in creating a portfolio gallery is to define the structure of your HTML.

You’ll need to define a container for your portfolio items, individual elements for each item, and a filtering system.

Here is a basic HTML structure that you can build upon:

<div class="container">
  <div class="filters">
    <button class="filter-btn" data-filter="all">All</button>
    <button class="filter-btn" data-filter="web-design">Web Design</button>
    <button class="filter-btn" data-filter="graphic-design">Graphic Design</button>
    <button class="filter-btn" data-filter="branding">Branding</button>
  </div>
  <div class="portfolio-items">
    <div class="portfolio-item web-design">
      <img src="img-1.jpg" alt="Web Design">
      <div class="item-info">
        <h3>Web Design Project 1</h3>
        <p>Lorem ipsum dolor sit amet.</p>
      </div>
    </div>
    <div class="portfolio-item graphic-design">
      <img src="img-2.jpg" alt="Graphic Design">
      <div class="item-info">
        <h3>Graphic Design Project 1</h3>
        <p>Lorem ipsum dolor sit amet.</p>
      </div>
    </div>
    ...
  </div>
</div>

Step 2: CSS Styles

Next, you’ll need to add some styles to your portfolio gallery using CSS. Here are some basic styles you can use to start:

.container {
display: flex;
flex-wrap: wrap;
}

.filters {
display: flex;
justify-content: center;
margin-bottom: 30px;
}

.filter-btn {
background-color: #ddd;
border: 1px solid #ddd;
border-radius: 5px;
padding: 10px 20px;
margin-right: 10px;
cursor: pointer;
}

.portfolio-items {
display: flex;
flex-wrap: wrap;
}

.portfolio-item {
width: 25%;
height: 300px;
overflow: hidden;
margin-bottom: 30px;
}

.portfolio-item img {
width: 100%;
height: 100%;
object-fit: cover;
}

.item-info {
background-color: rgba(255, 255, 255, 0.8);
position:absolute;
bottom: 0;
width: 100%;
padding: 10px;
box-sizing: border-box;
text-align: center;
}

Step 3: JavaScript Functionality

Finally, you’ll need to add some JavaScript to make the filtering system work. You can use the following code as a starting point:

const filterBtns = document.querySelectorAll(".filter-btn");

filterBtns.forEach(function(btn) {
  btn.addEventListener("click", function(e) {
    const filter = e.currentTarget.dataset.filter;
    const portfolioItems = document.querySelectorAll(".portfolio-item");

    portfolioItems.forEach(function(item) {
      if (filter === "all") {
        item.style.display = "block";
      } else {
        if (item.classList.contains(filter)) {
          item.style.display = "block";
        } else {
          item.style.display = "none";
        }
      }
    });
  });
});

Conclusion:

By following these steps, you can create a portfolio gallery with filtering that is both user-friendly and visually appealing.

Of course, you can customize and build upon these code examples to create a portfolio that truly reflects your brand and skills.

Whether you’re a freelance web developer or seeking employment, having a well-designed portfolio is a critical component of your personal brand and career success.

Tags

Related Posts