Fix(UI): Particle Zindex Problem

Ikram-Maulana · Oct 26, 2022 · c21ca09 · c21ca09
1 parent 630cbbc
commit c21ca09
Show file tree

Hide file tree

Showing 2 changed files with 99 additions and 67 deletions.
diff --git a/components/Particle.tsx b/components/Particle.tsx
@@ -12,78 +12,107 @@ const Particle = () => {
     <Particles
       id="tsparticles"
       init={particlesInit}
-      className="absolute z-0 w-full h-full"
+      className="absolute top-0 left-0 w-full h-full"
       options={{
-        fullScreen: {
-          enable: false,
-          zIndex: -1,
+        "fullScreen": {
+            "enable": false,
         },
-        fpsLimit: 120,
-        interactivity: {
-          events: {
-            onClick: {
-              enable: true,
-              mode: "push",
+        "particles": {
+            "number": {
+                "value": 160,
+                "density": {
+                    "enable": true,
+                    "value_area": 800
+                }
             },
-            onHover: {
-              enable: true,
-              mode: "repulse",
+            "color": {
+                "value": "#ffffff"
             },
-            resize: true,
-          },
-          modes: {
-            push: {
-              quantity: 4,
+            "shape": {
+                "type": "circle"
             },
-            repulse: {
-              distance: 200,
-              duration: 0.4,
+            "opacity": {
+                "value": 1,
+                "random": true,
+                "anim": {
+                    "enable": true,
+                    "speed": 1,
+                    "opacity_min": 0,
+                    "sync": false
+                }
             },
-          },
-        },
-        particles: {
-          color: {
-            value: "#ffffff",
-          },
-          links: {
-            color: "#ffffff",
-            distance: 150,
-            enable: true,
-            opacity: 0.5,
-            width: 1,
-          },
-          collisions: {
-            enable: true,
-          },
-          move: {
-            direction: "none",
-            enable: true,
-            outModes: {
-              default: "bounce",
+            "size": {
+                "value": 3,
+                "random": true,
+                "anim": {
+                    "enable": false,
+                    "speed": 4,
+                    "size_min": 0.3,
+                    "sync": false
+                }
+            },
+            "line_linked": {
+                "enable": false,
+                "distance": 150,
+                "color": "#ffffff",
+                "opacity": 0.4,
+                "width": 1
             },
-            random: false,
-            speed: 6,
-            straight: false,
-          },
-          number: {
-            density: {
-              enable: true,
-              area: 800,
+            "move": {
+                "enable": true,
+                "speed": 1,
+                "direction": "none",
+                "random": true,
+                "straight": false,
+                "out_mode": "out",
+                "bounce": false,
+                "attract": {
+                    "enable": false,
+                    "rotateX": 600,
+                    "rotateY": 600
+                }
+            }
+        },
+        "interactivity": {
+            "events": {
+                "onhover": {
+                    "enable": true,
+                    "mode": "bubble"
+                },
+                "onclick": {
+                    "enable": true,
+                    "mode": "repulse"
+                },
+                "resize": true
             },
-            value: 80,
-          },
-          opacity: {
-            value: 0.5,
-          },
-          shape: {
-            type: "circle",
-          },
-          size: {
-            value: { min: 1, max: 5 },
-          },
+            "modes": {
+                "grab": {
+                    "distance": 400,
+                    "line_linked": {
+                        "opacity": 1
+                    }
+                },
+                "bubble": {
+                    "distance": 250,
+                    "size": 0,
+                    "duration": 2,
+                    "opacity": 0,
+                    "speed": 3
+                },
+                "repulse": {
+                    "distance": 400,
+                    "duration": 0.4
+                },
+                "push": {
+                    "particles_nb": 4
+                },
+                "remove": {
+                    "particles_nb": 2
+                }
+            }
         },
-        detectRetina: true,
-      }}
+        "retina_detect": true,
+    }}
     />
   );
 };

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -69,10 +69,12 @@ const Home: NextPage<dataFetchProps> = ({ profile, experiences, projects }) => {
       </Head>
 
       {/* Hero */}
-      <section id="hero" className="bg-white dark:bg-gray-900 overflow-hidden">
-        <Particle />
-        <div className="mx-auto px-5 sm:w-11/12 xl:w-3/4 2xl:w-2/3 min-h-screen flex items-center">
-          <div className="max-w-xl mx-auto px-5">
+      <section
+        id="hero"
+        className="bg-white dark:bg-gray-900 overflow-hidden relative"
+      >
+        <div className="mx-auto px-5 sm:w-11/12 xl:w-3/4 2xl:w-2/3 min-h-screen flex items-center justify-center">
+          <div className="max-w-xl mx-auto px-5 absolute z-10">
             <div className="mb-4">
               <div className="flex justify-center items-center">
                 <span
@@ -105,6 +107,7 @@ const Home: NextPage<dataFetchProps> = ({ profile, experiences, projects }) => {
               </Link>
             </div>
           </div>
+          <Particle />
         </div>
       </section>