added background animation

package.json

@@ -9,6 +9,7 @@
     "react": "^16.9.0",
     "react-bootstrap": "^1.0.0-beta.12",
     "react-dom": "^16.9.0",
+    "react-particles-js": "^2.7.0",
     "react-scripts": "3.1.2"
   },
   "scripts": {

src/App.css

@@ -13,15 +13,24 @@
 
 .App-heading {
   background-color: #2c003e;
-  min-height: 100vh;
+  width: 100%;
+  height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   font-size: 40px;
+  padding: 0px;
   color: white;
 }
 
+
+.particle-container {
+  width: 100%;
+  height: 100%;
+  margin: 0px;
+}
+
 p {
   margin: 1px
 }

src/App.js

@@ -6,28 +6,35 @@ import HoverButton from './Components/HoverButton.js'
 import About from './Components/About.js'
 import Projects from './Components/Projects.js'
 import Contact from './Components/Contact.js'
+import Particles from 'react-particles-js';
+import particleConfig from './files/particlesjs-config.json'
 import AOS from 'aos'
 import 'aos/dist/aos.css';
 
 AOS.init()
 
+console.log(particleConfig)
+
 function App() {
   return (
     <div className="App">
       <link href="https://fonts.googleapis.com/css?family=Raleway:400,600,700&display=swap" rel="stylesheet"></link>
       <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
       <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"></link>
       <header className="App-heading" id="home" data-aos="fade-up" data-aos-duration="1000">
-        <div>
+        <Particles className="particle-container" params={particleConfig} />
+        <div style={{position: "absolute"}}>
+
+            <p className="greeting">
+              Hello, my name is <span className="name" >Raman Gupta</span>.
+            </p>
+            <p>
+              I am a Creator.
+            </p>
+            <br/>
+            <HoverButton page="#about" text="See my work"></HoverButton>
+
 
-          <p className="greeting">
-            Hello, my name is <span className="name" >Raman Gupta</span>.
-          </p>
-          <p>
-            I am a Creator.
-          </p>
-          <br/>
-          <HoverButton page="#about" text="See my work"></HoverButton>
         </div>
 
       </header>

src/Components/About.css

@@ -1,6 +1,7 @@
 .about {
     margin-top: 0px;
     padding: 60px;
+    overflow: auto;
 }
 
 hr {

src/Components/Contact.css

@@ -5,9 +5,9 @@
 
 .information {
     margin: auto;
-    width: 50%;
-    min-width: 650px;
+    width: 60%;
     justify-content: space-evenly;
+    text-align: center;
 }
 
 .information p{

src/Components/NavBar.css

@@ -13,7 +13,7 @@ ul {
     margin: 0;
     padding: 0;
     overflow: hidden;
-    background-color: #282c34;;
+    background-color: #282c34;
   }
 
 li {

src/files/particlesjs-config.json

@@ -0,0 +1,110 @@
+{
+  "particles": {
+    "number": {
+      "value": 80,
+      "density": {
+        "enable": true,
+        "value_area": 800
+      }
+    },
+    "color": {
+      "value": "#ffffff"
+    },
+    "shape": {
+      "type": "circle",
+      "stroke": {
+        "width": 0,
+        "color": "#000000"
+      },
+      "polygon": {
+        "nb_sides": 5
+      },
+      "image": {
+        "src": "img/github.svg",
+        "width": 100,
+        "height": 100
+      }
+    },
+    "opacity": {
+      "value": 0.5,
+      "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": "#ffffff",
+      "opacity": 0.4,
+      "width": 1
+    },
+    "move": {
+      "enable": true,
+      "speed": 6,
+      "direction": "none",
+      "random": false,
+      "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": true,
+        "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
+}