Portfolio Page

In this example below you will see how to do a Portfolio Page with some HTML / CSS and Javascript

This is my portfolio page. Feel free to visit this same page directly at www.conorhinchee.tech

Thumbnail
This awesome code was written by captnstarburst, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright captnstarburst ©
  • HTML
  • CSS
  • JavaScript
    <div class="container-fluid">
  <div class="intro" id="intro">
    <div class="row title" id="title">
      <div class="col-xs-12">

        <h1 class="text-center titleText"> Conor Hinchee 
      </h1>
      </div>
    </div>
    <div class="row about">
      <div class=" col-lg-3 col-xs-3 col">

        <h5 class="aboutText text-center" id="2">  Client Focused </h5>
      </div>

      <div class="col-xs-offset-1 col-md-offset-1 col-lg-4 col-xs-3 col">
        <h5 class="aboutText text-center" id="1">  Freelance Web Developer </h5>
      </div>

      <div class="col-xs-offset-2 col-lg-offset-1 col-lg-2 col-xs-3 col">
        <h5 class="aboutText text-center" id="3">    Lover of Food </h5>
      </div>


    </div>
    <div class="row navigation">
      <div class="col-xs-12">

        <div class="hoverLinetop" id="hvLine"></div>


        <h5 class="text-center naviText">
      
     <span id="portfolioIntro">
        
        Portfolio
        
     </span>
     <span id="blogIntro">  
      <a href= "http://blog.conorhinchee.tech/" target="_blank">   
         Blog
      </a>  
     </span>
     <span id="contactIntro">
        <a href ="#"> 
       Contact
       </a>
      </span>  
    </h5>

      </div>
    </div>
  </div>

  <div class="portfolio" id="portfolio">
    <div class="row title" id="title">
      <div class="col-xs-12">

        <h1 class="text-center titleText"> PORTFOLIO 
      </h1>
      </div>
    </div>
    
    <div class="row carousel" id="carousel">
       <div class="col-xs-offset-3 col-xs-6"> 
      <div id="carousel" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
          <li data-target="#carousel" data-slide-to="0" class="active"></li>
          <li data-target="#carousel" data-slide-to="1"></li>
          <li data-target="#carousel" data-slide-to="2"></li>
          <li data-target="#carousel" data-slide-to="3"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
          <div class="item active">
            <img src="http://conorhinchee.tech/pictures/pomodoroClock.JPG" >
          </div>

          <div class="item">
            <img src="http://conorhinchee.tech/pictures/simon.JPG">
          </div>

          <div class="item">
            <img src="http://conorhinchee.tech/pictures/randomquote.JPG">
          </div>

          <div class="item">
            <img src="http://conorhinchee.tech/pictures/calculator.JPG" >
          </div>
        </div>

        <!-- Left and right controls -->
        <a class="left carousel-control" href="#carousel" role="button" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel" role="button" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
      </div>

    </div>

    <div class="row navigationP">
      <div class="col-xs-12">

        <div class="hoverLinetop2" id="hvLine2"></div>


        <h5 class="text-center naviText">
      
     <span id="aboutPortfolio">
       <a href "#">  
        About
       </a> 
     </span>
     <span id="blogPortfolio">  
      <a href= "http://blog.conorhinchee.tech/" target="_blank">   
         Blog
      </a>  
     </span>
     <span id="contactPortfolio">
        <a href ="#"> 
       Contact
       </a>
      </span>  
    </h5>

      </div>

  </div>

</div>
  
  <div class="contact" id="contact">
    
    <div class="row form" id="form">
      <div class="col-xs-offset-1 col-xs-6 col-lg-offset-2 col-lg-4 ">

        <h1 class="text-center titleText"> Contact Me 
      </h1>
     <form class="form-horizontal" role="form" >   
       <div class="form-group">
          <label for="InputEmail">Email address</label>
          <input type="email" class="form-control" id="InputEmail"            placeholder="Enter email">
          <small id="emailHelp" class="form-text text-muted">Information is never shared</small>   
        </div> 
       <div class="form-group">
         <label for="InputName">First and Last Name </label>
         <input type="name" class="form-control" id="InputName"              placeholder="Enter Name">
       </div>
       <div class="form-group">
         <label for="InputMessage">Message </label>
         <textarea class="form-control" rows="4" name="message" class="form-control" id="InputMessage" placeholder="Message."></textarea>
       </div>  
       <div class="form-group">
         <label for="InputControl">2 + 4 = </label>
         <input type="text" class="form-control" id="human" name="human" placeholder="Your Answer">
       </div>
       <div class="form-group">
         <div class="btn btn-primary" id="submit">Submit
       </div> 
     </form> 
      <div class="form-group"> 
        
<!--         <div class=" result alert alert-success">Thank You! I will be in touch</div>'; -->
     <div class=" alert alert-danger" id="result">This form is unable to be send direct contact me at www.conorhinchee.tech</div>
        
      </div>  
      </div>
    </div>
    
    <div class="row navigationC">
      <div class="col-lg-12 col-xs-12">

        <div class="hoverLinetop3" id="hvLine3"></div>


        <h5 class="text-center naviText">
      
     <span id="aboutContact">
       <a href "#">  
        About
       </a> 
     </span>
     <span id="blogContact">  
      <a href= "http://blog.conorhinchee.tech/" target="_blank">   
         Blog
      </a>  
     </span>
     <span id="portfolioContact">
        <a href ="#"> 
       Portfolio
       </a>
      </span>  
    </h5>

      </div>

  </div>
  </div>  
  
  
</div>  

/*Downloaded from https://www.codeseek.co/captnstarburst/portfolio-page-BKROXm */
    body{
  background: #232320;
  
}
.title{
  padding-top: 5%;
}
.titleText{
  
  font-family: 'Bungee Inline', cursive;
  color: white;
}
.about{
  padding: 5%;
}
.aboutText{
  
  font-family: 'Bungee Inline', cursive;
  color: white;
}
.navigation{
  padding: 5%;
}
.navigationP{
/*   padding: 5%; */
}
.naviText{
  font-family: 'Share Tech Mono', monospace;
  color: white;
}
label{
   font-family: 'Share Tech Mono', monospace;
  color: black;
}
.naviText a{
color: inherit; /* blue colors for links too */
  text-decoration: inherit; /* no underline */  
}

.col{
/*    border: 1px solid white;   */
}

.hoverLinetop{
  width: 2%;
  height: 6px;
  background-color: white;
  margin: 0 auto;
}
.hoverLinetop2{
  width: 2%;
  height: 6px;
  background-color: white;
  margin: 0 auto;
}
.carousel{
  padding: 5%;
}

.contact{
/*    min-height: 800px; */
   background-image:url("http://conorhinchee.tech/pictures/sketch.jpg");
   background-repeat: no-repeat;
  -webkit-background-size: 100% auto;
  -moz-background-size: 100% auto;
  -o-background-size: 100% auto;
  background-size: 100% auto;
  background-color: black;
/*   margin: 0 auto; */
}


/*Downloaded from https://www.codeseek.co/captnstarburst/portfolio-page-BKROXm */
    $(document).ready(function() {
  
  initialLoad();
  
});

function initialLoad(){
  $("#intro").show();
  $("#portfolio").hide();
  $("#contact").hide();
  
  
  $("#title").hide(0).delay(1000).fadeIn(3000);
  $("#1").hide(0).delay(1500).fadeIn(3000);
  $("#2").hide(0).delay(2000).fadeIn(3000);
  $("#3").hide(0).delay(2500).fadeIn(3000);
  $("#hvLine").hide();
}

$('#portfolioIntro').hover(function(){
  
  $("#hvLine").css("margin", "0 43%");
  $("#hvLine").css("width", "6%");
  $("#hvLine").show(); 
    
  // $("#hvLine").fadeIn(300);
}, function(){ 
   $("#hvLine").hide();   
});

$("#portfolioIntro").on("click", function(){
  
  $("#intro").hide();
  $("#hvLine2").hide();
  $("#portfolio").hide(0).delay(600).fadeIn(5000);
});

$('#blogIntro').hover(function(){
  
  $("#hvLine").css("margin", "0 49%");
  $("#hvLine").css("width", "3%");
  $("#hvLine").show(); 
    
  // $("#hvLine").fadeIn(300);
}, function(){ 
   $("#hvLine").hide();   
});

$('#contactIntro').hover(function(){
  $("#hvLine").css("margin", "0 52%");
  $("#hvLine").css("width", "6%");
  $("#hvLine").show(); 
    
  // $("#hvLine").fadeIn(300);
}, function(){ 
   $("#hvLine").hide();   
});

$("#contactIntro").on("click", function(){
  
  $("#intro").hide();
  // $("#hvLine2").hide();
  $("#contact").show();
  $("#result").hide()
});


$('#blogPortfolio').hover(function(){
  
  $("#hvLine2").css("margin", "0 48%");
  $("#hvLine2").css("width", "3%");
  $("#hvLine2").show(); 
    
  // $("#hvLine").fadeIn(300);
}, function(){ 
   $("#hvLine2").hide();   
});





$('#contactPortfolio').hover(function(){
  $("#hvLine2").css("margin", "0 51%");
  $("#hvLine2").css("width", "5%");
  $("#hvLine2").show(); 
    
  // $("#hvLine").fadeIn(300);
}, function(){ 
   $("#hvLine2").hide();   
});

$("#contactPortfolio").on("click", function(){
  
  $("#portfolio").hide();
  // $("#hvLine2").hide();
  $("#contact").show();
  $("#result").hide()
});




$("#aboutPortfolio").on("click", function(){
  initialLoad();
});

$('#aboutPortfolio').hover(function(){
  $("#hvLine2").css("margin", "0 45%");
  $("#hvLine2").css("width", "3%");
  $("#hvLine2").show(); 
    
  // $("#hvLine").fadeIn(300);
}, function(){ 
   $("#hvLine2").hide();   
});

$("#submit").on("click",function(){
  $("#result").show();
});


$("#portfolioContact").on("click", function(){
  
  $("#contact").hide();
  $("#intro").hide();
  $("#hvLine2").hide();
  $("#portfolio").hide(0).delay(600).fadeIn(5000);
});

Comments