Skip to content

Instantly share code, notes, and snippets.

@Random-Stack-Random-Day

Random-Stack-Random-Day/Donavin's Portfolio.markdown

Created August 23, 2015 20:20
Show Gist options
  • Save Random-Stack-Random-Day/9bea6c2690ea8fcc7d13 to your computer and use it in GitHub Desktop.
Save Random-Stack-Random-Day/9bea6c2690ea8fcc7d13 to your computer and use it in GitHub Desktop.
Download ZIP
Donavin's Portfolio
Raw
Donavin's Portfolio.markdown

Donavin's Portfolio

Making a BootStrap based portfolio to encourage my bootstrap foundation. Throwing in some jQ/JS to 'spruce' it up a bit.

A Pen by Donavin Northrup on CodePen.

License.

Raw
index.html
<link href='http://fonts.googleapis.com/css?family=Bowlby+One' rel='stylesheet' type='text/css'>
<nav class="navbar navbar-default navbar-fixed-top" data-spy="affix" role="navigation">
<div class="container">
<a class="navbar-brand" href="#">Donavin D Northrup V</a>
<ul class="nav nav-tabs navbar-right">
<li role="presentation"><a href="#home"><i class="fa fa-home"></i> Home</a></li>
<li role="presentation"><a href="#about" class=active><i class="fa fa-info"></i> About</a></li>
<li role="presentation"><a href="#portfolio"><i class="fa fa-book"></i> Portfolio</a></li>
<li role="presentation"><a href="#contact"><i class="fa fa-commenting"></i> Contact</a></li>
</ul>
</div>
</nav>
<a name="home"></a>
<div id="content">
<section id="home">
<div class="fader">
<div class="col-lg-12">
<div class="intro-name">
<h1 class="meh-name">Donavin D Northrup</h1>
<h3 class="meh-slogan">Insert Super Creative Slogan!</h3>
<hr class="da-divida">
<ul class="list-inline intro-social-buttons">
<li>
<a href="https://twitter.com/DaRealdnorthrup" target="_blank" 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="www.github.com/dnorthrupva" target="_blank" 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="www.linkedin.com/dnorthrupva" target="_blank" class="btn btn-default btn-lg"><i class="fa fa-linkedin fa-fw"></i> <span class="network-name">Linkedin</span></a>
</li>
<li>
<a href="http://www.freecodecamp.com/dnorthrupva" target="_blank" class="btn btn-default btn-lg"><i class="fa fa-fire fa-fw"></i> <span class="network-name">freeCodeCamp</span></a>
</li>
</ul>
</div>
<!--intro-name-->
</div>
<!--Col-lg-12-->
</div>
</section> <!--Home-->
<section id="about">
<div class="fader">
<div class="container">
<div class="row">
<div class="col-lg-5 col-sm-6">
<div class="clearfix"></div>-
<h2 class="concept">Donavin's Concept</h2>
<br>
<p class="description">I am a <a href="www.freecodecamp.com/dnorthrupva"> self-taught</a> and driven developer, engineer, and entrepreneur, based near Washington, DC. <br>
I enjoy helping others master different skills, and making their code more efficient. <br>
I currently work on proprietary financial software, and am looking to move more into a broad-software development field.<br>
I have a strong focus in Ruby, RoR, Responsive Design, and the MEAN Stack. Previous emphasis on LAMP.</p>
</div> <!--Col-lg-5 Closer -->
<div class="col-lg-5 col-lg-offset-2 col-sm-6">
<img class="img-circle img-responsive meh-head" src="http://i.imgur.com/j35JwZe.jpg" alt="My face.">
</div>
</div> <!--ImgCloser-->
</div> <!--Row Closer-->
</div> <!--Container Closer-->
</section> <!-- About Closer -->
<section id="portfolio">
<div class="fader">
<div class="container">
<!-- Skill Progress Bars -->
<div class="progress">
<div class="progress-bar progress-bar-wip-high" role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100" style="width: 65%;">
BootStrap3: 65%
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-good" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 85%;">
HTML5/CSS3: 85%
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-good" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 85%;">
Ruby/RoR - Prime Stack: 85%
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-wip-low" role="progressbar" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100" style="width: 55%;">
MEAN Stack Dev - Current Project(s): 55%
</div>
</div>
<!-- End Skill Progress Divs -->
<!-- Begin Project Thumbnails -->
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail port-proj">
<img src="http://dummyimage.com/242x200/f3f3f3/2d2d2d.png" alt="...">
<div class="caption">
<h3 class="btn-center">Port. Project #1</h3>
<p class="btn-center">TBD</p>
<p class="btn-center"><a href="#" class="btn btn-primary" role="button">Button</a></p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail port-proj">
<img src="http://dummyimage.com/242x200/f3f3f3/2d2d2d.png" alt="...">
<div class="caption">
<h3 class="btn-center">Port. Project #2</h3>
<p class="btn-center">TBD</p>
<p class="btn-center"><a href="#" class="btn btn-primary" role="button">Button</a></p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail port-proj">
<img src="http://dummyimage.com/242x200/f3f3f3/2d2d2d.png" alt="...">
<div class="caption">
<h3 class="btn-center">Port. Project #3</h3>
<p class="btn-center">TBD</p>
<p class="btn-center"><a href="#" class="btn btn-primary" role="button">Button</a></p>
</div>
</div>
</div>
</div>
<!-- Second Row of Thumbnails -->
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail port-proj">
<img src="http://dummyimage.com/242x200/f3f3f3/2d2d2d.png" alt="...">
<div class="caption">
<h3 class="btn-center">Port. Project #4</h3>
<p class="btn-center">TBD</p>
<p class="btn-center"><a href="#" class="btn btn-primary" role="button">Button</a></p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail port-proj">
<img src="http://dummyimage.com/242x200/f3f3f3/2d2d2d.png" alt="...">
<div class="caption">
<h3 class="btn-center">Port. Project #5</h3>
<p class="btn-center">TBD</p>
<p class="btn-center"><a href="#" class="btn btn-primary" role="button">Button</a></p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail port-proj">
<img src="http://dummyimage.com/242x200/f3f3f3/2d2d2d.png" alt="...">
<div class="caption">
<h3 class="btn-center">Port. Project #6</h3>
<p class="btn-center">TBD</p>
<p class="btn-center"><a href="#" class="btn btn-primary" role="button">Button</a></p>
</div>
</div>
</div>
</div>
<!-- End Project Thumbnails -->
</section>
<section id="contact">
<div class="fader">
<div class="wrapper">
<div class="banner">
<div class="container contact-page">
<div class="row">
<div class="col-lg-6 testit">
<h2> <p>Donavin D Northrup V<br>
Full Stack Developer
[email protected]</p></h2>
<!-- Twitter Feed -->
<a class="twitter-timeline" data-dnt="true" href="https://twitter.com/DaRealdnorthrup" data-widget-id="635320976515973120">Tweets by @DaRealdnorthrup</a>
<!--End of Twitter Feed-->
</div>
<div class="col-lg-6">
<ul class="social-buttons">
<li>
<a href="www.github.com/dnorthrupva" target="_blank" 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="www.linkedin.com/dnorthrupva" target="_blank" class="btn btn-default btn-lg"><i class="fa fa-linkedin fa-fw"></i> <span class="network-name">Linkedin</span></a>
</li>
<li>
<a href="http://www.freecodecamp.com/dnorthrupva" target="_blank" class="btn btn-default btn-lg"><i class="fa fa-fire fa-fw"></i> <span class="network-name">freeCodeCamp</span></a>
</li>
</ul>
<!-- Contact Form -->
<form id="contact_form" action="#" method="POST" enctype="multipart/form-data">
<div class="row">
<label for="name">Your name:</label><br />
<input id="name" class="input" name="name" type="text" value="" size="30" placeholder="What's your name?" /><br />
</div>
<div class="row">
<label for="email">Your email:</label><br />
<input id="email" class="input" name="email" type="text" value="" size="30" placeholder="[email protected]"/><br />
</div>
<div class="row">
<label for="message">Your message:</label><br />
<textarea id="message" class="input" name="message" rows="7" cols="30" placeholder="Let me know what I can do for you"></textarea><br />
</div>
<input id="submit_button" type="submit" value="Send email" />
</form>
<!--End of Contact Form-->
</div>
</div>
</div>
</section>
<footer>
&copy; Donavin D Northrup V - 2015
</footer>
<!-- /#content -->
</div>
Raw
script.js
//This enabled Smooth-Scroll via Click
$(".navbar a").on('click', function(event){
// Prevent default anchor click behavior
event.preventDefault();
var hash = this.hash;
//Uses Animate to Allow the Smooth Scrolling
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 500, function(){
window.location.hash = hash;
});
});
//End-SmoothScroll Script
//Enable #.active move when clicked
$(".nav a").on("click", function(){
$(".nav").find(".active").removeClass("active");
$(this).parent().addClass("active");
});
//End .active move script
//Twitter Script
!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");
//End of Twitter Script
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>
<script src="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"></script>
Raw
style.css
body {
padding-top: 30px;
position: relative;
}
/* Home Page*/
.intro-name{
padding: 20% 0% 20% 0%;
}
.meh-name{
text-align: center;
text-shadow: 2px 1px 2px #000;
padding: -50px;
color: silver;
}
.meh-slogan{
text-align: center;
color: orange;
}
.da-divida{
width:75%;
border: 1px outset rgba(255, 255, 255, 0.2);
box-shadow: 1px 1px 1px rgba(0,0,0,0.6);
}
ul.intro-social-buttons {
text-align: center;
}
ul.intro-social-buttons > li {
display: block
margin-bottom: 20px;
padding: 0;
}
ul.intro-social-buttons > li:last-child {
margin-bottom: 0;
}
.btn {
display: inline-block;
color: #000;
border: 2px outset rgba(0, 0, 0, 0.9);
background: #C0C0C0;
text-shadow: 1px 1px 1px rgba(0,0,0, 20);
box-shadow: 3px 3px 3px rgba(0,0,0,0.5);
letter-spacing: 2px;
}
.btn:hover {
color: #000;
border: 2px outset rgba(0, 0, 0, 0.9);
background: #C0C0C0;
transform:scale(1.1);
transition: 0.2s;
text-shadow: 1px 1px 1px rgba(0,0,0, 20);
box-shadow: 3px 3px 3px rgba(0,0,0,0.5);
letter-spacing: 2px;
}
.fader{
background: rgba(70, 72, 82, .6);
position: relative;
width: 100%;
height: 100%;
}
#home{ background:url(http://i.imgur.com/pVx1LQ7.jpg)no-repeat center center fixed;
background-size: cover;
height: 855px;
}
/*End Home*/
/* About */
#about {
background: url(http://i.imgur.com/UM4vjhK.jpg) no-repeat center center fixed;
background-size: cover;
height: 855px;
}
.concept {
color: blue;
}
img.meh-head{
width: 65%;
margin-top: 100px;
margin-left: 20px;
}
#portfolio {
background:
url(http://i.imgur.com/jZZdXjJ.jpg) no-repeat center center fixed;
background-size: cover;
height: 855px;
}
#contact {
background: url(http://i.imgur.com/0At1GQH.jpg) no-repeat center center fixed;
background-size: cover;
height: 855px;
}
h2.concept{
margin-top: 100px;
font-size: 3em;
color: rgba(0, 255, 255, 0.9);
}
p.description{
font-size: 22px;
color: #FFFFC2;
font-family: 'Bowlby One', cursive;
}
/* About End */
/* Portfolio */
.progress {
background-color: transparent;
box-shadow: none;
margin-bottom: 0px;
width: 50%;
float: left;
}
.progress-bar {
border-radius: 4px;
color: white;
font-weight: bold;
text-shadow: 1px 1px black;
}
.progress-bar-good {background: green;}
.progress-bar-wip-high {background: #50ad03;}
.progress-bar-wip-low {background: #e33e07;}
.port-proj{
background-color: transparent;
border: 0px;
}
.caption h3 {
color: red;
}
.caption p {
color: silver;
}
.btn-center{
position: relative;
text-align: center;
}
/* Portfolio End */
/* Contact Start */
.contact{
padding: 100px;
position: relative;
}
.social-buttons {
list-style-type: none;
}
.social-buttons > li:not(:last-child) {
margin-bottom: 20px;
}
.wrapper{
width: 100%;
margin: 0 auto;
}
#contact_form{
margin: 50px;
position: relative;
}
/*End Contact*/
/*Begin Footer*/
footer{
padding: 10px;
background: black;
width: 100%;
height: 100%;
position: relative;
text-align: center;
}
.testit{
text-align: center;
}
/*Filler*/
Raw
styles
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment