deploy: bf0d024

rizkikadafi · Apr 14, 2024 · d12ceb3 · d12ceb3
1 parent bcc7fdb
commit d12ceb3
Show file tree

Hide file tree

Showing 25 changed files with 954 additions and 1,770 deletions.
diff --git a/404.html b/404.html
@@ -8,15 +8,20 @@
   <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></title>
+  <title>Kadafi's Portfolio </title>
 
 </head>
 
 <body class="overflow-x-hidden bg-slate-200 dark:bg-slate-800 transition duration-300">
+
+  <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>
+
   <div class="min-h-full px-4 py-16 sm:px-6 sm:py-24 md:grid md:place-items-center lg:px-8">
   <div class="max-w-max mx-auto">
     <main class="sm:flex">
@@ -40,19 +45,11 @@ <h1 class="text-4xl font-extrabold text-gray-900 tracking-tight sm:text-5xl dark
 </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>
-
   <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>
diff --git a/assets/css/main.css b/assets/css/main.css
diff --git a/assets/js/category.js b/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')

diff --git a/assets/js/navbar.js b/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')

diff --git a/assets/js/swiper.js b/assets/js/swiper.js
@@ -1,4 +1,5 @@
 const swiper = new Swiper('.swiper', {
+  autoHeight: true,
   pagination: {
     el: '.swiper-pagination',
     dynamicBullets: true