[ADD] Particle.js (#10)

adds particle.js library

Author: Rajangupta09

assets/css/style.css

@@ -163,6 +163,7 @@ ul.collapsible .collapsible-body {
     justify-content: center;
     height: 100%;
     padding: 0 3rem;
+    user-select: none;
 }
 
 .welcome {
@@ -202,3 +203,9 @@ h2 {
         content: "";
     }
 }
+
+#particles-js{
+    position: absolute;
+    width: 100%;
+    height: 100vh;
+}

assets/js/particle.js

@@ -0,0 +1,106 @@
+    particlesJS('particles-js',
+      
+    {
+    "particles": {
+      "number": {
+        "value": 80,
+        "density": {
+          "enable": false,
+          "value_area": 4000
+        }
+      },
+      "color": {
+        "value": "#d64214"
+      },
+      "shape": {
+        "type": "circle",
+        "stroke": {
+          "width": 0,
+          "color": "#FF5721"
+        },
+        "polygon": {
+          "nb_sides": 3
+        },
+        "image": {
+          "src": "img/github.svg",
+          "width": 100,
+          "height": 100
+        }
+      },
+      "opacity": {
+        "value": 0.6,
+        "random": false,
+        "anim": {
+          "enable": false,
+          "speed": 1,
+          "opacity_min": 0.1,
+          "sync": false
+        }
+      },
+      "size": {
+        "value": 3,
+        "random": true,
+        "anim": {
+          "enable": false,
+          "speed": 40,
+          "size_min": 0.1,
+          "sync": false
+        }
+      },
+      "line_linked": {
+        "enable": true,
+        "distance": 150,
+        "color": "#FF5722",
+        "opacity": 0.5,
+        "width": 1
+      },
+      "move": {
+        "enable": true,
+        "speed": 2,
+        "direction": "none",
+        "random": true,
+        "straight": false,
+        "out_mode": "out",
+        "bounce": false,
+        "attract": {
+          "enable": false,
+          "rotateX": 600,
+          "rotateY": 600
+        }
+      }
+    },
+    "interactivity": {
+      "detect_on": "canvas",
+      "events": {
+        "onhover": {
+          "enable": true,
+          "mode": "grab"
+        },
+        "onclick": {
+          "enable": true,
+          "mode": "push"
+        },
+        "resize": true
+      },
+      "modes": {
+        "grab": {
+          "distance": 100,
+          "line_linked": {
+            "opacity": 1
+          }
+        },
+     
+     
+        "push": {
+          "particles_nb": 4
+        },
+        "remove": {
+          "particles_nb": 2
+        }
+      }
+    },
+    "retina_detect": true
+    }
+    
+    );
+