In this tutorial we will build Responsive Personal Portfolio Website Using HTML, CSS & JavaScript. You will learn about modern CSS including CSS grid, flexbox and responsive media queries.
Hello Viewers, today in this tutorial, you’ll learn How To Make Responsive Personal Portfolio Website Using HTML, CSS & JavaScript.
This Post is about making a Responsive Personal Portfolio Website Using HTML, CSS & JavaScript.
To create this project (Responsive Personal Portfolio Website Using HTML, CSS & JavaScript). First, you need to create three Files one HTML File and one is CSS File and JavaScript File.
First, create an HTML file with the name of index.html and paste the code given in HTML file.
<!DOCTYPE html>
<!-- Created by Amit Tutorial - Website - www.amittutorial.com -->
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8" />
<title>Responsive Portfolio Website Using HTML,CSS & JavaScript| Amit Tutorial</title>
<link rel="stylesheet" href="style.css" />
<!-- Fontawesome CDN Link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<!-- Move to up button -->
<div class="scroll-button">
<a href="#home"><i class="fas fa-arrow-up"></i></a>
</div>
<!-- navigation menu -->
<nav>
<div class="navbar">
<div class="logo"><a href="#">Portfolio.</a></div>
<ul class="menu">
<li><a href="#home">Home</a></li>
<li><a href="#about">About Me</a></li>
<li><a href="#skills">My Skills</a></li>
<li><a href="#services">My Services</a></li>
<li><a href="#contact">Contact Me</a></li>
<div class="cancel-btn">
<i class="fas fa-times"></i>
</div>
</ul>
<div class="media-icons">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
<div class="menu-btn">
<i class="fas fa-bars"></i>
</div>
</nav>
<!-- Home Section -->
<section class="home" id="home">
<div class="home-content">
<div class="text">
<div class="text-one">Hello,</div>
<div class="text-two">I'm Amit Baghel</div>
<div class="text-three">Full Stack Developer</div>
<div class="text-four">From India</div>
</div>
<div class="button">
<button>Hire Me</button>
</div>
</div>
</section>
<!-- About Section -->
<section class="about" id="about">
<div class="content">
<div class="title"><span>About Me</span></div>
<div class="about-details">
<div class="left">
<img src="Images/pexels-ivan-babydov-7787871.jpg" alt="">
</div>
<div class="right">
<div class="topic">Designing is My Passion</div>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique dolor labore facilis ipsa asperiores. Laudantium voluptatem vel, magnam quos omnis natus. Rerum, quos deleniti? Consectetur ex suscipit a explicabo dolor?</p>
<div class="button">
<button>Download CV</button>
</div>
</div>
</div>
</div>
</section>
<!-- My Skills Section -->
<section class="skills" id="skills">
<div class="content">
<div class="title"><span>My Skills</span></div>
<div class="skills-details">
<div class="text">
<div class="topic">Skills Reflects Our Knowledge</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus aperiam quibusdam quis porro omnis consequuntur facere laudantium natus vero? Explicabo numquam ea laborum vitae. Cumque eveniet ducimus voluptatem excepturi optio!</p>
<div class="experience">
<div class="num">10</div>
<div class="exp">Years of <br> Experience</div>
</div>
</div>
<div class="boxes">
<div class="box">
<div class="topic">HTML</div>
<div class="per">90%</div>
</div>
<div class="box">
<div class="topic">CSS</div>
<div class="per">80%</div>
</div>
<div class="box">
<div class="topic">JavaScript</div>
<div class="per">70%</div>
</div>
<div class="box">
<div class="topic">Java</div>
<div class="per">60%</div>
</div>
</div>
</div>
</div>
</section>
<!-- My services -->
<section class="services" id="services">
<div class="content">
<div class="title"><span>My Services</span></div>
<div class="boxes">
<div class="box">
<div class="icon">
<i class="fas fa-desktop"></i>
</div>
<div class="topic">Web Development</div>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Totam vitae voluptates dolorum. Sint, consequatur tempore!</p>
</div>
<div class="box">
<div class="icon">
<i class="fas fa-paint-brush"></i>
</div>
<div class="topic">Graphic Design</div>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Totam vitae voluptates dolorum. Sint, consequatur tempore!</p>
</div>
<div class="box">
<div class="icon">
<i class="fas fa-chart-line"></i>
</div>
<div class="topic">Digital Marketing</div>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Totam vitae voluptates dolorum. Sint, consequatur tempore!</p>
</div>
<div class="box">
<div class="icon">
<i class="fab fa-android"></i>
</div>
<div class="topic">Icon Design</div>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Totam vitae voluptates dolorum. Sint, consequatur tempore!</p>
</div>
<div class="box">
<div class="icon">
<i class="fas fa-camera-retro"></i>
</div>
<div class="topic">Photography</div>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Totam vitae voluptates dolorum. Sint, consequatur tempore!</p>
</div>
<div class="box">
<div class="icon">
<i class="fas fa-tablet-alt"></i>
</div>
<div class="topic">Apps Development</div>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Totam vitae voluptates dolorum. Sint, consequatur tempore!</p>
</div>
</div>
</div>
</section>
<!-- Contact me section -->
<section class="contact" id="contact">
<div class="content">
<div class="title"><span>Contact Me</span></div>
<div class="text">
<div class="topic">Have Any Project?</div>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt tempora cumque at id temporibus culpa.</p>
<div class="button">
<button>Let's Chat</button>
</div>
</div>
</div>
</section>
<!-- Footer section -->
<footer>
<div class="text">
<span>Created By <a href="#">Amit Tutorial</a> | © 2023 All Rights Reserved</span>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>
Second, create a CSS file with the name of style.css and paste the code given in CSS file.
/* Google Font CDN Link */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Ubuntu:wght@400;500;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
scroll-behavior: smooth;
}
/* Custom scroll bar CSS */
::-webkit-scrollbar{
width: 10px;
}
::-webkit-scrollbar-track{
background: #f1f1f1;
}
::-webkit-scrollbar-thumb{
background: #6e93f7;
border-radius: 12px;
transition: all 0.3s ease;
}
::-webkit-scrollbar-thumb:hover{
background: #4070f4;
}
/* navbar CSS */
nav{
position: fixed;
width: 100%;
padding: 20px 0;
z-index: 998;
transition: all 0.3s ease;
font-family: 'Ubuntu', sans-serif;
}
nav.sticky{
background: #4070f4;
padding: 13px 0;
}
nav .navbar{
width: 90%;
display: flex;
justify-content: space-between;
align-items: center;
margin: auto;
}
nav .navbar .logo a{
font-weight: 500;
font-size: 35px;
color: #4040f4;
}
nav.sticky .navbar .logo a{
color: #fff;
}
nav .navbar .menu{
display: flex;
position: relative;
}
nav .navbar .menu li{
list-style: none;
margin: 0 8px;
}
.navbar .menu a{
font-size: 18px;
font-weight: 500;
color: #fff;
padding: 6px 0;
transition: all 0.4s ease;
}
.navbar .menu a:hover{
color: #4040f4;
}
nav.sticky .menu a{
color: #fff;
}
nav.sticky .menu a:hover{
color: #0e2431;
}
.navbar .media-icons a{
color: #fff;
font-size: 18px;
margin: 0 6px;
}
nav.sticky .media-icons a{
color: #fff;
}
/* side navigation menu button CSS */
nav .menu-btn,
.navbar .menu .cancel-btn{
position: absolute;
color: #fff;
right: 30px;
top: 20px;
font-size: 20px;
cursor: pointer;
transition: all 0.3s ease;
display: none;
}
nav .menu-btn{
color: #4040f4;
}
nav.sticky .menu-btn{
color: #fff;
}
.navbar .menu .menu-btn{
color: #fff;
}
/* home section */
.home{
height: 100vh;
width: 100%;
background: url("Images/bg.png") no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
font-family: 'Ubuntu', sans-serif;
}
.home .text-one{
font-size: 25px;
color: #fff;
}
.home .home-content{
width: 90%;
height: 100%;
margin: auto;
display: flex;
flex-direction: column;
justify-content: center;
}
.home .text-two{
color: #fff;
font-size: 75px;
font-weight: 600;
margin-left: -3px;
}
.home .text-three{
font-size: 40px;
margin: 5px 0;
color: #4040f4;
}
.home .text-four{
font-size: 23px;
margin: 5px 0;
color: #fff;
}
.home .button{
margin: 14px 0;
}
.home .button button{
outline: none;
padding: 8px 16px;
border-radius: 6px;
font-size: 25px;
font-weight: 400;
background: #4040f4;
color: #fff;
cursor: pointer;
border: 2px solid transparent;
transition: all 0.4s ease;
}
.home .button button:hover{
border-color: #4040f4;
background-color: #fff;
color: #4040f4;
}
/* about section */
section{
padding-top: 40px;
}
section .content{
width: 80%;
margin: 40px auto;
font-family: 'Poppins', sans-serif;
}
.about .about-details{
display: flex;
justify-content: space-between;
align-items: center;
}
section .title{
display: flex;
justify-content: center;
margin-bottom: 40px;
}
section .title span{
color: #0e2431;
font-size: 30px;
font-weight: 600;
position: relative;
padding-bottom: 8px;
}
section .title span::before,
section .title span::after{
content: '';
position: absolute;
height: 3px;
width: 100%;
background: #4040f4;
left: 0;
bottom: 0;
}
section .title span::after{
bottom: -7px;
width: 70%;
left: 50%;
transform: translateX(-50%);
}
.about .about-details .left{
width: 45%;
}
.about .left img{
height: 400px;
width: 400px;
object-fit: cover;
border-radius: 12px;
}
.about-details .right{
width: 55%;
}
section .topic{
color: #0e2431;
font-size: 25px;
font-weight: 500;
margin-bottom: 10px;
}
.about-details .right p{
text-align: justify;
color: #0e2431;
}
section .button{
margin: 16px 0;
}
section .button button{
outline: none;
padding: 8px 16px;
border-radius: 4px;
font-size: 25px;
font-weight: 400;
background: #4040f4;
color: #fff;
border: 2px solid transparent;
cursor: pointer;
transition: all 0.4s ease;
}
section .button button:hover{
border-color: #4040f4;
background-color: #fff;
color: #4040f4;
}
/* my skills CSS */
.skills{
background: #f0f8ff;
}
.skills .skills-details{
display: flex;
justify-content: space-between;
align-items: center;
}
.skills-details .text{
width: 50%;
}
.skills-details p{
color: #0e2431;
text-align: justify;
}
.skills .skills-details .experience{
display: flex;
align-items: center;
margin: 0 10px;
}
.skills-details .experience .num{
color: #0e2431;
font-size: 80px;
}
.skills-details .experience .exp{
color: #0e2431;
margin-left: 20px;
font-size: 18px;
font-weight: 500;
margin: 0 6px;
}
.skills-details .boxes{
width: 45%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.skills-details .box{
width: calc(100% / 2 - 20px);
margin: 20px 0;
}
.skills-details .boxes .topic{
font-size: 20px;
color: #4070f4;
}
.skills-details .boxes .per{
font-size: 60px;
color: #4070f4;
}
/* My Services CSS */
.services .boxes{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.services .boxes .box{
margin: 20px 0;
width: calc(100% / 3 - 20px);
text-align: center;
border-radius: 12px;
padding: 30px 10px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);
cursor: default;
transition: all 0.4s ease;
}
.services .boxes .box:hover{
background: #4040f4;
color: #fff;
}
.services .boxes .box .icon{
height: 50px;
width: 50px;
background: #4040f4;
border-radius: 50%;
text-align: center;
line-height: 50px;
font-size: 18px;
color: #fff;
margin: 0 auto 10px auto;
transition: all 0.4s ease;
}
.boxes .box:hover .icon{
background-color: #fff;
color: #4040f4;
}
.services .boxes .box:hover .topic,
.services .boxes .box:hover p{
color: #0e2431;
transition: all 0.4s ease;
}
.services .boxes .box:hover .topic,
.services .boxes .box:hover p{
color: #fff;
}
/* Contact me CSS */
.contact{
background: #f0f8ff;
}
.contact .content{
margin: 0 auto;
padding: 30px 0;
}
.contact .text{
width: 80%;
text-align: center;
margin: auto;
}
/* footer section CSS */
footer{
background: #4040f4;
padding: 15px 0;
text-align: center;
font-family: 'Poppins', sans-serif;
}
footer .text span{
font-size: 17px;
font-weight: 400;
color: #fff;
}
footer .text span a{
font-weight: 500;
color: #fff;
}
footer .text span a:hover{
text-decoration: underline;
}
/* scroll to top button CSS */
.scroll-button a{
position: fixed;
bottom: 20px;
right: 20px;
color: #fff;
background: #4040f4;
padding: 7px 12px;
font-size: 18px;
border-radius: 6px;
box-shadow: rgba(0, 0, 0, 0.15);
display: none;
}
/* Responsive media query */
@media( max-width: 1190px){
section .content{
width: 85%;
}
}
@media (max-width: 1000px){
.about .about-details{
justify-content: center;
flex-direction: column;
}
.about .about-details .left{
display: flex;
justify-content: center;
width: 100%;
}
.about-details .right{
width: 90%;
margin: 40px 0;
}
.services .boxes .box{
margin: 20px 0;
width: calc(100% / 2 - 20px);
}
}
@media (max-width: 900px){
.about .left img{
height: 350px;
width: 350px;
}
}
@media (max-width: 750px){
nav .navbar{
width: 90%;
}
nav .navbar .menu{
position: fixed;
left: -100%;
top: 0;
background: #0e2431;
height: 100vh;
max-width: 400px;
width: 100%;
padding-top: 60px;
flex-direction: column;
align-items: center;
transition: all 0.5s ease;
}
.navbar.active .menu{
left: 0;
}
nav .navbar .menu a{
font-size: 23px;
display: block;
color: #fff;
margin: 10px 0;
}
nav.sticky .menu a:hover{
color: #4040f4;
}
nav .navbar .media-icons{
display: none;
}
nav .menu-btn,
.navbar .menu .cancel-btn{
display: block;
}
.home .text-two{
font-size: 65px;
}
.home .text-three{
font-size: 35px;
}
.skills .skills-details{
align-items: center;
justify-content: center;
flex-direction: column;
}
.skills-details .text{
width: 100%;
margin-bottom: 50px;
}
.skills-details .boxes{
justify-content: center;
align-items: center;
width: 100%;
}
.services .boxes .box{
margin: 20px 0;
width: 100%;
}
.contact .text{
width: 100%;
}
}
@media (max-width: 500px){
.home .text-two{
font-size: 55px;
}
.home .text-three{
font-size: 33px;
}
.skills-details .boxes .per{
font-size: 50px;
color: #4040f4;
}
}
Third, create a JavaScript file with the name of script.js and paste the code given in JS file.
// sticky navigation menu JS code
let nav = document.querySelector("nav");
let scrollBtn = document.querySelector(".scroll-button a");
console.log(scrollBtn);
let val;
window.onscroll = function() {
if(document.documentElement.scrollTop > 20){
nav.classList.add("sticky");
scrollBtn.style.display = "block";
}else{
nav.classList.remove("sticky");
scrollBtn.style.display = "none"
}
}
// side navigation menu JS code
let body = document.querySelector("body");
let navBar = document.querySelector(".navbar");
let menuBtn = document.querySelector(".menu-btn");
let cancelBtn = document.querySelector(".cancel-btn");
menuBtn.onclick = function(){
navBar.classList.add("active");
menuBtn.style.opacity = "0";
menuBtn.style.pointerEvents = "none";
body.style.overflow = "hidden";
scrollBtn.style.pointerEvents = "none";
}
cancelBtn.onclick = function(){
navBar.classList.remove("active");
menuBtn.style.opacity = "1";
menuBtn.style.pointerEvents = "auto";
body.style.overflow = "auto";
scrollBtn.style.pointerEvents = "auto"
}
// Side navigation bar close when we click on navigation links
let navlinks = document.querySelectorAll(".menu li a");
for(var i = 0; i < navlinks.length; i++){
navlinks[i].addEventListener("click" , function(){
navBar.classList.remove("active");
menuBtn.style.opacity = "1";
menuBtn.style.pointerEvents = "auto";
})
}
That’s all in this post, you’ve successfully created Responsive Personal Portfolio Website Using HTML, CSS & JavaScript. If your code does not work or you’ve faced any problem then comment down your problem.
If you’re feeling difficult to understand what I am saying in this post.You can watch a full video tutorial on this project(Responsive Personal Portfolio Website Using HTML, CSS & JavaScript).
Download Source Code: