<!-- Navigation Bar -->
	<nav class="gr-container-full fixed-top">
		<div class="navbar my-box-shadow" id="mynav">
			<div class="gr-container">
				<div class="brand">
					<a href="javascript:void(0);" id="mybrand">Lam Pham</a>
				</div>
				<div class="menu">
					<a href="#home" class="active">Home</a>
					<a href="#about">About</a>
					<a href="#skills">Skills</a>
					<a href="#portfolio">Portfolio</a>
					<a href="#contact">Contact</a>
					<a href="javascript:void(0);" class="icon" id="navicon"><i class="fa fa-bars"></i></a>
				</div>
			</div>
		</div>
	</nav>

	<!-- Home -->
	<header id="home" class="gr-row gr-container first-element">
		<div class="gr-col-xs-12 gr-col-sm-12 gr-col-md-12 gr-col-lg-12 gr-col-xl-12 site-branding">
			<h1 class="my-title">I<span class="secondary-color">'</span>m Lam Pham<span class="secondary-color">.</span></h1>
			<p class="my-description">Software Engineer, JS Lover and Blogger at @<a href="https://completejavascript.com">completejavascript</a>.</p>
			<img class="my-img-profile gr-img-responsive" alt="Lam Pham's profile image" src="https://res.cloudinary.com/drcrre4xg/image/upload/v1520604059/lampv-profile-completejavascript.com-640_hwqo6g.jpg">
			<p class="my-social">
				<a href="https://github.com/completejavascript"><i class="fa fa-github primary-color"></i></a>
				<a href="https://www.freecodecamp.org/completejavascript"><i class="fa fa-free-code-camp primary-color"></i></a>
				<a href="https://codepen.io/completejavascript/"><i class="fa fa-codepen primary-color"></i></a>
				<a href="https://stackoverflow.com/users/7905521/lam-pham"><i class="fa fa-stack-overflow primary-color"></i></a>
				<a href="https://www.facebook.com/completejavascript/"><i class="fa fa-facebook primary-color"></i></a>
				<a href="https://plus.google.com/u/1/102905788712213091494"><i class="fa fa-google-plus primary-color"></i></a>
				<a href="https://www.linkedin.com/in/completejavascript/"><i class="fa fa-linkedin primary-color"></i></a>
				<a href="https://twitter.com/CmpltJavaScript"><i class="fa fa-twitter primary-color"></i></a>
			</p>
		</div>
	</header>
	
	<!-- About -->
	<section id="about" class="gr-row gr-container">
		<div class="gr-col-xs-12 gr-col-sm-12 gr-col-md-12 gr-col-lg-12 gr-col-xl-12">
			<hr class="line-horizontal">
			<h2 class="my-section">About</h2>
			<div id="about-me" class="my-box-shadow">
				<!-- Introduction -->
				<div>
					<h3 class="sub-section">Introduction:</h3>
					<p>Hi, I am Lam Pham, from Vietnam. I am a Software Engineer with a focus on C/C++. Beside, I am really passionate about JavaScript and Web Development.</p>
				  <p>That is why I have learnt JavaScript, HTML5 &amp; CSS3, Bootstrap &amp; jQuery, AngularJS and NodeJS &amp; ExpressJS...</p>
				</div>
				<!-- Education & Experiences -->
				<div>
					<h3 class="sub-section">Education &amp; Experiences:</h3>
					<ul>
						<li>2011 - 2016: Electrical &amp; Telecommunication at Ha Noi University of Science and Technology (HUST), Vietnam.</li>
						<li>2016 - present: C/C++ Software Engineer at Samsung Vietnam Mobile R&amp;D Center (SVMC).</li>
					</ul>
				</div>
				<div>
					<h3 class="sub-section">Hobbies &amp; Interests:</h3>
					<p>I love coding and blogging. I try to code everyday and write blogs to share my experiences to people. Here are my blogs (in Vietnamese):</p>
					<ul>
						<li><a href="https://completejavascript.com">Complete JavaScript</a></li>
						<li><a href="http://thuattoan.phamvanlam.com">Algorithm</a></li>
						<li><a href="http://phamvanlam.com">Personal Blog</a></li>
					</ul>
					<p>I enjoy instrument musical. In my free time, I usually play Ukulele. And, I like Street Workout. I am training it everyday to get fit and healthy.</p>
				</div>
			</div>
		</div>
	</section>
	
	<!-- Skills -->
	<section id="skills" class="gr-row gr-container">
		<div class="gr-col-xs-12 gr-col-sm-12 gr-col-md-12 gr-col-lg-12 gr-col-xl-12">
			<hr class="line-horizontal">
			<h2 class="my-section">Skills</h2>
			<!-- HTML & CSS -->
			<div class="gr-row">
				<div class="gr-col-xs-12 gr-col-sm-12 gr-col-md-3 gr-col-lg-3 gr-col-xl-3 skill-text-align">
					<span>HTML5 &amp; CSS3</span>
				</div>
				<div class="gr-col-xs-12 gr-col-sm-12 gr-col-md-9 gr-col-lg-9 gr-col-xl-9 progress-bar-wrapper">
					<div class="progress-bar html-css"></div>
					<span class="percentage">80%</span>
				</div>
			</div>
			<!-- JavaScript -->
			<div class="gr-row">
				<div class="gr-col-xs-12 gr-col-sm-12 gr-col-md-3 gr-col-lg-3 gr-col-xl-3 skill-text-align">
					<span>Javascript</span>
				</div>
				<div class="gr-col-xs-12 gr-col-sm-12 gr-col-md-9 gr-col-lg-9 gr-col-xl-9 progress-bar-wrapper">
					<div class="progress-bar javascript"></div>
					<span class="percentage">85%</span>
				</div>
			</div>
			<!-- Bootstrap & jQuery -->
			<div class="gr-row">
				<div class="gr-col-xs-12 gr-col-sm-12 gr-col-md-3 gr-col-lg-3 gr-col-xl-3 skill-text-align">
					<span>Bootstrap &amp; jQuery</span>
				</div>
				<div class="gr-col-xs-12 gr-col-sm-12 gr-col-md-9 gr-col-lg-9 gr-col-xl-9 progress-bar-wrapper">
					<div class="progress-bar bootstrap-jquery"></div>
					<span class="percentage">65%</span>
				</div>
			</div>
			<!-- AngularJS -->
			<div class="gr-row">
				<div class="gr-col-xs-12 gr-col-sm-12 gr-col-md-3 gr-col-lg-3 gr-col-xl-3 skill-text-align">
					<span>AngularJS</span>
				</div>
				<div class="gr-col-xs-12 gr-col-sm-12 gr-col-md-9 gr-col-lg-9 gr-col-xl-9 progress-bar-wrapper">
					<div class="progress-bar angularjs"></div>
					<span class="percentage">75%</span>
				</div>
			</div>
			<!-- NodeJS & ExpressJS -->
			<div class="gr-row">
				<div class="gr-col-xs-12 gr-col-sm-12 gr-col-md-3 gr-col-lg-3 gr-col-xl-3 skill-text-align">
					<span>NodeJS &amp; ExpressJS</span>
				</div>
				<div class="gr-col-xs-12 gr-col-sm-12 gr-col-md-9 gr-col-lg-9 gr-col-xl-9 progress-bar-wrapper">
					<div class="progress-bar nodejs-expressjs"></div>
					<span class="percentage">70%</span>
				</div>
			</div>
			<!-- C/C++ -->
			<div class="gr-row">
				<div class="gr-col-xs-12 gr-col-sm-12 gr-col-md-3 gr-col-lg-3 gr-col-xl-3 skill-text-align">
					<span>C/C++</span>
				</div>
				<div class="gr-col-xs-12 gr-col-sm-12 gr-col-md-9 gr-col-lg-9 gr-col-xl-9 progress-bar-wrapper">
					<div class="progress-bar c-cpp"></div>
					<span class="percentage">90%</span>
				</div>
			</div>
			<!-- Java & Android -->
			<div class="gr-row">
				<div class="gr-col-xs-12 gr-col-sm-12 gr-col-md-3 gr-col-lg-3 gr-col-xl-3 skill-text-align">
					<span>Java &amp; Android</span>
				</div>
				<div class="gr-col-xs-12 gr-col-sm-12 gr-col-md-9 gr-col-lg-9 gr-col-xl-9 progress-bar-wrapper">
					<div class="progress-bar java-android"></div>
					<span class="percentage">85%</span>
				</div>
			</div>
			<!-- Algorithm -->
			<div class="gr-row">
				<div class="gr-col-xs-12 gr-col-sm-12 gr-col-md-3 gr-col-lg-3 gr-col-xl-3 skill-text-align">
					<span>Algorithm</span>
				</div>
				<div class="gr-col-xs-12 gr-col-sm-12 gr-col-md-9 gr-col-lg-9 gr-col-xl-9 progress-bar-wrapper">
					<div class="progress-bar algorithm"></div>
					<span>90%</span>
				</div>
			</div>
			<!-- Git & Github -->
			<div class="gr-row">
				<div class="gr-col-xs-12 gr-col-sm-12 gr-col-md-3 gr-col-lg-3 gr-col-xl-3 skill-text-align">
					<span>Git &amp; GitHub</span>
				</div>
				<div class="gr-col-xs-12 gr-col-sm-12 gr-col-md-9 gr-col-lg-9 gr-col-xl-9 progress-bar-wrapper">
					<div class="progress-bar git-github"></div>
					<span>80%</span>
				</div>
			</div>
		</div>
	</section>

	<!-- Portfolio -->
	<section id="portfolio" class="gr-row gr-container">
		<div class="gr-col-xs-12 gr-col-sm-12 gr-col-md-12 gr-col-lg-12 gr-col-xl-12">
			<hr class="line-horizontal">
			<h2 class="my-section">Portfolio</h2>
			<!-- row -->
			<div class="gr-row" id="row-1">
				<div class="gr-col-xs-12 gr-col-sm-12 gr-col-md-4 gr-col-lg-4 gr-col-xl-4 portfolio-row" id="col-11">
					  <a class="img-link" href="http://about.phamvanlam.com/fcc-tribute-page/">
								<img class="my-img-portfolio gr-img-responsive my-box-shadow" alt="Tribute Page: Brendan Eich image" src="https://res.cloudinary.com/drcrre4xg/image/upload/v1520604054/tribute-page-completejavascript.com_hjwwo4.png">
						</a>
						<h3 class="portfolio-title"><a href="http://about.phamvanlam.com/fcc-tribute-page/">Tribute Page: Brendan Eich</a></h3>
						<span class="portfolio-tag">HTML5</span>
						<span class="portfolio-tag">CSS3</span>
						<span class="portfolio-tag">Bootstrap</span>
						<span class="portfolio-tag">JQuery</span>
				</div>
				<div class="gr-col-xs-12 gr-col-sm-12 gr-col-md-4 gr-col-lg-4 gr-col-xl-4 portfolio-row" id="col-12">
					<a class="img-link" href="javascript:void(0);">	
						<img class="my-img-portfolio gr-img-responsive my-box-shadow" alt="porfolio image" src="https://res.cloudinary.com/drcrre4xg/image/upload/v1520604052/comming-soon-completejavascript.com_bqvjt2.png">
					</a>
					<h3 class="portfolio-title"><a href="javascript:void(0);">Personal Portfolio Webpage</a></h3>
					<span class="portfolio-tag">HTML5</span>
					<span class="portfolio-tag">CSS3</span>
					<span class="portfolio-tag">JQuery</span>
					<span class="portfolio-tag">Mustache</span>
				</div>
				<div class="gr-col-xs-12 gr-col-sm-12 gr-col-md-4 gr-col-lg-4 gr-col-xl-4 portfolio-row" id="col-13">
					<a class="img-link" href="javascript:void(0);">
						<img class="my-img-portfolio gr-img-responsive my-box-shadow" alt="porfolio image" src="https://res.cloudinary.com/drcrre4xg/image/upload/v1520604052/comming-soon-completejavascript.com_bqvjt2.png">					
					</a>
					<h3 class="portfolio-title"><a href="javascript:void(0);">Random Qoute Machine</a></h3>
					<span class="portfolio-tag">HTML5</span>
					<span class="portfolio-tag">CSS3</span>
				</div>
			</div>
			<!-- row -->
			<div class="gr-row" id="row-2">
				<div class="gr-col-xs-12 gr-col-sm-12 gr-col-md-4 gr-col-lg-4 gr-col-xl-4 portfolio-row" id="col-21">
					<a class="img-link" href="javascript:void(0);">
						<img class="my-img-portfolio gr-img-responsive my-box-shadow" alt="porfolio image" src="https://res.cloudinary.com/drcrre4xg/image/upload/v1520604052/comming-soon-completejavascript.com_bqvjt2.png">
					</a>
					<h3 class="portfolio-title"><a href="javascript:void(0);">The Local Weather</a></h3>
					<span class="portfolio-tag">HTML5</span>
					<span class="portfolio-tag">CSS3</span>
				</div>
				<div class="gr-col-xs-12 gr-col-sm-12 gr-col-md-4 gr-col-lg-4 gr-col-xl-4 portfolio-row" id="col-22">
					<a class="img-link" href="javascript:void(0);">	
						<img class="my-img-portfolio gr-img-responsive my-box-shadow" alt="porfolio image" src="https://res.cloudinary.com/drcrre4xg/image/upload/v1520604052/comming-soon-completejavascript.com_bqvjt2.png">
					</a>
					<h3 class="portfolio-title"><a href="javascript:void(0);">Wikipedia Viewer</a></h3>
					<span class="portfolio-tag">HTML5</span>
					<span class="portfolio-tag">CSS3</span>
				</div>
				<div class="gr-col-xs-12 gr-col-sm-12 gr-col-md-4 gr-col-lg-4 gr-col-xl-4 portfolio-row" id="col-23">
					<a class="img-link" href="javascript:void(0);">
						<img class="my-img-portfolio gr-img-responsive my-box-shadow" alt="porfolio image" src="https://res.cloudinary.com/drcrre4xg/image/upload/v1520604052/comming-soon-completejavascript.com_bqvjt2.png">					
					</a>
					<h3 class="portfolio-title"><a href="javascript:void(0);">The Twitch.tv JSON API</a></h3>
					<span class="portfolio-tag">HTML5</span>
					<span class="portfolio-tag">CSS3</span>
				</div>
			</div>
			<!-- See more -->
			<div class="gr-row" id="see-more-wrapper">
				<div class="gr-col-xs-12 gr-col-sm-12 gr-col-md-12 gr-col-lg-12 gr-col-xl-12 portfolio-row-see-more">
					<span class="portfolio-see-more" id="see-more">See more</span>
				</div>
			</div>
		</div>
	</section>
	
	<!-- Contact -->
	<section id="contact" class="gr-row gr-container">
		<div class="gr-col-xs-12 gr-col-sm-12 gr-col-md-12 gr-col-lg-12 gr-col-xl-12">
			<hr class="line-horizontal">
			<h2 class="my-section">Contact</h2>
			<p class="contact-text">If you'd like to get in touch with me, please send me a message. Thanks a lot!</p>
			<div id="contact-me" class="my-box-shadow">
				<form id="contact-form" method="POST" action="https://formspree.io/completejavascript.super@gmail.com">
					<label for="fname">First Name:</label>
					<input type="text" id="fname" name="FirstName" placeholder="Your first name..." required>
					<label for="lname">Last Name:</label>
					<input type="text" id="lname" name="LastName" placeholder="Your last name..." required>
					<label for="yemail">Email:</label>
					<input type="email" id="yemail" name="Email" placeholder="Your email..." required>
					<lable for="ymsg">Message:</lable>
					<textarea type="text" id="ymsg" name="Message" placeholder="Your message..." required></textarea>
					<input type="submit" id="send" value="Send"></input>
				</form>
			</div>
		</div>
	</section>

	<!-- Footer -->
	<footer class="gr-row gr-container-full">
		<div class="gr-col-xs-12 gr-col-sm-12 gr-col-md-12 gr-col-lg-12 gr-col-xl-12">
			<p>Copyright &copy; 2018 by <a href="http://about.phamvanlam.com/">Lam Pham</a>. All Rights Reserved.</p>	
		</div>
	</footer>
	
	<!-- Scripts -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script src="./js/main.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"></script>

	<script id="portfolio-item-template" type="x-tmpl-mustache">
		<div class="gr-col-xs-12 gr-col-sm-12 gr-col-md-4 gr-col-lg-4 gr-col-xl-4 portfolio-row" id="{{col-id}}">
				<a class="img-link" href="{{link-view}}">
						<img class="my-img-portfolio gr-img-responsive my-box-shadow" alt="{{alt-image}}" src="{{path-image}}">
				</a>
				<h3 class="portfolio-title"><a href="{{link-view}}">{{title}}</a></h3>
		</div>
	</script>
/* The padding and border are included in the total width and height of the elements. */
* {box-sizing: border-box;}
/* Mobile first */
/* Define width of col- */
.gr-col-xs-1 {width: 8.33%;}
.gr-col-xs-2 {width: 16.66%;}
.gr-col-xs-3 {width: 25%;}
.gr-col-xs-4 {width: 33.33%;}
.gr-col-xs-5 {width: 41.66%;}
.gr-col-xs-6 {width: 50%;}
.gr-col-xs-7 {width: 58.33%;}
.gr-col-xs-8 {width: 66.66%;}
.gr-col-xs-9 {width: 75%;}
.gr-col-xs-10 {width: 83.33%;}
.gr-col-xs-11 {width: 91.66%;}
.gr-col-xs-12 {width: 100%;}
.gr-container {
  width: 100%;
  margin: 0 auto;
}
.gr-container-full {
  width: 100%;
  margin: 0 auto;
}
.gr-img-responsive{
  width: 100%;
  max-width: 220px;
  height: auto;
}
h1 {font-size: 40px;}
h2 {font-size: 20px;}
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) { 
  .gr-col-sm-1 {width: 8.33%;}
  .gr-col-sm-2 {width: 16.66%;}
  .gr-col-sm-3 {width: 25%;}
  .gr-col-sm-4 {width: 33.33%;}
  .gr-col-sm-5 {width: 41.66%;}
  .gr-col-sm-6 {width: 50%;}
  .gr-col-sm-7 {width: 58.33%;}
  .gr-col-sm-8 {width: 66.66%;}
  .gr-col-sm-9 {width: 75%;}
  .gr-col-sm-10 {width: 83.33%;}
  .gr-col-sm-11 {width: 91.66%;}
  .gr-col-sm-12 {width: 100%;}
  .gr-container {width: 100%;}
  .gr-img-responsive{max-width: 280px;}
  h1 {font-size: 40px;}
  h2 {font-size: 20px;}
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { 
  .gr-col-md-1 {width: 8.33%;}
  .gr-col-md-2 {width: 16.66%;}
  .gr-col-md-3 {width: 25%;}
  .gr-col-md-4 {width: 33.33%;}
  .gr-col-md-5 {width: 41.66%;}
  .gr-col-md-6 {width: 50%;}
  .gr-col-md-7 {width: 58.33%;}
  .gr-col-md-8 {width: 66.66%;}
  .gr-col-md-9 {width: 75%;}
  .gr-col-md-10 {width: 83.33%;}
  .gr-col-md-11 {width: 91.66%;}
  .gr-col-md-12 {width: 100%;}
  .gr-container {width: 750px;}
  .gr-img-responsive{max-width: 330px;}
  h1 {font-size: 60px;}
  h2 {font-size: 30px;}
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
  .gr-col-lg-1 {width: 8.33%;}
  .gr-col-lg-2 {width: 16.66%;}
  .gr-col-lg-3 {width: 25%;}
  .gr-col-lg-4 {width: 33.33%;}
  .gr-col-lg-5 {width: 41.66%;}
  .gr-col-lg-6 {width: 50%;}
  .gr-col-lg-7 {width: 58.33%;}
  .gr-col-lg-8 {width: 66.66%;}
  .gr-col-lg-9 {width: 75%;}
  .gr-col-lg-10 {width: 83.33%;}
  .gr-col-lg-11 {width: 91.66%;}
  .gr-col-lg-12 {width: 100%;}
  .gr-container {width: 900px;}
  .gr-img-responsive{max-width: 330px;}
  h1 {font-size: 72px;}
  h2 {font-size: 36px;}
}
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
  .gr-col-xl-1 {width: 8.33%;}
  .gr-col-xl-2 {width: 16.66%;}
  .gr-col-xl-3 {width: 25%;}
  .gr-col-xl-4 {width: 33.33%;}
  .gr-col-xl-5 {width: 41.66%;}
  .gr-col-xl-6 {width: 50%;}
  .gr-col-xl-7 {width: 58.33%;}
  .gr-col-xl-8 {width: 66.66%;}
  .gr-col-xl-9 {width: 75%;}
  .gr-col-xl-10 {width: 83.33%;}
  .gr-col-xl-11 {width: 91.66%;}
  .gr-col-xl-12 {width: 100%;}
  .gr-container {width: 1080px;}
  .gr-img-responsive{max-width: 350px;}
  h1 {font-size: 72px;}
  h2 {font-size: 36px;}
}
[class*="gr-col-"] {
  float: left;
  padding: 15px;
}
/* Define row */
.gr-row::after {
  content: "";
  clear: both;
  display: table;
}

* {font-family: Helvetica, Arial, sans-serif;}
body {margin: 0;}
a{
  color: #19232D;
  transition: color .3s ease-in;
  -webkit-transition: color .3s ease-in;
  -moz-transition: color .3s ease-in;
}
a:hover {
  color: #F98639;
  transition: color .3s ease-out;
  -webkit-transition: color .3s ease-out;
  -moz-transition: color .3s ease-out;
}
.my-box-shadow{
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.line-horizontal{
  height: 1px;
  color:#ccc;
  background-color: #ccc;
  border: none;
}
/* Header */
.my-title {
  color: #19232D;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.site-branding {text-align: center;}
.my-description {color: rgb(103, 105, 107);}
.primary-color{color: #19232D;}
.secondary-color{color: #F98639;}
.my-img-profile{
  border-radius: 50%;
  margin: 15px;
}
.my-social{margin: 0;}
.my-social i {
  padding: 0 10px;
  transform: scale(1.25);
  transition: transform .3s ease-in;
  -webkit-transition: transform .3s ease-in;
  -moz-transition: transform .3s ease-in;
}
.my-social i:hover{
  transform: scale(1.75);
  transition: transform .3s ease-out;
  -webkit-transition: transform .3s ease-out;
  -moz-transition: transform .3s ease-out;
}
/* Section */
.my-section {
  color: #19232D;
  text-transform: uppercase;
  text-align: center;
}
.my-section::after {
  content: "";
  display: block;
  border: 3px solid #F98639;
  width: 50px;
  margin: 7px auto;
}
.sub-section {
  text-transform: uppercase;
}
.sub-section:not(:first-child) {padding-top: 12px;}
.sub-section:first-child{margin-top: 0px;}
.sub-section::after{
  content: "";
  display: block;
  border: 2px solid #F98639;
  width: 50px;
  margin: 7px 0;
}
/* About me */
#about-me {
  background-color: #e7e7e7;
  padding: 50px;
}
.to-primary-color {
  background-color: #fafafa !important;
  transition: background-color .4s ease-out;
  -webkit-transition: background-color .4s ease-out;
  -moz-transition: background-color .4s ease-out;
}
#about-me li, p a {
  line-height: 22px;
  font-size: medium;
}
#about-me .p-last{margin-bottom: 0px;}
/* Skills */
.progress-bar{
  height: 14px;
  margin-left: 10px;
  margin-right: 10px;
  display: inline-block;
  background-color: rgba(249, 134, 57, 1);
  transition: background-color .3s ease, width 1.45s ease-in-out;
  -webkit-transition: background-color .3s ease, width 1.45s ease-in-out;
  -moz-transition: background-color .3s ease, width 1.45s ease-in-out;
}
.progress-bar:hover{
  background-color:rgba(249, 134, 57, 0.75);
  transition: background-color .3s ease;
  -webkit-transition: background-color .3s ease;
  -moz-transition: background-color .3s ease;
}
.skill-text-align {text-align: right;}
.progress-bar.html-css{width: 0;}
.progress-bar.javascript{width: 0;}
.progress-bar.bootstrap-jquery{width: 0;}
.progress-bar.angularjs{width: 0;}
.progress-bar.nodejs-expressjs{width: 0;}
.progress-bar.c-cpp{width: 0;}
.progress-bar.java-android{width: 0;}
.progress-bar.algorithm{width: 0;}
.progress-bar.git-github{width: 0;}
.progress-bar.gimp{width: 0;}
/* Portfilio */
.my-img-portfolio{
  max-width: 100% !important;
}
.portfolio-title{color: #19232D;}
.portfolio-title a{text-decoration: none;}
.portfolio-description{
  text-align: justify;
  color: rgb(103, 105, 107);
  font-size: small;
}
.portfolio-row a.img-link:hover{
  background-color: #F98639;
  transition: background-color .3s ease-out;
  -webkit-transition: background-color .3s ease-out;
  -moz-transition: background-color .3s ease-out;
}
.portfolio-tag{
  padding: 5px;
  border: 1px solid #ddd;
  border-radius: 2px;
  color: #aaa;
  font-size: 14px;
  float: left;
  margin-right: 5px;
}
.portfolio-row-see-more{text-align: center;}
.portfolio-see-more{
  border: 1px solid #666;
  border-radius: 2px;
  text-transform: uppercase;
  padding: 5px 40px;
  font-size: 14px;
  text-align: center;
  margin: 0px auto;
  color: #666;
  background-color: #ffffff;
  cursor: pointer;
  transition: .4s ease-in;
  -webkit-transition: .4s ease-in;
  -webkit-transition: .4s ease-in;
}
.portfolio-see-more:hover {
  color: #ffffff;
  background-color: #F98639;
  border: 1px solid #F98639;
  transition: .4s ease-out;
  -webkit-transition: .4s ease-out;
  -webkit-transition: .4s ease-out;
}
/* Contact */
#contact-me{
  background-color: #fafafa;
  margin: 30px 100px;
  padding: 15px;
}
form label{color: #19232D;}
form input, textarea{
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
}
form input[type=text], input[type=email], textarea{
  border: 1px solid #ccc;
  border-radius: 2px;
  -webkit-transition: border 0.4s;
  -moz-transition: border 0.4s;
  transition: border 0.4s;
}
form input[type=text]:focus, input[type=email]:focus, textarea:focus { 
  border: 1px solid #F98639;
  outline: none;
}
form textarea {
  resize: vertical;
  -moz-resize: vertical;
  height: 7em;
}
form input[type="submit"] {
  background-color: #F98639;
  border: none;
  border-radius: 2px;
  color: #ffffff;
  font-size: medium;
  text-transform: uppercase;
  cursor: pointer;
}
form input[type="submit"]:hover {background-color: rgb(248, 126, 45);}
.contact-text{text-align: center; color: #19232D;}
/* Footer */
footer {
  background-color: #19232D;
  text-align: center;
  color: #ffffff;
}
footer p {margin: 0px;}
footer a {color: #ffffff;}
/* Navigation Bar */
.first-element {margin-top: 32px;}
.fixed-top {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
}
.navbar {
  background-color: #19232D;
  overflow: hidden;
}
.navbar a {
  float: left;
  display: block;
  color: #ffffff;
  padding: 14px 16px;
  font-size: 17px;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  background-color: #19232D;
  transition: background-color .45s ease-out;
  -webkit-transition: background-color .45s ease-out;
  -moz-transition: background-color .45s ease-out;
}
.navbar a:not(.active):hover {
  background-color: #000000;
  transition: background-color .45s ease-out;
  -webkit-transition: background-color .45s ease-out;
  -moz-transition: background-color .45s ease-out;
}
.navbar .active {background-color: #F98639;}
.navbar .icon {display: none;}
.navbar .menu {float: right;}
.navbar .brand a {
  pointer-events: none; 
  font-weight: bold;
}
/* Mobile */
@media (max-width: 767px) {
  .navbar .menu {float: none;}
  .navbar .menu a {display: none;}
  .navbar a.icon {
    display: block;
    float: right;
    font-size: 15px;
  }
  .navbar.responsive {position: relative;}
  .navbar.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .navbar.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  /* About me */
  #about-me{padding: 20px;}
  #contact-me{margin: 30px 0px;}
  /* Skills */
  .skill-text-align {
    text-align: left;
    margin-left: 10px;
    padding-bottom: 0px;
    padding-top: 0px;
  }
  .progress-bar-wrapper{padding-top: 8px;}
}
/** 
 * Scrolling to top before unloading page
*/
window.onbeforeunload = function () {
  window.scrollTo(0, 0);
}

$(document).ready(function(){
  let initTable = {}, menuClicked = false;
  let targetScroll, timer;
  let menuItems = $(".menu a:not(#navicon)");
  let hashItems = menuItems.map(function(){
    return $(this).attr("href");
  });

  const skillset = {
    "html-css": "70%",
    "javascript": "75%",
    "bootstrap-jquery": "55%",
    "angularjs": "65%",
    "nodejs-expressjs": "60%",
    "c-cpp": "80%",
    "java-android": "75%",
    "algorithm": "80%",
    "git-github": "70%"
  };

  let portfolioTable = {
    curRow : 2,
    curCol : 3
  }
  let portfolioTemplate = $('#portfolio-item-template').html();
  const portfolioItems = [
    {
      "link-view": "javascript:void(0);",
      "alt-image": "portfolio image",
      "path-image": "https://res.cloudinary.com/drcrre4xg/image/upload/v1520604052/comming-soon-completejavascript.com_bqvjt2.png",
      "title": "A JavaScript Calculator",
      "tags" : ["HTML5", "CSS3"]
    },
    {
      "link-view": "javascript:void(0);",
      "alt-image": "portfolio image",
      "path-image": "https://res.cloudinary.com/drcrre4xg/image/upload/v1520604052/comming-soon-completejavascript.com_bqvjt2.png",
      "title": "A Pomodoro Clock",
      "tags" : ["HTML5", "CSS3"]
    },
    {
      "link-view": "javascript:void(0);",
      "alt-image": "portfolio image",
      "path-image": "https://res.cloudinary.com/drcrre4xg/image/upload/v1520604052/comming-soon-completejavascript.com_bqvjt2.png",
      "title": "A Tic Tac Toe Game",
      "tags" : ["HTML5", "CSS3"]
    },
    {
      "link-view": "javascript:void(0);",
      "alt-image": "portfolio image",
      "path-image": "https://res.cloudinary.com/drcrre4xg/image/upload/v1520604052/comming-soon-completejavascript.com_bqvjt2.png",
      "title": "A Simon Game",
      "tags" : ["HTML5", "CSS3"]
    },
    {
      "link-view": "javascript:void(0);",
      "alt-image": "portfolio image",
      "path-image": "https://res.cloudinary.com/drcrre4xg/image/upload/v1520604052/comming-soon-completejavascript.com_bqvjt2.png",
      "title": "A Markdown Previewer",
      "tags" : ["HTML5", "CSS3"]
    },
    {
      "link-view": "javascript:void(0);",
      "alt-image": "portfolio image",
      "path-image": "https://res.cloudinary.com/drcrre4xg/image/upload/v1520604052/comming-soon-completejavascript.com_bqvjt2.png",
      "title": "A Camper Leaderboard",
      "tags" : ["HTML5", "CSS3"]
    },
    {
      "link-view": "javascript:void(0);",
      "alt-image": "portfolio image",
      "path-image": "https://res.cloudinary.com/drcrre4xg/image/upload/v1520604052/comming-soon-completejavascript.com_bqvjt2.png",
      "title": "A Recipe Box",
      "tags" : ["HTML5", "CSS3"]
    },
    {
      "link-view": "javascript:void(0);",
      "alt-image": "portfolio image",
      "path-image": "https://res.cloudinary.com/drcrre4xg/image/upload/v1520604052/comming-soon-completejavascript.com_bqvjt2.png",
      "title": "The Game of Life",
      "tags" : ["HTML5", "CSS3"]
    },
    {
      "link-view": "javascript:void(0);",
      "alt-image": "portfolio image",
      "path-image": "https://res.cloudinary.com/drcrre4xg/image/upload/v1520604052/comming-soon-completejavascript.com_bqvjt2.png",
      "title": "A Roguelike Dungeon Crawler Game",
      "tags" : ["HTML5", "CSS3"]
    }
  ];

  // Handle clicking toggle menu icon
  $("#navicon").click(function(){
    $("#mynav").toggleClass("responsive");
  });

  // Open link all links in a new tab, except links with '#' in the beginning
  $("a:not([href^='#'])").attr("target", "_blank");

  // Handle clicking navigation menu item except toggle menu icon
  $(".menu a:not(#navicon)").click(function(){
    menuClicked = true;
    activateMenu(this);
    $("#mynav").removeClass("responsive");
  });

  // Activate clicked menu item
  function activateMenu(menuItem) {
    $(menuItem).parent().children().removeClass("active");
    $(menuItem).addClass("active");
  }

  // Smooth scrolling
  $("a[href*='#']:not([href='#'])").click(function () {
    targetScroll = $(this).attr("href");
    $('html,body').stop().animate({
      scrollTop: $(targetScroll).offset().top - 32 // First element's marginTop = 32px
    }, 1000);
    event.preventDefault();
  });

  // Handle Scroll Windows
  // Update menu while scrolling
  $(window).scroll(function() {
    if (timer) {
      window.clearTimeout(timer);
    }
    timer = window.setTimeout(handleScrollEvent, 100);
  });

  // Function handles Scrolling Event
  function handleScrollEvent() {
    if (!menuClicked) {
      for(let i = 0; i < hashItems.length; i++) {
        let item = $(hashItems[i]);
        if (isInViewPort(item)) {
          if (!item.hasClass("active")) {
            // Scale at first time
            initSection(hashItems[i], 0);
            activateMenu($('.menu a[href="' + hashItems[i] + '"]'));
          }
          break;
        } 
      }
    } else {
      initSection(targetScroll, 0);
      menuClicked = false;
    }
  }

  // Check whether element is in viewport
  function isInViewPort(element){
    let elementTop = $(element).offset().top;
    let elementBottom = elementTop + $(element).outerHeight();
    let viewPortTop = $(window).scrollTop();
    let viewPortBottom = viewPortTop + $(window).height();
    return elementBottom > viewPortTop + $("#mynav").height() + 10 && elementTop < viewPortBottom;
  }

  // Init section 
  function initSection(section, time) {
    if(initTable[section] == undefined) {
      if(section == '#about') {
        setTimeout(function(){ 
          $("#about-me").addClass("to-primary-color");
        }, time);
      } 
      else if(section == '#skills') {
        let timeout = time;
        for(let key in skillset) {
          setTimeout(function(){
            $(".progress-bar." + key).css("width", skillset[key]);
          }, timeout);
          timeout += 50;  
        }
      } 
      initTable[section] = 1;
    }
  }

  function nextPortfolioItem() {
    if(portfolioTable.curCol == 3) {
      portfolioTable.curCol = 1;
      portfolioTable.curRow++;
    } else {
      portfolioTable.curCol++;
    }
  }

  // Handle "See more" click
  $("#see-more").click(function(){
    if (portfolioItems.length > 0) {
      while(true) {
        nextPortfolioItem();

        // Render item
        let curItemId = "col-" + portfolioTable.curRow + portfolioTable.curCol;
        portfolioItems[0]["col-id"] = curItemId;
        Mustache.parse(portfolioTemplate);
        let rendered = Mustache.render(portfolioTemplate, portfolioItems[0]);

        if(portfolioTable.curCol == 1) {
          $('<div class="gr-row" id="row-' + portfolioTable.curRow +'"></div>').insertAfter('#row-' + (portfolioTable.curRow - 1));
        }
        $('#row-' + portfolioTable.curRow).append(rendered);

        // Render tags
        let tags = portfolioItems[0].tags;
        for(let i = 0; i < tags.length; i++) {
          $('#' + curItemId).append('<span class="portfolio-tag">' + tags[i] + '</span>');
        }

        portfolioItems.shift();
        if(portfolioItems.length == 0) {
          $("#see-more-wrapper").css("display", "none");
          break;
        } 
        else if (portfolioTable.curCol == 3) break;
      }
    }
  });
});

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.