codewithsadee / vcard-personal-portfolio

vCard is a fully responsive personal portfolio website, responsive for all devices.
https://codewithsadee.github.io/vcard-personal-portfolio/
MIT License
5.2k stars 2.14k forks source link

Changing portfolio categories #100

Closed banchan86 closed 4 months ago

banchan86 commented 4 months ago

Just documenting an unintuitive issue for other users that came across the same problem.

When changing the portfolio categories in index.html to your own categories, the spelling of the categories is different in different sections. If you overlook this, the project will not show up in the category. A brief example is illustrated below

In the ul class="filter-list" section

            <li class="filter-item">
              <button data-filter-btn>Personal Projects</button>
            </li>

In the ul class="select-list" section

              <li class="select-item">
                <button data-select-item>Personal Projects</button>
              </li>

And this is the important one, when defining a new item in the ul class="project-list" section, the data-category item must be in lower-case

            <li class="project-item  active" data-filter-item data-category="personal projects">
              <a href="#">

                <figure class="project-img">
                  <div class="project-item-icon-box">
                    <ion-icon name="eye-outline"></ion-icon>
                  </div>

                  <img src="./assets/images/project-3.jpg" alt="fundo" loading="lazy">
                </figure>

                <h3 class="project-title">Fundo</h3>

                <p class="project-category">Personal Projects</p>

This was easy to overlook for me and it was not documented anywhere, so I hope this helps others