CodePen Embed - portfolio website.

<html>
<header>
	<nav class="navbar navbar-default navbar-fixed-top" id="main-navbar">
		<div class="container-fluid">
			<div class="navbar-header">
				<a href="#" class="pull-left navbar-brand" rel="home" alt="Shaun Leow"><img class="img-responsive" style="max-width: 40px; margin-top: -10px;" src="https://preview.ibb.co/hufd0k/logo.png" /></a>
			</div>
			<ul class="nav navbar-nav navbar-right" id="menubar">
				<li><a href="#Home">HOME</a></li>
				<li><a href="#Portfolio">PORTFOLIO</a></li>
				<li><a href="#About">ABOUT</a></li>
				<li><a href="#Resume">RESUME</a></li>
				<li><a href="#Contact">CONTACT</a></li>
			</ul>
		</div>
	</nav>
</header>

</html>
<!-- header end -->
<div id="Home">
	<div class="jumbotron">
		<div class="container-fluid">
			<div class="row text-center" id="intro">
				<h2>hi, i'm shaun.</h2>
				<span style="display: block; height: 10px;"></span>
				<h4>designer. animator. currently shapeshifting.</h4>
				<span style="display: block; height: 30px;"></span>
				<a class="btn btn-default" href="#Contact" role="button">Contact</a>
			</div>
		</div>
	</div>
</div>
<!-- intro end -->
<div id="Portfolio">
	<div class="container-fluid">
		<div class="row text-center" id="title">
			<p>PORTFOLIO</p>
		</div>
		<div class="row">
			<div class="col-sm-8 col-centered">
				<div class="embed-responsive embed-responsive-16by9">
					<iframe id="video" src="https://www.youtube.com/embed/qGdViXeGiIE" frameborder="0" align- "center" allowfullscreen></iframe>
				</div>
			</div>
		</div>
	</div>

	<div id="About">
		<div class="container">
			<div class="row text-center" id="title">
				<p>ABOUT</p>
			</div>
			<div id="contain">
				<img src="https://preview.ibb.co/fY2fD5/facelogo.jpg" class="img-responsive img-wrap" id="profile" />
				
				<!-- <a href="https://ibb.co/hDLBLk"><img src="https://preview.ibb.co/fY2fD5/facelogo.jpg" alt="facelogo" border="0"></a>-->
				<p id="aboutme">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ullamcorper neque non est dictum gravida. Pellentesque at urna vehicula ex venenatis volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris
					convallis odio tortor, quis mattis neque dignissim id. Vivamus sit amet est imperdiet, ornare lacus a, lobortis turpis. Vestibulum tellus dolor, hendrerit in dignissim non, euismod in arcu. Nunc mollis metus ornare quam placerat mollis. Aliquam ac
					lorem odio.</p>
			</div>
		</div>
	</div>
</div>

<div id="Resume">
	<div class="container-fluid">
		<div class="row text-center" id="title">
			<p>RESUME</p>
		</div>

		<div class="row">
			<div class="col-md-3 col-md-offset-1" id="bar1">
				<div class="icon"><i class="fa fa-graduation-cap" aria-hidden="true" id="graduationcap"></i></div>
				<div class="resumetext">
					<p>EDUCATION</p>
				</div>
			</div>

			<div class="col-md-5 col-md-push-3" id="bar2">
				<h4>XAVIER'S SCHOOL FOR GIFTED CHILDREN</h4>
				<p>Diploma in 3D Animation</p>
				<p>2011-2015</p>
			</div>
			<!--draw a line-->
			<div class="col-md-12" id="hr"></div>
			<div class="col-md-5 col-md-push-7" id="bar3">
				<h4>XAVIER'S SCHOOL FOR GIFTED CHILDRENs</h4>
				<p>Diploma in 3D Animation</p>
				<p>2011-2015</p>
			</div>
			<div class="col-md-12" id="hr"></div>
		</div>
	</div>
	<!--end of resume-->
	<div id="Contact">
		<div class="container">
			<div class="row text-center" id="title">
				<p>CONTACT ME</p>
			</div>

			<form id="form">

				<input id="name" type="text" placeholder="NAME">
				<input id="email" type="text" placeholder="E-MAIL">
				<textarea id="message" type="text" placeholder="MESSAGE"></textarea>
				<input id="submit" type="submit" value="SEND">

			</form>

				<div class="socialbtns" align="center">
					<ul>
						<li>
							<a href="#" class="fa fa-2x fa-facebook" id="social"></a>
						</li>
						<li>
							<a href="#" class="fa fa-2x fa-twitter" id="social"></a>
						</li>
						<li>
							<a href="#" class="fa fa-2x fa-github" id="social"></a>
						</li>
						<li>
							<a href="#" class="fa fa-2x fa-linkedin" id="social"></a>
						</li>
						<li>
							<a href="#" class="fa fa-2x fa-instagram"></a>
						</li>
						<li>
							<a href="#" class="fa fa-2x fa-youtube"></a>
						</li>
					</ul>
				</div>
			
		</div>
	</div>
	
	<!--end of contact-->
	<footer>
		<p id="footah">&copy; 2017 Shaun Leow</p>
	</footer>

@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');
/*gets rid of space below bar.*/
.navbar {
	margin-bottom: 0;
}

.navbar-default {
	background-color: #2B2B2B;
	border-color: #2b2b2b;
}

.navbar-default .navbar-nav > li > a {
	color: #EDEDED;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
	color: #FBB42B;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
	color: #FBB42B;
	background-color: #7A245F;
}

#menubar {
	font-family: Montserrat;
	font-size: 10px;
	letter-spacing: 1px;
}

.jumbotron {
	background: url("https://phandroid.s3.amazonaws.com/wp-content/uploads/2015/02/galaxy-wallpaper-11.jpg") no-repeat center center;
	background-size: cover;
	opacity: 0.75;
	overflow: hidden;
	position: relative;
	height: 500px;
}

#intro {
	font-family: Muli;
	color: #e6e6e6;
	font-size: 10px;
	position: relative;
	padding-top: 50px;
}

.btn {
	padding: 10px 25px;
	letter-spacing: 1px;
	font-size: 16px;
	font-family: Muli;
	border: 0;
}

.btn-default {
	color: #e6e6e6;
	background: #7A245F;
}

.btn-default:hover {
	background: #FBB42B;
	color: #7A245F;
}

.btn:focus, btn:active:focus, .btn.active:focus {
	outline: 0 none;
}

.btn-default:active, .btn-default.active {
	background: #FBB42B;
	color: #7A245F;
}

#title {
	font-size: 18px;
	font-family: Montserrat;
	letter-spacing: 0.5px;
	padding-bottom: 20px;
}

/*keeps video centered and responsive. float & margin. important.*/
.col-centered {
	float: none;
	margin: 0 auto;
	padding-top: 20px;
}

#About {
	padding-top: 30px;
}

#profile {
	width: 25%;
	min-width: 200px;
	vertical-align: top;
	margin: 0;
	padding: 00px 0px 0px 0px;
	display: inline-block;
}

#contain {
	height: 100%;
	margin: 0;
	padding: 0;
	text-align: center;
}

#aboutme {
	width: 70%;
	min-width: 350px;
	display: inline-block;
	padding: 20px 10px 0px 30px;
	font-family: Muli;
	font-size: 16px;
}

.img-wrap {
	border-radius: 50em;
}

#Resume {
	padding-top: 30px;
}

#graduationcap {
	color: #7A245F;
	font-size: 3em;
}

.icon {
	display: inline-block;
	vertical-align: bottom;
}

.resumetext {
	display: inline-block;
	font-family: Lato;
	font-size: 18px;
	padding-left: 20px;
	padding-top: 0px;
}

.center-block {
	display: block;
	margin: 0 auto;
}

#bar1 {
	background-color: ;
	padding-top: 0px;
	padding-bottom: 10px;
}

#bar2 {
	background-color: ;
	text-align: left;
	font-family: Muli;
	font-size: 16px;
}

#hr {
	background-color: #7A245F;
	height: 1px;
	margin: 20px;
	width: 96%;
}

#bar3 {
	background-color: ;
	text-align: left;
	font-family: Muli;
	font-size: 16px;
}

#contact {
	padding-top: 30px;
}

body {
	font-family: Muli;
	background: #ffffff;
}

#form {
	position: relative;
	width: 500px;
	margin: 20px auto 10px auto;
}

input {
	font-family: Montserrat-Light;
	font-size: 0.8em;
	width: 490px;
	height: 50px;
	padding: 0px 15px 0px 15px;
	background: transparent;
	outline: none;
	color: #faa805;
	border: solid 1px #7A245F;
	border-bottom: none;
	transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
}

input:hover {
	background: #d676b7;
	color: #FBB42B;
}

textarea {
	width: 490px;
	max-width: 490px;
	height: 110px;
	max-height: 100px;
	padding: 15px;
	background: transparent;
	outline: none;
	color: #faa805;
	font-family: Montserrat-Light;
	font-size: 0.8em;
	border: solid 1px #7A245F;
	transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
}

textarea:hover {
	background: #d676b7;
	color: #FBB42B;
}

#submit {
	width: 490px;
	padding: 0;
	margin: -5px 0 0 0;
	font-family: Montserrat-Light;
	font-size: 1.1em;
	color: #FBB42B;
	outline: none;
	cursor: pointer;
	border: solid 1px #7A245F;
	border-top: none;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
	color: #c43b99;
}

input:focus::-webkit-input-placeholder,
textarea:focus::-webkit-input-placeholder {
	color: #da2345;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
	color: #c43b99;
}

input:focus::-moz-placeholder,
textarea:focus::-moz-placeholder {
	color: #da2345;
}

input::placeholder,
textarea::placeholder {
	color: #c43b99;
}

input:focus::placeholder,
textarea:focus::placeholder {
	color: #da2345;
}

input::-ms-placeholder,
textarea::-ms-placeholder {
	color: #c43b99;
}

input:focus::-ms-placeholder,
textarea:focus::-ms-placeholder {
	color: #da2345;
}

/* on hover placeholder */

input:hover::-webkit-input-placeholder,
textarea:hover::-webkit-input-placeholder {
	color: #e2debd;
}

input:hover:focus::-webkit-input-placeholder,
textarea:hover:focus::-webkit-input-placeholder {
	color: #ffffff;
}

input:hover::-moz-input-placeholder,
textarea:hover::-moz-input-placeholder {
	color: #e2debd;
}

input:hover:focus::-moz-input-placeholder,
textarea:hover:focus::-moz-input-placeholder {
	color: #ffffff;
}

input:hover::placeholder,
textarea:hover::placeholder {
	color: #e2debd;
}

input:hover:focus::placeholder,
textarea:hover:focus::placeholder {
	color: #ffffff;
}

input:hover::-ms-placeholder,
textarea:hover::-ms-placeholder {
	color: #e2debd;
}

input:hover:focus::-ms-placeholder,
textarea:hover:focus::-ms-placeholder {
	color: #ffffff;
}

.socialbtns, .socialbtns ul, .socialbtns li {
	margin: 0;
	padding: 10px;
}

.socialbtns li {
	list-style: none outside none;
	display: inline-block;
}

.socialbtns .fa {
	width: 45px;
	height: 45px;
	color: #7A245F;
	border: 1px solid #7A245F;
	padding-top: 8px;
	border-radius: 22px;
	-moz-border-radius: px;
	-webkit-border-radius: px;
	-o-border-radius: px;
}

.socialbtns .fa:hover {
	color: #FBB42B;
	background-color: #7A245F;
	border: 1px solid #FBB42B;
	transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
}

a, a:hover {
	text-decoration: none;
}

footer {
	padding: 40px 40px;
	text-align: center;
	background-color: #2b2b2b;
	width: 100%;
}

#footah {
	color: #f2f2f2;
	font-family: Montserrat-Light;
}

//fills up padding when mobile mode
$(window).resize(function() {
	$('body').css('padding-top', parseInt($('#main-navbar').css("height")) + 0);
});

$(window).load(function() {
	$('body').css('padding-top', parseInt($('#main-navbar').css("height")) + 0);
});

$(document).on("scroll", onScroll);

//active tab
$('.nav li').click(function(){
    $('.nav li').removeClass('active');
    $(this).addClass('active');
});


//smoothscroll
 $('a[href^="#"]').on('click', function (e) {
        e.preventDefault();
        $(document).off("scroll");
        
        $('a').each(function () {
            $(this).removeClass('active');
        })
        $(this).addClass('active');
      
        var target = this.hash,
            menu = target;
        $target = $(target);
        $('html, body').stop().animate({
            'scrollTop': $target.offset().top+2
        }, 500, 'swing', function () {
            window.location.hash = target;
            $(document).on("scroll", onScroll);
        });
    });


function onScroll(event){
    var scrollPos = $(document).scrollTop();
    $('#menu-center a').each(function () {
        var currLink = $(this);
        var refElement = $(currLink.attr("href"));
        if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
            $('#menu-center ul li a').removeClass("active");
            currLink.addClass("active");
        }
        else{
            currLink.removeClass("active");
        }
    });
}

This Pen is owned by shaun leow on CodePen.

See more by @shaunleow on CodePen

External CSS

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css

External JavaScript

https://code.jquery.com/jquery-2.2.4.min.js