{"size": 1406, "ext": "js", "max_stars_repo_path": "src/components/Hero.js", "max_stars_repo_name": "Jayvirrathi/react-demo", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/Hero.js", "max_issues_repo_name": "Jayvirrathi/react-demo", "max_issues_repo_issues_event_min_datetime": "2020-11-20T07:49:42.000Z", "max_issues_repo_issues_event_max_datetime": "2020-11-20T07:49:44.000Z", "max_forks_repo_path": "src/components/Hero.js", "max_forks_repo_name": "Jayvirrathi/react-demo", "max_forks_repo_forks_event_min_datetime": "2020-10-01T12:11:40.000Z", "max_forks_repo_forks_event_max_datetime": "2020-10-01T12:11:40.000Z"}
{"max_stars_count": null, "max_issues_count": 4, "max_forks_count": 1, "avg_line_length": 29.914893617, "max_line_length": 74, "alphanum_fraction": 0.533428165}
import React from 'react';
import introLogo from '../intro-logo.png'
import { Link, animateScroll as scroll } from "react-scroll";
import Particles from 'react-particles-js';

const Hero = (props) => {

	const data = props.portfolioData;

	return(
	    <section className="site-intro site-intro--with-clipmask" >
	     <Particles 
	     	className="site-intro__canvas"
	     	
	     />
	      <div className="container">
	        <div className="site-intro__wrapper">
	          <div className="site-intro__main">
	          <div className="site-intro__intro">  
	          <h2 className="site-intro__name"> Hi. I'm { data.name } </h2>
	          <h2 className="site-intro__heading"> I'm a { data.role }. </h2>
	          <h1 className="site-intro__primary"> { data.intro } </h1> 
	          <div className="site-intro__action">
	          <Link 
	         	className="btn btn-outline-white btn-radius btn-lg"
			    to="project"
			    href="#project"
			    spy={true}
			    smooth={true}
			    offset={-30}
			    duration= {500}		          
	          > 	          
	            See my works 
	          </Link>
	          </div>
	          </div>           
	          </div>
	          <div className="site-intro__logo-wrapper">
	            <img src={ introLogo } alt="" className="site-intro__logo" />
	          </div>
	        </div>
	      </div>
	    </section>			
		)
}

export default Hero;