<nav>
  <span class="brand">
    <a href="#home">B</a>
  </span>
  <div class="menu">
    <a href="#home" class="active scroll-page"><i class="material-icons">home</i></a><br>
    <a href="#about" class="scroll-page"><i class="material-icons">account_circle</i></a><br>
    <a href="#skills" class="scroll-page"><i class="material-icons">settings</i></a><br>
    <a href="#works" class="scroll-page"><i class="material-icons">work</i></a><br>
    <a href="#contact" class="scroll-page"><i class="material-icons">mail</i></a><br>
  </div>
  <div class="social">
    <a href="https://github.com/RidhoBeteer" target="_blank"><i class="devicon-github-plain"></i></a><br>
    <a href="http://beteer.wpdevcloud.com" target="_blank"><i class="devicon-wordpress-plain"></i></a><br>
    <a href="https://twitter.com/ridhobeteer" target="_blank"><i class="devicon-twitter-plain"></i></a><br>
    <a href="https://www.facebook.com/ridho.beteer" target="_blank"><i class="devicon-facebook-plain"></i></a><br>
  </div>
</nav>
<section id="home">
  <div class="container">
    <h1 class="welcome">Hello!<br>I'm Ridho.<br> I <span class="pink">design</span> &amp; <span class="blue">build</span> <br>web application</h1>
    <a href="#contact"><button class="scroll-page">Contact Me</button></a>
  </div>
</section>
<section id="about">
  <div class="container">
    <div class="text-container">
      <h2 class="blue">Little About Me</h2>
      <p>I'm Ridho Ahmad Batubara. An Informatics/Computer Science student at Institut Teknologi Sumatera. I created my first program when i was in junior high school, a cheat injector for a game i'm playing on that time.<br><br> I like to play games on my free time and learn something new.</p>
    </div>
  </div>
</section>
<section id="skills">
  <div class="container">
    <div class="text-container">
      <h2 class="pink">Skill</h2>
      <p>Main area of my expertise is front end development and everything related with this side of web. HTML, CSS, JS. Now, I am currently learning one of the front-end frameworks, Vue.js .</p><br> 
    </div>
  </div>
</section>
<section id="works">
  <div class="container">
    <h2 class="blue">Portfolio</h2>
    <div class="image-container">
      <div class="img-display">
        <img src="https://raw.githubusercontent.com/RidhoBeteer/SIA-Design/master/screenshot/1.JPG" alt="Sistem Informasi Alumni" class="img-thumbnail">
      </div>
    </div>
  </div>
</section>
<section id="contact">
  <div class="container">
    <div class="form-container">
      <h2 class="pink">Get In Touch</h2>
      <form>
        <input type="text" placeholder="Name"><br>
        <input type="email" placeholder="Email"><br>
        <input type="text" placeholder="Subject"><br>
        <textarea placeholder="Message"></textarea><br>
        <button>Send Message</button>
      </form>
    </div>
  </div>
</section>
html {
  font-size: 16px;
}

body {
  margin: 0;
  padding: 0;
  width: 100%;
  color: #ccc;
}

.container {
  width: 80%;
}

a, a:hover {
  text-decoration: none;
  color: #64ffda;
}

nav {
  position: fixed;
  display: block;
  width: 60px;
  height: 100vh;
  background-color: #333;
  text-align: center;
}

nav .brand {
  font-size: 3rem;
  font-weight: 600;
  display: block;
  background-color: #171717;
}

nav .menu {
  display: block;
  margin-top: 5rem;
}

nav .menu a {
  display: block;
}

nav .menu a, nav .social a {
  color: #999;
  -webkit-transition: color 320ms ease-in;
  -moz-transition: color 320ms ease-in;
  -ms-transition: color 320ms ease-in;
  -o-transition: color 320ms ease-in;
  transition: color 320ms ease-in;
}

nav .menu a:hover, nav .menu a.active, nav .social a:hover {
  color: #64ffda;
}

nav .social {
  margin-top: 3rem;
}

nav .social a {
  display: inline-block;
  margin-bottom: 5px;
}

section {
  min-height: 100vh;
}

section:nth-child(odd) {
  background-color: #373737;
}

section:nth-child(even) {
  background-color: #444;
}

.container h2 {
    margin-top: 6rem;
    font-weight: 800;
    font-size: 2.5rem;
}

.welcome {
  font-size: 3rem;
  font-weight: 800;
  color: #fff;
  margin-top: 6rem;
}

.pink {
  color: #f06292
}

.blue {
  color: #64ffda;
}

#home button {
  margin-top: 3rem;
  width: 150px;
  font-size: 1.3rem;
  border: 1px solid #64ffda;
  border-radius: 5px;
  color: #64ffda;
  background-color: #444;
  -webkit-transition: background 320ms ease-in;
  -moz-transition: background 320ms ease-in;
  -ms-transition: background 320ms ease-in;
  -o-transition: background 320ms ease-in;
  transition: background 320ms ease-in;
}

#home button:hover {
  background-color: #64ffda;
  color: #444;
}

.text-container {
  width: 50%;
  text-align: justify;
}

#about .text-container {
  float: right;
}

.text-container p {
  font-size: 1.2rem;
  letter-spacing: 1px;
}

#works h2 {
  margin-bottom: 2rem;
}
.img-thumbnail {
  width: 300px;
  height: 200px;
  background-color: #fff;
  padding: 2px;
  border-radius: 2px;
}

.form-container {
  width: 50%;
  text-align: center;
  margin: 0 auto;
  margin-top: -1rem;
}

form {
  margin-top: 3rem;
}

.form-container input, .form-container textarea, .form-container button {
  margin: 0 auto;
  display: block;
}

input, textarea {
  width: 70%;
  border: none;
  border-radius: 5px;
  padding: .7rem;
  background-color: rgba(0,0,0,0.3);
  color: #fff;
}

textarea {
  height: 120px;
  resize: none;
}

form button {
  margin-top: 3rem;
  width: 150px;
  height: 2rem;
  font-size: 1rem;
  border: 1px solid #f06292;
  border-radius: 5px;
  color: #f06292;
  background-color: #444;
  -webkit-transition: background 320ms ease-in;
  -moz-transition: background 320ms ease-in;
  -ms-transition: background 320ms ease-in;
  -o-transition: background 320ms ease-in;
  transition: background 320ms ease-in;
}

form button:hover {
  background-color: #f06292;
  color: #444;
}
$(function() {
	$('.scroll-page').on('click', function() {
		var offset = 0;
		var speed = 800;
		var target = $(this.hash);

		$('nav .menu a').each(function() {
			$(this).removeClass('active');
		});

		$(this).addClass('active');

		$('html, body').animate({
			scrollTop: target.offset().top - offset
		}, speed, 'swing'); });

});

$(window).scroll(function(event) {
	var scrollPos = $(document).scrollTop();
	console.log(scrollPos);
	$('nav .menu a').each(function() {
		var curLink = $(this);
		var refElement = $(curLink.attr('href'));

		if (refElement.position().top <= scrollPos + 60) {
			$('nav .menu a').removeClass('active');
			curLink.addClass('active');

		} else {
			curLink.removeClass('active');
		}
	});
});

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css
  2. https://fonts.googleapis.com/icon?family=Material+Icons
  3. https://cdn.rawgit.com/konpa/devicon/df6431e323547add1b4cf45992913f15286456d3/devicon.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js