Create a Modern Portfolio Landing Page with Bootstrap and JavaScript

Faraz

By Faraz -

Learn how to create a modern portfolio landing page with Bootstrap and JavaScript. This tutorial is perfect for beginners looking to build a stunning portfolio page from scratch.

Join us on Telegram
creating a modern portfolio landing page with bootstrap and javascript.jpg
Read AlsoCreate Neumorphism Video Player using HTML, CSS, and JavaScript.webpCreate Neumorphism Video Player using HTML, CSS, and JavaScript (Source Code)

Table of Contents

  1. Project Introduction
  2. HTML Code
  3. CSS Code
  4. JavaScript Code
  5. Preview
  6. Conclusion

Welcome to our tutorial on creating a modern portfolio landing page using Bootstrap and JavaScript. In this guide, we will walk you through the process of designing and building a professional-looking portfolio website from scratch. We will be using Bootstrap, a popular front-end framework, to quickly and easily create a responsive layout, and JavaScript to add interactivity and dynamic functionality to the site. Whether you are a designer, developer, or a student looking to create a portfolio for your work, this tutorial is for you. Let's get started!

Let's start making an amazing modern portfolio landing page using Bootstrap and JavaScript step by step.

Design by: Marina Marques

Join My Telegram Channel to Download the Project: Click Here

Prerequisites:

Before starting this tutorial, you should have a basic understanding of HTML, CSS, and JavaScript. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.

Source Code

Step 1 (HTML Code):

To get started, we will first need to create a basic HTML file. In this file, we will create the basic structure of our portfolio landing page website using HTML and Bootstrap classes. This includes the header, navigation, main content area, and footer.

Link the Bootstrap CSS and JavaScript files to our HTML file. After creating the files just paste the following codes into your file. Remember that you must save a file with the .html extension.

Read AlsoHow to Create a Responsive Grid List with Hover Effect CSS and HTML.jpgHow to Create a Responsive Grid List with Hover Effect: CSS and HTML

Step 2 (CSS Code):

Next, we will create our CSS file. In this file, we will use some basic CSS rules to style our portfolio landing page website using CSS to create a visually appealing design that is consistent with our brand. We will also add some padding and margin properties to ensure that everything looks correct.

This will give our portfolio landing page website an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.

body {
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	width: 100%;
	height: 100%;
	background: #fff;
	margin: 0;
	padding: 0;
}

h2 {
	color: #008080;
	font-weight: 700;
	font-size: 50px;
	font-family: 'Montserrat', sans-serif;
	text-transform: lowercase;
}

h2:after {
	content: '';
	width: 50px;
	height: 3px;
	background: #40E0D0;
	display: block;
	margin: 15px auto;
	transition: all .2s ease-in-out;
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}

h2:hover:after {
	width: 100px;
}

h3,
h4,
h5 {
	font-family: 'Montserrat', sans-serif;
}


/* SCROLL TO TOP ARROW */

#return-to-top {
	position: fixed;
	bottom: 20px;
	right: 20px;
	background: rgba(64, 224, 208, 0.8);
	width: 50px;
	height: 50px;
	display: block;
	text-decoration: none;
	-webkit-border-radius: 35px;
	-moz-border-radius: 35px;
	border-radius: 35px;
	display: none;
	-webkit-transition: all 0.3s linear;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	z-index: 999;
}

#return-to-top span {
	color: #fff;
	margin: 0;
	position: relative;
	left: 16px;
	top: 13px;
	font-size: 19px;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

#return-to-top:hover {
	background: rgba(64, 224, 208, 1);
}

#return-to-top:hover span {
	color: #fff;
	top: 5px;
}


/* END SCROLL TO TOP ARROW */


/* START PRELOADER */

#preloader {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #008080;
	z-index: 99;
	height: 100%;
}

#status {
	width: 200px;
	height: 200px;
	position: absolute;
	left: 50%;
	top: 50%;
	background-image: url(http://marinamarques.pt/img/preloader.gif);
	background-repeat: no-repeat;
	background-position: center;
	margin: -100px 0 0 -100px;
}


/* END PRELOADER */


/* start header */

.navbar-fixed-top {
	background-color: #008080;
}

.navbar-brand {
	padding: 0px 15px;
	height: 56px;
	margin-left: 0;
}

.navbar {
	margin-bottom: 0px;
	border: none;
}

.navbar-inverse .navbar-toggle:focus,
.navbar-inverse .navbar-toggle:hover {
	background-color: #40E0D0;
}

.navbar-inverse .navbar-toggle {
	border: none;
}

.navbar-inverse .navbar-collapse,
.navbar-inverse .navbar-form {
	border: none;
}

.navbar-toggle .icon-bar {
	width: 35px;
	height: 5px
}

#ResponsiveNav li a {
	font-size: 16px;
	color: #fff;
	font-weight: 700;
	display: inline-block;
	position: relative;
	text-decoration: none;
	overflow: hidden;
	-webkit-transition: all .40s ease-in-out;
	transition: all .40s ease-in-out;
	font-family: 'Roboto', sans-serif;
	text-transform: lowercase;
}

#ResponsiveNav li a:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 0;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	height: 3px;
	background: #40E0D0;
	-webkit-transition: .35s;
	transition: .35s;
}

#ResponsiveNav li a:hover {
	color: #40E0D0;
}

#ResponsiveNav ul li a:hover:after,
#ResponsiveNav ul li a:focus:after,
#ResponsiveNav ul li a:active:after {
	width: 70%;
}

button.navbar-toggle.collapsed {
	background-color: #008080;
	border: none;
}

.navbar-default .navbar-toggle:focus,
.navbar-default .navbar-toggle:hover {
	background-color: #40E0D0;
	border: none;
}

.navbar-default .navbar-toggle .icon-bar {
	background-color: #fff;
}


/*/ start hamburger menu desktop overwrite bootstrap /*/

.navbar-header {
	float: none;
}

.navbar-toggle {
	display: block;
}

.navbar-collapse.collapse {
	display: none!important;
}

.navbar-nav {
	float: none!important;
}

.navbar-nav>li {
	float: none;
}

.navbar-collapse.collapse.in {
	display: block !important;
}


/*/ end hamburger menu desktop overwrite bootstrap /*/


/*/ start intro /*/

.intro {
	display: table;
	width: 100%;
	height: auto;
	text-align: center;
	color: white;
	background: url(http://marinamarques.pt/img/mm_header.jpg) no-repeat top center scroll;
	background-size: cover;
	-o-background-size: cover;
}

.intro .intro-body {
	display: table-cell;
	vertical-align: middle;
	padding: 15% 0;
	background: rgba(0, 0, 0, 0.5);
}

.brand-heading {
	font-size: 100px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	text-align: left;
	color: #40E0D0;
}

.intro .intro-body .intro-text {
	font-size: 25px;
	font-family: 'Montserrat', sans-serif;
	text-align: left;
}

span.city {
	background-color: #40E0D0;
	color: #fff;
	border-radius: 4px;
	width: 15px;
}

@media (min-width: 768px) {
	.intro {
		height: 100%;
		padding: 0;
	}
	.intro .intro-body .brand-heading {
		font-size: 130px;
	}
	.intro .intro-body .intro-text {
		font-size: 35px;
	}
}

.mouse-warp {
	margin: 40px auto;
	display: block;
	width: 28px;
	opacity: 0.5;
}

.mouse {
	width: 28px;
	height: 50px;
	border: 2px solid #fff;
	border-radius: 14px;
}

.scroll {
	width: 4px;
	height: 4px;
	border-radius: 2px;
	background: #fff;
	position: relative;
	left: 10px;
	-webkit-animation: scrolls 1.3s ease-out infinite;
}

@-webkit-keyframes scrolls {
	0% {
		top: 8px;
		opacity: 0;
		-webkit-transform: scaleY(1) scaleX(1);
	}
	5% {
		top: 8px;
		opacity: 0.8;
		-webkit-transform: scaleY(1.2) scaleX(1.2);
	}
	10% {
		top: 8px;
		opacity: 1;
		-webkit-transform: scaleY(1.6) scaleX(1.6);
	}
	15% {
		top: 8px;
		opacity: 1;
		-webkit-transform: scaleY(1.2) scaleX(1.2);
	}
	20% {
		top: 8px;
		opacity: 1;
		-webkit-transform: scaleY(1.2) scaleX(1.2);
	}
	30% {
		top: 15px;
		opacity: 1;
		-webkit-transform: scaleY(1.2) scaleX(1.2);
	}
	100% {
		top: 30px;
		opacity: 0;
		-webkit-transform: scaleY(1.2) scaleX(0.8);
	}
}


/* End Scroll Down Indicator */


/*/ end intro /*/


/*/ start about /*/

#about-me {
	margin-top: 20px;
}

#about-me h2 {
	font-weight: 700;
	margin-top: 22px;
	padding-bottom: 10px;
	text-align: center;
}

.about-intro-text p {
	float: right;
}

.about-intro-text span {
	color: #40E0D0;
	font-weight: 700;
}

.about-intro-text .fa-beer {
	color: #40E0D0;
	font-size: 20px;
}

.button-group {
	cursor: pointer;
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
}

.text {
	background: #008080;
	color: #fff;
	font-size: 18px;
	height: 50px;
	padding: 0 25px;
	line-height: 50px;
}

.icon-cv {
	font-size: 30px;
	width: 50px;
	height: 50px;
	line-height: 40px;
	box-sizing: border-box;
	border: 4px solid #008080;
	border-left: none;
	-webkit-transition: 600ms -webkit-transform ease-in-out;
	transition: 600ms -webkit-transform ease-in-out;
	transition: 600ms transform ease-in-out;
	transition: 600ms transform ease-in-out, 600ms -webkit-transform ease-in-out;
	-webkit-transform: rotateY(90deg);
	transform: rotateY(90deg);
	-webkit-transform-origin: left;
	transform-origin: left;
	color: #008080;
	background: #fff;
	text-align: center;
}

a .fa-arrow-circle-down {
	color: #008080;
}

.button-group:hover .icon-cv {
	-webkit-transform: rotateY(0deg);
	transform: rotateY(0deg);
}

.button-group {
	-webkit-perspective: 200px;
	perspective: 200px;
	-webkit-perspective-origin: calc(100% - 50px);
	perspective-origin: calc(100% - 50px);
	margin-top: 5%;
}

.about-inner {
	position: relative;
	padding: 0;
	overflow: hidden;
}

.about-inner>img {
	display: block;
	min-width: 100%;
	height: auto;
}

.about-ct .textbox-about {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	-webkit-transform: scale(0);
	transform: scale(0);
}

.about-ct:hover .textbox-about {
	-webkit-transform: scale(1);
	transform: scale(1);
}

.textbox-about {
	-webkit-transition: all 0.7s ease;
	transition: all 0.7s ease;
}

div.button-social {
	border: 2px solid #fff;
	padding: 12px 18px;
	-webkit-transition: all .35s;
	transition: all .35s;
	border-radius: 0;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	margin-top: 25px;
	font-size: 18px;
	color: #fff;
	margin: 5% 5%;
}

div.button-social a {
	color: #fff;
	font-size: 18px;
	margin: 15px;
}

div.button-social a:hover {
	color: #40E0D0;
}

.button-group:focus,
.icon-cv:focus,
.text:focus {
	outline: 0;
}


/*/ start count stats /*/

#counter-stats {
	margin-top: 50px;
	width: 100%;
	height: auto;
}

.stats {
	text-align: center;
	font-size: 35px;
	font-weight: 700;
	font-family: 'Montserrat', sans-serif;
	text-transform: lowercase;
}

.stats .fa {
	color: #008080;
	font-size: 60px;
}


/*/ end count stats /*/


/*/ end about /*/


/*/ start about work experience /*/

#experience {
	margin-top: 20px;
}

#experience h2 {
	font-weight: 700;
	margin-top: 22px;
	padding-bottom: 10px;
	text-align: center;
}

.timeline-label h4 {
	margin-top: 0;
	font-size: 30px;
	color: #40E0D0;
	padding: 16px 0px;
	font-weight: 700;
}

.timeline-label p {
	color: #696969;
	padding: 8px 0px;
	line-height: 27px;
}

.button-group-li {
	cursor: pointer;
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
}

.timeline-label a {
	text-decoration: none;
}

.text-timeline {
	background: #40E0D0;
	color: #fff;
	font-size: 18px;
	height: 40px;
	padding: 0 25px;
	line-height: 40px;
}

.icon-li {
	font-size: 20px;
	width: 40px;
	height: 40px;
	line-height: 30px;
	box-sizing: border-box;
	border: 4px solid #40E0D0;
	border-left: none;
	-webkit-transition: 600ms -webkit-transform ease-in-out;
	transition: 600ms -webkit-transform ease-in-out;
	transition: 600ms transform ease-in-out;
	transition: 600ms transform ease-in-out, 600ms -webkit-transform ease-in-out;
	-webkit-transform: rotateY(90deg);
	transform: rotateY(90deg);
	-webkit-transform-origin: left;
	transform-origin: left;
	color: #40E0D0;
	background: #fff;
	text-align: center;
}

.button-group-li:hover .icon-li {
	-webkit-transform: rotateY(0deg);
	transform: rotateY(0deg);
}

.button-group-li {
	-webkit-perspective: 200px;
	perspective: 200px;
	-webkit-perspective-origin: calc(100% - 40px);
	perspective-origin: calc(100% - 40px);
}

.timeline-label {
	padding-left: 7%;
	margin-top: 2%;
}

.col-exp {
	margin-top: 2%;
}

.timeline .timeline-experience {
	position: relative;
	float: left;
	margin-left: 32px;
	padding-left: 64px;
	border-left: 2px solid #ccc;
}

.timeline .timeline-experience-info h5 {
	margin-top: 0;
	margin-bottom: 0.333em;
	font-size: 18px;
	color: #40E0D0;
	font-weight: 700;
}

.timeline .timeline-experience-info .timeline-role {
	font-size: 16px;
	color: #008080;
	font-weight: 600;
}

.timeline .timeline-experience-info p {
	font-size: 12px;
	color: #333;
	line-height: 27px;
}

.timeline time {
	display: block;
	width: 65px;
	color: #ccc;
	text-align: center;
	font-weight: 700;
}

.timeline .timeline-experience-img,
.timeline .timeline-experience-info,
.timeline .timeline-experience-info h5,
.timeline .timeline-experience-info .role,
.timeline .timeline-experience-info p {
	clear: none;
}

.timeline .timeline-experience .timeline-circle {
	position: absolute;
	top: 16px;
	left: -13px;
	display: block;
	width: 19px;
	height: 19px;
	border: 3px solid #ccc;
	border-radius: 50%;
	background-color: #F5F5F5;
}

.timeline .timeline-experience-img {
	float: left;
	width: 64px;
	height: 64px;
}

.timeline .timeline-experience-img img {
	width: 100%;
}

.timeline .timeline-experience-info {
	margin-left: 87px;
}

.timeline-experience-info p {
	margin-top: 10px;
	margin-bottom: 20px;
}


/*/ end about work experience /*/


/*/ end about /*/


/*/ start work portfolio /*/

#portfolio {
	margin-top: 20px;
}

.portfolio-ct h2 {
	font-weight: 700;
	margin-top: 22px;
	padding-bottom: 10px;
	text-align: center;
}

.grid-portfolio {
	margin-top: 20px;
}

.portfolio-details {
	text-align: center;
}

.thumbnail {
	max-width: 500px;
	border: none;
	position: relative;
	background: none;
	padding: 0;
}

.portfolio-details h3 {
	color: #008080;
	font-weight: 700;
	font-size: 25px;
	font-family: 'Montserrat', sans-serif;
}

.portfolio-details p {
	font-size: 14px;
}

ul.portfolio-tags {
	padding: 10px 0 10px 0;
	text-align: center;
}

li.portfolio-tag {
	list-style-type: none;
	font-size: 9px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	color: #40E0D0;
	display: inline;
	border: 2px solid #40E0D0;
	padding: 8px;
}

span.portfolio-link {
	font-size: 30px;
	border: 2px solid #fff;
	border-radius: 50px;
	padding: 20px;
	color: #fff;
	margin: 20% auto;
}

.portfolio-item-ct .textbox-portfolio {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	-webkit-transform: scale(0);
	transform: scale(0);
	background: #40e0d0;
	opacity: 0.9;
}

.portfolio-item-ct:hover .textbox-portfolio {
	-webkit-transform: scale(1);
	transform: scale(1);
}

.textbox-portfolio {
	-webkit-transition: all 0.7s ease;
	transition: all 0.7s ease;
}

div.button-weblink {
	-webkit-transition: all .35s;
	transition: all .35s;
	border-radius: 0;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	color: #fff;
	text-align: center;
}

.portfolio-tag:focus,
.portfolio-tags:focus {
	outline: 0;
}


/*/ end work portfolio /*/


/*/ start services /*/

#services {
	margin-top: 20px;
	width: 100%;
	height: auto;
	text-align: center;
	margin-bottom: 45px;
}

#services h2 {
	font-weight: 700;
	margin-top: 22px;
	padding-bottom: 10px;
	text-align: center;
}

.ct-services {
	margin-top: 20px;
}

#services h3 {
	color: #40E0D0;
	font-size: 22px;
	font-weight: bold;
	text-transform: lowercase;
}

#services .fa {
	font-size: 60px;
	color: #008080;
}

#services .rotate:hover {
	-webkit-transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-o-transform: rotate(360deg);
}

#services .rotate {
	-webkit-transition-duration: 0.8s;
	transition-duration: 0.8s;
	-webkit-transition-property: -webkit-transform;
	transition-property: -webkit-transform;
	transition-property: transform;
	transition-property: transform, -webkit-transform;
	overflow: hidden;
}


/*/ end services /*/


/*/ start testimionals /*/

#testimionals {
	margin-top: 20px;
	width: 100%;
	height: auto;
	text-align: center;
}

#testimionals h2 {
	font-weight: 700;
	color: #fff;
	margin-top: 22px;
	padding-bottom: 10px;
	text-align: center;
}

.testimionals-bg {
	width: 100%;
	height: auto;
	background: url(http://marinamarques.pt/img/mm_testimionals.jpg) no-repeat top center scroll;
	background-size: cover;
	-o-background-size: cover;
}

.testimionals-bg-opacity {
    width: 100%;
    height: auto;
    background: rgba(0, 0, 0, 0.5);
}

.quotes {
	color: #fff;
	font-size: 60px;
}

.client {
	font-size: 16px;
	font-style: italic;
}

.carousel-caption {
	position: static;
	/*/ this is to replace the images of bootstrap slider /*/
	font-size: 18px;
	color: #fff;
	min-height: 200px;
}

.carousel-control.left,
.carousel-control.right {
	background: none;
}


/*/ end testimionals /*/


/*/ start contact /*/

footer {
	text-align: center;
	font-size: 18px;
	margin-top: 20px;
}

#contact h2 {
	font-weight: 700;
	margin-top: 22px;
	padding-bottom: 10px;
	text-align: center;
}

footer p {
	margin-top: 50px;
}

.social,
footer a {
	font-size: 30px;
	color: #24242a;
	margin: 10px;
}

footer a:hover,
footer a:after,
footer a:visited footer a:focus {
	color: #40E0D0;
}

#copyright {
	margin-top: 35px;
	font-size: 14px;
}


/*/ end contact /*/


/*/ media queries /*/

@media only screen and (max-width: 480px) {
	.brand-heading {
		font-size: 85px;
		margin-top: 10%;
	}
	.col-exp {
		margin-top: 15%;
	}
	.timeline .timeline-experience {
		margin-left: 20px;
		padding-left: 20px;
	}
	.timeline time {
		width: 40px;
	}
	.services-item {
		margin-bottom: 15%;
	}
}

Step 3 (JavaScript Code):

Finally, we need to add interactivity and dynamic functionality to our portfolio landing page website using JavaScript. Create a JavaScript file with the name of script.js and paste the given codes into your JavaScript file. Remember, you’ve to create a file with .js extension. 

jQuery.noConflict();
(function($) {
	$(window).on('load', function() { // makes sure the whole site is loaded
		$('#status').fadeOut(); // will first fade out the loading animation
		$('#preloader').delay(200).fadeOut('slow'); // will fade out the white DIV that covers the website.
	});
})(jQuery);

// Scroll to Top
jQuery.noConflict();
(function($) {
	$(window).scroll(function() {
		if ($(this).scrollTop() >= 50) { // If page is scrolled more than 50px
			$('#return-to-top').fadeIn(200); // Fade in the arrow
		} else {
			$('#return-to-top').fadeOut(200); // Else fade out the arrow
		}
	});
	$('#return-to-top').click(function() { // When arrow is clicked
		$('body,html').animate({
			scrollTop: 0 // Scroll to top of body
		}, 500);
	});
})(jQuery);

// jQuery for page scrolling feature - requires jQuery Easing plugin
jQuery.noConflict();
(function($) {
	$(function() {
		$('a.page-scroll').bind('click', function(event) {
			var $anchor = $(this);
			$('html, body').stop().animate({
				scrollTop: $($anchor.attr('href')).offset().top
			}, 1500, 'easeInOutExpo');
			event.preventDefault();
		});
	});
})(jQuery);

// typer for hello
window.onload = function() {
	var elements = document.getElementsByClassName('txt-rotate');
	for (var i = 0; i < elements.length; i++) {
		var toRotate = elements[i].getAttribute('data-rotate');
		var period = elements[i].getAttribute('data-period');
		if (toRotate) {
			new TxtRotate(elements[i], JSON.parse(toRotate), period);
		}
	}
	// INJECT CSS
	var css = document.createElement("style");
	css.type = "text/css";
	css.innerHTML = ".txt-rotate > .wrap { border-right: 10px solid #40E0D0 }";
	document.body.appendChild(css);
};

var TxtRotate = function(el, toRotate, period) {
	this.toRotate = toRotate;
	this.el = el;
	this.loopNum = 0;
	this.period = parseInt(period, 1) || 1000;
	this.txt = '';
	this.tick();
	this.isDeleting = false;
};

TxtRotate.prototype.tick = function() {
	var i = this.loopNum % this.toRotate.length;
	var fullTxt = this.toRotate[i];

	if (this.isDeleting) {
		this.txt = fullTxt.substring(0, this.txt.length - 1);
	} else {
		this.txt = fullTxt.substring(0, this.txt.length + 1);
	}

	this.el.innerHTML = '' + this.txt + '';

	var that = this;
	var delta = 200 - Math.random() * 100;

	if (this.isDeleting) {
		delta /= 2;
	}

	if (!this.isDeleting && this.txt === fullTxt) {
		delta = this.period;
		this.isDeleting = true;
	} else if (this.isDeleting && this.txt === '') {
		this.isDeleting = false;
		this.loopNum++;
		delta = 200;
	}

	setTimeout(function() {
		that.tick();
	}, delta);
};

// number count for stats
jQuery.noConflict();
(function($) {
	$('.counter').each(function() {
		var $this = $(this),
			countTo = $this.attr('data-count');

		$({
			countNum: $this.text()
		}).animate({
				countNum: countTo
			},

			{
				duration: 3000,
				easing: 'linear',
				step: function() {
					$this.text(Math.floor(this.countNum));
				},
				complete: function() {
					$this.text(this.countNum);
					//alert('finished');
				}
			});
	});
})(jQuery);

// update footer copyright year

var today = new Date();
var year = today.getFullYear();

var copyright = document.getElementById("copyright");
copyright.innerHTML = '© Marina Marques '+ year;

Final Output:

creating a modern portfolio landing page with bootstrap and javascript.gif
Read Alsohow to create a responsive animated product page using html and pure css.pngCreate a Responsive Animated Product Page with HTML and CSS

Conclusion:

In this tutorial, we learned how to create a modern portfolio landing page using Bootstrap and JavaScript. We covered important topics such as the importance of a portfolio landing page, preparing the environment for development, and setting up a new project with Bootstrap.

By following this tutorial, you now have the knowledge and skills necessary to create a stunning portfolio landing page to showcase your work to potential clients and employers. Keep exploring and experimenting with Bootstrap and JavaScript to take your web development skills to the next level!

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: bootstrap, javascript, portfolio, landing page, node.js, npm, git, responsive navbar, image slider, formspree, modern portfolio landing page with bootstrap and javascript, creating a responsive navbar with bootstrap and javascript, how to create an image slider with owl carousel, how to create a contact form with formspree, bootstrap landing page tutorial for beginners, deploying a portfolio landing page to github pages
End of the article

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox

Latest Post