Personal Portfolio

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

take 2

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Personal Portfolio</title>
  
  
  <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'>

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

  
</head>

<body>

  <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>

<div class="container-fluid">
    <nav class="navbar navbar-default navbar-fixed-top">
      <ul class="nav navbar-nav">
        <li class="target active text-uppercase" id="home-button"><a href="#">Home</a></li>
        <li class="target text-uppercase" id="about-button"><a href="#">About</a></li>
        <li><img src="https://lh3.googleusercontent.com/-Nu2Z6J4uK58/U-F2EgeqytI/AAAAAAAABz4/x2LIF51p1uYEPJ46VvVZUBQNJHthuGHfgCEw/w140-h140-p/SMP%2BProfile%2BPic%2B1.png" id="me"/></li> 
        <li class="target text-uppercase" id="portfolio-button"><a href="#">Portfolio</a></li>
        <li class="target text-uppercase" id="contact-button"><a href="#">Contact</a></li> 
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li class="icon"><a href="https://codepen.io/SamrajM/" target="_blank"><i class="fa fa-codepen"></i></a></li>
        <li class="icon"><a href="https://twitter.com/SamrajMoorjani" target="_blank"><i class="fa fa-twitter"></i></a></li>
        <li class="icon"><a href="https://github.com/smoorjani" target="_blank"><i class="fa fa-github"></i></a></li>
        <li class="icon last"><a href="https://www.linkedin.com/in/samraj-m-a74372120
" target="_blank"><i class="fa fa-linkedin"></i></a></li>
      </ul>
    </nav>
  
  <div class="pages-container">
    <div class="page active-page" id="home-page">
      <h1>Samraj Moorjani</h1>
      <h2></h2>
    </div>
    
    <div class="page" id="about-page">
      <div class="row">
        <div class="col-md-5"></div>
        <div class="col-md-5">
          <h1>About me</h1>
          <p>I am a high schooler currently working on educating myself about Android App Development. I have a working knowledge of C++, Java, Javascript, HTML, CSS, and more. I work around Adobe Photoshop, After Effects, Sony Vegas, Cinema4D, and more.</p>
        </div>
      </div>
    </div>
    
    <div class="page" id="portfolio-page">
      <div class="row">
        <div class="col-sm-0 col-md-2"></div>
        <div class="col-sm-6 col-md-2">
          <div class="thumbnail">
            <a href="" target="_blank"><img src="#" alt="Alan Turing Tribute"></a>
            <div class="caption">
              <h3>Project 1</h3>
                <p>sumary</p>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-md-2">
          <div class="thumbnail">
            <a href="" target="_blank"><img src="#" alt="Personal Portfolio"></a>
            <div class="caption">
              <h3>Project 2</h3>
              <p>summary</p>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-md-2">
          <div class="thumbnail">
            <a href="#" target="_blank"><img src="#" alt="Project 3"></a>
            <div class="caption">
              <h3>Project 3</h3>
              <p>summary</p>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-md-2">
          <div class="thumbnail">
            <a href="#" target="_blank"><img src="#" alt="Project 4"></a>
            <div class="caption">
              <h3>Project 4</h3>
              <p>summary</p>
            </div>
          </div>
        </div>
      </div> 
    </div>
    
    <div class="page" id="contact-page">
      <div class="row">
        <div class="col-md-4"></div>
        <div class="col-md-4"></div>
        <div class="col-md-4"></div>
      </div>
      <div class="jumbotron">
        <h1>Contact me</h1>
        <p>You can contact me on <span class="mail">smoorjani@live.com</span> or...</p>
        <a href="https://codepen.io/SamrajM/" target="_blank"><i class="fa fa-codepen fa-2x"></i></a>
        <a href="https://twitter.com/SamrajMoorjani" target="_blank"><i class="fa fa-twitter fa-2x"></i></a>
        <a href="https://github.com/smoorjani" target="_blank"><i class="fa fa-github fa-2x"></i></a>
        <a href="https://www.linkedin.com/in/samraj-m-a74372120
" target="_blank"><i class="fa fa-linkedin fa-2x"></i></a>
      </div>
    </div>
    
  </div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/SamrajM/personal-portfolio-XqovLV */
body {
  font-family: 'Roboto', sans-serif;
  color: #fff;
}

nav {
  height: 40px;
}

#me {
  border-radius: 50%;
  height: 80px;
  border: 5px solid #fff;
}

#about-button {
  padding-right: 10px;
}

#portfolio-button {
  padding-left: 10px;
}

.icon {
  margin-left: -15px;
}

.last {
  margin-right: 10px;
}

.page {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

#home-page {
  background: url('http://cdn.wonderfulengineering.com/wp-content/uploads/2014/04/space-wallpapers-12.jpg');
  background-size: cover;
  text-align: center;
}

#home-page h1 {
  font-family: 'Lobster', serif;
  font-size: 6em;
  margin-top: 370px;
}

#home-page h2 {
  font-family: 'Roboto', sans-serif;
  margin-top: -10px;
  font-size: 1.5em;
  font-weight: bold;
}

#about-page {
  background: url('http://www.pixelstalk.net/wp-content/uploads/2016/03/Free-Dark-Blue-Wallpaper-HD.jpg');
  background-size: cover;
  text-align: justify;
}

#about-page h1 {
  font-size: 3em;
  font-weight: bold;
  font-family: 'Lobster', 'Roboto', serif;
  text-align: center;
}

#about-page .row {
  font-size: 1.1em;
  margin-top: 24%;
}

#portfolio-page {
  background: url('http://wallpapercave.com/wp/hpehPUv.jpg');
  background-size: cover;
}

.row {
  margin-top: 10%;
  width: 100%;
}

.row div {
  padding-top: 20px;
}

#contact-page {
  background: url('http://www.pixelstalk.net/wp-content/uploads/2016/03/Background-dark-blue-wallpaper-HD.jpg');
  background-size: cover;
  text-align: center;
  color: #fff;
}

.jumbotron {
  background: none;
}

.mail {
  color: white;
}

.jumbotron .fa {
  color: #fff;
  margin: 0px 3px;
}

.jumbotron .fa:hover {
  color: palevioletred;
}

/*Downloaded from https://www.codeseek.co/SamrajM/personal-portfolio-XqovLV */
$(document).ready(function() {
  $('.page').not('.active-page').hide();
  
  $('.target').click(function() {
    $('.target').removeClass('active');
    $(this).addClass('active');
    switch($(this).attr('id')) {
      case 'home-button':
        changePage('#home-page');
        break;
      case 'about-button':
        changePage('#about-page');
        break;
      case 'portfolio-button':
        changePage('#portfolio-page');
        break;
      case 'contact-button':
        changePage('#contact-page');
        break;
    }
  });
  
  $(window).bind('mousewheel', function(e){
    if (e.originalEvent.wheelDelta / 120 > 0) {
      var prevPage = $('.active-page').prev().attr('id');
      if (prevPage.length > 0) {
        changePage('#' + prevPage);
        $('.target').removeClass('active');
        switch(prevPage) {
          case 'home-page':
            $('#home-button').addClass('active');
            break;
          case 'about-page':
            $('#about-button').addClass('active');
            break;
          case 'portfolio-page':
            $('#portfolio-button').addClass('active');
            break;
          case 'contact-page':
            $('#contact-button').addClass('active');
            break;
        }
      }
    }
    else {
      var nextPage = $('.active-page').next().attr('id');
      if (nextPage.length > 0) {
        changePage('#' + nextPage);
        $('.target').removeClass('active');
        switch(nextPage) {
          case 'home-page':
            $('#home-button').addClass('active');
            break;
          case 'about-page':
            $('#about-button').addClass('active');
            break;
          case 'portfolio-page':
            $('#portfolio-button').addClass('active');
            break;
          case 'contact-page':
            $('#contact-button').addClass('active');
            break;
        }
      }
    }
  });
});

function changePage(page) {
  var currentPage = $('.active-page');
  if('#' + currentPage.attr('id') == page) return 0;
  currentPage.fadeOut(600);
  currentPage.removeClass('active-page');
  $(page).fadeIn(600);
  $(page).addClass('active-page');
}

Comments