CodePen Embed - Personal Portfolio Webpage

<nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation">
  <div class="container topnav">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <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 topnav" href="#">Thomas Vaeth</a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#about">About</a></li>
        <li><a href="#services">Portfolio</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>
<a name="about"></a>
<div class="intro-header">
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <div class="intro-message">
          <h1>Thomas Vaeth</h1>
          <h3>FreeCodeCamp Student</h3>
          <hr class="intro-divider">
          <ul class="list-inline intro-social-buttons">
            <li><a href="https://twitter.com/thomasvaeth" class="btn btn-default btn-lg"><i class="fa fa-twitter fa-fw"></i> <span class="network-name">Twitter</span></a></li>
            <li><a href="https://github.com/thomasvaeth" class="btn btn-default btn-lg"><i class="fa fa-github fa-fw"></i> <span class="network-name">Github</span></a></li>
            <li><a href="https://www.linkedin.com/pub/thomas-vaeth/31/66/413" class="btn btn-default btn-lg"><i class="fa fa-linkedin fa-fw"></i> <span class="network-name">Linkedin</span></a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>
<a name="services"></a>
<div class="content-section-a">
  <div class="container">
    <div class="row">
      <div class="col-lg-5 col-sm-6">
        <hr class="section-heading-spacer">
        <div class="clearfix"></div>
        <h2 class="section-heading">Random Quote Machine</h2>
        <p class="lead">User can click a button to show a new random quote. The user can tweet out the quote shown. Built using Bootstrap, HTML, CSS, JavaScript, jQuery, and Twitter API. <br>The project can be viewed live <a href="https://codepen.io/thomasvaeth/full/epmrEm/">here</a>.</p>
      </div>
      <div class="col-lg-5 col-lg-offset-2 col-sm-6">
        <img class="img-responsive" src="https://raw.githubusercontent.com/thomasvaeth/freecodecamp/master/screenshots/random-desktop.png">
      </div>
    </div>
  </div>
</div>
<div class="content-section-b">
  <div class="container">
    <div class="row">
      <div class="col-lg-5 col-lg-offset-1 col-sm-push-6 col-sm-6">
        <hr class="section-heading-spacer">
        <div class="clearfix"></div>
        <h2 class="section-heading">Local Weather</h2>
        <p class="lead">User will be greeted from Seattle. The background picture will be similar to the current weather. The user can view the temperature. Built using Bootstrap, HTML, CSS, JavaScript, jQuery, and OpenWeaterMap API. <br>The project can be viewed live <a href="https://codepen.io/thomasvaeth/full/avzaBd/">here</a>.</p>
      </div>
      <div class="col-lg-5 col-sm-pull-6 col-sm-6">
        <img class="img-responsive" src="https://raw.githubusercontent.com/thomasvaeth/freecodecamp/master/screenshots/local-desktop.png">
      </div>
    </div>
  </div>
</div>
<div class="content-section-a">
  <div class="container">
    <div class="row">
      <div class="col-lg-5 col-sm-6">
        <hr class="section-heading-spacer">
        <div class="clearfix"></div>
        <h2 class="section-heading">Pomodoro Clock</h2>
        <p class="lead">User will be able to set a pomodoro clock to whatever task and break time needed. Built using Bootstrap, HTML, CSS, JavaScript, and jQuery. <br>The project can be viewed live <a href="https://codepen.io/thomasvaeth/full/QjwPgz/">here</a>.</p>
      </div>
      <div class="col-lg-5 col-lg-offset-2 col-sm-6">
        <img class="img-responsive" src="https://raw.githubusercontent.com/thomasvaeth/freecodecamp/master/screenshots/pomodoro-desktop.png">
      </div>
    </div>
  </div>
</div>
<div class="content-section-b">
  <div class="container">
    <div class="row">
      <div class="col-lg-5 col-lg-offset-1 col-sm-push-6 col-sm-6">
        <hr class="section-heading-spacer">
        <div class="clearfix"></div>
        <h2 class="section-heading">Twitch.tv JSON API</h2>
        <p class="lead">User will be shown a selected group of Twitch streamers. The remote is searchable and will show the streamers that are online and offline. Built using HTML, CSS, JavaScript, jQuery, and Twitch.tv API. <br>The project can be viewed live <a href="https://codepen.io/thomasvaeth/full/EVyabe/">here</a>.</p>
      </div>
      <div class="col-lg-5 col-sm-pull-6 col-sm-6">
        <img class="img-responsive" src="https://raw.githubusercontent.com/thomasvaeth/freecodecamp/master/screenshots/twitch-desktop.png">
      </div>
    </div>
  </div>
</div>
<a name="contact"></a>
<div class="banner">
  <div class="container">
    <div class="row">
      <div class="col-lg-6">
        <h2>Connect to Thomas:</h2>
      </div>
      <div class="col-lg-6">
        <ul class="list-inline banner-social-buttons">
          <li><a href="https://twitter.com/thomasvaeth" class="btn btn-default btn-lg"><i class="fa fa-twitter fa-fw"></i> <span class="network-name">Twitter</span></a></li>
          <li><a href="https://github.com/thomasvaeth" class="btn btn-default btn-lg"><i class="fa fa-github fa-fw"></i> <span class="network-name">Github</span></a></li>
          <li><a href="https://www.linkedin.com/pub/thomas-vaeth/31/66/413" class="btn btn-default btn-lg"><i class="fa fa-linkedin fa-fw"></i> <span class="network-name">Linkedin</span></a></li>
        </ul>
      </div>
    </div>
  </div>
</div>
<footer>
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <ul class="list-inline">
          <li><a href="#">Home</a></li>
          <li class="footer-menu-divider">&sdot;</li>
          <li><a href="#about">About</a></li>
          <li class="footer-menu-divider">&sdot;</li>
          <li><a href="#services">Services</a></li>
          <li class="footer-menu-divider">&sdot;</li>
          <li><a href="#contact">Contact</a></li>
        </ul>
        <p class="copyright text-muted small">Copyright &copy; Thomas Vaeth 2015. All Rights Reserved</p>
      </div>
    </div>
  </div>
</footer>

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

body,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 700;
}

.topnav {
    font-size: 14px; 
}

.lead {
    font-size: 18px;
    font-weight: 400;
}

.intro-header {
    padding-top: 50px;
    padding-bottom: 50px;
    text-align: center;
    color: #f8f8f8;
    background: url(http://leblogdecarlos.com/wp-content/uploads/2015/06/Laptop_Pingpong.jpg) no-repeat center center;
    background-size: cover;
}

.intro-message {
    position: relative;
    padding-top: 20%;
    padding-bottom: 20%;
}

.intro-message > h1 {
    margin: 0;
    text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
    font-size: 5em;
}

.intro-divider {
    width: 400px;
    border-top: 1px solid #f8f8f8;
    border-bottom: 1px solid rgba(0,0,0,0.2);
}

.intro-message > h3 {
    text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
}

@media(max-width:767px) {
    .intro-message {
        padding-bottom: 15%;
    }

    .intro-message > h1 {
        font-size: 3em;
    }

    ul.intro-social-buttons > li {
        display: block;
        margin-bottom: 20px;
        padding: 0;
    }

    ul.intro-social-buttons > li:last-child {
        margin-bottom: 0;
    }

    .intro-divider {
        width: 100%;
    }
}

.network-name {
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 2px;
}

.content-section-a {
    padding: 50px 0;
    background-color: #f8f8f8;
}

.content-section-b {
    padding: 50px 0;
    border-top: 1px solid #e7e7e7;
    border-bottom: 1px solid #e7e7e7;
}

.section-heading {
    margin-bottom: 30px;
}

.section-heading-spacer {
    float: left;
    width: 200px;
    border-top: 3px solid #e7e7e7;
}

.banner {
    padding: 100px 0;
    color: #f8f8f8;
    background: url(https://cdn2.hubspot.net/hubfs/381192/blog/Webshop_kundeservice.jpg) no-repeat center center;
    background-size: cover;
}

.banner h2 {
    margin: 0;
    text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
    font-size: 3em;
}

.banner ul {
    margin-bottom: 0;
}

.banner-social-buttons {
    float: right;
    margin-top: 0;
}

@media(max-width:1199px) {
    ul.banner-social-buttons {
        float: left;
        margin-top: 15px;
    }
}

@media(max-width:767px) {
    .banner h2 {
        margin: 0;
        text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
        font-size: 3em;
    }

    ul.banner-social-buttons > li {
        display: block;
        margin-bottom: 20px;
        padding: 0;
    }

    ul.banner-social-buttons > li:last-child {
        margin-bottom: 0;
    }
}

footer {
    padding: 50px 0;
    background-color: #f8f8f8;
}

p.copyright {
    margin: 15px 0 0;
}

This Pen is owned by Thomas Vaeth on CodePen.

See more by @thomasvaeth on CodePen

External CSS

External JavaScript