Fully Responsive Portfolio Website Template || HTML&CSS || Free Source Code

Hello friends, in this blog you will learn to create a fully responsive portfolio website using HTML, CSS and little bit of JavaScript. This template for portfolio is fully custom coded and you can use it without any restrictions. For making of this portfolio I have use HTML, CSS, and JavaScript, google fonts, scroll reveal animation for JavaScript. This portfolio template comes with a lot of features. Understanding the code written to make this portfolio website is very easy to understand and everyone can understand the code. You can copy and paste the code provided in this blog post or you can even download the code from the GitHub repository. The download link for the code is given at the end of the post.

I have used icons from font-awesome, box icons and also I have use scroll reveal to animate this portfolio website. This code is completely free for everyone around the globe. This portfolio website comes with the following features:

☛ Responsive design

☛ Animated Hover Effect in navbar

☛ Animated Hover Effect in social media icons

☛ Typing Effect

☛ Scroll Reveal Page Animation

☛ Image Parallax Effect

☛ Back To Top Button

☛ Home, About, Skills and Contact Section

☛ Customized Scroll Bar

☛ Free Source Code

In order to create an fully responsive personal portfolio, you need to follow the following steps.

Step 1:

First of all, you will need to create an index.html file in your code editor. After you create the index.html file, you need to add the following code in the file.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>John Doe</title>


<link rel="stylesheet" href="./css/style.css" />
<link rel="stylesheet" href="./css/responsive.css" />


<link rel="shortcut icon" href="./images/profile.jpg" type="image/x-icon" />


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


<link
href="https://fonts.googleapis.com/css2?family=Lobster&family=Lobster+Two:ital@1&display=swap"
rel="stylesheet"
/>


<link
href="https://cdn.jsdelivr.net/npm/boxicons@2.0.5/css/boxicons.min.css"
rel="stylesheet"
/>


<script src="https://unpkg.com/scrollreveal@4"></script>
<script>
window.sr = ScrollReveal({
distance: "50px",
duration: 1000,
easing: "ease",
mobile: true,
reset: true,
viewFactor: 0.4,
});
</script>
</head>
<body>

<div class="container">
<div class="logo">
<img src="./images/profile.jpg" alt="" />
</div>
<i class="fa fa-fw fa-bars burger"></i>
<div class="navigation">
<nav>
<ul class="nav-links">
<li class="nav"><a href="#" class="links-nav">Home</a></li>
<li class="nav"><a href="#" class="links-nav">About</a></li>
<li class="nav"><a href="#" class="links-nav">Skills</a></li>
<li class="nav"><a href="#" class="links-nav">Contact</a></li>
</ul>
</nav>
</div>
</div>


<div class="home" id="home">
<h1 style="color: rgb(161, 240, 109);">Hello,</h1>
<h2>From John Doe</h2>
<p class="typing-effect">a Web Developer...............................</p>
<div class="social-media">
<a href="#"><i class="fa fa-fw fa-facebook"></i></a>
<a href="#"><i class="fa fa-fw fa-instagram"></i></a>
<a href="#"><i class="fa fa-fw fa-twitch"></i></a>
<a href="#"><i class="fa fa-fw fa-youtube"></i></a>
</div>
</div>


<h3 class="top" id="about">About</h3>
<div class="about-sec">
<div class="img">
<img src="./images/profile.jpg" alt="">
</div>
<div class="about">
<h2 class="top">I'm john</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At nostrum, placeat possimus blanditiis quam et voluptatum maiores, quas hic id odio nihil aliquid aliquam rem cum voluptatem deserunt porro ad!</p>
</div>
</div>


<h3 id="skills" class="top">Skills</h3>
<div class="skills">
<div>
<h2 class="top">Profesional Skills</h2>
<p class="skills__text">The following are the skills of John Doe.</p>
<div class="skills__data left">
<div class="skills__names">
<i class='bx bxl-html5 skills__icon'></i>
<span class="skills__name">HTML5</span>
</div>
<div class="skills__bar skills__html">

</div>
<div>
<span class="skills__percentage">95%</span>
</div>
</div>
<div class="skills__data right">
<div class="skills__names">
<i class='bx bxl-css3 skills__icon'></i>
<span class="skills__name">CSS3</span>
</div>
<div class="skills__bar skills__css">

</div>
<div>
<span class="skills__percentage">80%</span>
</div>
</div>
<div class="skills__data left">
<div class="skills__names">
<i class='bx bxl-javascript skills__icon'></i>
<span class="skills__name">JAVASCRIPT</span>
</div>
<div class="skills__bar skills__js">

</div>
<div>
<span class="skills__percentage">50%</span>
</div>
</div>
<div class="skills__data right">
<div class="skills__names">
<i class='bx bxs-video skills__icon'></i>
<span class="skills__name">Editing</span>
</div>
<div class="skills__bar skills__ux">

</div>
<div>
<span class="skills__percentage">90%</span>
</div>
</div>
</div>
</div>
</div>


<h3 class="top" id="contact">Contact</h3>
<div class="contact">
<form action="" id="contact-form">
<input type="text" name="name" id="text" placeholder="Your Name" required>
<input type="email" name="email" id="email" placeholder="Your Email" required>
<textarea name="msg" id="msg" cols="30" rows="10" placeholder="Your Message" required></textarea>
<button type="submit" class="submit-btn">Send</button>
</form>
</div>


<footer class="foot">
<h2>John Doe</h2>
<p>Copyright © 2021. All rights Reserved.</p>
</footer>


<button onclick="topFunction()" id="myBtn" title="Go to Top">Top</button>
</body>
<script src="./js/script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</html>{codeBox}

Step 2:

After creating index.html file, you will need to create an style.css file and paste the following code.

@import url("https://fonts.googleapis.com/css2?family=Baloo+Tamma+2:wght@600&display=swap");

* {
padding: 0%;
margin: 0%;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
background-color: rgb(236, 231, 223);
}
.container {
background-color: rgb(34, 33, 33);
height: 70px;
display: flex;
position: relative;
width: 100%;
}
.logo {
float: left;
margin: 7px;
display: flex;
width: 60px;
margin-right: auto;
}
.logo img {
width: 50px;
height: 50px;
border: 2px solid white;
border-radius: 100%;
}
.navigation nav {
float: right;
margin: 7px;
display: flex;
}
.navigation nav ul {
display: flex;
margin: 10px;
}
.navigation nav ul li {
list-style: none;
margin-left: 40px;
font-size: 1.3rem;
display: inline-flex;
}
.navigation nav ul li a {
text-decoration: none;
color: whitesmoke;
font-family: "Baloo Tamma 2", cursive;
}
a.links-nav {
position: relative;
}
a.links-nav::before {
content: "";
position: absolute;
width: 0%;
height: 3px;
bottom: 0%;
left: 0%;
background-color: rgb(161, 240, 109);
visibility: hidden;
transition: all 0.4s ease-in-out;
}
a.links-nav:hover::before {
visibility: visible;
width: 100%;
}
.fa-bars {
display: none;
visibility: hidden;
cursor: pointer;
}

/* home section */
.home {
background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)),
url(../images/background.jpg);
height: 100vh;
width: 100%;
background-attachment: fixed;
background-position-x: center;
background-position-y: center;
}
p.typing-effect {
border-right: solid 3px rgb(16, 17, 16);
white-space: nowrap;
overflow: hidden;
font-family: "Baloo Tamma 2", cursive;
font-size: 2rem;
color: rgb(161, 240, 109);
margin: 0 auto;
cursor: text;
animation: animated-text 4s steps(29, end) 1s 1 normal both,
animated-cursor 600ms steps(29, end) infinite;
animation-iteration-count: infinite;
}
@keyframes animated-text {
from {
width: 0;
}
to {
width: 20rem;
}
}
@keyframes animated-cursor {
from {
border-right-color: rgba(0, 255, 0, 0.75);
}
to {
border-right-color: transparent;
}
}
.home h1,
h2 {
font-family: "Baboo Tamma 2", cursive;
color: whitesmoke;
font-size: 3rem;
justify-content: center;
align-items: center;
display: flex;
margin-left: auto;
}
.home h1 {
padding-top: 10%;
}
.social-media {
font-family: "Baboo Tamma 2", cursive;
color: whitesmoke;
font-size: 2rem;
justify-content: center;
align-items: center;
display: flex;
margin-left: auto;
margin-top: 60px;
}
.fa {
color: white;
padding: 0 25px;
transition: 1s;
}
.fa-facebook:hover {
color: #3b5998;
font-size: 1.7rem;
}
.fa-instagram:hover {
color: #c4246e;
font-size: 1.7rem;
}
.fa-twitch:hover {
color: #00acee;
font-size: 1.7rem;
}
.fa-youtube:hover {
color: #ff0000;
font-size: 1.7rem;
}
.nav-items {
display: flex;
}

/* about section */
.about-sec {
font-family: "Baboo Tamma 2", cursive;
height: 86vh;
display: flex;
background-color: rgb(236, 231, 223);
}
.about-sec img {
height: auto;
width: 60%;
margin-left: 20%;
margin-top: 12%;
background-color: black;
border: 5px solid white;
border-radius: 100%;
}
h3 {
align-items: center;
text-align: center;
font-size: 3em;
font-family: "Baboo Tamma 2", cursive;
background-color: rgb(236, 231, 223);
}
.about {
font-family: "Baboo Tamma 2", cursive;
}
.about h2 {
color: rgba(3, 136, 3, 0.75);
align-items: center;
justify-content: center;
margin-top: 16%;
width: 85%;
margin-right: 15%;
}
.about p {
align-items: center;
justify-content: left;
width: 85%;
flex: 1;
font-family: "Lobster", cursive;
font-size: 1.2em;
}
.img {
width: 50%;
}

/* skills section */
.skills h2 {
color: rgba(3, 136, 3, 0.75);
align-items: center;
justify-content: center;
padding-top: 2%;
width: 100%;
margin-right: 15%;
}
.skills p {
align-items: center;
justify-content: center;
width: 85%;
font-family: "Lobster", cursive;
font-size: 1.2em;
padding-left: 20%;
margin-bottom: 3vh;
}
.skills__data {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
font-family: "Baloo Tamma 2", cursive;
padding: 0.5rem 1rem;
width: 60%;
border-radius: 0.5rem;
box-shadow: 0 4px 25px rgba(14, 36, 49, 0.15);
margin-bottom: 5vh;
margin-left: 20%;
overflow: hidden;
}
.skills__icon {
font-size: 2rem;
margin-right: 2rem;
color: rgba(3, 136, 3, 0.75);
}
.skills__names {
display: flex;
align-items: center;
}
.skills__bar {
position: absolute;
left: 0%;
bottom: 0%;
background-color: rgba(3, 136, 3, 0.75);
height: 0.25rem;
border-radius: 0.5rem;
}
.skills__html {
width: 95%;
}
.skills__css {
width: 85%;
}
.skills__js {
width: 50%;
}
.skills__ux {
width: 90%;
}
.skills__img {
border-radius: 0.5rem;
}

/* contact section */
.contact {
height: 86vh;
}
#text,
#email,
#msg {
height: 10vh;
width: 50%;
align-items: center;
justify-content: center;
margin: 0 25% 2vh 25%;
padding: 1%;
font-family: "Baloo Tamma 2", cursive;
font-size: 1.4rem;
border-radius: 0.5rem;
background-color: rgb(236, 231, 224);
}
#msg {
height: 40vh;
}
.submit-btn {
font-size: 1em;
border-radius: 0.5rem;
border-color: rgb(236, 231, 224);
padding: 1%;
margin: 0 25%;
width: 10%;
transition-duration: 1s;
}
.submit-btn:hover {
background-color: rgba(3, 136, 3, 0.75);
}

/* footer section */
footer {
background-color: rgb(34, 33, 33);
height: 110px;
}
footer p {
font-family: "Baloo Tamma 2", cursive;
color: whitesmoke;
align-items: center;
text-align: center;
justify-content: center;
}

/* other functions */
#myBtn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
border: none;
outline: none;
background-color: rgba(3, 136, 3, 0.75);
color: whitesmoke;
cursor: pointer;
padding: 5px;
border-radius: 10px;
font-size: 18px;
}
#myBtn:hover {
background-color: rgb(34, 33, 33);
}
::-webkit-scrollbar {
width: 3px;
height: 10px;
}
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 8px;
height: 40px;
}
::-webkit-scrollbar-thumb {
background-color: rgba(3, 136, 3, 0.75);
border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
background-color: rgb(34, 33, 33);
}{codeBox}

Step 3:

After creating style.css file, you will need to create an responsive.css file and paste the following code.

@media only screen and (max-width: 600px) {
html {
overflow-x: hidden;
}
body {
overflow-x: hidden;
}
.container {
width: 100%;
}
.logo {
display: flex;
}
.nav-links {
display: none;
align-items: center;
justify-content: center;
width: 100%;
height: 50vh;
background-color: rgb(34, 33, 33);
transform: translateX(100%);
transition: transform 0.5s ease-in-out;
}
.nav ul {
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
}
.navigation nav ul {
flex-direction: column;
}
.fa-bars {
width: 50px;
height: 50px;
justify-content: center;
align-items: center;
position: absolute;
right: 10px;
top: 25px;
visibility: visible;
}
.navigation nav {
margin: 7px;
display: flex;
flex-direction: column;
margin-top: 10vh;
justify-content: center;
align-items: center;
margin-right: auto;
}
.navigation nav ul {
display: flex;
margin: 10px;
flex-direction: column;
}
.nav-items {
flex-direction: column;
justify-content: center;
align-items: center;
margin-right: 50%;
}
.links-nav {
margin-bottom: 20px;
animation: navLinkFade 0.6s linear;
}
@keyframes navLinkFade {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0px);
}
}
.about-sec {
display: block;
}
.about-sec img {
margin-left: 70%;
align-items: center;
justify-content: center;
}
.about h2 {
margin-left: 20px;
margin-right: 0%;
justify-content: center;
align-items: center;
padding: 0%;
}
.about p {
margin: 0%;
padding: 0%;
padding-left: 40px;
}
.nav-active {
transform: translateX(0%);
}
.skills h2 {
margin-left: 20px;
}
}{codeBox}

Step 4:

After completing with CSS files, you will need to create an script.js file and paste the following code in it.

const navSlide = () => {
const burger = document.querySelector(".burger");
const nav = document.querySelector(".nav-links");
const navLinks = document.querySelectorAll(".nav-links li");

burger.addEventListener("click", () => {
nav.classList.toggle("nav-active");
});

navLinks.forEach((link, index) => {
link.style.animation = `navLinkFade .5s ease forwards ${index / 7 + 1}s`;
});
};

navSlide();

mybutton = document.getElementById("myBtn");

window.onscroll = function () {
scrollFunction();
};

function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}

function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}

sr.reveal(".social-media, .top, .logo", {
origin: "top",
});
sr.reveal("#text, #msg, .left, .typing-effect, .img", {
origin: "left",
});
sr.reveal("#email, .submit-btn, .right, .nav-link", {
origin: "right",
});
sr.reveal(".foot, p", {
origin: "bottom",
});{codeBox}

In order to make this website [personal portfolio website] work completely you may need to edit some imports and file names, or directly download fully working code with all image file as well as well managed folder structure.

{getButton} $text={Download Source Code} $icon={download}

Fully Responsive Portfolio Website Template || HTML&CSS || Free Source Code

Step 1:

Step 2:

Step 3:

Step 4:

Post a Comment

Contact Form