My portfolio

index.html

<header 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="#mynav">
        <i class="fa fa-bars"></i>
      </button>
    <a href="#" class="navbar-brand"><b><img src="https://raw.githubusercontent.com/rajatkantinandi/my-images/master/Rajat4.jpg" width="40px" height="40px" alt="Rajat" class="pf-photo" style="display:none;"/> Rajat Kanti Nandi</b></a>
  </div>
  <div class="collapse navbar-collapse" id="mynav">
      <ul class="nav navbar-nav navbar-right">
        <li class="active" id="e1"><a href="#top" class="scrollable">ABOUT</a></li>
        <li id="e2"><a href="#portfolio" class="scrollable">PORTFOLIO</a></li>
        <li id="e3"><a href="#contact" class="scrollable">CONTACT</a></li>
      </ul>
    </div>
  </div>
</header>


<div class="container-fluid" id="top">
<div class="seperator"></div>
  <div class="container-fluid about-me">
    <div class="col-sm-4 col-xs-12 pf">
      <img src="https://raw.githubusercontent.com/rajatkantinandi/my-images/master/Rajat4.jpg" width="190px" height="190px" alt="Rajat" class="pf-photo"/>
  </div>
  <div class="col-sm-8 col-xs-12">
    <div class="tag">
      <h4><i class="fa fa-user"></i> Mechanical Engineer & Front-end Developer</h4>
    </div>
    <div class="tag">
        <h4><i class="fa fa-briefcase"></i> Work</h4>
    <p><b>Assistant Manager</b> @ <b>Exide Industries Limited:</b><br/>
    1st July 2015 to present</p>
    </div>
    <div class="tag">
<h4><i class="fa fa-graduation-cap"></i> Education</h4>        
        <p>Graduated in <b>Mechanical engineering</b> from <em>NIT Durgapur</em></p>
      <p>Studied @ <b>Maynaguri High School</b></p>
      </div>
    </div>
  </div>
</div>


<div class="container-fluid" id="portfolio">
<div class="seperator"></div>
  <div class="portfolio text-center">
    <h3>Projects</h3> 
    <hr style="color:red;"/>
    <h4><b>#Homeage_2.0</b> - A browser homepage design <a href="https://github.com/rajatkantinandi/Project-Home" target="_blank"><i class="fa fa-external-link"></i></a></h4>
    <div class="thumbnail"><img src="https://raw.githubusercontent.com/rajatkantinandi/Project-Home/master/Screenshot_home_desktop.JPG" alt="desktop-version" width="100%"/>
      <div class="caption">
        Desktop version
      </div>
    </div>
    <div class="thumbnail"><img src="https://raw.githubusercontent.com/rajatkantinandi/Project-Home/master/Screenshot_home_tabletfav.JPG" alt="tablet-version" width="60%"/>
      <div class="caption">
        Tablet Version
      </div>
    </div>
    <div class="container-fluid mobile-ver">
      <div class="thumbnail col-sm-5 col-xs-12" ><img src="https://raw.githubusercontent.com/rajatkantinandi/Project-Home/master/Screenshot_home_mobile1.JPG" alt="mobile-version" height="300px"/>
        <div class="caption">
        Mobile Version
        </div>
      </div>
      <div class="thumbnail col-sm-5 col-xs-12" ><img src="https://raw.githubusercontent.com/rajatkantinandi/Project-Home/master/Screenshot_home_mobile2.JPG" alt="mobile-version-news" height="300px"/>
        <div class="caption">
        Mobile Version News
        </div>
      </div>
    </div>
  </div>
</div>


<div class="container-fluid" id="contact">
<div class="seperator"></div>
  <div class="contact-me">
    <h3 class="text-center">Connect With Me</h3>
    <hr/>
    <div class="container-fluid">
      <div class="social text-center col-xs-6">
        <h3>Social & Mail</h3>
        <h1>
          <a href="https://fb.me/rajat.kantinandi" target="_blank"><i class="fa fa-facebook-square"></i></a> 
          <a href="https://twitter.com/rajatkantinandi" target="_blank"><i class="fa fa-twitter-square"></i></a> 
          <a href="https://www.quora.com/profile/Rajat-Kanti-Nandi-1" target="_blank"><i class="fa fa-quora"></i></a> 
          <a href="mailto:rajatkantinandi1993@gmail.com?Subject=Hi%20Rajat" target="_top"><i class="fa fa-envelope"></i></a> 
        </h1>
      </div>
      <div class="dev text-center col-xs-6">
        <h3>Developer Profile</h3>
        <h1>
          <a href="https://codepen.io/rajatkantinandi" target="_blank"><i class="fa fa-codepen"></i></a> 
          <a href="https://github.com/rajatkantinandi" target="_blank"><i class="fa fa-github"></i></a> 
          <a href="https://www.freecodecamp.org/rajatkantinandi" target="_blank"><i class="fa fa-free-code-camp"></i></a> 
        </h1>
      </div>
    </div>
  </div>
</div>

my-portfolio.markdown

My portfolio

A Pen by Rajat Kanti Nandi on CodePen.

License.

script.js

$(document).ready(function(){
    $(".navbar-collapse a").click(function(){
        $(".navbar-collapse li.active").removeClass("active");
        $(this).parent().addClass("active");
        $(".navbar-collapse").collapse('hide');
    });
  window.onscroll = function() {
    if ( document.body.scrollTop > 10 &&document.body.scrollTop < 350|| document.documentElement.scrollTop > 10  && document.documentElement.scrollTop < 350 ) {
        $("#e1").addClass("active");
        $("#e2").removeClass("active");
        $("#e3").removeClass("active");
        $(".navbar-header img").css("display","none");
    }
   else if (document.body.scrollTop > 350 && document.body.scrollTop < 1700|| document.documentElement.scrollTop > 350 && document.documentElement.scrollTop < 1700 ) {
        $("#e2").addClass("active");
        $("#e1").removeClass("active");
        $("#e3").removeClass("active");        
        $(".navbar-header img").css("display","inline");
    }
    else if (document.body.scrollTop > 1700 || document.documentElement.scrollTop > 1700 ) {
        $("#e3").addClass("active");
        $("#e2").removeClass("active");
        $("#e1").removeClass("active");
        $(".navbar-header img").css("display","inline");
    }
  }
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

style.css

body{
  background-color:#333333;
  color:white;
}
header{
  margin-top:-5px;
}
.navbar-inverse{
  background:linear-gradient(30deg,#352029,#050609,#003F33);
  opacity:0.96;
}
.navbar .fa{
  color:white;
}
.navbar-nav{
  margin-top:-20px;
  margin-bottom:-10px;
}
.navbar-nav li{
  margin-bottom:-20px;
}
.navbar-header{
  margin-top:-8px;
  vertical-align:center;
}
.seperator{
  margin-top:60px;
}
#portfolio{
  margin-bottom:30px;
}
.pf{
  position:relative;
  margin-bottom:20px;
  text-align:center;
  vertical-align:center;
}
.pf-photo{
  border:2px solid #446644;
  border-radius:50%;
}
.about-me{
  background:linear-gradient(-75deg, #44454f,#236655,#9f9f89);
  padding:20px 10px;
  border-radius:20px;
}
.tag{
  background:linear-gradient(to left,#123456,#111111);
  padding:2px 10px 2px 30px;
  border-radius:20px;
  box-shadow:1px 1px 4px 4px rgba(0, 120, 200, .3);
  margin-bottom:15px;
}
.tag h4{
  color:#ddefff;
}
.portfolio{
  background:linear-gradient(-75deg,#ecb ,#def,#fbc);
  color:black;
  padding:20px 10px;
  border-radius:20px;
}
.mobile-ver .thumbnail{
  margin-right:10px;
  margin-left:5px;
}
.contact-me{
  background:linear-gradient(-75deg,#222 ,#444,#333);
  padding:20px 10px;
  border:1px solid black;
  border-radius:10px;
}
.contact-me a{
  color:#bbb;
}
.contact-me a:hover{
  color:#fff;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />