Fireflies particles! 🔥

assets/particlesjs-config.json

@@ -0,0 +1,110 @@
+{
+  "particles": {
+    "number": {
+      "value": 50,
+      "density": {
+        "enable": true,
+        "value_area": 500
+      }
+    },
+    "color": {
+      "value": "#fed936"
+    },
+    "shape": {
+      "type": "circle",
+      "stroke": {
+        "width": 0,
+        "color": "#000000"
+      },
+      "polygon": {
+        "nb_sides": 5
+      },
+      "image": {
+        "src": "img/github.svg",
+        "width": 100,
+        "height": 100
+      }
+    },
+    "opacity": {
+      "value": 1,
+      "random": true,
+      "anim": {
+        "enable": true,
+        "speed": 1,
+        "opacity_min": 0.1,
+        "sync": true
+      }
+    },
+    "size": {
+      "value": 8,
+      "random": true,
+      "anim": {
+        "enable": true,
+        "speed": 4.794898228285104,
+        "size_min": 0.1,
+        "sync": true
+      }
+    },
+    "line_linked": {
+      "enable": false,
+      "distance": 150,
+      "color": "#ffffff",
+      "opacity": 0.4,
+      "width": 1
+    },
+    "move": {
+      "enable": true,
+      "speed": 3,
+      "direction": "none",
+      "random": true,
+      "straight": false,
+      "out_mode": "out",
+      "bounce": false,
+      "attract": {
+        "enable": false,
+        "rotateX": 600,
+        "rotateY": 1200
+      }
+    }
+  },
+  "interactivity": {
+    "detect_on": "canvas",
+    "events": {
+      "onhover": {
+        "enable": true,
+        "mode": "repulse"
+      },
+      "onclick": {
+        "enable": false,
+        "mode": "push"
+      },
+      "resize": true
+    },
+    "modes": {
+      "grab": {
+        "distance": 400,
+        "line_linked": {
+          "opacity": 1
+        }
+      },
+      "bubble": {
+        "distance": 400,
+        "size": 40,
+        "duration": 2,
+        "opacity": 8,
+        "speed": 3
+      },
+      "repulse": {
+        "distance": 200,
+        "duration": 0.4
+      },
+      "push": {
+        "particles_nb": 4
+      },
+      "remove": {
+        "particles_nb": 2
+      }
+    }
+  },
+  "retina_detect": true
+}

index.html

@@ -73,10 +73,10 @@ <h2 class="text-2xl lg:text-5xl">What is DandyHacks?</h2>
     </div>
     <img class="hidden lg:block lg:relative lg:b-[150px]" src="img/sticker1.png" />
   </div>
-  <div id="faq" class="px-5 lg:bg-repeat-y lg:bg-center-top lg:bg-fireflies lg:px-0">
+  <div id="faq" class="relative px-5">
     <div class="flex flex-col items-center py-24 box-border gap-12 lg:gap-20">
       <h2 class="text-5xl">FAQS</h2>
-      <div class="flex flex-col px-10 py-4 lg:py-0 gap-5 lg:px-0">
+      <div class="flex flex-col px-10 py-4 pointer-events-none lg:py-0 gap-5 lg:px-0">
         <details>
           <summary>
             What is a hackathon?
@@ -213,6 +213,7 @@ <h3 class="text-3xl text-center pb-7">Why sponsor?</h3>
       <span>© 2023 DandyHacks</span>
     </div>
   </footer>
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/particles.min.js"></script>
   <script src="script.js"></script>
 </body>
 

main.css

@@ -27,14 +27,26 @@
 
 @layer utilities {
   details {
-    @apply lg:w-[923px] bg-purple text-deep-purple rounded-[30px] py-2.5 lg:px-12 px-4;
+    @apply lg:w-[923px] bg-purple text-deep-purple rounded-[30px] py-2.5 lg:px-12 px-4 pointer-events-auto;
   }
 
   details summary {
-    @apply flex items-center justify-between text-2xl font-bold after:float-right marker:content-none after:content-none after:w-9 after:h-9 after:justify-self-end;
+    @apply flex items-center justify-between text-2xl font-bold hover:cursor-pointer after:float-right marker:content-none after:content-none after:w-9 after:h-9 after:justify-self-end;
   }
 
   details p {
     @apply text-2xl;
   }
+
+  canvas {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
+  #faq > div > * {
+    position: relative;
+    z-index: 10;
+  }
 }

script.js

@@ -38,4 +38,8 @@ document.addEventListener('DOMContentLoaded', () => {
             document.body.classList.add('overflow-hidden');
         }
     });
+
+    // particles.js
+
+    particlesJS.load('faq', 'assets/particlesjs-config.json');
 });

styles.css

@@ -639,6 +639,10 @@ h1, h2, h3, h4, h5, h6 {
   inset: -0.25rem;
 }
 
+.bottom-16 {
+  bottom: 4rem;
+}
+
 .end-1 {
   inset-inline-end: 0.25rem;
 }
@@ -651,30 +655,6 @@ h1, h2, h3, h4, h5, h6 {
   top: 0px;
 }
 
-.-top-\[150px\] {
-  top: -150px;
-}
-
-.-top-\[10px\] {
-  top: -10px;
-}
-
-.bottom-\[150px\] {
-  bottom: 150px;
-}
-
-.bottom-full {
-  bottom: 100%;
-}
-
-.bottom-0 {
-  bottom: 0px;
-}
-
-.bottom-16 {
-  bottom: 4rem;
-}
-
 .isolate {
   isolation: isolate;
 }
@@ -2580,6 +2560,7 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 details {
+  pointer-events: auto;
   border-radius: 30px;
   --tw-bg-opacity: 1;
   background-color: rgb(182 115 235 / var(--tw-bg-opacity));
@@ -2627,11 +2608,27 @@ details summary::after {
   content: var(--tw-content);
 }
 
+details summary:hover {
+  cursor: pointer;
+}
+
 details p {
   font-size: 1.5rem;
   line-height: 2rem;
 }
 
+canvas {
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+#faq > div > * {
+  position: relative;
+  z-index: 10;
+}
+
 @font-face {
   font-family: "Katahdin Round";
 
@@ -2816,10 +2813,6 @@ details p {
     background-color: rgb(27 0 44 / var(--tw-bg-opacity));
   }
 
-  .lg\:bg-fireflies {
-    background-image: url('img/website-bg2.png');
-  }
-
   .lg\:bg-groundboi {
     background-image: url('img/sticker2-no_border.png');
   }
@@ -2836,10 +2829,6 @@ details p {
     background-repeat: no-repeat;
   }
 
-  .lg\:bg-repeat-y {
-    background-repeat: repeat-y;
-  }
-
   .lg\:p-0 {
     padding: 0px;
   }