Portfolio 2nd Draft

index.html

<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">

<div class="container-fluid">
  <div class="nav-bar" id="navBar">
    <span class="my-name">
    Kevin Jones
    </span>
    <a href="javascript:void(0);" class="nav-icon" onclick="reveal()">&#9776;</a>
    <a href="#contact">Contact</a>
    <a href="#about-me">About Me</a>
    <a href="#portfolio">Portfolio</a>
    <a href="#landing-page">Home</a>
  </div>

  <a name="landing-page"></a>
  <div class="landing-page">
    <div class="landing-text">
      <h1>JonesCode</h1>
      <h3>Code by Jones</h3>
      <div class="landing-butons">
        <a href="https://twitter.com/KevDJJones" class="btn btn-info" role="button" target="blank">Twitter</a>
        <a href="https://www.linkedin.com/in/kevinjones215/" class="btn btn-info" role="button" target="blank">LinkedIn</a>
        <a href="https://www.freecodecamp.org/kaydeejay" class="btn btn-info" role="button" target="blank">FreeCodeCamp</a>
        <a href="https://github.com/kaydeejay" class="btn btn-info btn" role="button" target="blank">GitHub</a>
      </div>
    </div>
    <div class="landing-background"></div>
  </div>

  <a name="portfolio"></a>
  <div class="portfolio">
    <p class="section-title">Portfolio</p>
    <div class="container">

      <a href="https://s.codepen.io/kaydeejay/debug/KowJYL/bYMdyGLZvobr" target="blank">
        <div class="row portfolio-entry">
          <div class="col-xs-8">
            <p class="portfolio-text">
              <span class="portfolio-titles">Calculator</span><br/>A simple four-function calculator I made using CSS grid and vanilla JS. It does math, just like a real calculator!
            </p>
          </div>
          <div class="col-xs-4">
            <img class="img-responsive" src="https://imgoat.com/uploads/c627ab1ccb/98711.jpg" height="200px" width="200px">
          </div>
        </div>
      </a>

      <a href="https://s.codepen.io/kaydeejay/debug/LezwPe/yYryLDnPeYKM" target="blank">
        <div class="row portfolio-entry">
          <div class="col-xs-4">
            <img class="img-responsive" src="https://imgoat.com/uploads/c627ab1ccb/98714.jpg" height="200px" width="200px">
          </div>
          <div class="col-xs-8">
            <p class="portfolio-text">
              <span class="portfolio-titles">Weather App</span><br/>A simple web app that uses JSON data to geolocate the user and display some vital weather information. This was also my first time ever using CSS Grid.
            </p>
          </div>
        </div>
      </a>

      <a href="https://repl.it/@kaydeejay/Eratosthenes-Sieve-and-finds-composite-prime-factors" target="blank">
        <div class="row portfolio-entry">
          <div class="col-xs-8">
            <p class="portfolio-text">
              <span class="portfolio-titles">Sieve of Eratosthenes</span><br/>The Sieve of Eratosthenes is an algorithm to find all the positive prime integers within a range. My function also tells you the prime factors of all the composite numbers in
              the same range. Mathematical.
            </p>
          </div>
          <div class="col-xs-4">
            <img class="img-responsive" src="https://imgoat.com/uploads/c627ab1ccb/98715.jpg" height="200px" width="200px">
          </div>
        </div>
      </a>

      <a href="https://s.codepen.io/kaydeejay/debug/NwqEMo/yokZEQZaDXmA" target="blank">
        <div class="row portfolio-entry">
          <div class="col-xs-4">
            <img class="img-responsive" src="https://imgoat.com/uploads/c627ab1ccb/98717.jpg" height="200px" width="200px">
          </div>
          <div class="col-xs-8">
            <p class="portfolio-text">
              <span class="portfolio-titles">Robert Jordan Tribute Page</span><br/>The first page I ever designed. It's a tribute to one of my favorite novelists, Robert Jordan.
            </p>
          </div>
        </div>
      </a>

    </div>
  </div>

  <a name="about-me"></a>
  <div class="about-me">
    <p class="section-title">About Me</p>
    <div class="container">
      <div class="row">
        <div class="col-xs-6 offset-xs-1">
          <p class="portfolio-text"><span class="portfolio-titles">Hi! I'm Kevin.</span><br/>I'm a self-taught junior web dev, and currently working my way through the program at freecodecamp.org. I've worked in restaurants since I graduated college 6 years ago, and I want to
            make a change. Outside of that, I'm also an actor, and I perform in plays and musicals all over the USA. Stay tuned for more projects as I develop them, and also a separate, dedicated web page for my performance career. Thanks for visiting!
          </p>
        </div>
        <div class="col-xs-5">
          <img class="img-responsive" src="https://imgoat.com/uploads/93f65e080a/58759.jpg" height="600px">
        </div>
      </div>
    </div>
  </div>

  <a name="contact"></a>
  <div class="contact">
    <div class="contact-text">
      <p><span class="contact-title">Questions?</span><br/>Let's chat</p>
      <div class="landing-butons">
        <a href="https://twitter.com/KevDJJones" class="btn btn-info" role="button" target="blank">Twitter</a>
        <a href="https://www.linkedin.com/in/kevinjones215/" class="btn btn-info" role="button" target="blank">LinkedIn</a>
        <a href="https://www.freecodecamp.org/kaydeejay" class="btn btn-info" role="button" target="blank">FreeCodeCamp</a>
        <a href="https://github.com/kaydeejay" class="btn btn-info btn" role="button" target="blank">GitHub</a>
      </div>
    </div>
    <div class="contact-background"></div>
  </div>

</div>

portfolio-2nd-draft.markdown

Portfolio 2nd Draft

A Pen by Kevin on CodePen.

License.

script.js

function reveal(){
  var x=document.getElementById("navBar");
  if (x.className==="nav-bar") {
    x.className += " responsive";
  } else {
    x.className = "nav-bar";
  }
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

style.css

.container-fluid {
  margin: 0;
  padding: 0;
}

.my-name {
  font-family: 'Montserrat', sans-serif;
  font-size: 30px;
}

.nav-bar {
  z-index: 9999;
  position: fixed;
  width: 100%;
  top: 0;
  background-color: #a4b9db;
  overflow: hidden;
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
}

.nav-bar a {
  float: right;
  text-decoration: none;
  display: block;
  padding: 10px;
  color: black;
}

.nav-bar a:hover {
  background-color: #999999;
  color: #ededed;
}

.nav-bar .nav-icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .nav-bar a:not(:first-child) {display: none;}
  .nav-bar a.nav-icon {
    float: right;
    display: block;
  }
  .nav-bar.responsive {position: fixed;}
  .nav-bar.responsive .nav-icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .nav-bar.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

.landing-page {
  width: 100%;
  height: 100vh;
}

.landing-background {
  width: 100%;
  height: 100%;
  opacity: 0.5;
  background-image: url("https://static.pexels.com/photos/163130/keyboard-black-notebook-input-163130.jpeg");
  background-size: cover;
  z-index: auto;
  position: absolute;
}

.landing-text {
  position: absolute;
  z-index: 1;
  text-align: center;
  top: 30%;
  left: 0;
  right: 0;
  transorm: translateX(-50%) translateY(-50%);
  font-family: 'Montserrat', sans-serif;
}

.section-title {
  font-size: 30px;
  font-family: Montserrat, sans-serif;
  text-align: center;
  padding-top: 30px;
}

.portfolio {
  width: 100%;
}

.portfolio-entry  {
  padding: 16px 0 16px 0;
  -webkit-transition: background-color 0.5s ease-out;
  -moz-transition: background-color 0.5s ease-out;
  -o-transition: background-color 0.5s ease-out;
  transition: background-color 0.5s ease-out;
}

.portfolio-entry:hover {
  background-color: #a4b9db;
}

.portfolio-text {
  font-family: Montserrat, sans-serif;
  padding-top: 30px;
  color: black;
}
  font-size: 25px;
}

.about-me {
  width: 100%;
  height: 100vh;
}

.contact {
  text-align: center;
  width: 100%;
  height: 100vh;
  padding-top: 16px;
}

.contact-text {
  font-family: Montserrat, sans-serif;
  font-size: 20px;
  margin-top: 30px;
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  color: #262626;
}

.contact-title {
  font-size: 30px;
}

.contact-background {
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/0/05/A_time_for_a_cup_of_coffee.jpg");
  width: 100%;
  height: 100%;
  opacity: 0.65;
  background-size: cover;
  z-index: auto;
  position: absolute;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />