text: import React, { Component } from 'react';
  
  class Header extends Component {
    render() {
  
      if(this.props.data){
        var name = this.props.data.name;
        var occupation= this.props.data.occupation;
        var description= this.props.data.description;
        var city= this.props.data.address.city;
        var networks= this.props.data.social.map(function(network){
          return <li key={network.name}><a href={network.url}><i className={network.className}></i></a></li>
        })
      }
  
      return (
        <header id="home">
  
        <nav id="nav-wrap">
  
          <a className="mobile-btn" href="#nav-wrap" title="Show navigation">Show navigation</a>
          <a className="mobile-btn" href="#home" title="Hide navigation">Hide navigation</a>
  
          <ul id="nav" className="nav">
            <li className="current"><a className="smoothscroll" href="#home">Home</a></li>
            <li><a className="smoothscroll" href="#about">About</a></li>
            <li><a className="smoothscroll" href="#resume">Resume</a></li>
           
          </ul>
  
        </nav>
  
        <div className="row banner">
          <div className="banner-text">
            <h1 className="responsive-headline">I'm {name} </h1>
            <h3>I live in {city} California and study at <span>{occupation}</span>. {description}.</h3>
            <hr />
            <a href='https://www.dropbox.com/sh/foaikc7qqjn9h7p/AABbrsH837kkxcKsGW-m-K0ra?dl=0' className="button"><i style={{ marginRight: '7px' }} className="fa fa-dropbox"></i>Check Out My Works</a>
            <h6> My work is password protected to comply with the Stanford honor code. If you would like to view my work, please contact me for the password </h6>
           
          </div>
        </div>
  
        <p className="scrolldown">
        <a className="smoothscroll" href="#about"><i className="icon-down-circle"></i></a>
        </p>
  
        </header>
      );
    }
  }
  
  export default Header;
  