My Personal portfolio

In this example below you will see how to do a My Personal portfolio with some HTML / CSS and Javascript

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

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>My Personal portfolio</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Amaranth" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Josefin+Slab|Lobster" rel="stylesheet">

<html>
<body data-spy='scroll' data-target='.navbar' data-offset='20'>
<nav class='navbar navbar-inverse navbar-fixed-top'>
  <div class='container-fluid'>
    <div class='navbar-header'>
      <button type='button' class='navbar-toggle' data-toggle='collapse' data-target='#pageHeader'>
        <span class='icon-bar'></span>
        <span class='icon-bar'></span>
        <span class='icon-bar'></span>
        </button>
      <a class='navbar-brand' href='#'>My Personal Portfolio</a>
    </div>
    <div id='pagemenu'>
    <ul class='nav navbar-nav navbar row'>
      <li class='col-xs-4'><a href='#About'>About</a></li>
      <li class='col-xs-4'><a href='#Portfolio'>Portfolio</a></li>
      <li class='col-xs-4'><a href='#Contact'>Contact</a></li>
    </ul>
    </div>
  </div>
</nav>

  <div class='body'>
<div id='About' class='col-md-12'>
  <div class='background-image'>
    <div id='dp'>
      <img class='smaller-image image-border img-responsive' src='https://scontent-lhr3-1.xx.fbcdn.net/t31.0-8/s960x960/285913_3911925629827_945740163_o.jpg'>
    </div>
  </div>
  <div id='name'>
    <p>Obed Jossy Ndubisi</p>
  </div>
  <div id='craftsman'>
    <p>Aspiring Software Craftsman</p>
  </div>
  <div id='intro-info'>
    <p>I am a young, patriotic citizen of Nigeria. I love soccer, spoken-word poetry and dodo (Yoruba word meaning 'Plantain'). 
   <br />I am passionate about software development and all things tech...and I am not afraid to ask stupid questions. lol.</p>
    <hr/>
    <p>There's a word that simply defines who I am and what I stand for: 'Christocentric</p>
  </div>
</div>

<div id='Portfolio' class='col-md-12'>
  <p class='sectiontop'>My Portfolio</p>
  <div class='project'>
      <div id='video' class='col-md-6'>
        
      </div> 
    </div>
  <div class='project'>
      <div id='digital' class='col-md-6'>
        <a href='https://codepen.io/Obedjosiah/full/RRoLxR' target='_blank'><img src='https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTvLna26iwVJIWlf2L_zGP56ZN0U2P8PUPemLw3I2nUeGNgvYxZaw' border='' alt='Digital Multi-Timezone Clock' width='400px' height='200px'>
          <p class='imagetext'>This is image is a placeholder.<br><br>This link goes to my<br> 'Multi-Timezone Clock' project.</p>
        </a>
      </div>
      <div id='currency' class='col-md-6'>
        <a href='https://codepen.io/Obedjosiah/full/ZOBYvX' target='_blank'><img src='https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQscTE3n3a1deWOgVlUgRcBNBli8yOP3lFTYApJG25TCaE9h1kWGQ' border='' alt='Currency Converter' width='400px' height='200px'>
        <p class='imagetext'>This is image is a placeholder.<br><br>This link goes to my<br> 'Currency Converter' project.</p></a>
      </div>
      </div>
      <div class='project'>
      <div id='tribute' class='col-md-6'>
        <a href='https://codepen.io/Obedjosiah/full/NNEmJq' target='_blank'><img src='https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQnPo95gmxBFqqfiDy3dlS2jcLsH0sd2ogVal9cd0roSxNNuJJv' border='' alt='Tribute Page' width='400px' height='200px'>
        <p class='imagetext'>This is image is a placeholder.<br><br>This link goes to my<br> 'Tribute Page' project.</p>
        </a>
      </div>
    </div>
    
</div>
  
  <div id='Contact' class='col-md-12'>
    <p class='sectiontop'>I'm In Touch</p>
    <div id='contact-intro'>
      <p>Dont hold back if you feel the need to contact me for any reason; to collaborate on an insane project, to have a faith-based discussion, or just to know how awesome it feels to live in Nigeria.</p>
    </div>
    <div>
      <form>
        <div class='contactname'>
          <label for='name'>Name</label><br>
          <input id='nametxtbox' type='text' name='name' tabindex='1'/>
          <br>
        </div>
        <div class='contactemail'>
          <label for='email'>Email</label><br>
          <input id='emailtxtbox' type='email' name='email' tabindex='2'>
        </div>
        <div class='contactmessage'>
          <label for='message'>So, What's Up??</label><br>
          <input id='messagetxtbox' type='text' name='message' tabindex='3'/>
        
        </div>
        <div class='submit'>
          <input type='button' value='submit'>
        </div>   
      </form>
      </div>
    
      
  <div id='footer'>
        <div id='icons'>
          <div class='socialmedia'><a href='https://ng.linkedin.com/in/ndubisi-obed-a0a8919b' target='_blank'><i class='fa fa-linkedin-square' style='font-size:40px; color:blue'></i></a></div>
          <div class='socialmedia'><a href='https://www.facebook.com/obed.josiah.52' target='_blank'><i class='fa fa-facebook-square' style='font-size:40px'></i></a></div>
          <div class='socialmedia'><a href='https://github.com/obedjosiah' target='_blank'><i class='fa fa-github-square' style='font-size:40px; color: black'></i></a></div>
          <div class='socialmedia'><a href='https://twitter.com/Obed_Josiah' target='_blank'><i class='fa fa-twitter-square' style='font-size:40px; color: lightblue'></i></div>
          <div class='socialmedia'><a href='https://medium.com/@obedjosiah' target='_blank'><i class='fa fa-medium' style='font-size:40px; color:green'></i></a></div>
          <div class='socialmedia'><a href='https://www.instagram.com/obed_josiah/' target='_blank'><i class='fa fa-instagram' style='font-size:40px; color: brown'></i></a></div>
          <div class='socialmedia'><a href='https://www.pinterest.com/obedndubisi/' target='_blank'><i class='fa fa-pinterest-square' style='font-size:40px'></i></a></div>
          <div class='socialmedia'><a href='https://plus.google.com/u/2/117020570036931533165' target='_blank'><i class='fa fa-google-plus-square' style='font-size:40px; color:red'></i></a></div>
          </div>
          <div id='rights'><hr><p>Obed Ndubisi &copy 2016. All Rights Reserved.</p></div>
      </div>
      
    </div>
 
    
</body>
  
</html>
  
  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/Obedjosiah/my-personal-portfolio-VKwpPk */
#pagemenu{
  margin:auto;
  width: 400px;
}
.navbar{
  color: pink;
}
#About{ 
  height:650px; 
  width: 100%;
  margin-top: no;
  text-align: center;
 
    
}
#About:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 650px;
  left: 0;
  right: 0;
  z-index: -1;

  display: block;
  background:
    linear-gradient( rgba(0,0,0,.5), rgba(0,0,0,.5)),
    url('https://hd.unsplash.com/photo-1425342605259-25d80e320565');    
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  
}


#dp{
  margin-left: auto;
  margin-right: auto;
  width: 200px;
  border: 2px;
  padding-top: 100px;

}
.smaller-image{
  width: 150px;
  border-radius: 75px;
  background-color: red;
  padding: 2px;
  
}
#name{
  height: 50px;
  width: 400px;
  margin-left: auto;
  margin-right: auto;
  margin-top:10px;
  color: #FFFFFF;
  font-size: 2.5em;
  background-color: #7E7E7D;
  text-align: center;
}
#craftsman{
  height: 35px;
  width: 350px;
  margin-left: auto;
  margin-right: auto;
  margin-top:0px;
  border-style: solid;
  border-color: red;
  border-width: 0px 5px 5px 5px;
  padding-bottom: 5px;
  color: #FFFFFF;
  font-size: 1.8em;
  font-family: 'Lobster', cursive;
  background-color: #343436;
  text-align: center;
}
#intro-info{
  margin-right: auto;
  margin-left: auto;
  margin-top: 30px;
  width: 500px;
  color: #FFFFFF;
  text-align: justify;
  font-size: 1.2em;
  font-family: 'Josefin Slab', serif;
}

#Portfolio{
  
  height:1000px; 
  width: 100%;
  text-align: center;
}

#Portfolio:before{
  content:'';
  position: absolute;
  width: 100%;
  height: 1000px;
  left:0;
  right:0;
  z-index:-1;
  
  
  display: block;
  background:
    linear-gradient( rgba(0,0,0,.5), rgba(0,0,0,.5)),
    url(https://hd.unsplash.com/photo-1429216967620-ece20ff3a5f9);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  
}

.project{
  height: 250px;
  width: 70%;
  
  margin-right: auto;
  margin-left: auto;
  display: block;
  align: center;
}
.sectiontop{
  padding-top: 20px;
  color:#FFFFFF;
  font-size: 2em;
}

#video{
  margin-left:250px; 
  background-color: red;
  width:400px;
  height:200px;
}
#video a {
  
  position: relative;
  display: block;
}
#video img {
  position: absolute;
  left: 0;
  top: 0;
  
  z-index: 1;
}
#video img:hover {
  opacity: 0.2;
}
#video a p{
  padding-top: 50px;
  color: #FFFFFF;
  font-size: 1.4em;
}
#digital a {
  
  position: relative;
  display: block;
}
#digital img {
  position: absolute;
  left: 0;
  top: 0;
  
  z-index: 1;
}
#digital img:hover {
  opacity: 0.2;
}
#digital a p{
  padding-top: 50px;
  color: #FFFFFF;
  font-size: 1.4em;
}
#currency a {
  
  position: relative;
  display: block;
}
#currency img {
  position: absolute;
  left: 0;
  top: 0;
  
  z-index: 1;
}
#currency img:hover {
  opacity: 0.2;
}
#currency a p{
  padding-top: 50px;
  color: #FFFFFF;
  font-size: 1.4em;
}
#tribute{
  margin-left:250px; 
}
#tribute a {
  
  position: relative;
  display: block;
}
#tribute img {
  position: absolute;
  left: 0;
  top: 0;
  
  z-index: 1;
}
#tribute img:hover {
  opacity: 0.2;
}
#tribute a p{
  padding-top: 50px;
  color: #FFFFFF;
  font-size: 1.4em;
}

#Contact{ 
  height:1000px; 
  width: 100%;
  text-align: center;
  color: #FFFFFF;
}

#Contact:before{
  content:'';
  position: absolute;
  right:0;
  left:0;
  width: 100%;
  height: 1000px;
  z-index: -1;
  
  display: block;
  background:
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),    
    url('https://hd.unsplash.com/photo-1467810563316-b5476525c0f9');
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;

}
#contact-intro{
  margin: auto;
  width: 50%;
  font-size: 1.2em;
  border-style: solid;
  font-family: 'Josefin Slab', serif;
}
.contactname,.contactemail,.contactmessage,.submit{  
  margin: 50px 0px 100px 0px;  
}

label{
  font-family: 'Amaranth', sans-serif;
  font-size: 1.6em;
}

input[type=text], input[type=email]{
  width: 500px;
  height: 1px;
}
input[name=slide]{
  width: 500px;
  height: 500px;
  default: hide;
}
input[type=long-text]{
  width: 500px;
  height: 1px; 
}
.submit{  
  margin: 50px 0px 100px 0px;  
  color: red;
  background-color: 
  
}
#footer{
  margin-top: 180px;
  position: ;
  width: 100%;
  height: 60px;
  background-color: ;
  left: 0px;
  bottom: 0px;
  
}

#icons{
  margin: auto;
  width: 560px;
  height: 40px;
  background-color: ;
  
}
.socialmedia{
  margin: auto;
  float: left;
  width: 70px;
  height: 40px;
  background-color: ;
 display: block;
}
#rights{
  
}


/*Downloaded from https://www.codeseek.co/Obedjosiah/my-personal-portfolio-VKwpPk */
$(window).ready(function(){
  $('.contactname').on({
    mouseenter: function(){
  $('#nametxtbox').animate({height:'50px'},'slow');
  },
    mouseleave: function(){
  $('#nametxtbox').animate({height:'1px'},'slow');
    },
    
        
/*mouseleave(function(){
  $('#nametxtbox').animate({height:'50px'},'slow');*/
  });
  $('.contactemail').on({
    mouseenter: function(){
  $('#emailtxtbox').animate({height:'50px'},'slow');
  },
    mouseleave: function(){
  $('#emailtxtbox').animate({height:'1px'},'slow');
    }
  });
  $('.contactmessage').on({
    mouseenter: function(){
  $('#messagetxtbox').animate({height:'200px'},'slow');
  },
    mouseleave: function(){
  $('#messagetxtbox').animate({height:'1px'},'slow');
    }    
  });
  $('#footer').scrollup(function(){
    $(this).css('position','fixed');
  });
  
 /*$('#body href').each(function(){
   $(this).attr('target','_blank');
 });*/
});

Comments