Remove category selection

public/assets/main/2_0/css/style.css

@@ -668,69 +668,6 @@ main {
   #PORTFOLIO
 \*-----------------------------------*/
 
-.filter-list {
-  display: none;
-}
-
-.filter-select-box {
-  position: relative;
-  margin-bottom: 25px;
-}
-
-.filter-select {
-  background: var(--eerie-black-2);
-  color: var(--light-gray);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-  padding: 12px 16px;
-  border: 1px solid var(--jet);
-  border-radius: 14px;
-  font-size: var(--fs-6);
-  font-weight: var(--fw-300);
-}
-
-.filter-select.active .select-icon {
-  transform: rotate(0.5turn);
-}
-
-.select-list {
-  background: var(--eerie-black-2);
-  position: absolute;
-  top: calc(100% + 6px);
-  width: 100%;
-  padding: 6px;
-  border: 1px solid var(--jet);
-  border-radius: 14px;
-  z-index: 2;
-  opacity: 0;
-  visibility: hidden;
-  pointer-events: none;
-  transition: 0.15s ease-in-out;
-}
-
-.filter-select.active+.select-list {
-  opacity: 1;
-  visibility: visible;
-  pointer-events: all;
-}
-
-.select-item button {
-  background: var(--eerie-black-2);
-  color: var(--light-gray);
-  font-size: var(--fs-6);
-  font-weight: var(--fw-300);
-  text-transform: capitalize;
-  width: 100%;
-  padding: 8px 10px;
-  border-radius: 8px;
-}
-
-.select-item button:hover {
-  --eerie-black-2: hsl(240, 2%, 20%);
-}
-
 .project-list {
   display: grid;
   grid-template-columns: 1fr;
@@ -856,8 +793,7 @@ main {
    * #PORTFOLIO, BLOG 
    */
 
-  .project-img,
+  .project-img {
-  .blog-banner-box {
     height: auto;
   }
 }
@@ -1058,18 +994,9 @@ main {
    * #PORTFOLIO
    */
 
-  .project-img,
+  .project-img {
-  .blog-banner-box {
     border-radius: 16px;
   }
-
-  .blog-posts-list {
-    gap: 30px;
-  }
-
-  .blog-content {
-    padding: 25px;
-  }
 }
 
 /**
@@ -1108,45 +1035,10 @@ main {
     --fs-8: 15px;
   }
 
-  /**
-   * PORTFOLIO
-   */
-
-  .article-title {
-    padding-bottom: 20px;
-  }
-
-  .filter-select-box {
-    display: none;
-  }
-
-  .filter-list {
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    gap: 25px;
-    padding-left: 5px;
-    margin-bottom: 30px;
-  }
-
-  .filter-item button {
-    color: var(--light-gray);
-    font-size: var(--fs-5);
-    transition: var(--transition-1);
-  }
-
-  .filter-item button:hover {
-    color: var(--light-gray-70);
-  }
-
-  .filter-item button.active {
-    color: var(--orange-yellow-crayola);
-  }
 
   /* portfolio and blog grid */
 
-  .project-list,
+  .project-list {
-  .blog-posts-list {
     grid-template-columns: 1fr 1fr;
   }
 }

public/assets/main/2_0/js/script.js

@@ -15,63 +15,6 @@ const sidebarBtn = document.querySelector("[data-sidebar-btn]");
 sidebarBtn.addEventListener("click", function () { elementToggleFunc(sidebar); });
 
 
-// custom select variables
-const select = document.querySelector("[data-select]");
-const selectItems = document.querySelectorAll("[data-select-item]");
-const selectValue = document.querySelector("[data-select-value]");
-const filterBtn = document.querySelectorAll("[data-filter-btn]");
-
-select.addEventListener("click", function () { elementToggleFunc(this); });
-
-// add event in all select items
-for (let i = 0; i < selectItems.length; i++) {
-  selectItems[i].addEventListener("click", function () {
-
-    let selectedValue = this.innerText.toLowerCase();
-    selectValue.innerText = this.innerText;
-    elementToggleFunc(select);
-    filterFunc(selectedValue);
-
-  });
-}
-
-// filter variables
-const filterItems = document.querySelectorAll("[data-filter-item]");
-
-const filterFunc = function (selectedValue) {
-
-  for (let i = 0; i < filterItems.length; i++) {
-
-    if (selectedValue === "all") {
-      filterItems[i].classList.add("active");
-    } else if (selectedValue === filterItems[i].dataset.category) {
-      filterItems[i].classList.add("active");
-    } else {
-      filterItems[i].classList.remove("active");
-    }
-
-  }
-
-}
-
-// add event in all filter button items for large screen
-let lastClickedBtn = filterBtn[0];
-
-for (let i = 0; i < filterBtn.length; i++) {
-
-  filterBtn[i].addEventListener("click", function () {
-
-    let selectedValue = this.innerText.toLowerCase();
-    selectValue.innerText = this.innerText;
-    filterFunc(selectedValue);
-
-    lastClickedBtn.classList.remove("active");
-    this.classList.add("active");
-    lastClickedBtn = this;
-
-  });
-
-}
 
 // page navigation variables
 const navigationLinks = document.querySelectorAll("[data-nav-link]");

routes/main.js

@@ -3,61 +3,50 @@ var router = express.Router();
 
 /* GET home page. */
 router.get('/', function (req, res, next) {
-
-  const categorys = ["cpp", "games", "js", "cs"];
-
   const entry = [
     {
-      category: categorys[0],
       img: "/images/projects/Advent_Of_Code_Logo.jpg",
       title: "Advent of code",
       des: "My solutions for AOC",
       link: "https://gitlab.com/homep/advent_of_code"
     },
     {
-      category: categorys[1],
       img: "/images/projects/password_manager.jpeg",
       title: "Password manager",
       des: "CLI app",
       link: "https://gitlab.com/homep/password_manager"
     },
     {
-      category: categorys[3],
       img: "/images/projects/media_player.jpeg",
       title: "Media player",
       des: "WPF",
       link: "https://gitlab.com/school221/semester_3/uporabniski_vmesniki"
     },
     {
-      category: categorys[3],
       img: "/images/logo.png",
       title: "Server",
       des: "Everything running on my server",
       link: "https://gitlab.com/homep/server"
     },
     {
-      category: categorys[3],
       img: "/images/projects/projektna_naloga.jpeg",
       title: "Highway Tracker",
       des: "School project",
       link: "https://gitlab.com/school221/projektna_naloga"
     },
     {
-      category: categorys[3],
       img: "/images/projects/bitshift.jpeg",
       title: "BitShifters",
       des: "unity",
       link: "https://gitlab.com/school221/semester_4/razvoj_programskih_sistemov/bitshifters"
     },
     {
-      category: categorys[3],
       img: "/images/projects/tetris.jpeg",
       title: "Tetris",
       des: "WPF",
       link: "https://gitlab.com/school221/semester_4/razvoj_programskih_sistemov/tetrisrps"
     },
     {
-      category: categorys[3],
       img: "/images/projects/games.jpeg",
       title: "Games",
       des: "java",
@@ -65,7 +54,7 @@ router.get('/', function (req, res, next) {
     }
   ];
 
-  res.render('main/2_0', { title: 'Nikola Petrov', disableBootStrap: true, categorys, entry });
+  res.render('main/2_0', { title: 'Nikola Petrov', disableBootStrap: true, entry });
 });
 
 router.get('/old', function (req, res, next) {

views/main/2_0.hbs

@@ -365,50 +365,10 @@
 
       <section class="projects">
 
-        <ul class="filter-list">
-
-          <li class="filter-item">
-            <button class="active" data-filter-btn>All</button>
-          </li>
-
-          {{#each categorys}}
-          <li class="filter-item">
-            <button data-filter-btn>{{this}}</button>
-          </li>
-          {{/each}}
-
-        </ul>
-
-        <div class="filter-select-box">
-
-          <button class="filter-select" data-select>
-
-            <div class="select-value" data-select-value>Select category</div>
-
-            <div class="select-icon">
-              <ion-icon name="chevron-down"></ion-icon>
-            </div>
-
-          </button>
-
-          <ul class="select-list">
-
-            <li class="select-item">
-              <button data-select-item>All</button>
-            </li>
-            {{#each categorys}}
-            <li class="select-item">
-              <button data-select-item>{{this}}</button>
-            </li>
-            {{/each}}
-          </ul>
-
-        </div>
-
         <ul class="project-list">
 
           {{#each entry}}
-          <li class="project-item  active" data-filter-item data-category="{{category}}">
+          <li class="project-item active">
             <a href="{{link}}">
 
               <figure class="project-img">