Donavin's Portfolio

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.

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
          dnorthrupva@gmail.com</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="youremail@email.com"/><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>

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

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>

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*/

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" />