Kameron Robinson - Portfolio

index.html

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

<div class="bg"></div>
<div class="jumbotron">
  <h1>Kameron Robinson</h1>
  <img class="img-responsive img-thumbnail" src="//lh3.googleusercontent.com/-WwAHESiEq7k/AAAAAAAAAAI/AAAAAAAADfw/EAycOERq2K4/s360-c-k-no/photo.jpg" alt="Photo of me?"><img>
</div>
<div class="container" id="block-1">
  <div class="row">
    <p class="lead">Hello, my name is Kameron! I made these things</p>
  </div>

  <div class="col-lg-3 col-md-4 col-xs-6 thumb">
    <a class="thumbnail" href="#">
      <img class="img-responsive" src="//i61.tinypic.com/xq95pi.jpg" alt="ME!">
    </a>
  </div>
  <div class="col-lg-3 col-md-4 col-xs-6 thumb">
    <a class="thumbnail" href="//ruby-on-rails-124262.nitrousapp.com" target="_blank">
      <img class="img-responsive" src="//i60.tinypic.com/2e52neo.png" alt="rails-blog">
    </a>
  </div>
  <div class="col-lg-3 col-md-4 col-xs-6 thumb">
    <a class="thumbnail" href="//geogram-bitcamp2015.herokuapp.com/?location=New+York%2C+NY" target="_blank">
      <img src="//i58.tinypic.com/2pt2qsl.png" alt="geographic gram" class="img-rounded">
    </a>
  </div>
  <div class="col-lg-3 col-md-4 col-xs-6 thumb">
    <a class="thumbnail" href="//watersidelive.com" target="_blank">
      <img class="img-responsive" src="//i62.tinypic.com/23su7bt.png" alt="waterside">
    </a>
  </div>
  <div class="col-lg-3 col-md-4 col-xs-6 thumb">
    <a class="thumbnail" href="#">
      <img class="img-responsive" src="//i61.tinypic.com/2rruqly.png" alt="chromeext">
    </a>
  </div>
  <div class="col-lg-3 col-md-4 col-xs-6 thumb">
    <a class="thumbnail" href="#" target="_blank">
      <img class="img-responsive" src="//i59.tinypic.com/2lcr2f6.png" alt="broadway">
    </a>
  </div>
  <div class="col-lg-3 col-md-4 col-xs-6 thumb">
    <a class="thumbnail" href="#">
      <img class="img-responsive" src="//i57.tinypic.com/2uixf8j.png" alt="messageapp">
    </a>
  </div>
  <div class="col-lg-3 col-md-4 col-xs-6 thumb">
    <a class="thumbnail" href="#">
      <img class="img-responsive" src="//i61.tinypic.com/33p3g4l.png" alt="">
    </a>
  </div>
</div>
<div class="well">
  <div class="container">
    <div class="row">
      <div class="col-xs-12 ">
        <h2>ABOUT ME</h2>
        <blockquote>
          <p>Essintally I love writing <code>&lt;code&gt;</code> and learning new technologies! I am currently a student <i class="fa fa-book fa-2x"></i> at the University of Maryland Baltimore County.<p>I focus on designing and implementing data driven applications, I am currently learning Ruby On Rails <i class="fa fa-train fa-2x"></i>, mySQL, Ruby, JS, Java, PHP, etc.</p><p>I will be attending lots of hack-a-thons in this coming season so look out for new projects to be added here! Thank you for visiting <i class="fa fa-hand-peace-o fa-2x"></i></p> </p>
        </blockquote>
      </div>
    </div>
  </div>
</div>
<div class="footer">
  <div class='col-md-12'>
    <ul>
      <li><a href="//instagram.com/robinsonkameron/" target="_blank" alt="insta"><i class="fa fa-camera-retro"></i></a></li>
      <li><a href="//github.com/RobinsonKameron" target="_blank" alt="github"><i class="fa fa-github-alt"></i></a></li>
      <li><a href="//twitter.com/KameronAR" target="_blank" alt="twitter"><i class="fa fa-twitter"></i></a></li>
      <li><a href="//www.codecademy.com/RobinsonKameron" target="_blank" alt="codecademy"><i class="fa fa-code"></i></a></li>
    </ul>
  </div>
</div>

Kameron Robinson - Portfolio.markdown

Kameron Robinson - Portfolio

Hey this is my port

A Pen by Kameron Robinson on CodePen.

License.

script.js

var jumboHeight = $('.jumbotron').outerHeight();
function parallax(){
    var scrolled = $(window).scrollTop();
    $('.bg').css('height', (jumboHeight-scrolled) + 'px');
}

$(window).scroll(function(e){
    parallax();
});
/*
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");*/

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

style.css

h1 {
  position: center;
}

.bg {
  background: url('//unsplash.it/1900/600/?random') no-repeat center center;
  position: fixed;
  width: 100%;
  height: 350px;
  /*same height as jumbotron */
  
  top: 0;
  left: 0;
  z-index: -1;
}

.jumbotron {
  height: 350px;
  color: white;
  text-shadow: #444 0 1px 1px;
  background: transparent;
}

.well {
  padding: 50px;
}

#block-1 {
  margin: 20px 0px 20px 20px;
}

#block-1 img {
  height: 210px;
  width: 310px;
  display: block;
  margin-left: auto;
  margin-right: auto
}

.img-thumbnail {
  width: 200px;
  height: 200px;
}

#name {
  margin-left: 0%;
}

.thumbnail {
  width: 280px;
}

.footer i {
  float: right;
  margin: 0px 10px 0px 10px;
}

ul {
  overflow: auto;
}

ul li {
  list-style-type: none;
  float: right;
}

ul li a i {
  background: #e4a;
  color: #eee;
  width: 30px;
  height: 30px;
  border-radius: 100px;
  font-size: 15px;
  text-align: center;
  margin-right: 10px;
  padding-top: 15%;
}

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />