add page for all projects and refactoring code

_data/blog-navigation.yml

@@ -1,6 +1,6 @@
 - name: Dashboard
   link: "/blog"
-- name: Category
+- name: Categories
   link: "/blog/categories"
 - name: Recent Post
   link: "/blog#recent"

_data/navigation.yml

@@ -1,11 +1,11 @@
 - name: Home
-  link: "#hero"
+  link: "/#hero"
 - name: About
-  link: "#about"
+  link: "/#about"
 - name: Technology
-  link: "#technology"
+  link: "/#technology"
 - name: Projects
-  link: "#project"
+  link: "/#project"
 - name: Blog
   link: /blog
 

_data/projects.yml

@@ -1,11 +1,20 @@
 - name: Freecodecamp Project
   desc: Collection of freecodecamp projects
+  tech:
+    - html
+    - css
+    - javascript
   link:
     github: https://github.com/rizkikadafi/freecodecamp-project/ 
     deployment: https://rizkikadafi.github.io/freecodecamp-project/
   img: /assets/image/projects/freecodecamp-project.png
+
 - name: Codequest
   desc: 'Codequest competition: sustainable city website'
+  tech:
+    - html
+    - css
+    - javascript
   link:
     github: https://github.com/rizkikadafi/codequest/ 
     deployment: https://rizkikadafi.github.io/codequest/

_drafts/test-draft-post.md

@@ -13,3 +13,6 @@ distinguishing them from dessert bananas. The fruit is variable in size,
 color, and firmness, but is usually elongated and curved, with soft
 flesh rich in starch covered with a rind, which may be green, yellow,
 red, purple, or brown when ripe.
+
+| A | B | C |
+| rizki | kadafi | John |

_includes/blog-category-card.html

@@ -1,5 +1,5 @@
 <div class="swiper-slide">
-  <a href="/blog/category/{{ include.category[0] }}">
+  <a href="/blog/categories?category={{ include.category[0] }}">
     <div class="relative text-white">
       <img src="/assets/image/blog-category/{{ include.img }}" alt="{{include.img}}" class="rounded-md">
       <div

_includes/project_card.html

@@ -1,4 +1,5 @@
-<div class="swiper-slide bg-slate-600/70 dark:bg-slate-700 text-white p-2 lg:p-3 rounded-md shadow-custom">
+<div
+  class="swiper-slide bg-slate-600/70 dark:bg-slate-700 text-white p-2 lg:p-3 rounded-md shadow-custom h-fit transition-transform hover:-translate-y-2 duration-200">
   <div class="flex flex-col justify-between h-full">
     <div class="text-center sm:text-left">
       <img src="{{ include.img }}" alt="{{ include.name }}" class="rounded-md">
@@ -11,6 +12,13 @@ <h4 class="font-bold sm:text-lg">{{ include.name }}</h4>
       </div>
     </div>
 
+    <div class="flex justify-center sm:justify-start">
+      {% for tech in include.tech %}
+      <span
+        class="inline-block sm:mr-2 sm:mx-0 mx-1 mb-2 text-sm w-fit bg-slate-500/70 backdrop-blur-md rounded-xl px-3 py-[2px] text-slate-200">{{tech}}</span>
+      {% endfor %}
+    </div>
+
     <div
       class="text-2xl flex justify-center sm:justify-start *:mx-2 sm:*:mx-0 sm:*:mr-3 *:transition-transform hover:*:scale-150 *:duration-100">
       <a href="{{include.link.github}}" target="_blank" class=""><i class="bi bi-github"></i></a>

_layouts/blog.html

@@ -40,20 +40,17 @@
       </div>
     </div>
   </nav>
-  <div class="content">
-    {{ content }}
-  </div>
 
   <div id="top-btn" class="fixed right-5 bottom-5 hidden cursor-pointer z-50">
     <i class="bi bi-arrow-up-circle dark:text-white text-4xl"></i>
   </div>
 
+  {{ content }}
+
   <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.2.1/flowbite.min.js"></script>
   <script src="/assets/js/toggle_dark.js"></script>
   <script src="/assets/js/blog-navbar.js"></script>
-  <script src="/assets/js/category.js"></script>
-  <script src="/assets/js/tag.js"></script>
   <script src="/assets/js/blog-category-swiper.js"></script>
 </body>
 

_layouts/default.html

@@ -8,30 +8,27 @@
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/[email protected]/devicon.min.css">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"
     integrity="sha384-4LISF5TTJX/fLmGSxO53rV4miRxdg84mZsxmO8Rx5jGtp/LbrixFETvWa5a6sESd" crossorigin="anonymous">
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
   <link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.2.1/flowbite.min.css" rel="stylesheet" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
   <link href="/assets/css/main.css" rel="stylesheet" />
 
-  <title>{{ page.title }}</title>
+  <title>Kadafi's Portfolio {% if page.title %} | {{page.title}} {% endif %}</title>
 
 </head>
 
 <body class="overflow-x-hidden bg-slate-200 dark:bg-slate-800 transition duration-300">
-  {{ content }}
 
   <div id="top-btn" class="fixed right-5 bottom-5 hidden cursor-pointer z-50">
     <i class="bi bi-arrow-up-circle dark:text-white text-4xl"></i>
   </div>
 
+  {{ content }}
+
   <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.2.1/flowbite.min.js"></script>
 
-  <!-- <script src="https://cdn.tailwindcss.com"></script> -->
-  <!-- <script src="/assets/js/tailwind.js"></script> -->
-
-  <script src="/assets/js/toggle_dark.js"></script>
   <script src="/assets/js/swiper.js"></script>
-  <script src="/assets/js/navbar.js"></script>
+  <script src="/assets/js/toggle_dark.js"></script>
 </body>
 
 </html>

assets/js/category.js

@@ -3,13 +3,26 @@ const categoriesBtn = document.getElementById('categories-btn')
 const arrayCategories = Array.from(categories.children)
 const arrayCategoriesBtn = Array.from(categoriesBtn.children)
 
-arrayCategories[0].classList.add("flex")
-arrayCategories[0].classList.remove("hidden")
-arrayCategoriesBtn[0].classList.add("border-[1px]", "border-slate-300")
+const urlParams = new URLSearchParams(window.location.search);
+const categoryParam = urlParams.get('category');
 
 let prevActiveCategory = arrayCategories[0]
 let prevActiveBtnCategory = arrayCategoriesBtn[0]
 
+if (categoryParam !== null) {
+  const targetElement = arrayCategories.find(elm => elm.id === categoryParam);
+  const targetBtn = arrayCategoriesBtn.find(elm => elm.getAttribute('data-category') === categoryParam);
+  targetBtn.classList.add("flex")
+  targetElement.classList.remove("hidden")
+  targetBtn.classList.add("border-[1px]", "border-slate-300")
+  prevActiveCategory = targetElement
+  prevActiveBtnCategory = targetBtn
+} else {
+  arrayCategories[0].classList.add("flex")
+  arrayCategories[0].classList.remove("hidden")
+  arrayCategoriesBtn[0].classList.add("border-[1px]", "border-slate-300")
+}
+
 arrayCategoriesBtn.forEach((btn) => {
   btn.addEventListener("click", () => {
     id = btn.getAttribute('data-category')

assets/js/navbar.js

@@ -10,13 +10,13 @@ function handleScroll() {
     window.requestAnimationFrame(function() {
       if (lastKnownScrollPosition !== 0) {
         nav.classList.add(
-          'shadow-custom-xl', 'bg-slate-700/70', 'dark:bg-slate-800/70', 'backdrop-blur-md',
+          'shadow-custom-xl', 'bg-slate-700/70', 'dark:bg-slate-700/70', 'backdrop-blur-md',
           'dark:shadow-custom-xl', 'duration-500'
         )
         toTopBtn.classList.remove('hidden')
       } else {
         nav.classList.remove(
-          'shadow-custom-xl', 'bg-slate-700/70', 'dark:bg-slate-800/70', 'backdrop-blur-md',
+          'shadow-custom-xl', 'bg-slate-700/70', 'dark:bg-slate-700/70', 'backdrop-blur-md',
           'dark:shadow-custom-xl', 'duration-500'
         )
         toTopBtn.classList.add('hidden')

assets/js/swiper.js

@@ -1,4 +1,5 @@
 const swiper = new Swiper('.swiper', {
+  autoHeight: true,
   pagination: {
     el: '.swiper-pagination',
     dynamicBullets: true

blog/categories.html

@@ -4,43 +4,47 @@
 title: categories
 ---
 
-<div class="px-8">
-  <div id="categories-btn"
-    class="flex flex-wrap mt-20 mx-auto bg-slate-400/70 border-slate-200 dark:bg-slate-700/70 backdrop-blur-md dark:border-slate-500 border-[1px] p-3 rounded-md shadow-custom lg:w-5/6"">
+<div class="content">
+  <div class="px-8">
+    <div id="categories-btn"
+      class="flex flex-wrap mt-20 mx-auto bg-slate-400/70 border-slate-200 dark:bg-slate-700/70 backdrop-blur-md dark:border-slate-500 border-[1px] p-3 rounded-md shadow-custom lg:w-5/6"">
 
     {% for category in site.categories %}
     {% if category[0] == 'blog' %}
     {%continue%}
     {% endif %}
 
     <span class=" cursor-pointer inline-block mr-2 my-2 text-sm w-fit bg-slate-500/70 backdrop-blur-md rounded-xl px-3
-    py-[2px] text-slate-200" data-category="{{ category[0] }}" id="category-btn">
-    {{ category[0] | capitalize }}
-    </span>
+      py-[2px] text-slate-200" data-category="{{ category[0] }}">
+      {{ category[0] | capitalize }}
+      </span>
 
-    {% endfor %}
+      {% endfor %}
 
-  </div>
+    </div>
 
-  <div id="categories" class="w-full dark:text-white">
-    {% for category in site.categories %}
-    {% if category[0] == 'blog' %}
-    {%continue%}
-    {% endif %}
-    <section id="{{category[0]}}" class="lg:px-5 hidden flex-col justify-center items-center pt-20">
-      <div class="text-center mb-5">
-        <h1
-          class="text-2xl lg:text-3xl font-bold mb-3 after:content-[''] after:h-[2px] after:w-10 after:block after:mx-auto after:bg-black after:dark:bg-white">
-          {{category[0] | capitalize}}
-        </h1>
-        <p class="w-3/5">{{page.desc}}</p>
-      </div>
-      <div class="w-full mb-10 grid md:grid-cols-2 lg:grid-cols-3 justify-center items-start gap-5">
-        {% for post in category[1] %}
-        {% include blog-post-card.html post=post %}
-        {% endfor %}
-      </div>
-    </section>
-    {% endfor %}
+    <div id="categories" class="w-full dark:text-white">
+      {% for category in site.categories %}
+      {% if category[0] == 'blog' %}
+      {%continue%}
+      {% endif %}
+      <section id="{{category[0]}}" class="lg:px-5 hidden flex-col justify-center items-center mt-5">
+        <div class="text-center mb-5">
+          <h1
+            class="text-2xl lg:text-3xl font-bold mb-3 after:content-[''] after:h-[2px] after:w-10 after:block after:mx-auto after:bg-black after:dark:bg-white">
+            {{category[0] | capitalize}}
+          </h1>
+          <p class="w-3/5">{{page.desc}}</p>
+        </div>
+        <div class="w-full mb-10 grid md:grid-cols-2 lg:grid-cols-3 justify-center items-start gap-5">
+          {% for post in category[1] %}
+          {% include blog-post-card.html post=post %}
+          {% endfor %}
+        </div>
+      </section>
+      {% endfor %}
+    </div>
   </div>
 </div>
+
+<script src="/assets/js/category.js"></script>