Introduction

Developing a portfolio or personal website helps to widen your network around the global. This is due to the fact that people can read and know more about you. portfoliobox defines portfolio as a website that provides professional information about an individual or a company and presents a showcase of their work.
So based on the above definition, introduction about yourself, contacts, services, skills and some of the finished projects are some of the features of a portfolio.

About my portfolio

Above is my portfolio I just finished of recent . I included a chat feature where we can chat in case you need any help. It as well has a form in case you want us to collaborate on a project

Technologies used

HTML5
CSS3
JavaScript
Tidio
Hashnode
font awesome
Bootstrap 5
Features of the blog
Home
About me page
My skills
Services
Contact
Blog
Link to the portfolio
kato james

source code

HTML


<!DOCTYPE html>

<html lang="en" dir="ltr">
  <head>

    <script async src="https://www.googletagmanager.com/gtag/js?id=G-9BZLL8NT22"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', 'G-9BZLL8NT22');
    </script>
    <meta charset="UTF-8">
    <title> kato james </title>
    <!-- =========bootstrap======= -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
    <link rel="icon" href="Images/kato2.png">
    <!-- Fontawesome CDN Link -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>
    <script src="https://kit.fontawesome.com/78e0d6a352.js" crossorigin="anonymous"></script>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <!-- ============aos=========== -->
     <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
   </head>
<body >
  <!-- Move to up button -->
  <div class="scroll-button">
    <a href="#home"><i class="fas fa-arrow-up"></i></a>
  </div>
  <!-- navgaition menu -->
  <nav>
    <div class="navbar">
      <div class="logo"><a href="#"><img src="Images/kato2.png" alt=""></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>
          <li><a href="https://kato.hashnode.dev/" target="_blank">blog</a></li>
          <div class="cancel-btn">
            <i class="fas fa-times"></i>
          </div>
      </ul>
      <div class="media-icons">
        <a href="https://www.linkedin.com/in/kato-james-aa1710196/" target="_blank"><i class="fab fa-linkedin" ></i></a>
        <a href="https://www.youtube.com/channel/UC0MKJPVJCMwcfXeiGD7xC_A" target="_blank"><i class="fab fa-youtube"></i></a>
        <a href="https://twitter.com/home" target="_blank"><i class="fab fa-twitter" ></i></a>
        <a href="https://github.com/Kato669" target="_blank"><i class="fab fa-github"></i></a>
      </div>
    </div>
    <div class="menu-btn">
      <i class="fas fa-bars"></i>
    </div>
  </nav>

<!-- Home Section Start -->
 <section class="home" id="home">
   <div class="home-content" data-aos="fade-up"
   data-aos-duration="3000">
     <div class="text">
       <div class="text-one">Hello,</div>
       <div class="text-two">I'm kato james kalemba</div>
       <div class="text-three">Web Designer</div>
       <div class="text-four">From Uganda</div>
       <div class="text-five"><i class="fa-solid fa-phone"></i><spans style="padding: 0 7px ;"></spans> <a href="tel:+256757041401">+256 757 041 401</a></div>

     </div>
     <div class="button">
       <button><a href="#contact" style="text-decoration:none; color: #000;">Hire Me</a></button>
     </div>
   </div>
 </section>

<!-- About Section Start -->
<section class="about" id="about">
  <div class="content">
    <div class="title"><span>About Me</span></div>
  <div class="about-details">
    <div class="left" data-aos="fade-right"
    data-aos-duration="1000"
    data-aos-offset="300"
    data-aos-easing="ease-in-sine">
      <img src="kato2.png" alt="">
    </div>
    <div class="right" data-aos="fade-left" data-aos-duration="1000">
      <div class="topic">Here is my story</div>
      <p>Am a young Ugandan born in Kyotera district, greater Masaka region, Uganda. I started my education at kyotera P/S then progressed  to St. James SS, Kyotera for my O level. I Joined the great Masaka SS for A level from 2015-2017. Later on, I joined Muni University for my bachelor studies in Information System from 2018-2021. <br>
        Am a website and web app developer with an experience of 2 years, I design website using <b> <a href="https://en.wikipedia.org/wiki/HTML5" target="_blank" class="web_link" title="visit HTML5 wikipedia">HTML5</a> , <a href="https://www.tutorialrepublic.com/css-tutorial/" target="_blank" class="web_link" title="visit CSS3">CSS3</a>, <a href="https://getbootstrap.com/docs/5.0/getting-started/introduction/" target="_blank" class="web_link" title="visit bootstrap">bootstrap framework</a> and <a href="https://www.javascript.com/" target="_blank" class="web_link" title="visit Javascript">Javascript</a>,</b> for <b>front end</b> and <b><a href="https://www.php.net/" target="_blank" class="web_link" title="visit Php">Php</a></b> for <b>back end</b>. I  use  <a href="https://laravel.com/" target="_blank" class="web_link" title="visit laravel">laravel</a> for <b>web app</b> development. <br>
        I have participated in designing a number of websites and systems some of which I designed individually and others as a member of the team. Some of the websites I have designed so far include <a href="http://www.sydotech.com/" target="_blank" class="web_link" title="visit sydotech">sydotech</a> for ict specialists Arua, <a href="http://tasetafrica.org/" target="_blank" title="visit taset africa" class="web_link">taset africa</a> for a an NGO in Mbarara Uganda and <a href="http://hailnumbers.com/index" title="visit hailnumbers" target="_blank" class="web_link">hailnumbers</a> for data management  and some of the systems include the <a href="https://cgpa-calcu.web.app" target="_blank" class="web_link" title="visit CGPA">CGPA</a> calculation app and store management system</p>
      <div class="button">
        <button><a href="cv.doc" style="color: #000; text-decoration: none;">Download CV</a></button>
      </div>
    </div>
  </div>
  </div>
</section>

<!-- My Skill Section Start -->
<!-- Section Tag and Other Div will same where we need to put same CSS -->
<section class="skills" id="skills">
 <div class="content">
   <div class="title"><span>My Skills</span></div>
   <div class="skills-details">
     <div class="text" data-aos="fade-down"
     data-aos-easing="linear"
     data-aos-duration="1500">
       <div class="topic">Skills Reflects Our Knowledge</div>
       <p>As mentioned earlier,I have skills and exprience in different languages, frameworks and libraries. Languages include Php, HTML5, CSS3 and Javascript and framework include laravel Php framework for developing secure web apps. Some of the libraries include swipper.js, slick slider, fancy box, animate.css, aos and many others <br>
        Other skills include team work,innovation, problem solving, communication skills, leadership skills and many others.
      </p>
       <div class="experience">
         <div class="num">2</div>
         <div class="exp">Years Of <br> Experience</div>
       </div>
     </div>
     <div class="boxes" data-aos="fade-up"
     data-aos-easing="linear"
     data-aos-duration="1500">
       <div class="box">
         <div class="topic">HTML</div>
         <div class="per" id="counts1">0</div>
       </div>
       <div class="box">
         <div class="topic">CSS</div>
         <div class="per" id="counts2">0</div>
       </div>
       <div class="box">
         <div class="topic">JavScript</div>
         <div class="per" id="counts3">0</div> 
       </div>
       <div class="box">
         <div class="topic">PHP</div>
         <div class="per" id="count4">60%</div>
       </div>
     </div>
   </div>
 </div>
</section>

<!-- My Services Section Start -->
 <section class="services" id="services">
   <div class="content">
     <div class="title"><span>My Services</span></div>
     <div class="boxes">
       <div class="box" data-aos="fade-right"
       data-aos-easing="linear"
       data-aos-duration="1500">
         <div class="icon">
          <i class="fa-brands fa-html5"></i>
       </div>
       <div class="topic">Web Devlopment</div>
       <p>I develop fully responsive and secure websites using HTML5, CSS3, bootstrap5, Javascript and Php and some libraries like aos, slick sliders and others to make a website colorful. </p>
     </div>
       <div class="box" data-aos="fade-up"
       data-aos-easing="linear"
       data-aos-duration="1500">
         <div class="icon">
          <i class="fas fa-desktop"></i>
       </div>
       <div class="topic">Computer Training</div>
       <p>I train all people young and old basics of computer. This involves teaching them how to start a computer, installing windows, office, how to use command line and so many others.</p>
     </div>
       <div class="box" data-aos="fade-left"
       data-aos-easing="linear"
       data-aos-duration="1500">
         <div class="icon">
           <i class="fas fa-chart-line"></i>
       </div>
       <div class="topic">Digital Marketing</div>
       <p>I do digital marketing for companies' products using different digital platforms like social media especially facebook, linkedIn and twitter</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. Mollitia autem quam odio, qui voluptatem eligendi?</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. 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 Devlopment</div>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia autem quam odio, qui voluptatem eligendi?</p>
     </div> -->
   </div>
   </div>
 </section>

<!-- Contact Me section Start -->
<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>
      <div class="container-fluid">
        <div class="row mt-5">
          <div class="col-lg-6"  data-aos="flip-left"
          data-aos-easing="ease-out-cubic"
          data-aos-duration="2000">
            <form action="https://getform.io/f/ea309655-ded5-4562-b37a-7ecc38654d3b" method="post" style="box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); margin: 10px; padding: 10px; background: #f1f9f9;">
              <div class="mb-3">
                <label  class="form-label">Please Enter your names</label>
                <input type="text" class="form-control"placeholder="name goes here..........." autocomplete="on" name="name"  required>
              </div>
              <div class="mb-3">
                <label  class="form-label">Email address</label>
                <input type="email" name="email" class="form-control"placeholder="name@gmail.com" autocomplete="on" required>
              </div>
              <div class="mb-3">
                <label  class="form-label">Enter your contact</label>
                <input type="tel" name="contact" class="form-control"autocomplete="on" placeholder="07+++" minlength="0" maxlength="10">
              </div>
              <div class="mb-3">
                <label  class="form-label">Please describe your project</label>
                <textarea class="form-control" name="comment" rows="3" required></textarea>
              </div>
              <div class="col-auto">
                <button type="submit" class="btn btn-primary mb-3">submit</button>
              </div>
            </form>
          </div>
          <div class="col-lg-6 headleftcontact"  data-aos="flip-right"
          data-aos-easing="ease-out-cubic"
          data-aos-duration="2000">
            <div class="leftContact">
              <i class="fa-brands fa-whatsapp"></i> <span class="text">0757041401</span>
            </div>
            <div class="leftContact">
              <i class="fa-solid fa-location-pin"></i> <span class="text">Arua city, west Nile, Uganda</span>
            </div>
            <div class="leftContact">
              <i class="fa-solid fa-envelope"></i> <span class="text">katojames248@gmail.com</span>
            </div>
            <div class="leftContact">
              <i class="fa-solid fa-phone"></i> <span class="text">+256757041401 <span class="mid">&</span> +256788173609</span>
            </div>
            <div class="specialContact">
              <a href="https://www.linkedin.com/in/kato-james-aa1710196/" target="_blank"><i class="fab fa-linkedin" ></i></a>
              <a href="https://www.youtube.com/channel/UC0MKJPVJCMwcfXeiGD7xC_A" target="_blank"><i class="fab fa-youtube"></i></a>
              <a href="https://twitter.com/home" target="_blank"><i class="fab fa-twitter" ></i></a>
              <a href="https://github.com/Kato669" target="_blank"><i class="fab fa-github"></i></a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Footer Section Start -->
<footer>

  <div class="text">
    <span>kato james kalemba Copyright &copy; 2022 All Rights Reserved</span>
  </div>
</footer>

  <script src="script.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  <!-- ===============aos script============ -->
  <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
  <script>
    AOS.init();
  </script>

<script src="//code.tidio.co/oo6itir01ws9nmx94sssgupql9rwcqo5.js" async></script>
</body>
</html>

CSS

Create a file and name it style.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;
}

/* 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 styling */
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: #4070f4;
}
nav .navbar .logo a img{
  height: 80px;
  width: 80px;
  border-radius: 50%;
}
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{
  text-decoration: none;
  font-size: 18px;
  font-weight: 500;
  color: #0E2431;
  padding: 6px 0;
  transition: all 0.4s ease;
}
.navbar .menu a:hover{
  color: #4070f4;
}
nav.sticky .menu a{
  color: #FFF;
}
nav.sticky .menu a:hover{
  color: #0E2431;
}
.navbar .media-icons a{
  color: #4070f4;
  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: #4070f4;
}
nav.sticky .menu-btn{
  color: #FFF;
}
.navbar .menu .menu-btn{
  color: #fff;
}

/* home section styling */
.home{
  height: 100vh;
  width: 100%;
  background: url("kato3.png") no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  font-family: 'Ubuntu', sans-serif;
}
.home .home-content{
  width: 90%;
  height: 100%;
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.home .text-one{
  font-size: 25px;
  color: #0E2431;
}
.home .text-two{
  color: #0E2431;
  font-size: 2rem;
  font-weight: 600;
  text-transform: capitalize;
  margin-left: -3px;
}
.home .text-three{
  font-size: 40px;
  margin: 5px 0;
  color: #4070f4;
}
.home .text-four{
  font-size: 23px;
  margin: 5px 0;
  color: #0E2431;
}
.home .button{
  margin: 14px 0;
}
.home .button button{
  outline: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 25px;
  font-weight: 400;
  background: #4070f4;
  color: #fff;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.4s ease;
}
.home .button button:hover{
  border-color: #4070f4;
  background-color: #fff;
  color: #4070f4;
}

/* About Section Styling */
/* Those Elements Where We Have Apply Same CSS,
 I'm Selecting Directly 'Section Tag' and 'Class'  */
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::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 !important;
  font-size: 1rem;
}
.about-details .right p .web_link{
  text-decoration: none;
  color: #000 !important;
  font-weight: 800;
  transition: all .5s;
}
.about-details .right p .web_link:hover{
  color: #4070f4 !important;
}
section .button{
  margin: 16px 0;
}
section .button button{
  outline: none;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 25px;
  font-weight: 400;
  background: #4070f4;
  color: #fff;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.4s ease;
}
section .button button:hover{
  border-color: #4070f4;
  background-color: #fff;
  color: #4070f4;
}
label{
  font-weight: 900;
}
 /* 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: #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: #4070f4;
  color: #fff;
}
.services .boxes .box .icon{
  height: 50px;
  width: 50px;
  background: #4070f4;
  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: #4070f4;
}
.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 CSS */
footer{
  background: #4070f4;
  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: #4070f4;
  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: #4070f4;
  }
  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: #4070f4;
  }
}



/* ============headleftcontact========== */
.headleftcontact{
  margin: 1% 0;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.headleftcontact .leftContact{
  padding: 2%;
}
.headleftcontact .leftContact i{
  font-size: 1.5rem;
  color: #4070f4 !important;
  padding: .8rem;
}
.headleftcontact .leftContact .text{
  font-size: 1rem;
  color: #000;
  font-weight: bold;
}
.headleftcontact .leftContact .text .mid{
  font-size: 1rem;
  color: grey;
}

JavaScript

Create a file called script.js

// 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 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";
  });
}



let client = setInterval(clients, 10)
let social1 = setInterval(social, 30)
let employess1 = setInterval(employess, 40)
let employess2 = setInterval(employess3, 40)
let count1 = 1;
let count2 = 1;
let count3 = 1;
let count4 = 1;

function clients(){
   count1++;
   document.getElementById('counts1').innerHTML = count1 + '' + '%';
   if(count1==80){
      clearInterval(client)
   }
}
function social(){
   count2++;
   document.getElementById('counts2').innerHTML = count2  + '' + '%';;
   if(count2==80){
      clearInterval(social1)
   }
}
function employess(){
   count3++;
   document.getElementById('counts3').innerHTML = count3  + '' + '%';;
   if(count3==50){
      clearInterval(employess1)
   }
}
function employess3(){
   count4++;
   document.getElementById('count4').innerHTML = count4 + '' + '%';;
   if(count4==45){
      clearInterval(employess2)
   }
}

Personal Website (Portfolio)

Develop yourself a portfolio to widen your network