Personal Portfolio

12/16/2017 - 1:53 PM

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />

style.css

/* base */

body {
  background: grey;
  font-family: 'Roboto', sans-serif;
}

nav ul li a {
  color: white;
  font-size: 1.2em;
}

hr {
  width: 60%;
  border-width: 8px;
  border-color: grey;
}

/* classes */

.anchor { 
  padding-top: 60px;
  margin-top: 60px; 
}

.nav-pills .nav-link.active {
  background-color: lightgrey;
  color: black;
}

.nav-pills .nav-link:hover {
  color: black;
}

.form-control:focus {
  border-color: black;
  box-shadow: 0px 0px 3px 3px #888;
}

/* ids */

#profile-image {
  max-width: 150px;
}

#portfolio-end-hr {
  border-width: 5px;
  width: 100%;
  border-color: silver;
}

#bio-hr {
  border-color: silver;
}

#contact-button {
  background-color: silver;
  border-color: grey;
  color: black;
}

#contact-button:hover {
  background-color: darkgrey;
  border-color: black;
  
}

#linkedin:hover {
  color: #0077B5;
}

#facebook:hover {
  color: #3B5998;
}

#twitter:hover {
  color: #00aced;
}

#github:hover {
  color: #333;
}

#nav-name {
  font-size: 1.5em;
}

/* Media Queries */

@media (min-width: 768px) {
  
  /* classes */
  
  .projects {
    width: 75%;
  }
  
  /* ids */
  
  #bio-text {
    text-align: end;
    margin-left: 5em;
    
  }
  
  #bio-hr {
    margin-right: 0;
    width: 75%;
    border-width: 5px;
  }
  
  #bio-image {
    text-align: center;
  }
  
  #contact-button {
    float: left;
  }
  
  #contact-text {
    padding-top: 2em;
  }
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>

script.js

var one = $("#about").offset();
var two = $("#portfolio").offset();
var three = $("#contact").offset();

$(document).ready(function() {
    $(window).scroll(function(){
      
        var screenPosition = $(document).scrollTop();
        if (screenPosition < two.top) {
            $( ".one" ).addClass( "active" );
            $(".two").removeClass("active");
            $(".three").removeClass("active");
        }
        if (screenPosition >= two.top) {
            $( ".two" ).addClass( "active" );
            $(".one").removeClass("active");
            $(".three").removeClass("active");
        }
       if (screenPosition >= three.top) {
            $( ".three" ).addClass( "active" );
            $(".one").removeClass("active");
            $(".two").removeClass("active");
        }
    }); 
  
    $(window).scroll();
});

personal-portfolio.markdown

Rendered
Source

Personal Portfolio

Personal Portfolio with a nav bar, viewable projects, email contact form, and links to social media platforms.

A Pen by Matt on CodePen.

License.

index.html

<!-- NAV --> 
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top justify-content-between"> 
  <!-- brand -->
  <a class="navbar-brand" id="nav-name" href="#">Matthew Cranford</a>
  <!-- nav Toggler -->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <!-- toggle Items -->
  <div class="collapse navbar-collapse justify-content-end" id="collapsibleNavbar">
    <ul class="nav nav-pills justify-content-center" id="pills-tab" role="tablist">
      <li class="nav-item">
        <a class="nav-link one" href="#about">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link two" href="#portfolio">Portfolio</a>
      </li>
      <li class="nav-item">
        <a class="nav-link three" href="#contact">Contact</a>
      </li>
    </ul>
  </div>
</nav> <!-- NAV END -->


<!-- ABOUT -->
<div class="jumbotron mt-3 mb-0 anchor" id="about">
  <div class="container">
    <div class="row">
      
      <!-- bio -->
      <div class="col-sm-12 col-md-6 mt-5" id="bio-text" align="center">
        <p>
          Current student in freeCodeCamp and full-time learner of everything programming. I hope to one day use my knowledge and skills to create something that will change the world.
        </p>
        <hr class="my-3" id="bio-hr">
        <p>
          Future Full-Stack Developer
        </p>
      </div>
      
       <!-- profile pic -->
      <div class="col-sm-12 col-md-4 mt-3" id="bio-image" align="center">
        <img class="img-fluid rounded-circle" id="profile-image" src="https://drive.google.com/uc?id=1WeCRPjC6UIU8XncPigyTF8uK1K60msD1" alt="Profile picture of myself">
      </div>
      
    </div>
  </div>
</div> <!-- ABOUT END -->


<!-- CARD -->
<div class="container card bg-light" id="card-div">

  
  <!-- PORTFOLIO -->
  <div class="container anchor projects" id="portfolio">
    <h1 class="text-center">Portfolio</h1>
    <hr class="my-4">
    
    <!-- projects -->
    <div class="container">
      <div class="row">
        <div class="col-sm-12 col-md-12 text-center my-4">
          <p data-height="510" data-theme-id="0" data-slug-hash="dZxOOr" data-default-tab="result" data-user="MatthewCranford" data-embed-version="2" data-pen-title="Tribute Page" class="codepen">See the Pen <a href="https://codepen.io/MatthewCranford/pen/dZxOOr/">Tribute Page</a> by Matt (<a href="https://codepen.io/MatthewCranford">@MatthewCranford</a>) on <a href="https://codepen.io">CodePen</a>.</p>
          <a href="https://codepen.io/MatthewCranford/full/dZxOOr/" target="_blank"><h4 class="pt-3">Tribute Page Project</h4></a>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>      
        </div> 
      </div>
      <hr class="my-5" id="portfolio-end-hr"> 
    </div>
    
  </div> <!-- PORTFOLIO END -->

  
  <!-- CONTACT -->
  <div class="container anchor mb-5" id="contact">
    <h1 class="text-center">Contact Me</h1>
    <hr class="my-4"> 
    <div class="row">

      <!-- form -->
      <div class="col-sm-12 col-md-6"> 
        <form>
          <div class="form-group mt-5 ">
            <input type="text" class="form-control" id="inputName" aria-describedby="emailHelp" placeholder="Name"> 
          </div>
          <div class="form-group">
            <input type="email" class="form-control" id="inputEmail" placeholder="Email Address">
          </div>
          <div class="form-group">
            <input type="number" class="form-control" id="inputPhoneNumber" placeholder="Phone Number">
          </div>
          <div class="form-group">
            <textarea class="form-control" id="inputTextarea" rows="3" placeholder="Message"></textarea>
          </div>
          <div  class="text-center">
            <button class="btn btn-primary" id="contact-button"  type="submit">Send</button>
          </div>
        </form>  
      </div>

      <!-- text  -->
      <div class="col-sm-12 col-md-6 mt-5 text-center" id="contact-text">
        <div class="row">
          <div class="col-md-12 text-center">
            <p>
              Want to get in touch with me? If you would like more information about myself or my experience, just send me a message. I'm always interested in new opportunities and projects.
            </p> 
          </div>   
          <div class="col-sm-12 col-md-12 pt-3 text-center">
            <p>
              I promise to reply A.S.A.P.
            </p>
          </div>
        </div>
      </div>

    </div>
  </div> <!-- CONTACT END -->

  
</div> <!-- CARD END -->


<!-- FOOTER TOP -->
<nav class="navbar navbar-expand- navbar-dark bg-secondary text-center  pt-5 pb-5"  id="footer-top" >
  <div class="col-sm-12">
    <h4>AROUND THE WEB</h4>
    
    <!-- social media links -->
    <ul class="nav justify-content-center">
      <li class="nav-item">
        <a class="nav-link" id="linkedin" href="https://www.linkedin.com/in/matthew-cranford-0809a6140/" target="_blank"><i class="fa fa-linkedin fa-2x" aria-hidden="true"></i></a> 
      </li>
      <li class="nav-item">
        <a class="nav-link" id="facebook" href="https://www.facebook.com/matt.cranford.5" target="_blank"><i class="fa fa-facebook fa-2x" aria-hidden="true"></i></a> 
      </li>
      <li class="nav-item">
        <a class="nav-link" id="twitter" href="https://twitter.com/MattCranford" target="_blank"><i class="fa fa-twitter fa-2x" aria-hidden="true"></i></a> 
      </li>
      <li class="nav-item">
        <a class="nav-link" id="github" href="https://github.com/MatthewCranford" target="_blank"><i class="fa fa-github fa-2x" aria-hidden="true"></i></a>
      </li>
    </ul>
    
  </div>
</nav> <!-- FOOTER TOP END -->


<!-- FOOTER BOTTOM -->
<nav class="navbar navbar-expand- bg-dark navbar-dark justify-content-center text-white">
  <span id="copyright" class="" >
    Matthew Cranford © 2017. All Rights Reversed
  </span>
</nav> <!-- FOOTER BOTTOM END -->

Cacher is the code snippet organizer for pro developers

We empower you and your team to get more done, faster

Personal Portfolio

Personal Portfolio