Portfolio Page

Creating a portfolio page for FreeCodeCamp What is a portfolio page How do you make a portfolio page? This script and codes were developed by Joel on 27 January 2022, Thursday.

How do I make an portfolio page?
  1. Portfolio Page Previews
  2. Portfolio Page HTML Codes
  3. Portfolio Page CSS Codes
  4. Portfolio Page JS Codes
Portfolio Page Previews

Portfolio Page HTML Codes

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Portfolio Page</title>
  
  
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <!--
Developer: Joel Huffman
Date: 3-20-2016
Project: Portfolio

Comments:
-This project was built for FreeCodeCamp.com
-I used HTML SCSS Javascript Jquery and Bootstrap
-->
<link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Julius+Sans+One' rel='stylesheet' type='text/css'>

<body class="fluid-container">
  <div id="landPageContent">
    <header>
      <nav class="row no-gutters">
        <div class="col-sm-4 col-xs-12 text-left title">
          <h1 class="h3" id="name">Joel Huffman</h1>
        </div>
        <ul class="text-right col-sm-8 col-xs-12 navi">
          <li><a id="nav-one" href="#">Home</a></li>
          <li><a id="nav-two" href="#portfolio-header">Portfolio</a></li>
          <li><a id="nav-three" href="#about-header">About</a></li>
          <li><a id="nav-four" href="#contact-header">Contact</a></li>
        </ul>
      </nav>
    </header>

    <p id="p"></p>
    <h1 class="text-center landingText"><strong>Web Designer</strong></h1>
  </div>
  <main>
    <!--Beginning of the portfolio page 
        three rows with bootstrap
        col-md-4 on each row
        col-xs-6 on each row
    -->
    <!--Header-->
   <div class="row no-gutters" id="portfolio-header">
      <div class="col-sm-6 col-sm-offset-3 text-center">
        <h1>Portfolio</h1>
      </div>
    </div>
    <!--First Row of portfolio page-->
<div class="row project-first no-gutters">
      <div class="col-sm-4 col-sm-offset-1 col-xs-6 project"><a href="https://codepen.io/HuffmanJ25/full/yOzxRb/">
        <img src="https://raw.githubusercontent.com/HuffmanJ25/QuoteMachine/master/quoteMachine-min.PNG" alt="thumbnail of project" class="img-responsive">
        <h2><span>Project 1</span></h2>
        </div></a>
      <div class="col-md-4 col-md-offset-2 col-sm-4 col-sm-offset-1 col-xs-6 project"><a href="https://codepen.io/HuffmanJ25/full/RGLpNL/">
        <img src="https://raw.githubusercontent.com/HuffmanJ25/WikiSearch/master/wikiSnip.PNG" alt="thumbnail of project" class="img-responsive">
        <h2><span>Project 2</span></h2>
        </div></a>
    </div>

    </div>
    <!--Beginning of the About page -->
    <!-- About Header-->
    
    
    
 <div class="row no-gutters" id="about-header">
      <div class="col-sm-6 col-sm-offset-3 text-center">
        <h1>About</h1>
      </div>
    </div>
    <!--About content-->
<div class="row about-row no-gutters">
      <div class="darken-background">
        <div class="col-sm-5 col-sm-offset-1 text-center">
          <h2>Joel Huffman</h2>
          <p>I stumbled upon web development through acheiving an IT Management Bachlors degree at Santa Fe College. I fell in love with creating web sites and dove in head first creating and learning with my spare time.</p>
        </div>
        <div class="col-sm-5 text-center">
          <h2>Skills</h2>
          <ul class="about-list">
            <li>HTML5, CSS3, Bootstrap3, Jquery</li>
            <li>Sass, Jade, Git, Responsive Web Design</li>
            <li></li>
            <li></li>
          </ul>
        </div>
      </div>
    </div>

  </main>
  <footer>
<!--Contact Page-->
     <div class="row no-gutters" id="contact-header">
      <div class="col-sm-6 col-sm-offset-3 text-center">
        <h1>Contact</h1>
      </div>
    </div>
    <div class="row contact no-gutters">
      <div class="col-sm-4 text-center linked-in">
        <a target="_blank" class="btn btn-primary" href="https://www.linkedin.com/in/joelhuffman
">Linked In<a>
        
      </div>
      <div class="col-sm-4 text-center free-code-camp">
        <a target="_blank" class="btn btn-success" href="https://www.freecodecamp.com/huffmanj25">freeCodeCamp<a>
      </div>
      <div class="col-sm-4 text-center github">
        <a target="_blank" class="btn btn-warning" href="https://github.com/HuffmanJ25">GitHub<a>
        
      </div>
    </div>
    
    <div class="row contact no-gutters">

      <div class="col-sm-4 col-sm-offset-4 text-center old-school">
        <ul>
          <li>535-547-1777</li>
          <li>[email protected]</li>
        </ul>
        <p><a class="glyphicon glyphicon-upload" id="top" href=#name></br>Back To Top</a></p>
      </div>
    </div>
    
  </footer>
</body>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

    <script src="js/index.js"></script>

</body>
</html>

Portfolio Page CSS Codes

html {
  height: 100%;
}

body {
  color: #767676;
  background: url("https://raw.githubusercontent.com/HuffmanJ25/QuoteMachine/master/portfolioBackground-min.jpg") no-repeat center;
  background-size: 100%;
  background-color: black;
  height: 100%;
}

header {
  background-color: black;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid white;
}

.row.no-gutters {
  margin-right: 0;
  margin-left: 0;
}
.row.no-gutters > [class^="col-"], .row.no-gutters > [class*=" col-"] {
  padding-right: 0;
  padding-left: 0;
}

#name {
  padding: 30px;
  margin: 0;
  font-family: "Julius Sans One", sans-serif;
  color: white;
}
#name h1 {
  margin: 0;
}

.navi {
  list-style-type: none;
  padding: 20px 0;
}
.navi li {
  display: inline;
}
.navi a {
  text-decoration: none;
  color: inherit;
  padding: 20px;
}
.navi a:hover {
  color: white;
  border-bottom: 1px solid white;
  text-decoration: none;
}

@media (max-width: 768px) {
  #name {
    text-align: center;
  }

  .navi {
    text-align: center;
  }
}
#landPageContent {
  position: relative;
  height: 100%;
}
#landPageContent .landingText {
  color: white;
  text-shadow: 3px 2px 3px black;
  position: absolute;
  top: 50%;
  left: 50%;
  height: 30%;
  width: 40%;
  margin: 5% 0 0 -20%;
  font-family: "Rock Salt", cursive;
  letter-spacing: 15px;
}

@media (max-width: 768px) {
  .landingText {
    font-size: 15px;
  }
}
#portfolio-header {
  font-family: "Julius Sans One", sans-serif;
  border-top: 1px solid white;
  border-bottom: 1px solid white;
  background-color: #000101;
}

.project {
  margin-bottom: -20px;
}

img {
  margin: 0;
}

.project-first {
  background-color: #000101;
  position: relative;
  height: 300px;
}
.project-first span {
  position: absolute;
  top: 253px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 5px 20px;
  border: 1px solid #E56717;
}

.project-second {
  background-color: #000101;
  position: relative;
  height: 7px;
  border: 1px solid white;
}
.project-second span {
  position: absolute;
  top: 255px;
}

.portfolio-third {
  background-color: #000101;
  position: relative;
  height: 300px;
}
.portfolio-third h2 span {
  position: absolute;
  top: 253px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 5px 20px;
  border: 1px solid #E56717;
}

#about-header {
  font-family: "Julius Sans One", sans-serif;
  border-top: 1px solid white;
  border-bottom: 1px solid white;
  background-color: #000101;
}

.about-row {
  background-color: #000f0e;
  background-image: url("http://www.publicdomainpictures.net/pictures/50000/nahled/blurry-background.jpg");
  background-size: cover;
  color: #000a14;
}
.about-row h2 {
  font-weight: bold;
  margin-top: 60px;
  border-bottom: 2px solid black;
  padding: 10px;
}
.about-row p {
  padding: 30px 30px 60px 30px;
  font-size: 20px;
  text-shadow: 1px 1px 1px black;
}

.about-list {
  list-style-type: none;
  padding: 2px 0;
}
.about-list li {
  padding: 5px 30px;
  font-size: 20px;
  text-shadow: 1px 1px 1px black;
}

#contact-header {
  font-family: "Julius Sans One", sans-serif;
  border-top: 1px solid white;
  border-bottom: 1px solid white;
  background-color: #000101;
}

.contact a {
  color: white;
  text-decoration: none;
  margin: 40px 0;
  font-size: 20px;
}

.contact ul {
  text-decoration: none;
  list-style-type: none;
  padding: 20px;
  color: white;
  font-size: 20px;
}

@media(min-width: 1904px) {
  .project {
    height: 300px;
  }
}

Portfolio Page JS Codes

$(document).ready(function() {
  $("#nav-two").click(function(event) {
    event.preventDefault();
    var hash = this.hash;
    $('html,body').animate({
        scrollTop: $(hash).offset().top
      },
      1600,function(){
      window.location.hash = hash;
    });
  });
    $("#nav-three").click(function(event) {
    event.preventDefault();
    var hash = this.hash;
    $('html,body').animate({
        scrollTop: $(hash).offset().top
      },
      1600,function(){
      window.location.hash = hash;
    });
  });
    $("#nav-four").click(function(event) {
    event.preventDefault();
    var hash = this.hash;
    $('html,body').animate({
        scrollTop: $(hash).offset().top
      },
      1600,function(){
      window.location.hash = hash;
    });
  });
  $("#top").click(function(event) {
    event.preventDefault();
    var hash = this.hash;
    $('html,body').animate({
        scrollTop: $(hash).offset().top
      },
      1600,function(){
      window.location.hash = hash;
    });
  });
});
Do you want hide your ip address?Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup.