JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://npmcdn.com/headroom.js@0.9.4"></script>
 <!-- navbar -->
       <header class="headroom">
       <nav class="navbar navbar-primary bg-faded">
         <a class="navbar-brand" href="#">Fixed top</a>
       </nav>
       <!-- SECTION1 -->
       <section id="part1">
          <div class="container h-100 d-flex justify-content-center align-items-center">
             <div class="row">
                <div class="col">
                   <div class="chevron-row bounceInDown animated">
                     <h1 class="text-center" id="title1">Hi, my name is Liam Docherty</h1>
                     <h4 class="text-center" id="title2">I'm a Front-End Web Developer from London</h4>
                     <h5 class="text-center" id="title3">Get in touch with me <a href=#part4 class="txtlink" target=_blank>here</a>.</h5>
                     <hr class="line">
                     <p class="text-center">Learn more about me and view my projects</p>
                      <a href="#part2">
                        <i class="fa fa-angle-double-down bounce fa-4x"></i>
                      </a>
                   </div>
                </div>
             </div>
          </div>
       </section>
       <!-- SECTION2 -->
       <section id="part2">
          <div class="container-fluid">
          <div class="row">
          <div class="col">
            <div class="chevron-row bounceInLeft animated">
              <h1 class="text-center" id="title4">About</h1>
          </div>
          </div>
          </div>
        </div>
       </section>
       <!--...

CSS

/* PAGE ONE CSS
---------------------------------------------------------------------------- */

html,
body {
	height: 100%;
	width: 100%;
}

/* Sections
---------------- */

#part1,
#part2,
#part3,
#part4 {
	height: 100vh;
	width: 100%;
}

#part1 {
	background: #003554;
}

#part2,
#part3,
#part4 {
	background: #fff;
}

/* Background
---------------- */

/* Navigation Bar
---------------- */

.navbar {
  display: none;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10;
}

/* Text
---------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: sans-serif;
}

#title1,
#title2,
#title3 {
	color: #fff;
}

#title4,
#title5,
#title6 {
	color: #000;
	text-transform: uppercase;
}

#title1 {
	font-size: 2.0rem;
	font-weight: 700;
}

#title2 {
	font-size: 1.8rem;
	font-weight: 650;
}

#title3 {
	font-size: 1.8rem;
	font-weight: 650;
}

#title4 {
	font-size: 2.5rem;
	font-weight: 700;
	margin-top: 5rem;
	text-decoration: underline;
}

#title5 {
	font-size: 1.8rem;
	font-weight: 700;
}

#title6 {
	font-size: 1.8rem;
	font-weight: 700;
}


}
p {
	font-family: sans-serif;
	color: #fff;
}
.txtlink {
	color: #fff;
	font-weight: bold;
}
.txtlink:hover {
  color: #fff;
    border-bottom: 0.2rem dashed #fff;
  text-decoration: none;
}

/* buttons
---------------- */
.chevron-row {
	text-align: center;
	color: #fff;
}
.chevron-row a {
	color: #fff;
}
.chevron-row li {
	margin-top: 1.5rem;
}
.fa{
display: block;
margin: 0 auto;
}
.bounce {
  animation: bounce 3s infinite;
  -webkit-animation: bounce 3s infinite;
  -moz-animation: bounce 3s infinite;
  -o-animation: bounce 3s infinite;
}

/*!
 * animate.css -http://daneden.me/animate
 * Version - 3.5.1
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 * https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css
 * Copyright (c) 2016 Daniel Eden
 */

@-webkit-keyframes bounce {
  from, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
   ...

JavaScript

$(document).ready(function(){
  $(".fa.fa-angle-double-down").on('click', function(event) {
		event.preventDefault();
    debugger;
    if (this.parentElement.hash !== "") {
      event.preventDefault();

      // Store hash
      var hash = this.parentElement.hash;
console.log(`hash = ${hash}`);
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){

        window.location.hash = hash;
      });
    } // End if
    console.log(`hash2 = ${hash}`);
  });
  var windowHeight = $(window).height();
  $(window).on("scroll", function() {
  if ($(this).scrollTop() > windowHeight) {
    $(".navbar").show();
  } else {
    $(".navbar").slideUp(400);
  }
});
});