particle js added

package.json

@@ -16,6 +16,7 @@
     "react-reveal": "^1.2.2",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
+    "react-tsparticles": "^1.33.3",
     "web-vitals": "^1.1.2",
     "web3": "^1.5.1"
   },

public/index.html

@@ -7,7 +7,7 @@
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Web site created using create-react-app"
+      content="Secure File Sharing DApp"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/favicon.ico" />
     <!--
@@ -33,15 +33,6 @@
     <div id="overlays"></div>
     <div id="root"></div>
     <script src="https://kit.fontawesome.com/3c2af0c8a3.js" crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
-    <script>
-        particlesJS.load(
-            'particles-js',
-            'particles.json',
-            function () { console.log('Started') }
-        );
-    </script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 
   </body>
 </html>

src/components/Remove.js

@@ -1,4 +1,4 @@
-import { Fragment, useState, useEffect,useCallback } from "react";
+import { Fragment, useState, useEffect } from "react";
 import { Link } from 'react-router-dom'
 import "./FileUpload.css";
 import Web3 from 'web3'

src/layout/Layout.js

@@ -1,14 +1,126 @@
 import {Fragment} from 'react';
 import Header from './Header'
 import Footer from './Footer'
+import Particles from "react-tsparticles";
 import './Layout.css'
 
 const Layout = props => {
 
 
     return (
         <Fragment>
-        <div id="particles-js"></div>
+             <Particles id="particles-js"
+            params={{
+  "particles": {
+    "number": {
+      "value": 100,
+      "density": {
+        "enable": true,
+        "value_area": 800
+      }
+    },
+    "color":  {
+      "value": ["#ffffff","#FAED27","#05FFA1","#ff6100"]
+    },
+    "shape": {
+      "type": ["circle","triangle","edge"],
+      "stroke": {
+        "width": 0,
+        "color": "#000000"
+      },
+      "polygon": {
+        "nb_sides": 5
+      },
+      "image": {
+        "src": "img/github.svg",
+        "width": 100,
+        "height": 100
+      }
+    },
+    "opacity": {
+      "value": 1,
+      "random": false,
+      "anim": {
+        "enable": false,
+        "speed": 1,
+        "opacity_min": 0.1,
+        "sync": false
+      }
+    },
+    "size": {
+      "value": 3.5,
+      "random": true,
+      "anim": {
+        "enable": false,
+        "speed": 40,
+        "size_min": 0.1,
+        "sync": false
+      }
+    },
+    "line_linked": {
+      "enable": false,
+      "distance": 100,
+      "color": "#FAED27",
+      "opacity": 1,
+      "width": 1
+    },
+    "move": {
+      "enable": true,
+      "speed": 1,
+      "direction": "none",
+      "random": false,
+      "straight": false,
+      "out_mode": "out",
+      "bounce": false,
+      "attract": {
+        "enable": false,
+        "rotateX": 600,
+        "rotateY": 1200
+      }
+    }
+  },
+  "interactivity": {
+    "detect_on": "window",
+    "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
+}}    
+        />
             <Header/>
             {props.children}
             <Footer/>

src/pages/Home.js

@@ -5,11 +5,13 @@ import ipfs from "../images/ipfs.png";
 import Faqs from "../components/Faqs";
 import file1 from "../images/file1.png";
 import file2 from "../images/file2.png";
+
 import "./Home.css";
 
 const Home = () => {
   return (
     <Fragment>
+
       <section id="home" className="home">
         <div className="home-con">
           <h1>