Portfolio Page

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

Thumbnail
This awesome code was written by RocketJory, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright RocketJory ©

Technologies

  • HTML
  • CSS
  • JavaScript
    <html>
  <!--head matter-->
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>Jory Seguin Portfolio</title>   
  </head>
  <!--head matter-->
  <!--body matter-->
  <body>
    <!--Nav bar-->
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbuttons_container">
          
          <ul>      
            <li>
              <a href="#about"><button type="button" class="nav-button">About</button></a>
            </li>
            
            <li>
              <a href="#portfolio"><button type="button" class="nav-button">Portfolio</button></a>
            </li>
            
            <li>
              <a href="#contact"><button type="button" class="nav-button">Contact</button></a>
            </li>
          </ul>
            
          <div class="navbar-right">
            <h1 id="navbar-name" class="navbar-text navbar-right">Jory Seguin</h1>
          </div>
        </div>
      </div>
    </nav>
    <!--Nav bar-->
    <!--Main content-->
    <div class="container">
      
      <!--About section-->
      <div id="#about" class="row">
        <a class="about" name="about"></a>
        <div class="col-xs-12">
          <div class="bg1">
            <div class="row row-centered">
              <div class="col-centered col-md-8 col-xs-10">
                <h2 style="padding-top:100px">I'm a Mechanical Engineering student with a passion for all types of coding.</h2>
                <hr>
                <h2>Skills <i class="fa fa-code" aria-hidden="true"></i></h2>
                <div class="skills-box">
                <img src="https://www.planet-source-code.com/vb/2010Redesign/images/LangugeHomePages/HTML5_CSS_JavaScript.png" style="width:200px">
                <img src="http://blog.redpitaya.com/wp-content/uploads/2015/09/MATLAB-logo.png" style="width:150px">
                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Mathematica_Logo.svg/2000px-Mathematica_Logo.svg.png" style="width:100px">
                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/Python-logo-notext.svg/1024px-Python-logo-notext.svg.png" style="width:100px">
                </div>
              </div>
              <div class="col-centered col-md-2">
                <img src="https://upload.wikimedia.org/wikipedia/en/c/c2/Peter_Griffin.png" style="width:200px;" class="personal-pic vertical-align">
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--About section-->
      
      <!--Portfolio section-->     
      <div id="#portfolio" class="row">
        <a class="anchor" name="portfolio"></a>
        <div class="col-xs-12">
          <div class="bg2">
            <div class="row row-centered">
              <div class="col-centered col-md-8 col-xs-10">
                
                <div style="display:flex;justify-content:space-around;align-items:center">
                  <a onclick="plusDivs(-1)"><i class="fa fa-arrow-circle-o-left fa-3x slideshow-button" style="color:black;float:left;" aria-hidden="true"></i></a>
                  <h1>Portfolio</h1>
                  <a class="slideshow-button" onclick="plusDivs(+1)"><i class="fa fa-arrow-circle-o-right fa-3x slideshow-button" style="color:black;float:right" aria-hidden="true"></i></a>
                </div>
                
                <div class="thumbnail col-xs-12">
                  <img src="http://www.spacex.com/sites/spacex/files/itl_streak.jpg" class="mySlides">
                  <img src="http://www.spacex.com/sites/spacex/files/styles/history_milestone_image_style/public/history_milestone_image/droneship_landing.jpg?itok=26mlCRNb" class="mySlides">       
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--Portfolio section-->   
      
      <!--Contact section-->     
      <div id="#contact" class="row row-centered">
        <a class="anchor" name="contact"></a>
        <div class="col-md-12">
          <div class="bg3">
              <div class="col-centered col-md-10 col-xs-10">
                <h1 style="text-align:center">Contact</h1>
                
                <div class="col-centered form-style">
                <form class="form-style col-md-10 col-xs-10">
                  <input type="text" name="field1" placeholder="Full Name" />
                  <input type="email" name="field2" placeholder="Email" />
                  <input type="phone" name="field3" placeholder="Phone Number" />
                  <textarea placeholder="Message" onkeyup="adjust_textarea(this)"></textarea>
                  <input type="button" value="Send Message" />
                </form>
                </div>
                
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--Contact section-->
      
      <!--Social Media-->
      <div class="row">
        <div class="col-md-12">
          <div class="bg4">
            <div class="row row-centered">
              <div class="col-centered col-md-6" syle="display:flex">
                <h1 id="footer-text" class="text-center" style="color:white">On The Web</h1>
                <div class="icon-box">
                  <a href="#">
                  <i class="fa fa-linkedin-square fa-4x foot-icon" aria-hidden="true"></i>
                  </a>
                  <a href="#">
                  <i class="fa fa-github-square fa-4x foot-icon" aria-hidden="true"></i>
                  </a>
                  <a href="#">
                  <i class="fa fa-twitter-square fa-4x foot-icon" aria-hidden="true"></i>
                  </a>
                  <a href="#">
                    <i class="fa fa-envelope fa-4x foot-icon" aria-hidden="true"></i>
                  </a>
                </div>
              </div>
              <div class="col-centered col-md-6">
                <h1 id="footer-text" class="text-center" style="color:white">Curriculum Vitae</h1>
                <div class="icon-box">
                  <a href="">
                    <i class="fa fa-file-pdf-o fa-4x foot-icon" aria-hidden="true"></i>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--Social Media-->
      
    </div>
    <!--Main content-->

    <!--Footer-->
    <div class="container-fluid">
      <div class="row" style="margin-top:-10px;">
        <div class="footer-box text-center">
          <h4 id="footer-text">&copy; Jory Seguin 2017</h4>
        </div>
      </div>
    </div>
    <!--Footer-->
    
  </body>
  <!--body matter-->
  
</html>

/*Downloaded from https://www.codeseek.co/RocketJory/portfolio-page-VpLaXp */
    body { background-color:#ffbc66; }

.navbar {
  background-color: #222;
  border-color: black;
  height: 70px;
}

.vertical-align {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.footer-box {
  background-color: #222;
  border-color: black; 
  padding-bottom: 5px;
}

#footer-text { color:grey; padding:5px; }

.fa{ color: white; }

#list-button {
  display: none;
}

#navbar-name {
  color: white;
  float: right;
}

.nav-button {
  color: white;
  background:  rgba(0,0,0,0.0);
  padding: 20px;
  font-size: 20px;
  border: none;
  transition: 0.2s;
}

.nav-button:hover{
  background:  rgba(0,0,0,0.8);
}

.navbuttons_container {
  display: flex-wrap;
  flex-direction: row;
  justify-content: center;
}

.bg1 {
  background-color: #999;
  padding: 20px;
}

.bg2 {
  background-color: white;
}

.bg3 {
  background-color: #999;
}

.bg4 {
  background-color: #444444;
}

.skills-box {
  display: flex-wrap;
  flex-flow: row;
  align-items: center;
}

.form-group {
  display: block;
  align-items: center;
}

.row-centered {
    text-align:center;
}
.col-centered {
    display:inline-block;
    float:none;
    text-align:left;
    margin-right:-4px;
}

.icon-box {
  display:flex;
  flex-direction:row;
  justify-content: center
}

.foot-icon {
  margin: 20px;
  transition: 0.2s;
}

.foot-icon:hover {
  color:  rgba(0,0,0,0.5);  
  transform: scale(1.2);
}

mySlides {
  display:none;
}

.thumbnail{        
    width: 100%; 
    overflow: hidden;
}

.thumbnail img{
    // your styles for the image
    width: 100%;
    
    height: auto;
    display: block;
}


.slideshow-button { transition:0.2s }
.slideshow-button:hover {
  transform: scale(1.2);
}

a.anchor {
    display: block;
    position: relative;
    top: -70px;
    visibility: hidden;
}

/*Navbar stuff*/
ul {
	list-style-type:none;
	margin:0;
	padding:0;
	position: absolute;
}

li {
	display:inline-block;
	float: left;
	margin-right: 1px;
}

@media screen and (max-width:800px) {
  #list-button{ display: inline-block; float: left; }
  #navbar-name{ display: none }
}

@media screen and (max-width:1000px) {
  .personal-pic{ display: none; }  
}

.form-style {
  margin: 0 auto;
  display: flex;
  justify-content: center;
  padding-bottom: 20px;
  color: white;
}

form input {
    padding: 7px;
    border: none;
    border-bottom: 1px solid #ddd;
    background: transparent;
    margin-bottom: 10px;
}

form textarea {
    padding: 7px;
    border: none;
    border-bottom: 1px solid #ddd;
    background: transparent;
    margin-bottom: 10px;
}

form input[type="button"] {
  background-color: white;
  border-color: black;
  border-radius: 4px;
  color: black;
}

form {
  display: flex;
  flex-direction: column;
}

input::placeholder, textarea::placeholder {
    color: black;
}


/*Downloaded from https://www.codeseek.co/RocketJory/portfolio-page-VpLaXp */
    var slideIndex = 1;
showDivs(slideIndex);

/* Calls the slideshow function left or right*/
function plusDivs(n) {
    showDivs(slideIndex += n);
}

/* Handle slideshow */
function showDivs(n) {
    var i;
    var x = document.getElementsByClassName("mySlides");
    /* handle out of bounds */
    if (n > x.length) {slideIndex = 1} 
    if (n < 1) {slideIndex = x.length} ;
    /* hide all images */
    for (i = 0; i < x.length; i++) {
        x[i].style.display = "none"; 
    }
    /* show correct image */
    x[slideIndex-1].style.display = "block"; 
}

Comments