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>
              <li>
                <a className="smoothscroll" href="#portfolio">
                  Works
                </a>
              </li>
              <li>
                <a className="smoothscroll" href="#testimonials">
                  Testimonials
                </a>
              </li>
              <li>
                <a className="smoothscroll" href="#contact">
                  Contact
                </a>
              </li>
            </ul>
          </nav>
  
          <div className="row banner">
            <div className="banner-text">
              <h1 className="responsive-headline">I'm {name}.</h1>
              <h3>
                I'm a <span>{occupation}</span>. Assign me with some tasks, I'll
                find the solutions and get it done.
              </h3>
              <h3>
                Experienced in develpement of complex <a>Android Applications</a>{" "}
                with the <a>"old"</a> and
                <br />
                <a>"new"</a> stacks such as{" "}
                <a>
                  Java, Kotlin, Jetpack components, MVVM, RoomDB, LiveData,
                  DataBinding, ConstraintLayout, Glide, ExoPlayer, Dependency
                  Injection (Dagger/Hilt), Dataflow (Retrofit/Moshi/Coroutines)
                  and etc.
                </a>
              </h3>
              <hr />
              <ul className="social">{networks}</ul>
            </div>
          </div>
  
          <p className="scrolldown">
            <a className="smoothscroll" href="#about">
              <i className="icon-down-circle"></i>
            </a>
          </p>
        </header>
      );
    }
  }
  
  export default Header;
  