Complete Responsive Personal Portfolio Website using HTML CSS And JavaScript.

April 18, 2021

7 Comments

Hello Dear Readers, Today In this Post, You will learn How to Create a Complete Responsive Personal Portfolio Website using HTML CSS And JavaScript | Portfolio Website. Earlier I have shared a 3D Isometric Social Media Icons Hover Effect Using HTML, CSS. and now it’s time to Complete Responsive Personal Portfolio Website.

This is a Personal Portfolio website As you already know Complete Responsive Website is the most popular that is displayed our information properly to locate the page or file that the user requests. For those who aren’t familiar with how it looks, have you seen a page like this before? Looking at the default page, you can imagine how cringe-worthy it would feel like a user to suddenly drop on an empty page like this.

So I decided to create this amazing Complete Responsive Website I hope you will like it, Include a set of links to popular pages on your site and try to tempt a lost visitor to continue browsing. Otherwise, they’ll have to go all the way back from the homepage and rummage through the site’s contents to find what they are looking for.

If you create a truly unique, engaging, page, visitors will want to tell the world. This can be a great source of new links. There you are, surfing in your favorite search engine when you happen upon just the thing you’re looking for.

People who land on your website are looking for its content, usually via a link. They would have clicked that link expecting one thing, so why show them a hand-drawn panda? Instead, your Complete Responsive Website should get them to where they need to be. Keeping these things in mind, I created this page.

Play Video

If you like this program, and you want to use this on your websites, projects, and wherever you want then you have to do some basic changes on codes according to your website layout or this is enough good for you and you don’t need to change then you don’t need to change anything.

Catch your user’s attention with a beautiful Complete Responsive Website created with only CSS and js. Today’s tutorial will show you how to create a Complete Responsive Website using only HTML and CSS. Follow Use the -WebKit- and -Moz- vendor prefixes with this animation property. How to Create Glitch Effect With CSS ·

If you’re a beginner you can use this Awesome design in your project and websites. I believe this Ui design code will help you a lot. Or if you have some knowledge of Bootstrap 4 you can add some great design in this format and use it according to your requirements.

If you like this article and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down. You can use this program on your projects, websites, and HTML pages.

For any doubts and queries, feel free to leave comments below. Remember to subscribe to our channel. Do share the tutorial if you think it’s worth it.

HTML

<!DOCTYPE html> 
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <title> Responsive Portfolio Website | Code4education </title>
    <link rel="stylesheet" href="style.css">
    
    <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>

<div class="scroll-button">
    <a href="#home"><i class="fas fa-arrow-up"></i></a>
  </div>
  
  
  <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</a></li>
        <li><a href="#skills">Skills</a></li>
        <li><a href="#services">Services</a></li>
        <li><a href="#contact">Contact</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>
      </div>
    </div>
    <div class="menu-btn">
      <i class="fas fa-bars"></i>
    </div>
  </nav>

<section class="home" id="home">
    <div class="home-content">
      <div class="text">
        <div class="text-one">Hello,</div>
        <div class="text-two">I'm John Wick</div>
        <div class="text-three">Frontend Developer</div>
        <div class="text-four">From United Kingdom</div>
      </div>
      <div class="button">
        <button>Hire Me</button>
      </div>
    </div>
  </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 decoding="async" src="images/about.jpg" alt="Portfolio">
        </div>
        <div class="right">
          <div class="topic">Designing Is My Passion</div>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt, porro veritatis pariatur, nobis voluptatem ipsum repellat nemo quisquam error reprehenderit recusandae odio vel, suscipit. Voluptas mollitia accusantium quaerat aspernatur labore dolorum placeat ipsa sint nam perspiciatis eos consectetur veritatis debitis, quis aliquam unde sed maiores sit! Hic molestiae optio iste iure earum amet nostrum quaerat facere quae veniam maiores harum iusto aperiam vel inventore illo voluptatibus voluptates quo impedit voluptatum error vitae, omnis praesentium? Aperiam nulla non, nesciunt fuga rem perferendis alias et, temporibus, distinctio culpa unde a laborum libero ducimus. Facilis veniam sit praesentium, voluptatibus sint maxime iusto eaque.</p>
          <div class="button">
            <button>Download CV</button>
          </div>
        </div>
      </div>
    </div>
  </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. Minus natus tenetur tempora? Quasi, rem quas omnis. Porro rem aspernatur reiciendis ut praesentium minima ad, quos, officia! Illo libero, et, distinctio repellat sed nesciunt est modi quaerat placeat. Quod molestiae, alias?</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">Bootstrap</div>
            <div class="per">100%</div>
          </div>
        </div>
      </div>
    </div>
  </section>

<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. Mollitia autem quam odio, qui voluptatem eligendi?</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. Mollitia autem quam odio, qui voluptatem eligendi?</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. Mollitia autem quam odio, qui voluptatem eligendi?</p>
        </div>
        <div class="box">
          <div class="icon">
            <i class="fab fa-wordpress"></i>
          </div>
          <div class="topic">WordPress Design</div>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia autem quam odio, qui voluptatem eligendi?</p>
        </div>
        <div class="box">
          <div class="icon">
            <i class="fas fa-quidditch"></i>
          </div>
          <div class="topic">UI/UX Design</div>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia autem quam odio, qui voluptatem eligendi?</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. Mollitia autem quam odio, qui voluptatem eligendi?</p>
        </div>
      </div>
    </div>
  </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 Projects?</div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam neque ipsum corrupti dolores, facere numquam voluptate aspernatur sit perferendis qui nisi modi! Recusandae deserunt consequatur voluptatibus alias repellendus nobis eligendi.</p>
        <div class="button">
          <button>Let's Chat</button>
        </div>
      </div>
    </div>
  </section>

<footer>
    <div class="text">
      <span>Created By <a href="#">Code4education</a> | © 2021 All Rights Reserved.</span>
    </div>
  </footer>

CSS

/* 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;
}
:root{
    --primary-color:#ff8882;
    --black-color:#0E2431;
    --white-color:#fff;

}
body{
  font-family: 'Ubuntu', sans-serif;
}
/* Custom Scroll Bar CSS */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 12px;
    transition: all 0.3s ease;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color);
}

/* navbar styling */
nav{
  position:fixed;
  width:100%;
  padding:20px 0;
  z-index: 999;
  transition: all 0.3s ease;
}
nav.sticky{
  background:var(--primary-color);
  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:var(--primary-color);
}

nav.sticky .navbar .logo a{
  color:var(--white-color);
}

nav .navbar .menu{
  display:flex;
  position:relative;
}
nav .navbar .menu li{
  list-style: none;
  margin:0 8px;
}
nav .navbar .menu a{
  font-size: 18px;
  font-weight: 500;
  color:var(--black-color);
  padding:6px 0;
  transition: all 0.4s ease;
}
.navbar .menu a:hover{
  color:var(--primary-color);
}
nav.sticky .menu a{
  color:var(--white-color);
}
nav.sticky .menu a:hover{
  color:var(--black-color);
}
.navbar .media-icons a{
  color:var(--primary-color);
  font-size: 18px;
  margin:0 6px;
}
nav.sticky .media-icons a{
  color:var(--white-color);
}

/* side navigation Menu Button CSS */
nav .menu-btn,
.navbar .menu .cancel-btn{
  position:absolute;
  color:var(--white-color);
  right:30px;
  top:20px;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: none;
}
nav .menu-btn{
  color:var(--primary-color);
}
nav.sticky .menu-btn{
  color:var(--white-color);
}
.navbar .menu .menu-btn{
  color:var(--white-color);
}

/* home section styling */
.home{
  height:100vh;
  width:100%;
  background:url("images/portfolio-man.jpg") no-repeat;
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
}
.home .home-content{
  width:90%;
  height:100%;
  margin:auto;
  display:flex;
  flex-direction: column;
  justify-content: center;
}
.home .text-one{
  font-size:25px;
  color:var(--black-color);
}
.home .text-two{
  color:var(--black-color);
  font-size: 75px;
  font-weight: 600;
  margin-left: -3px;
}
.home .text-three{
  font-size: 40px;
  margin:5px 0;
  color:var(--primary-color);
}
.home .text-four{
  font-size: 23px;
  margin:5px 0;
  color:var(--black-color);
}
.home .button{
  margin:14px 0;
}
.home .button button{
  outline:none;
  padding:8px 16px;
  border-radius: 6px;
  font-size: 25px;
  font-weight: 400;
  background:var(--primary-color);
  color:var(--white-color);
  cursor:pointer;
  border:2px solid transparent;
  transition: all 0.4s ease;
}
.home .button button:hover{
  border-color:var(--primary-color);
  background-color: var(--white-color);
  color:var(--primary-color);
}

/* About Section Styling */
section{
  padding-top:40px;
}
section .content{
  width:80%;
  margin:40px auto;
  font-family: 'Poppins', sans-serif;
}
section .title{
  display:flex;
  justify-content: center;
  margin-bottom: 40px;
}
section .title span{
  color:var(--black-color);
  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:var(--primary-color);
  left:0;
  bottom:0;
}
section .title span::after{
  bottom:-7px;
  width:70%;
  left:50%;
  transform:translateX(-50%);
}
.about .about-details{
  display:flex;
  justify-content:space-between;
  align-items: center;
}
.about .about-details .left{
  width:45%;
}
.about .left img{
  height:400px;
  width:400px;
  object-fit: cover;
  border-radius: 12px;
}
.about .about-details .right{
  width:55%;
}
section .topic{
  color:var(--black-color);
  font-size:25px;
  font-weight: 500;
  margin-bottom: 10px;
}
.about-details .right p{
  text-align: justify;
  color:var(--black-color);
}
section .button{
  margin:16px 0;
}
section .button button{
  outline:none;
  padding:8px 16px;
  border-radius: 4px;
  font-size: 25px;
  font-weight: 400;
  background: var(--primary-color);
  color:var(--white-color);
  border:2px solid transparent;
  cursor: pointer;
  transition: all 0.4s ease;
}
section .button button:hover{
  border-color:var(--primary-color);
  background-color: var(--white-color);
  color:var(--primary-color);
}

/* My Skills CSS */
.skills{
  background:#f0f8ff;
}
.skills .content{
  padding:40px 0;
}
.skills .skills-details{
  display:flex;
  justify-content: space-between;
  align-items: center;
}
.skills-details .text{
  width:50%;
}
.skills-details p{
  color:var(--black-color);
  text-align: justify;
}
.skills .skills-details .experience{
  display:flex;
  align-items: center;
  margin:0 10px;
}
.skills-details .experience .num{
  color:var(--black-color);
  font-size: 80px;
}
.skills-details .experience .exp{
  color:var(--black-color);
  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:var(--primary-color);
}
.skills-details .boxes .per{
  font-size: 60px;
  color:var(--primary-color);
}

/* 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: var(--primary-color);
  color:var(--white-color);
}
.services .boxes .box .icon{
  height:50px;
  width:50px;
  background: var(--primary-color);
  border-radius: 50%;
  text-align: center;
  line-height: 50px;
  font-size: 18px;
  color:var(--white-color);
  margin:0 auto 10px auto;
  transition: all 0.4s ease;
}
.boxes .box:hover .icon{
  background:var(--white-color);
  color:var(--primary-color);
}
.services .boxes .box:hover .topic,
.services .boxes .box:hover p{
  color:var(--white-color);
  transition: all 0.4s ease;
}

/* Contact Me CSS */
.contact{
  background: #f0f8ff;
}
.contact .content{
  margin:0 auto;
  padding:30px 0;
}
.contact .text{
  width:80%;
  text-align: center;
  margin:auto;
}

/* Footer CSS */
footer{
  background:var(--primary-color);
  padding:15px 0;
  text-align: center;
  font-family: 'Poppins', sans-serif;
}
footer .text span{
  font-size: 17px;
  font-weight: 400;
  color:var(--white-color);
}
footer .text span a{
  font-weight: 500;
  color:var(--white-color);
}
footer .text span a:hover{
  text-decoration: underline;
}
/* Scroll To Top Button CSS */
.scroll-button a{
  position:fixed;
  bottom:20px;
  right:20px;
  color:var(--white-color);
  background:var(--primary-color);
  padding:10px 12px;
  font-size: 18px;
  border-radius: 6px;
  box-shadow: rgba(0,0,0,0.15);
  display:none;
}

/* Responsive Media Queries */
@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 .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:var(--primary-color);
     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:var(--white-color);
     margin:10px 0;
   }
   nav.sticky .menu a:hover{
     color:var(--primary-color);
   }
   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:var(--primary-color);
  }
}

JS

// Sticky Navigation Menu Js

let nav = document.querySelector("nav");
let scrollBtn = document.querySelector(".scroll-button a");

let val;

// Side Navigation Menu Js
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.overflowX = "hidden";
  scrollBtn.style.pointerEvents = "none";
}

cancelBtn.onclick = function() {
  navBar.classList.remove("active");
  menuBtn.style.opacity = "1";
  menuBtn.style.pointerEvents = "auto";
  body.style.overflowX = "auto";
  scrollBtn.style.pointerEvents = "auto";
}

// Side Navigation Bar Close While 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";
  });
}

7 thoughts on “Complete Responsive Personal Portfolio Website using HTML CSS And JavaScript.”

Pranjal says:

June 23, 2021 at 11:32 am

Please send me about.jpg image

Reply
1. Code4Education says:
  
  June 27, 2021 at 11:23 am
  
  https://unsplash.com/s/photos/
  you can take images from here
  
  Reply
Nikhil Kurmi says:

January 11, 2022 at 2:52 pm

awesome

Reply
Lan says:

April 26, 2022 at 5:44 am

I enjoy, cause I discovered just what I used to be looking for.
You have ended my 4 day long hunt! God Bless you man. Have a great day.
Bye

Reply
Prateek says:

July 13, 2022 at 6:03 pm

sir, from where i can get images of this project???

Reply
1. Code4Education says:
  
  July 15, 2022 at 3:12 pm
  
  you can get it from the video description box
  
  Reply
mobileautodetailingkc.com says:

August 11, 2023 at 7:33 am

Very good blog post.Really thank you! Cool.

Reply

Complete Responsive Personal Portfolio Website using HTML CSS And JavaScript.

HTML

CSS

JS

7 thoughts on “Complete Responsive Personal Portfolio Website using HTML CSS And JavaScript.”

Leave a Reply Cancel reply

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-3)

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-2)

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-1)

How To Make Form Validation Using JavaScript

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-3)

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-2)

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-1)

How To Make Form Validation Using JavaScript