Skip to content

Instantly share code, notes, and snippets.

@aaronkelton

aaronkelton/KelTech Portfolio.markdown

Created February 1, 2016 17:36
Show Gist options
  • Save aaronkelton/6b90b5793f42b20c51eb to your computer and use it in GitHub Desktop.
Save aaronkelton/6b90b5793f42b20c51eb to your computer and use it in GitHub Desktop.
Download ZIP
KelTech Portfolio
Raw
index.html
<html lang="en">
<body>
<!-- Navigation bar for top level links -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#top">Aaron Kelton</a>
</div>
<div class="collapse navbar-collapse navbar-right" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav> <!-- Navigation bar ends -->
<!-- =======================================================
** First section Jumbotron title and link buttons **
========================================================= -->
<div class="height-test container-fluid bg-danger" id="home">
<div class="container padding-top">
<div class="jumbotron text-center page-header">
<h1>KelTech Portfolio</h1>
<h3>Inspired by Free Code Camp</h3>
</div>
<div class="row">
<div class="col-xs-12 col-md-3 text-center">
<a href="https://twitter.com/aaronkelton">
<button type="button" class="btn btn-default btn-block btn-lg">
<i class="fa fa-twitter">
Twitter
</i>
</button>
</a>
</div>
<div class="col-xs-12 col-md-3 text-center">
<a href="https://github.com/KeltonAK85">
<button type="button" class="btn btn-default btn-block btn-lg">
<i class="fa fa-github">
Github
</i>
</button>
</a>
</div>
<div class="col-xs-12 col-md-3 text-center">
<a href="https://www.linkedin.com/in/aaronkelton">
<button type="button" class="btn btn-default btn-block btn-lg">
<i class="fa fa-linkedin">
LinkedIn
</i>
</button>
</a>
</div>
<div class="col-xs-12 col-md-3 text-center">
<a href="http://www.freecodecamp.com/keltonak85">
<button type="button" class="btn btn-default btn-block btn-lg">
<i class="fa fa-fire">
freeCodeCamp
</i>
</button>
</a>
</div>
</div>
</div>
</div>
<!-- =======================================================
** Second section Profile Image and Biogpraphy **
========================================================= -->
<div class="height-test container-fluid bg-warning" id="about">
<div class="container padding-top">
<h1>Double - A - Ron</h1><hr />
<div class="row">
<div class="col-xs-12 col-sm-6 col-sm-push-6 text-center">
<img class="img-circle img-responsive" src="https://scontent-dfw1-1.xx.fbcdn.net/hphotos-xpt1/v/t1.0-9/12027513_10103608200549138_7126776657531020001_n.jpg?oh=5c7910e2960be32252012ce945a0ea84&oe=573EDD12" />
</div>
<div class="col-xs-12 col-sm-6 col-sm-pull-6">
<h2>Technology</h2>
<p>My first venture into technology occurred as a child taking a hammer to a battery. My hypothesis (tho that word wasn’t in my vernacular then) was that tiny gears were making the battery work. Instead of being marveled by shiny tiny gears, I was horrified by the battery acid’s chemical reaction against my skin. It wasn’t until high school that I fell in love with chemistry, and then later in college, chemical engineering. But there was more than just math and chemistry that I fancied: many of the problems were too complex to solve by mere pen and paper, and it was then that I learned to love writing programs in <a href="http://www.mathworks.com/products/matlab/">MATLAB</a> to solve these problems. Clicking the `Run` button only to see my program fail would drive me to break down an algorithm into lesser components and then incrementally improve the solution until I’d thoroughly kicked that problem’s ass.</p>
<h2>Leadership</h2>
<p>In addition to solving problems, I’ve always enjoyed volunteering my time for a greater cause. In college I cofounded a chapter of <a href="http://www.iaeste.org/">IAESTE</a>, which served to exchange technical students internationally. After college I became involved in Toastmasters, where I eventually became president of a club and even started a new <a href="http://3943800.toastmastersclubs.org/">club for Freethinkers</a>. I had a brief foray into <a href="https://en.wikipedia.org/wiki/SQL">SQL</a> and started a <a href="http://www.sqlpass.org/">SQL PASS</a> chapter in Little Rock. My next venture will be the most challenging yet and will combine both technology and leadership.</p>
</div>
</div>
</div>
</div>
<!-- =======================================================
** Third section Portfolio Links **
========================================================= -->
<div class="height-test container-fluid bg-success" id="portfolio">
<div class="container padding-top">
<h1>Check This Out!</h1><hr />
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4">
<figure class="img-responsive">
<img class="img-responsive img-thumbnail" src="http://images.freeimages.com/images/previews/da1/hourglass-1236695.jpg" />
<figcaption>Twitch.tv API project Bootstrap and Angularjs</figcaption>
</figure>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<figure>
<img class="img-responsive img-thumbnail" src="http://images.freeimages.com/images/previews/da1/hourglass-1236695.jpg" />
<figcaption>Wikipedia Search Engine Bootstrap and jQuery</figcaption>
</figure>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<figure>
<img class="img-responsive img-thumbnail" src="http://images.freeimages.com/images/previews/da1/hourglass-1236695.jpg" />
<figcaption>Stainless Steel Calculator SCSS and Vanilla Javascript</figcaption>
</figure>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<figure>
<img class="img-responsive img-thumbnail" src="http://images.freeimages.com/images/previews/da1/hourglass-1236695.jpg" />
<figcaption>Pomodoro Timer Zipline Bootstrap and Angular.js</figcaption>
</figure>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<figure>
<img class="img-responsive img-thumbnail" src="http://images.freeimages.com/images/previews/da1/hourglass-1236695.jpg" />
<figcaption>Weather App Bootstrap and Vanilla Javascript</figcaption>
</figure>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<figure>
<img class="img-responsive img-thumbnail" src="http://images.freeimages.com/images/previews/da1/hourglass-1236695.jpg" />
<figcaption>Pacman Tic Tac Toe CSS and jQuery</figcaption>
</figure>
</div>
</div>
</div>
</div>
<!-- =======================================================
** Fourth section Contact **
========================================================= -->
<div class="height-test container-fluid bg-primary" id="contact">
<div class="container padding-top">
<h1>Get in Touch</h1><hr />
<div class="row">
<div class="col-xs-12 col-md-3 text-center">
<a href="https://twitter.com/aaronkelton">
<button type="button" class="btn btn-default btn-block btn-lg">
<i class="fa fa-twitter">
Twitter
</i>
</button>
</a>
</div>
<div class="col-xs-12 col-md-3 text-center">
<a href="https://github.com/KeltonAK85">
<button type="button" class="btn btn-default btn-block btn-lg">
<i class="fa fa-github">
Github
</i>
</button>
</a>
</div>
<div class="col-xs-12 col-md-3 text-center">
<a href="https://www.linkedin.com/in/aaronkelton">
<button type="button" class="btn btn-default btn-block btn-lg">
<i class="fa fa-linkedin">
LinkedIn
</i>
</button>
</a>
</div>
<div class="col-xs-12 col-md-3 text-center">
<a href="http://www.freecodecamp.com/keltonak85">
<button type="button" class="btn btn-default btn-block btn-lg">
<i class="fa fa-fire">
freeCodeCamp
</i>
</button>
</a>
</div>
</div>
</div>
</div>
<!-- =======================================================
** Footer with links and copyright statement **
========================================================= -->
<div class="container">
<footer class="panel panel-default footer">
<div class="panel-footer">
<ul class="list-inline">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<p>Copyright &copy; KelTech 2015. All Rights Reserved</p>
</div>
</footer>
</div> <!-- end footer -->
</body>
</html>
Raw
KelTech Portfolio.markdown
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
Raw
style.css
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 80px;
background-color: whitesmoke;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 55px;
}
.height-test {
min-height: 100vh;
}
.img-responsive {
margin: 0 auto;
}
.padding-top {
padding-top: 50px;
padding-bottom: 50px;
}
Raw
styles
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment