CodePen Embed - Portfolio

<body class="text-center bgimg" style="background-position:top">
  <nav class="navbar navbar-default navbar-fixed-top" style="padding-top:-20px;" role="navigation">
    <div class="container-fluid">
      <div class="navbar-header">

        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>>
                        <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" href="#"><span class="fa fa-terminal"></span></a>
      </div>

      <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li><a href="#">Home <span class="sr-only">(current)</span></a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#projects">Projects</a></li>
          <li><a href="#social-media">Social Media</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <div class="container">
    <div style="background:transparent !important" class="jumbotron jumbotron-fluid text-center vertical-center">
      <div class="container">
        <h1 style="color:white;"> Blake's Portfolio </h1>

        <div class="sexy_line white"></div>

        <p class="lead">
          The Sea of What Remains

        </p>

      </div>
    </div>

    <div class="row top end" id="about">
      <h1 class="heading"> About Me </h1>
      <div class="sexy_line blue"></div>
      <div class="col-xs-12 col-sm-6" style="padding:2% 0 2% 0;">
        <img src="https://res.cloudinary.com/seaofwhatremains/image/upload/v1467606288/personal%20photo.jpg" class="img-fluid img-responsive img-rounded center-block" style="max-height: 30%; max-width: 50%; border:2px solid #586E95;" alt="Picture of Blake"
        />
      </div>
      <div class="col-xs-12 col-sm-6" style="text-align:left; margin:2% 0 2% 0;">
        <p>
          Hi, my name is Blake. I'm currently striving towards a second bachelor's degree in computer science. 
        </p>
        <p>
          The road thus far has been one heck of a roller coaster, starting with Harvard's cs50x, an introductory course in Python at a local community college, and all the while mixing in the thrill of Calculus courses taught by essentially a modern day Socrates (if he was cryogenically frozen prior to the whole poising thing). 
        </p>
        <p>
          I hope to gain a better appreciation for the web and the immense amount of effort that goes into developing for it. While the path may take time, I am beyond excited to see where learning web development takes me. 
        </p>

      </div>
      

    </div>

    <div class="row top" id="projects">

      <h1 class="heading"> Projects </h1>
      <div class="sexy_line blue"></div>
      <div class="col-sm-6 col-xs-12 col-md-6 project">
        <a href="https://github.com/bgeraci714/beyond-the-system/blob/master/README.md" class="thumbnail" target="_blank">
          <img class="thumbImg img-responsive img-fluid img-square" src="https://res.cloudinary.com/seaofwhatremains/image/upload/v1467597763/beyond_logo.png" alt="Beyond the System" />
        </a>
        <p> <strong>Beyond the System</strong>: A procedurally generated space exploration game written in Python.
        </p>
      </div>
      <div class="col-sm-6 col-xs-12 col-md-6 project">

        <a href="#" class="thumbnail">
          <img class="thumbImg img-responsive img-fluid img-square" src="https://res.cloudinary.com/seaofwhatremains/image/upload/v1467608231/In_Progress_pilt2i.png" alt="In Progress" />
        </a>
        <p>
          In Progress
        </p>
      </div>
    </div>
    <div class="row end testHeight">
      <div class="col-sm-6 col-xs-12 col-md-6 project">

        <a href="#" class="thumbnail">
          <img class="thumbImg img-responsive img-fluid img-square" src="https://res.cloudinary.com/seaofwhatremains/image/upload/v1467608231/In_Progress_pilt2i.png" alt="In Progress" />
        </a>
        <p>
          In Progress
        </p>
      </div>
      <div class="col-sm-6 col-xs-12 col-md-6 project">

        <a href="#" class="thumbnail">
          <img class="thumbImg img-responsive img-fluid img-square" src="https://res.cloudinary.com/seaofwhatremains/image/upload/v1467608231/In_Progress_pilt2i.png" alt="In Progress" />
        </a>
        <p>
          In Progress
        </p>
      </div>

    </div>

    <div class="row top end" id="social-media">
      <h1 class="heading"> Social Media </h1>
      <div class="sexy_line blue"></div>
      <p>
        If you're looking to get in touch, you can reach me through any of the link below.
      </p>
      <br />
      <div class="col-xs-3 col-xs-offset-3">
        <a class="btn btn-social-icon btn-facebook glyphicon" href="https://www.facebook.com/redshirtinfinity">
          <span class="fa fa-facebook "></span>
        </a>
      </div>
      <div class="col-xs-3">
        <a class="btn btn-social-icon btn-github glyphicon" href="https://github.com/bgeraci714/">
          <span class="fa fa-github"></span>
        </a>
      </div>
      <div class="col-xs-3 col-xs-offset-3">
        <a class="btn btn-social-icon btn-codepen glyphicon" href="https://codepen.io/seaofwhatremains/">
          <i class="fa fa-codepen"></i>
        </a>
      </div>
      <div class="col-xs-3">
        <a class="btn btn-social-icon glyphicon" href="https://www.freecodecamp.com/bgeraci714">
          <i class="fa fa-fire"></i>
        </a>
      </div>
    </div>
    <div class="row" style="margin-top:2%; padding-bottom:2%; background-color:transparent">
      <div class="col-xs-6 col-xs-offset-3 vertical-align">
        Created and Designed by Blake Geraci 2016
      </div>
    </div>
  </div>
</body>

body {
  background-color: #6e8abb;
  background-image: url(https://res.cloudinary.com/seaofwhatremains/image/upload/v1467486461/mixed-bgimg7_ghbzlu.jpg);
  background-repeat: no-repeat;
  background-position: center;
  min-height:100%;
  min-width:100%;
  font-family: Ubuntu;
  color: #586E95;
}

p
{
  font-size:1.2em;
}

.jumbotron {
  padding: 0.5em 0.6em;
  color: white;
}

.heading {
  color: #586E95;
}

.thumbImg {
  max-width: 250px;
  max-height: 235px;
}

.vertical-center {
  min-height: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.row {
  margin: 0% 15% 0% 15%;
  padding-bottom: 5%;
  background-color: white;
}

.row.top {
  padding-top: 50px;
}

.row.end {
  padding-bottom: 15%;
}

.sexy_line {
  margin: 25px 20%;
  height: 1px;
  width: 60%;
  background-color: white !important;
}

.sexy_line.white {
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0)) !important;
}

.sexy_line.black {
  background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)) !important;
}

.sexy_line.blue {
  background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(88, 110, 149, 0.75), rgba(0, 0, 0, 0)) !important;
}

.glyphicon {
  font-size: 2em;
}

.project {
  padding-bottom: 0%;
}

.showBorder {
  padding: 3px solid black;
}


/* Navbar CSS created using http://work.smarchal.com/twbscolor/*/

.navbar-default {
  background-color: #b4a4dc;
  border: 0px;
  border-radius: 0px;
}


}
.navbar-default .navbar-brand {
  color: #586e95;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
  color: #f7f7f7;
}
.navbar-default .navbar-text {
  color: #586e95;
}
.navbar-default .navbar-nav > li > a {
  color: #586e95;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: #f7f7f7;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  color: #f7f7f7;
  background-color: #000000;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
  color: #f7f7f7;
  background-color: #000000;
}
.navbar-default .navbar-toggle {
  border-color: #000000;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: #000000;
}
.navbar-default .navbar-toggle .icon-bar {
  background-color: #586e95;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  border-color: #586e95;
}
.navbar-default .navbar-link {
  color: #586e95;
}
.navbar-default .navbar-link:hover {
  color: #f7f7f7;
}
@media (max-width: 767px) {
  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #586e95;
  }
  
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #f7f7f7;
  }
  
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #f7f7f7;
    background-color: #000000;
  }
}

This Pen is owned by Blake Geraci on CodePen.

See more by @seaofwhatremains on CodePen

External CSS

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

External JavaScript

This Pen doesn't use any external JavaScript resources.