text: import React, { Component } from "react";
  import Particles from 'react-particles-js';
  
  
  
  class Home extends Component {
    render() {
      
      return (
          <div>
          <div class="particle-container">
               <Particles 
                params={{
                  
                      "particles": {
                        "number": {
                          "value": 160,
                          "density": {
                            "enable": true,
                            "value_area": 500
                          }
                        },
                        "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": 1,
                          "random": true,
                          "anim": {
                            "enable": true,
                            "speed": 1,
                            "opacity_min": 0,
                            "sync": false
                          }
                        },
                        "size": {
                          "value": 2,
                          "random": true,
                          "anim": {
                            "enable": false,
                            "speed": 4,
                            "size_min": 0.8,
                            "sync": false
                          }
                        },
                        "line_linked": {
                          "enable": false,
                          "distance": 150,
                          "color": "#ffffff",
                          "opacity": 0.4,
                          "width": 1
                        },
                        "move": {
                          "enable": true,
                          "speed": 0.5,
                          "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": "bubble"
                          },
                          "onclick": {
                            "enable": true,
                            "mode": "repulse"
                          },
                          "resize": true
                        },
                        "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
                          }
                        }
                      },
                      "retina_detect": true
                  
              }} />
          </div>
  
              
                  <div class="media-body">
                      <img src={"../../assets/earth.jpg" } >
                      </img>
                      <div class="overlay"></div>  
                  </div>
          </div>
               );
      }
    
  }
   
  export default Home;
  
  