CodePen Embed - Portfolio v2

<head>
  <!-- Google Web Fonts -->
  <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700|Merriweather' rel='stylesheet' type='text/css'>
  <!-- Font Awesome Icons -->
  <link href="https://opensource.keycdn.com/fontawesome/4.5.0/font-awesome.min.css" rel="stylesheet">
</head>

<body id="page-top">
  
  <nav role="navigation" class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand page-scroll" href="#page-top">DAMON MYERS</a>
      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav navbar-right">
          <li>
            <a class="page-scroll" href="#about">ABOUT</a>
          </li>
          <li>
            <a class="page-scroll" href="#work">WORK</a>
          </li>
          <li>
            <a class="page-scroll" href="#contact">CONTACT</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  
  <header>
    <div class="header-content">
      <div class="header-content-inner">
        <h1>DAMON MYERS</h1>
        <hr>
        <nav class="links">
          <a target="_blank" href="https://github.com/damon-myers"><i class="fa fa-github"></i></a>
          <a target="_blank" href="https://codepen.io/Damon-Myers/"><i class="fa fa-codepen"></i></a>
          <a target="_blank" href="https://www.linkedin.com/in/myersdamon"><i class="fa fa-linkedin"></i></a>
          <a target="_blank" href="mailto:damon.shane.myers@gmail.com"><i class="fa fa-envelope"></i></a>
        </nav>
      </div>
    </div>
  </header>
  
  <section class="bg-primary" id="about">
    <div class="container">
      <div class="about-content">
        <img class="portfolio-img img-responsive img-circle" src="https://avatars1.githubusercontent.com/u/6657122?v=3&s=460">
        <h1>Who Am I?</h1>
        <hr class="light">
        <p class="faded">Hello! I am a student of Computer Science at the University of Texas of the Permian Basin as well as a GIS Developer for the City of Odessa, Texas. I am passionate about game design, music, politics, and the internet. I study Web Development in my free time via <a href="https://freecodecamp.com">FreeCodeCamp</a>. If you think I can be of any use to you or your organization, please reach out to me.</p>
        <a href="#contact" class="page-scroll btn btn-default btn-xl">CONTACT ME</a>
      </div>
    </div>
  </section>
  
  <section id="work">
    <div class="container">
      <h1>What Have I Built?<h1>
      <hr>
      <div class="row">
        <div class="col-md-4">
          <div class="project-img-box">
            <a target="_blank" href="https://codepen.io/Damon-Myers/full/bdQgzj/">
              <div class="project-img-overlay">
                Tic-Tac-Toe with AI
              </div>
              <img class="img-responsive img-project" src="https://s18.postimg.org/3noqzzdgp/tictactoe.png">
            </a>
          </div>
        </div>
        <div class="col-md-4">
          <div class="project-img-box">
            <a target="_blank" href="https://codepen.io/Damon-Myers/full/BNPjoy/">
              <div class="project-img-overlay">
                Twitch Status Viewer
              </div>
              <img class="img-responsive img-project" src="https://s28.postimg.org/l8wyllybx/twitch.png">
            </a>
          </div>
        </div>
        <div class="col-md-4">
          <div class="project-img-box">
            <a target="_blank" href="https://codepen.io/Damon-Myers/full/ZGqEbZ/">
              <div class="project-img-overlay">
                Skeumorphic Calculator
              </div>
              <img class="img-responsive img-project" src="https://s28.postimg.org/6bohkll3h/calculator.png">
            </a>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-4">
          <div class="project-img-box">
            <a target="_blank" href="https://codepen.io/Damon-Myers/full/bdKpOO/">
              <div class="project-img-overlay">
                Location-based Weather App
              </div>
              <img class="img-responsive img-project" src="https://s28.postimg.org/5q4428ff1/weather.png">
            </a>
          </div>
        </div>
        <div class="col-md-4">
          <div class="project-img-box">
            <a target="_blank" href="https://codepen.io/Damon-Myers/full/aOaJRj/">
              <div class="project-img-overlay">
                  Wikipedia Search App
              </div>
              <img class="img-responsive img-project" src="https://s28.postimg.org/iazzrwqod/wikipedia.png">
            </a>
          </div>
        </div>
        <div class="col-md-4">
          <div class="project-img-box">
            <a target="_blank" href="https://codepen.io/Damon-Myers/full/jPxLrG/">
              <div class="project-img-overlay">
                Random Quote Generator
              </div>
              <img class="img-responsive img-project" src="https://s28.postimg.org/ewmepiknh/quotes.png">
            </a>
          </div>
        </div>
      </div>
    </div>
  </section>
  
  <section id="contact" class="bg-dark">
    <div class="container">
      <div class="row">
        <h1>Contact Me</h1>
        <hr class="">
        <form action="https://formspree.io/damon.shane.myers@gmail.com" method="POST">
          <div class="form-group">
            <label for="nameInput">Your Name:</label>
            <input type="text" name="_subject" class="form-control" id="nameInput" placeholder="John Doe">
          </div>
          <div class="form-group">
            <label for="emailInput">Your Email:</label>
            <input type="email" name="_replyto" class="form-control" id="emailInput" placeholder="you@domain.com">
          </div>
          <div class="form-group">
            <label for="messageInput">Message:</label>
            <textarea rows="3" name="message" class="form-control" id="messageInput" placeholder="Hello..."></textarea>
          </div>
          <input class="btn btn-default btn-xl" type="submit" value="SEND">
        </form>
      </div>
    </div>
  </section>
      
</body>

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

p,
form>label {
  font-weight: 400;
  font-size: 12pt;
  font-family: 'Merriweather', serif;
}

h1,
/* .navbar-default, */
.project-image-overlay {
  font-family: 'Open Sans', sans-serif;
}

p>a {
  color: white;
  text-decoration: underline;
}

p>a:hover {
  color: #222222;
}

header {
  position: relative;
  width: 100%;
  min-height: auto;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
  background-position: center;
  background-image: url("https://static.pexels.com/photos/15276/night-sky-sunset-power-lines.jpg");
  background-color: #DFDFDF;
  text-align: center;
  color: white;
}

header h1 {
  font-weight: 700;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
}

header hr {
  margin: 30px auto;
}
  
header p {
  font-weight: 300;
  color: rgba(255, 255, 255, 0.7);
  font-size: 16px;
  margin-bottom: 50px;
}

.header-content {
  position: relative;
  text-align: center;
  padding: 100px 15px 100px;
  width: 100%;
}

hr {
  border-color: #f05f40;
  border-width: 4px;
  max-width: 50px;
}

hr.light {
  border-color: white;
}

.bg-primary {
  background-color: #f05f40;
}

.bg-dark {
  background-color: #222222;
  color: white;
}

section {
  padding: 100px 0;
  text-align: center;
}

.btn {
  margin-top: 30px;
  border: none;
  border-radius: 300px;
  font-weight: 700;
}

.btn-xl {
  padding: 10px 20px;
}

.btn-primary {
  color: white;
  background-color: #f05f40;
  border-color: #f05f40;
  -webkit-transition: all 0.35s;
  -moz-transition: all 0.35s;
  transition: all 0.35s;
}

.about-content {
  margin: 0px 10px;
}

.portfolio-img {
  margin: auto;
  border: 6px solid white;
  max-width: 200px;
}

.project-img-box {
  position: relative;
  overflow: hidden;
  display: block;
}

.project-img-overlay {
  color: white;
  background: rgba(240, 95, 64, 0.9);
  margin-top: 30px;
  padding: 20px;
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
  opacity: 0;
  -webkit-transition: all 0.35s;
  -moz-transition: all 0.35s;
  transition: all 0.35s;
}

.project-img-overlay:hover {
  opacity: 1;
}

.img-project {
  margin-top: 30px;
  padding: 3px;
  border: 1px solid #ddd;
}

.links {
  margin-top: 30px;
  width: 100%;
  font-size: 20pt;
  list-style-type: none;
  text-align: center;
}

.links>a {
  color: white;
  padding: 16px;
  -webkit-transition: all .35s;
  -moz-transition: all 0.35s;
  transition: all .35s;
  text-decoration: none;
}

.links>a:hover {
  text-decoration: none;
  color: #f05f40;
}

form {
  margin: 0px 10px;
  -webkit-transition: all .35s;
  -moz-transition: all 0.35s;
  transition: all .35s;
}

form>.btn:hover {
  background-color: #f05f40;
  color: white;
}

label {
  display: block;
  text-align: left;
}

/* Media Queries for Desktop Viewers */
@media (min-width: 768px) {
  header {
    min-height: 100%;
  }
  
  header h1 {
      font-size: 60px;
  }
  
  .header-content {
    position: absolute;
    top: 30%;
  }
  
  .navbar {
    background: transparent;
    -webkit-transition: all .35s;
    -moz-transition: all 0.35s;
    transition: all .35s;
  }
  
  .navbar-default .navbar-brand,
  .navbar-default .navbar-nav>li>a {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 700;
    -webkit-transition: all .35s;
    -moz-transition: all 0.35s;
    transition: all .35s;
  }
}

$(document).ready(function(){
  $(function () {
    // Closes the Responsive Menu on Menu Item Click
    $('.navbar-collapse ul li a:not(.dropdown-toggle)').click(function() {
      $('.navbar-toggle:visible').click();
    });
    
    $(window).scroll(function () {
      // set distance user needs to scroll before we fadeIn navbar
      if ($(this).scrollTop() > 50) {
        $('.navbar').css({
          'background': 'white',
          'border-color': 'rgba(0, 0, 0, 0.2)'
        });
        $('.navbar-brand').css('color', '#f05f40');
        $('.navbar-nav>li>a').css('color', '#222222');
        $('.navbar-nav>li>a').hover(function() {
          $(this).css('color', '#f05f40');
        }, function() {
          $(this).css('color', '#222222');
        });
      }
      else {
        $('.navbar').css({
          'background': 'transparent',
          'border-color': 'rgba(255, 255, 255, 0.4)'
        });
        $('.navbar-brand').css('color', 'rgba(255, 255, 255, 0.9)');
        $('.navbar-nav>li>a').css('color', 'rgba(255, 255, 255, 0.9)');
        $('.navbar-nav>li>a').hover(function() {
          $(this).css('color', 'white');
        }, function() {
          $(this).css('color', 'rgba(255, 255, 255, 0.9)');
        });
      }
    });
  });
});

This Pen is owned by Damon Myers on CodePen.

See more by @Damon-Myers on CodePen

External CSS

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css

External CSS

External JavaScript