text: import React, { Component } from "react";
  import Zmage from "react-zmage";
  import Fade from "react-reveal";
  import ReactTypingEffect from 'react-typing-effect';
  
  let id = 0;
  class Portfolio extends Component {
    render() {
      if (!this.props.data) return null;
  
      const projects = this.props.data.projects.map(function (projects) {
        let projectImage = "images/portfolio/" + projects.image;
  
        return (
          <div key={projects.title} className="columns portfolio-item">
             <div className="item-wrap">
              <a href={projects.url} title={projects.title}>
                 <img alt={projects.title} src={projectImage} />
                 <div className="overlay">
                    <div className="portfolio-item-meta">
                   <h5>{projects.title}</h5>
                       <p>{projects.category}</p>
                    </div>
                  </div>
                
              </a>
            </div>
          </div>
        );
      });
  
      return (
        <section id="portfolio">
          <Fade left duration={1000} distance="40px">
            <div className="row">
              <div className="twelve columns collapsed">
                
                <h1> <ReactTypingEffect eraseDelay="50000" text={["Check Out Some of My Project."]}/></h1>
  
                <div
                  id="portfolio-wrapper"
                  className="bgrid-quarters s-bgrid-thirds cf"
                >
                  {projects}
                </div>
              </div>
            </div>
          </Fade>
        </section>
      );
    }
  }
  
  export default Portfolio;
  