diff --git a/app.js b/app.js
index 41d8b07..1fec146 100644
--- a/app.js
+++ b/app.js
@@ -1,13 +1,155 @@
+const navMenu = document.getElementById("nav-menu"),
+      navToggle = document.getElementById("nav-toggle"),
+      navClose = document.getElementById("nav-close") 
 
-window.onscroll = ()=> {scrollFunction()};
 
-function scrollFunction() {
-  if (document.body.scrollTop > 40 || document.documentElement.scrollTop > 40) {
-    document.getElementById("navbar").style.top = "0";
-    if (document.documentElement.scrollTop > 1784){
-      console.log("Education");
-    }
+if(navToggle){
+  navToggle.addEventListener("click", () => {
+    navMenu.classList.add("show-menu")
+  })
+} 
+
+if(navClose){
+  navClose.addEventListener("click", () =>{
+    navMenu.classList.remove("show-menu")
+  })
+}
+
+const navLink = document.querySelectorAll(".nav__link")
+
+function linkAction() {
+  navMenu.classList.remove("show-menu")
+}
+
+navLink.forEach(n => n.addEventListener('click', linkAction))
+
+
+const skillsContent = document.getElementsByClassName('skills__content'),
+      skillsHeader = document.querySelectorAll(".skills__header")
+
+function toggleSkills(){
+  let itemClass = this.parentNode.className
+
+  for (i = 0; i < skillsContent.length; i++) {
+    skillsContent[i].className = 'skills__content skills__close'
+  }
+
+  if(itemClass === "skills__content skills__close"){
+    this.parentNode.className = "skills__content skills__open"
+  }
+}
+
+skillsHeader.forEach((el) => {
+  el.addEventListener("click", toggleSkills)
+})
+
+
+const tabs = document.querySelectorAll("[data-target]"),
+      tabsContents = document.querySelectorAll("[data-content]")
+
+tabs.forEach(tab => {
+  tab.addEventListener("click", () => {
+
+    const target = document.querySelector(tab.dataset.target) // tab.dataset.target will add #education or #work
+
+    tabsContents.forEach(tabContent => {
+      tabContent.classList.remove("qualification__active")
+    })
+
+    // This will add given class in active or current data-content
+    target.classList.add("qualification__active")
+
+    tabs.forEach(tab => {
+      tab.classList.remove("qualification__active")
+    })
+
+    // This will add given class in current or active tab
+    tab.classList.add("qualification__active")
+    
+  })
+})
+
+// Active section in nav nbar while scroll.
+
+const sections = document.querySelectorAll("section[id]");
+
+window.onscroll = () => {
+  sections.forEach(section => {
+    const top = window.scrollY;
+    const offset = section.offsetTop - 50;
+    const offsetHeight = section.offsetHeight;
+    const id = section.getAttribute("id");
+
+    if(top > offset && top <= offset + offsetHeight){
+      document.querySelector(".nav__menu a[href*="+ id +"]").classList.add("active-link")
+    }else(
+      document.querySelector(".nav__menu a[href*="+ id +"]").classList.remove("active-link")
+    )
+  })
+}
+
+// Apply box-shadow in header 
+
+function scrollHeader(){
+  const header = document.querySelector("header")
+
+    if(this.scrollY > 20){
+      header.classList.add("scroll-header")
+    }else(
+      header.classList.remove("scroll-header")
+    )
+  }
+
+window.addEventListener("scroll", scrollHeader)
+
+
+// Show scroll up button
+
+function scrollUp(){
+  const scrollButton = document.getElementById("scroll-up")
+
+  if (this.scrollY > 500) {
+    scrollButton.classList.add("scrollup__show")
   } else {
-    document.getElementById("navbar").style.top = "-100px";
+    scrollButton.classList.remove("scrollup__show")
+  }
+}
+
+window.addEventListener("scroll", scrollUp)
+
+
+// Dark theme
+
+const themeButton = document.getElementById("theme-button")
+const darkTheme = 'dark-theme'
+const darkThemeIcon = 'uil-sun'
+const lightThemeIcon = 'uil-moon'
+
+const isActiveTheme = localStorage.getItem('active-theme')
+
+if(isActiveTheme === 'Dark'){
+  document.body.classList.add(darkTheme)
+  themeButton.classList.add(darkThemeIcon)
+}else{
+  document.body.classList.remove(darkTheme)
+  themeButton.classList.remove(darkThemeIcon)
+  themeButton.classList.add(lightThemeIcon)
+}
+
+function checkActivetheme(){
+
+  if(document.body.className.match('dark-theme')){
+    return "Dark"
+  }else{
+    return "Light"
   }
 }
+
+themeButton.addEventListener('click', () => {
+
+
+  document.body.classList.toggle(darkTheme)
+  themeButton.classList.toggle(darkThemeIcon)
+
+    localStorage.setItem('active-theme', checkActivetheme())
+})
\ No newline at end of file
diff --git a/css/styles.css b/css/styles.css
index 2bdd8b1..4ad933b 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -1,852 +1,955 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
+
+:root {
+  --header-height: 3rem;
+
+  /*========== Colors ==========*/
+  /* Change favorite color */
+  --hue-color: 230; /*Purple 250 - Green 142 - Blue 230 - Pink 340*/
+
+  /* HSL color mode */
+  --first-color: hsl(var(--hue-color), 69%, 61%);
+  --first-color-second: hsl(var(--hue-color), 69%, 61%);
+  --first-color-alt: hsl(var(--hue-color), 57%, 53%);
+  --first-color-lighter: hsl(var(--hue-color), 92%, 85%);
+  --title-color: hsl(var(--hue-color), 8%, 15%);
+  --text-color: hsl(var(--hue-color), 8%, 45%);
+  --text-color-light: hsl(var(--hue-color), 8%, 65%);
+  --input-color: hsl(var(--hue-color), 70%, 96%);
+  --body-color: hsl(var(--hue-color), 60%, 99%);
+  --container-color: #fff;
+  --scroll-bar-color: hsl(var(--hue-color), 12%, 90%);
+  --scroll-thumb-color: hsl(var(--hue-color), 12%, 80%);
+
+  /*========== Font and typography ==========*/
+  --body-font: 'Poppins', sans-serif;
+
+  /* .5rem = 8px, 1rem = 16px, 1.5rem = 24px ... */
+  --big-font-size: 2rem;
+  --h1-font-size: 1.5rem;
+  --h2-font-size: 1.25rem;
+  --h3-font-size: 1.125rem;
+  --normal-font-size: .938rem;
+  --small-font-size: .813rem;
+  --smaller-font-size: .75rem;
 
-body{
-  margin: 0;
-  text-align: center;
-  font-family: sans-serif;
-  font-family: 'Merriweather', serif;
-  color: #40514E;
+  /*========== Font weight ==========*/
+  --font-medium: 500;
+  --font-semi-bold: 600;
+
+  /*========== Margenes Bottom ==========*/
+  /* .25rem = 4px, .5rem = 8px, .75rem = 12px ... */
+  --mb-0-25: .25rem;
+  --mb-0-5: .5rem;
+  --mb-0-75: .75rem;
+  --mb-1: 1rem;
+  --mb-1-5: 1.5rem;
+  --mb-2: 2rem;
+  --mb-2-5: 2.5rem;
+  --mb-3: 3rem;
+
+  /*========== z index ==========*/
+  --z-tooltip: 10;
+  --z-fixed: 100;
+  --z-modal: 1000;
+}
+
+/* Font size for large devices */
+@media screen and (min-width: 968px) {
+  :root {
+      --big-font-size: 3rem;
+      --h1-font-size: 2.25rem;
+      --h2-font-size: 1.5rem;
+      --h3-font-size: 1.25rem;
+      --normal-font-size: 1rem;
+      --small-font-size: .875rem;
+      --smaller-font-size: .813rem;
+  }
 }
 
-h1{
-  font-size: 5.3rem; /* 16px = 100% = 1em */
-  margin: 0 auto;
-  font-family: 'Sacramento', cursive;
-  color: #66BFBF;
+/*========== Variables Dark theme ==========*/
+body.dark-theme{
+  --first-color-second: hsl(var(--hue-color), 30%, 8%);
+  --title-color: hsl(var(--hue-color), 8%, 95%);
+  --text-color: hsl(var(--hue-color), 8%, 75%);
+  --input-color: hsl(var(--hue-color), 29%, 16%);
+  --body-color: hsl(var(--hue-color), 28%, 12%);
+  --container-color: hsl(var(--hue-color), 29%, 16%);
+  --scroll-bar-color: hsl(var(--hue-color), 12%, 48%);
+  --scroll-thumb-color: hsl(var(--hue-color), 12%, 36%);
 }
-h2{
-  font-family: 'Montserrat', sans-serif;
-  font-size: 1.3rem;
-  font-weight: normal;
-  color: #66BFBF;
+
+/*========== Button Dark/Light ==========*/
+.nav__btns{
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
-h3{
-  font-family: 'Montserrat', sans-serif;
-  font-size: 1.9rem;
-  padding-top: 20px;
-  color: #11999E;
-  margin-bottom: 40px;
+.change-theme{
+  font-size: 1.25rem;
+  color: var(--title-color);
+  margin-right: var(--mb-1);
+  cursor: pointer;
+}
 
+.change-theme:hover{
+  color: var(--first-color);
+}
+/*==================== BASE ====================*/
+* {
+box-sizing: border-box;
+padding: 0;
+margin: 0;
 }
 
-h4{
-  font-family: 'Montserrat', sans-serif;
-  font-size: 1.5rem;
-  color: #11999E;
-  margin-bottom: 10px;
+html {
+scroll-behavior: smooth;
 }
 
-h5{
-  font-family: 'Montserrat', sans-serif;
-  font-size: 1.2rem;
-  color: #11999E;
-  margin-bottom: 10px;
+body {
+margin: 0 0 var(--header-height) 0;
+font-family: var(--body-font);
+font-size: var(--normal-font-size);
+background-color: var(--body-color);
+color: var(--text-color);
+}
+
+h1, h2, h3, h4 {
+color: var(--title-color);
+font-weight: var(--font-semi-bold);
+}
+
+ul {
+list-style: none;
+}
+
+a {
+text-decoration: none;
+}
+
+img {
+max-width: 100%;
+height: auto;
+}
+
+/*==================== REUSABLE CSS CLASSES ====================*/
+.section {
+padding: 2rem 0 4rem;
+}
+
+.section__title {
+font-size: var(--h1-font-size);
+color: var(--title-color);
 }
 
-hr{
-  border-style: dotted none none;
-  border-width: 0.4em;
-  width: 4%;
-  margin: 15px auto 150px;
-  border-color: #a9a9a9;
+.section__subtitle {
+display: block;
+font-size: var(--small-font-size);
+margin-bottom: var(--mb-3);
 }
 
-p{
-  font-family: 'Quicksand', sans-serif;
+.section__title, 
+.section__subtitle {
+text-align: center;
+}
+
+/*==================== LAYOUT ====================*/
+.container {
+max-width: 768px;
+margin-left: var(--mb-1-5);
+margin-right: var(--mb-1-5);
+}
+
+.grid {
+display: grid;
+gap: 1.5rem;
+}
+
+.header {
+width: 100%;
+position: fixed;
+bottom: 0;
+left: 0;
+z-index: var(--z-fixed);
+background-color: var(--body-color);
+}
+
+/*==================== NAV ====================*/
+
+.nav{
+  max-width: 968px;
+  height: var(--header-height);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.nav__logo,
+.nav__toggle{
+  color: var(--title-color);
+  font-weight: var(--font-medium);
+}
+
+.nav__logo:hover{
+  color: var(--first-color);
+}
+
+.nav__toggle{
   font-size: 1.1rem;
-  line-height: 2;
-  margin: 0 auto;
+  cursor: pointer;
 }
 
-a{
-  text-decoration: none;
+.nav__toggle:hover{
+  color: var(--first-color);
 }
 
-.contact-me{
-  margin: 0 100px 150px;
-  padding-bottom: 50px;
+@media screen and (max-width: 767px) {
+  .nav__menu{
+    position: fixed;
+    bottom: -100%;
+    left: 0;
+    width: 100%;
+    background-color: var(--body-color);
+    padding: 2rem 1.5rem 4rem;
+    box-shadow: 0 -1px 4px rgba(0, 0, 0, .15);
+    border-radius: 1.5rem 1.5rem 0 0;
+    transition: .3s;
+  }
 }
 
-.round{
-  border-radius: 100%;
-  margin-bottom: 30px;
-  width: 200px;
-  height: 200px;
-}
-
-.c-btn {
-  background: #11cdd4;
-  background-image: -webkit-linear-gradient(top, #11cdd4, #11999e);
-  background-image: -moz-linear-gradient(top, #11cdd4, #11999e);
-  background-image: -ms-linear-gradient(top, #11cdd4, #11999e);
-  background-image: -o-linear-gradient(top, #11cdd4, #11999e);
-  background-image: linear-gradient(to bottom, #11cdd4, #11999e);
-  -webkit-border-radius: 8;
-  -moz-border-radius: 8;
-  border-radius: 8px;
-  font-family: 'Montserrat', sans-serif;
-  color: #ffffff;
-  font-size: 20px;
-  margin-top: 20px;
-  padding: 10px 20px 10px 20px;
-  text-decoration: none;
-}
-
-.c-btn:hover {
-  background: #30e3cb;
-  color: white;
-  background-image: -webkit-linear-gradient(top, #30e3cb, #2bc4ad);
-  background-image: -moz-linear-gradient(top, #30e3cb, #2bc4ad);
-  background-image: -ms-linear-gradient(top, #30e3cb, #2bc4ad);
-  background-image: -o-linear-gradient(top, #30e3cb, #2bc4ad);
-  background-image: linear-gradient(to bottom, #30e3cb, #2bc4ad);
-  text-decoration: none;
-  margin: 0 auto 100px;
-}
-
-.top-cloud{
-  position: relative;
-  left: 440px;
-  height: 150px;
-  right: 250px;
-}
-
-.bottom-cloud{
-  position: relative;
-  left: 150px;
-  bottom: 196px;
-  height: 150px;
-}
-
-.mountain{
-  position: relative;
-  height: 450px;
-  top: 10%;
-  right: 8.5%;
-}
-
-.education{
-  margin: 0 100px 100px;
-  padding: 0 0 0.1px;
-}
-
-.education-row{
-  margin: 40px auto 100px;
-  width: 70%;
-  text-align: left;
+.nav__list{
+  grid-template-columns: repeat(3, 1fr);
+  gap: 2rem;
 }
 
-.skill-row{
-  margin: 40px auto 75px;
-  width: 80%;
-  text-align: left;
+.nav__link{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-size: var(--small-font-size);
+  color: var(--title-color);
+  font-weight: var(--font-medium);
 }
 
-.oriental-img{
-  width: 155px;
-  float: left;
-  margin-right: 30px;
+.nav__link:hover{
+  color: var(--first-color);
 }
 
-.miss-hill-img{
-  width: 157px;
-  float: right;
-  margin-left: 30px;
+.nav__icon{
+  font-size: 1.2rem;
 }
 
-.sanskriti-img{
-  width: 157px;
-  float: left;
-  padding: 0 28px 0 0;
+.nav__close{
+  position: absolute;
+  right: 1.3rem;
+  bottom: .5rem;
+  font-size: 1.5rem;
+  cursor: pointer;
+  color: var(--first-color);
+}
+
+.nav__close:hover{
+  color: var(--first-color-alt);
 }
 
+/* show menu */
 
-.development-img{
-  width: 270px;
-  float: left;
-  margin-right: 30px;
-  padding: 85px 0;
+.show-menu{
+  bottom: 0;
 }
 
-.PCB-img{
-  width: 250px;
-  padding: 20px 65px 60px 30px;
-  margin-right: 49px;
-  float: left;
-  /* margin-left: 30px; */
+/* Active link */
+.active-link{
+  color: var(--first-color);
 }
 
+/* Change background header */
+.scroll-header{
+  box-shadow: 0 -1px 4px rgb(0, 0, 0, .15);
+}
 
-.footer-link{
-  color: #11999E;
-  font-family: 'Merriweather', serif;
-  padding: 10px 20px;
-  text-decoration: none;
+/*==================== HOME ====================*/
+.home__container{
+  gap: 1rem;
 }
 
-.footer-link:hover{
-  color: #EAF6F6;
+.home__content{
+  grid-template-columns: .5fr 3fr;
+  padding-top: 3.5rem;
+  align-items: center;
 }
 
-.copyright{
-  color: #EAF6F6;
-  font-size: 0.75rem;
-  padding: 20px 0 0;
-  margin-block-end: 0;
+.home__social{
+  display: grid;
+  grid-template-columns: max-content;
+  row-gap: 1rem;
 }
 
-.top-container{
-  background-color: #E4F9F5;
-  padding-top: 65px;
-  height: 889px;
+.home__social-icon{
+  font-size: 1.5rem;
+  color: var(--first-color);
+
 }
 
-.middle-container{
-  padding: 190px 100px 200px;
+.home__social-icon:hover{
+  color: var(--first-color-alt);
 }
 
-.bottom-container{
-  background-color: #66BFBF;
-  padding: 50px 0 20px;
+.home__blob{
+  fill: var(--first-color);
+  width: 200px;
 }
 
-.second-last-container{
-  margin: 0 100px 250px;
+.home__blob-img{
+  width: 215px;
 }
 
-.icons{
-  padding: 2px 20px 2px;
+.home__data{
+  grid-column: 1/3;
 }
 
-.icons:hover{
-  opacity: 0.2;
+.home__title{
+  font-size: var(--big-font-size);
 }
 
-.container {
-  width: 450px;
-  height: 6px;
-  padding: 0;
-  margin: 0;
-  background-color: #ddd;
-  position: relative;
-  left: 470px;
-  bottom: 20px;
-  border-radius: 5px;
+.home__subtitle{
+  font-size: var(--h3-font-size);
+  color: var(--text-color);
+  font-weight: var(--font-medium);
+  margin-bottom: var(--mb-0-75);
 }
 
-.skills {
-  text-align: right;
-  padding-top: 2px;
-  padding-bottom: 3px;
-  color: white;
+.home__description{
+  margin-bottom: var(--mb-2);
 }
 
+.home__scroll{
+  display: none;
+}
 
-.round-circle{
-  width: 13px;
-  height: 13px;
-  border-radius: 10px;
-  position: relative;
-  bottom: 5.7px;
+.home__scroll-button{
+  color: var(--first-color);
+  transition: .3s;
 }
 
-.Javascript {
-  width: 70%;
-  height: 6px;
-  background-color: #005f99;
-  border-top-left-radius: 5px;
-  border-bottom-left-radius: 5px;
+.home__scroll-button:hover{
+  transform: translateY(.25rem);
 }
 
-.round-Javascript{
-  background-color: #005f99;
-  position: relative;
-  left: 307px;
+.home__scroll-mouse{
+  font-size: 2rem;;
 }
 
-.python {
-  width: 80%;
-  height: 6px;
-  background-color:  #66BFBF;
-  border-top-left-radius: 5px;
-  border-bottom-left-radius: 5px;
+.home__scroll-name{
+  font-size: var(--small-font-size);
+  color: var(--title-color);
+  font-weight: var(--font-medium);
+  margin-right: var(--mb-0-25);
 }
 
-.round-python{
-  background-color:  #66BFBF;
-  position: relative;
-  left: 350px;
+.home__scroll-arrow{
+  font-size: 1.25rem;
+}
+/*==================== BUTTONS ====================*/
+.button{
+  display: inline-block;
+  background-color: var(--first-color);
+  color: #fff;
+  padding: 1rem;
+  border-radius: .5rem;
+  font-weight: var(--font-medium);
 }
 
-.html-css {
-  width: 75%;
-  height: 6px;
-  background-color: #b39ceb;
-  border-top-left-radius: 5px;
-  border-bottom-left-radius: 5px;
+.button:hover{
+  background-color: var(--first-color-alt);
 }
 
-.round-html-css{
-  background-color: #b39ceb;
-  position: relative;
-  left: 335px;
+.button__icon{
+  font-size: 1.25rem;
+  margin-left: var(--mb-0-5);
+  transition: .3s;
 }
 
-.express {
-  width: 71%;
-  height: 6px;
-  background-color: #2196F3;
-  border-top-left-radius: 5px;
-  border-bottom-left-radius: 5px;
+.button--flex{
+  display: inline-flex;
+  align-items: center;
 }
 
-.round-express{
-  background-color: #2196F3;
-  position: relative;
-  left: 317px;
+
+
+/*==================== ABOUT ====================*/
+.about__img{
+  width: 200px;
+  border-radius: .5rem;
+  justify-self: center;
+  align-self: center;
 }
 
-.node {
-  width: 68%;
-  height: 6px;
-  background-color: #FF449F;
-  border-top-left-radius: 5px;
-  border-bottom-left-radius: 5px;
+.about__description{
+  text-align: center;
+  margin-bottom: var(--mb-2-5);
 }
 
-.round-node{
-  background-color: #FF449F;
-  position: relative;
-  left: 295px;
+.about__info{
+  display: flex;
+  justify-content: space-evenly;
+  margin-bottom: var(--mb-2-5);
 }
 
-.mongo {
-  width: 65%;
-  height: 6px;
-  background-color: #04AA6D;
-  border-top-left-radius: 5px;
-  border-bottom-left-radius: 5px;
+.about__info-title{
+  font-size: var(--h2-font-size);
+  font-weight: var(--font-semi-bold);
+  color: var(--title-color);
 }
 
-.round-mongo{
-  background-color: #04AA6D;
-  position: relative;
-  left: 290px;
+.about__info-name{
+  font-size: var(--smaller-font-size);
 }
 
-.embedded {
-  width: 70%;
-  height: 6px;
-  background-color: #005f99;
-  border-top-left-radius: 5px;
-  border-bottom-left-radius: 5px;
+.about__info-title,
+.about__info-name{
+  display: block;
+  text-align: center;
+}
+
+.about__buttons{
+  display: flex;
+  justify-content: center ;
+}
+/*==================== SKILLS ====================*/
+
+.skills__container{
+  row-gap: 0;
+}
+
+.skills__header{
+  display: flex;
+  justify-content: center;
+  margin-bottom: var(--mb-2-5);
+  cursor: pointer;
+  align-items: center;
+}
+
+.skills__icon,
+.skills__arrow{
+  font-size: 2rem;
+  color: var(--first-color);
+}
+
+.skills__icon{
+  margin-right: var(--mb-0-75);
+}
+
+.skills__title{
+  font-size: var(--h3-font-size);
 }
 
-.PCB {
-  width: 85%;
-  height: 6px;
-  background-color: #b39ceb;
-  border-top-left-radius: 5px;
-  border-bottom-left-radius: 5px;
+.skills__subtitle{
+  font-size: var(--small-font-size);
+  color: var(--text-color-light);
 }
 
-.round-PCB{
-  background-color: #b39ceb;
-  position: relative;
-  left: 380px;
+.skills__list{
+  row-gap: 1.5rem;
+  padding-left: 2.7rem;
 }
 
-.round-embedded{
-  background-color: #005f99;
-  position: relative;
-  left: 310px;
+.skills__arrow{
+  margin-left: auto;
+  transition: .4s;
 }
 
-.easyeda {
+.skills__title{
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: var(--mb-0-5);
+}
+
+.skills__bar,
+.skills__percentage{
+  height: 5px;
+  border-radius: .25rem;
+}
+
+.skills__bar{
+  background-color: var(--first-color-lighter);
+}
+
+.skills__percentage{
+  display: block;
+  background-color: var(--first-color);
+}
+
+.skills__html{
   width: 80%;
-  height: 6px;
-  background-color: #FF449F;
-  border-top-left-radius: 5px;
-  border-bottom-left-radius: 5px;
 }
 
-.round-easyeda{
-  background-color: #FF449F;
-  position: relative;
-  left: 350px;
+.skills__css{
+  width: 70%;
 }
 
-.micro{
-  width: 68%;
-  height: 6px;
-  background-color: #2196F3;
-  border-top-left-radius: 5px;
-  border-bottom-left-radius: 5px;
+.skills__js{
+  width: 40%;
 }
 
-.round-micro{
-  background-color: #2196F3;
-  position: relative;
-  left: 295px;
+.skills__java{
+  width: 60%;
 }
 
-.spacing{
-  margin-top: 25px;
+.skills__spring-boot{
+  width: 50%;
 }
 
-.card{
-  display: inline-block;
-  margin: 20px 20px;
-  text-align: left;
-  font-family: 'Montserrat';
-  line-height: 1.5;
+.skills__python{
+  width: 70%;
 }
 
-.card .card-body .card-text{
-  line-height: 1.5;
+.skills__close .skills__list{
+  height: 0;
+  overflow: hidden;
 }
 
-.rak-space{
-  width: 101%;
+.skills__open .skills__list{
+  height: max-content;
+  margin-bottom: var(--mb-2-5);
 }
 
-.card-title{
-  width: 103%;
+.skills__open .skills__arrow{
+  transform: rotate(-180deg);
 }
 
-.btn{
-  margin: 12px 0 5px;
+/*==================== QUALIFICATION ====================*/
+
+.qualification__tabs{
+  display: flex;
+  justify-content: space-evenly;
+  margin-bottom: var(--mb-2);
 }
 
-.custom-btn{
-  z-index: 1;
+.qualification__button{
+  font-size: var(--h3-font-size);
+  font-weight: var(--font-medium);
+  cursor: pointer;
 }
 
-#navbar{
-  padding: 0 20px;
-  position: fixed;
-  z-index: 1;
-  top: -100px;
-  width: 100%;
-  transition: top 0.8s;
- }
+.qualification__button:hover{
+  color: var(--first-color);
+}
 
-.nav-sign-size{
-  width: 22%;
-  position: relative;
-  right: 550px;
-  top: -2px
+.qualification__icon{
+  font-size: 1.8rem;
+  margin-right: var(--mb-0-25);
 }
 
-.nav-resume-size p{
-  display: inline-block;
-  font-family: 'Shadows Into Light', cursive;
-  font-size: 1.2rem;
-  padding: 3px 5px 20px;
-  color: black;
-  position: absolute;
-  top: 15px;
-  right: 135px;
+.qualtifaction__data{
+  display: grid;
+  grid-template-columns: 1fr max-content 1fr;
+  column-gap: 1.5rem;
 }
 
-.nav-resume-size:hover p{
-  border-bottom: 3px solid;
-  border-color: #66BFBF;
+.qualification__title{
+  font-size: var(--normal-font-size);
+  font-weight: var(--font-medium);
 }
 
-.nav-blog-size p{
+.qualification__subtitle{
   display: inline-block;
-  font-family: 'Shadows Into Light', cursive;
-  font-size: 1.2rem;
-  padding: 3px 5px 20px;
-  color: black;
-  position: absolute;
-  top: 15px;
-  right: 406px;
+  font-size: var(--small-font-size);
+  margin-bottom: var(--mb-1);
 }
 
-.nav-blog-size:hover p{
-  border-bottom: 3px solid;
-  border-color: #66BFBF;
+.qualification__calendar{
+  font-size: var(--smaller-font-size);
+  color: var(--text-color-light)
 }
 
-.nav-github-size p{
+.qualification__rounder{
   display: inline-block;
-  font-family: 'Shadows Into Light', cursive;
-  font-size: 1.2rem;
-  padding: 3px 5px 20px;
-  color: black;
-  position: absolute;
-  top: 15px;
-  right: 325px;
+  width: 13px;
+  height: 13px;
+  background-color: var(--first-color);
+  border-radius: 50%;
 }
 
-.nav-github-size:hover p{
-  border-bottom: 3px solid;
-  border-color: #66BFBF;
+.qualification__line{
+  display: block;
+  width: 1px;
+  height: 100%;
+  background-color: var(--first-color);
+  transform: translate(6px, -7px);
 }
 
-.nav-linkedin-size p{
-  display: inline-block;
-  font-family: 'Shadows Into Light', cursive;
-  font-size: 1.2rem;
-  padding: 3px 5px 20px;
-  color: black;
-  position: absolute;
-  top: 15px;
-  right: 230px;
+.qualification [data-content]{
+  display: none;
+}
+
+.qualification__active[data-content]{
+  display: block;
+}
+
+.qualification__button.qualification__active{
+  color: var(--first-color);
+}
+
+
+/*==================== PORTFOLIO ====================*/
+
+
+/*==================== CONTACT ME ====================*/
+
+.contact__container{
+  row-gap: 3rem;
 }
 
-.nav-linkedin-size:hover p{
-  border-bottom: 3px solid;
-  border-color: #66BFBF;
+.contact__information{
+  display: flex;
+  margin-bottom: var(--mb-2)
 }
 
-.c-cards{
-  width: 18rem;
-  transition: transform .2s;
+.contact__icon{
+  font-size: 2rem;
+  color: var(--first-color);
+  margin-right: var(--mb-0-75);
 }
 
-.c-cards:hover{
-  -ms-transform: scale(1.050);
-  -webkit-transform: scale(1.050);
-  transform: scale(1.050);
+.contact__title{
+  font-size: var(--h3-font-size);
+  font-weight: var(--font-medium);
 }
 
-.c-button{
-  border-radius: 1px;
-  border: 1px solid black;
-  background-color: transparent;
-  color: black;
+.contact__subtitle{
+  font-size: var(--small-font-size);
+  color: var(--text-color-light);
 }
 
-.c-button:hover{
-  background-color: black;
-  border: 1px solid black;
-  color: white;
+.contact__content{
+  background-color: var(--input-color);
+  border-radius: .5rem;
+  padding: .75rem 1rem .25rem;
 }
 
-.fa-stack-overflow{
-  position: relative;
-  top: 6px;
-  color: #222426;
+.contact__label{
+  font-size: var(--smaller-font-size);
+  color: var(--title-color);
 }
 
-.c-style{
-  margin-bottom: 100px;
+.contact__input{
+  width: 100%;
+  background-color: var(--input-color);
+  color: var(--text-color);
+  font-family: var(--body-font);
+  font-size: var(--normal-font-size);
+  border: none;
+  outline: none;
+  padding: .25rem .5rem .5rem 0rem;
+}
 
+/*==================== FOOTER ====================*/
+.footer{
+  padding-top: 2em;
 }
 
-.eda{
-  width: 45px;
-  height: 45px;
+.footer__container{
+  row-gap: 3.5rem;
 }
 
-.icon{
-  padding: 2px 4px 2px 10px;
+.footer__bg{
+  background-color: var(--first-color-second);
+  padding: 2rem 0 3rem;;
 }
 
-.icon:hover{
-  opacity: 0.2;
+.footer__title{
+  font-size: var(--h1-font-size);
+  margin-bottom: var(--mb-0-25);
 }
 
-.font-aw{
-  position: relative;
-  top: 7px;
-  color: black;
+.footer__subtitle{
+  font-size: var(--small-font-size);
 }
 
-.university{
-  position: absolute;
-  top: 1780px;
-  right: 1px;
-  width: 1525px;
-  height: 840px;
-  opacity: 0.12;
+.footer__links{
+  display: flex;
+  flex-direction: column;
+  row-gap: 1.5rem;
 }
 
-.project-back{
-  position: absolute;
-  width: 1515px;
-  height: 1000px;
-  right: 2px;
-  top: 4050px;
-  -webkit-filter: blur(2px); /* Safari 6.0 - 9.0 */
-  filter: blur(2px);
+.footer__link:hover{
+  color: var(--first-color-lighter);
 }
 
+.footer__rights{
+  font-size: var(--smaller-font-size);
+  text-align: center;
+  color: var(--text-color-light);
+  margin-top: var(--mb-3);
+}
 
-.footer-msg{
-  font-size: 1.2rem;
+.footer__title,
+.footer__subtitle,
+.footer__link{
+  color: #fff;
+}
+/*========== SCROLL UP ==========*/
+.scrollup{
+  position: fixed;
+  right: 1rem;
+  bottom: -20%;
+  background-color: var(--first-color);
+  opacity: 0.8;
+  padding: 0 .3rem;
+  border-radius: 0.4rem;
+  z-index: var(--z-tooltip);
+  transition: .4s;
 }
 
-.c-bold{
-  font-weight: bold;
+.scrollup:hover{
+  background-color: var(--first-color-alt);
 }
 
-@media screen and (max-width: 800px) and (min-width: 381px){
-  body{
-    position: relative;
-    width: 1110px;
-  }
-  h1{
-    font-size: 6rem;
-    margin-top: 50px;
-  }
-  h2{
-    margin-top: 10px;
-    font-size: 2rem;
-  }
-  .mountain{
-    height: 440px;
-    width: 940px;
-    position: relative;
-    top: -0.5px;
-    right: 10px;
+.scrollup__icon{
+  font-size: 1.5rem;
+  color: #fff;
+}
+
+/* Show scroll */
+.scrollup__show{
+  bottom: 5rem;
+}
+
+/*========== SCROLL BAR ==========*/
+/* ::-webkit-scrollbar{
+  width: .60rem;
+  background-color: var(--scroll-bar-color);
+  border-radius: 0.5rem;
+} */
+
+::-webkit-scrollbar-thumb{
+  background-color: var(--scroll-thumb-color);
+  border-radius: 0.5rem;
+}
+
+/*==================== MEDIA QUERIES ====================*/
+/* For small devices */
+
+@media screen and (max-width: 350px) {
+  .container{
+    margin-left: var(--mb-1);
+    margin-right: var(--mb-1);
   }
 
-  .top-cloud{
-    left: 350px;
-    bottom: -30px;
-    height: 120px;
+  .nav__menu{
+    padding: 2rem .25rem 4rem
   }
 
-  .bottom-cloud{
-    left: -300px;
-    bottom: 30px;
-    height: 120px;
+  .nav__list{
+    column-gap: 0;
   }
 
-  #navbar{
-    height: 100px;
+  .home__content{
+    grid-template-columns: .25fr 3fr;
   }
 
-  .nav-sign-size{
-    width: 40%;
-    position: absolute;
-    left: -20px;
-    top: -10px;
+  .home__blob{
+    width: 180px;
   }
 
-  .nav-resume-size p{
-    top: 25px;
-    font-size: 1.4rem;
-    right: 100px;
-    padding: 7px 0 20px;
+  .skills_title{
+    font-size: var(--normal-font-size);
   }
 
-  .nav-blog-size p{
-    top: 25px;
-    font-size: 1.4rem;
-    right: 400px;
-    padding: 7px 0 20px;
+  .skills__title{
+    font-size: var(--small-font-size);
   }
 
-  .nav-github-size p{
-    top: 25px;
-    font-size: 1.4rem;
-    right: 300px;
-    padding: 7px 0 20px;
+  .qualtifaction__data{
+    gap: .4rem;
   }
-  .nav-linkedin-size p{
-    top: 25px;
-    font-size: 1.4rem;
-    right: 200px;
-    padding: 7px 0 20px 0;
+
+  .qualification__title{
+    font-size: var(--small-font-size);
   }
-  .top-container{
-    padding-top: 65px;
-    height: 966px;
+
+  .qualification__subtitle{
+    font-size: var(--smaller-font-size);
   }
-  .education{
-    margin: 0 5px;
-    padding: 0 0 0.1px;
+}
+
+/* For medium devices */
+
+@media screen and (min-width: 568px) {
+  .home__content{
+    grid-template-columns: max-content 1fr 1fr;
   }
-  .development-img{
-    padding: 50px 0;
-    width: 250px;
+  
+  .home__data{
+    grid-column: initial;
   }
-  .PCB-img{
-    width: 200px;
-    margin: 0 55px 0 25px;
-    padding: 0 26px 25px;
+
+  .home__img{
+    order: 1;
+    justify-self: center;
   }
-  .container {
-    position: relative;
-    left: 440px;
+
+  .skills__title{
+    font-size: var(--small-font-size);
   }
-  .university{
-    position: absolute;
-    width: 1109px;
-    top: 1900px;
-    left: 0px;
+
+  .about__container,
+  .skills__container,
+  .contact__container,
+  .footer__container{
+    grid-template-columns: repeat(2, 1fr);
   }
-  .project-back{
-    display: none;
+
+  .qualification__section{
+    display: grid;
+    grid-template-columns: .6fr;
+    justify-content: center;
   }
 }
 
-@media (max-width: 380px){
-
+@media screen and (min-width: 768px) {
+  .container{
+    margin-left: auto;
+    margin-right: auto;
+  }
+  
   body{
-    width: 465px;
+    margin: 0;
   }
-
-  h1{
-    font-size: 4rem;
+  .section{
+    padding: 6rem 0 2rem;
   }
-  h2{
-    font-size: 1.3rem;
+
+  .section__subtitle{
+    margin-bottom: 4rem;
   }
-  h4{
-    font-size: 1.3rem;
+
+  .header{
+    top: 0;
+    bottom: initial;
   }
-  hr{
-    border-width: 0.3em;
-    width: 5%;
+
+  .header,
+  .main,
+  .footer__container{
+    padding: 0 1rem;
   }
 
-  #navbar{
-    height: 95px;
+  .nav{
+    height: calc(var(--header-height) + 1.5rem);
+    column-gap: 1rem;
   }
 
-  .nav-sign-size{
-    width: 50%;
-    position: relative;
-    right: -4px;
-    top: -13px
+  .nav__icon,
+  .nav__close,
+  .nav__toggle{
+    display: none;
   }
 
-  .nav-blog-size p{
-    top: 38px;
-    right: 360px;
-    padding: 8px 0;
+  .nav__list{
+    display: flex;
+    column-gap: 2em;
   }
 
-  .nav-github-size p{
-    top: 38px;
-    right: 275px;
-    padding: 8px 0;
+  .nav__menu{
+    margin-left: auto;
   }
-  .nav-linkedin-size p{
-    top: 38px;
-    right: 175px;
-    padding: 8px 0;
+
+  .change-theme{
+    margin: 0;
   }
 
-  .nav-resume-size p{
-    top: 38px;
-    right: 75px;
-    padding: 8px 0;
+  .home__container{
+    row-gap: 5rem;
   }
 
-  .top-container{
-    padding-top: 65px;
-    height: 575px;
+  .home__content{
+    padding-top: 5.5rem;
+    column-gap: 2rem;
   }
-  .mountain{
-    height: 225px;
-    width: 450px;
-    position: relative;
-    top: 3%;
-    right: 2%;
+  
+  .home__blob{
+    width: 270px;
   }
 
-  .top-cloud{
-    left: 150px;
-    right: 50px;
-    bottom: 10px;
-    height: 80px;
+  .home__scroll{
+    display: block;
   }
 
-  .bottom-cloud{
-    left: -148px;
-    bottom: 20px;
-    height: 80px;
+  .home__scroll-button{
+    margin-left: 3rem;
   }
 
-  .education{
-    margin: 0 10px;
-    padding: 0 0 0.1px;
+  .about__container{
+    column-gap: 5rem;
   }
 
-  .oriental-img{
-    position: relative;
-    margin-right: 50px;
-    left: 80px;
+  .about__img{
+    width: 350px;
   }
 
-  .miss-hill-img{
-    position: relative;
-    margin-left: 100px;
-    right: 80px;
-  }
-  .sanskriti-img{
-    padding: 0 28px 13px 0;
-    margin: 0 75px 0;
-  }
-  .development-img{
-    margin-left: 80px;
-    padding: 10px 0 10px;
-    width: 200px;
-  }
-  .PCB-img{
-    width: 200px;
-    margin: 0 40px 0 75px;
-    padding: 0 26px 25px;
-  }
-  .container {
-    width: 200px;
-    left: 143px;
-    bottom: 20px;
-    border-radius: 5px;
+  .about__description{
+    text-align: initial;
   }
 
-  .round-circle{
-    width: 11px;
-    height: 11px;
-    border-radius: 100%;
-    position: relative;
-    bottom: 4.9px;
-  }
-  .round-Javascript{
-    left: 137px;
-  }
-  .round-python{
-    left: 155px;
+  .about__info{
+    justify-content: space-between;
   }
-  .round-html-css{
-    left: 147px;
+
+  .about__buttons{
+    justify-content: initial;
   }
-  .round-express{
-    left: 135px;
+
+  .qualification__tabs{
+    justify-content: center;
   }
-  .round-node{
-    left: 130px;
+
+  .qualification__button{
+    margin: 0 var(--mb-2);
+  } 
+
+  .footer__bg{
+    padding: 3rem 0 3.5rem;
   }
-  .round-mongo{
-    left: 127px;
+
+  .footer__links{
+    flex-direction: row;
+    column-gap: 2rem;
   }
-  .round-PCB{
-    left: 165px;
+
+  .footer__copy{
+    margin-top: 4.5em;
   }
+}
 
-  .round-embedded{
-    left: 138px;
+/* For large devices */
+@media screen and (min-width: 1024px) {
+  .header,
+  .main,
+  .footer__container{
+    padding: 0;
   }
-  .round-easyeda{
-    left: 150px;
+
+  .home__blob{
+    width: 320px;
   }
-  .round-micro{
-    left: 129px;
+
+  .home__social{
+    transform: translateX(-6rem);
   }
-  .c-cards{
-    width: 15rem;
+
+  .services__container{
+    grid-template-columns: repeat(3, 238px); 
   }
-  .university{
-    display: none;
+
+  .contact__form{
+    width: 460px;
   }
-  .project-back{
-    display: none;
+
+  .contact__inputs{
+    grid-template-columns: repeat(2, 1fr);
   }
-}
+
+}
\ No newline at end of file
diff --git a/files/Resume_harshit_gupta.pdf b/files/Resume_harshit_gupta.pdf
new file mode 100644
index 0000000..7588175
Binary files /dev/null and b/files/Resume_harshit_gupta.pdf differ
diff --git a/img/about.png b/img/about.png
new file mode 100644
index 0000000..2408f96
Binary files /dev/null and b/img/about.png differ
diff --git a/img/blob.svg b/img/blob.svg
new file mode 100644
index 0000000..29dea02
--- /dev/null
+++ b/img/blob.svg
@@ -0,0 +1,15 @@
+<svg viewBox="0 0 200 187" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <mask id="mask0" mask-type="alpha">
+        <path d="M190.312 36.4879C206.582 62.1187 201.309 102.826 182.328 134.186C163.346 165.547 
+        130.807 187.559 100.226 186.353C69.6454 185.297 41.0228 161.023 21.7403 129.362C2.45775 
+        97.8511 -7.48481 59.1033 6.67581 34.5279C20.9871 10.1032 59.7028 -0.149132 97.9666 
+        0.00163737C136.23 0.303176 174.193 10.857 190.312 36.4879Z"/>
+    </mask>
+    <g mask="url(#mask0)">
+        <path d="M190.312 36.4879C206.582 62.1187 201.309 102.826 182.328 134.186C163.346 
+        165.547 130.807 187.559 100.226 186.353C69.6454 185.297 41.0228 161.023 21.7403 
+        129.362C2.45775 97.8511 -7.48481 59.1033 6.67581 34.5279C20.9871 10.1032 59.7028 
+        -0.149132 97.9666 0.00163737C136.23 0.303176 174.193 10.857 190.312 36.4879Z"/>
+        <image href=""/>
+    </g>
+</svg>
diff --git a/img/harshit.png b/img/harshit.png
new file mode 100644
index 0000000..73e5263
Binary files /dev/null and b/img/harshit.png differ
diff --git a/index.html b/index.html
index 0fa5eab..c69ad50 100644
--- a/index.html
+++ b/index.html
@@ -4,233 +4,490 @@
 <head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta charset="utf-8">
+
   <title>Harshit Gupta</title>
-  <script src="https://use.fontawesome.com/5d7b702657.js"></script>
-  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
+  
+  <!-- Css style sheet -->
   <link rel="stylesheet" href="css/styles.css">
-  <link rel="icon" href="favicon.ico">
-  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
-  <link href="https://fonts.googleapis.com/css2?family=Quicksand&display=swap" rel="stylesheet">
-  <link href="https://fonts.googleapis.com/css2?family=Merriweather&family=Montserrat&family=Sacramento&display=swap" rel="stylesheet">
-  <link rel="preconnect" href="https://fonts.gstatic.com">
-  <link href="https://fonts.googleapis.com/css2?family=Shadows+Into+Light&display=swap" rel="stylesheet">
-
-  <nav id="navbar" class="navbar bg-light">
-    <a href="index.html"> <img class="nav-sign-size" src="Images/signature.png" alt="signature"> </a>
-    <a class="sign nav-blog-size" target="_blank" href="https://www.harshitgupta.co.in/"><p>Blogs</p></a>
-    <a class="sign nav-github-size" target="_blank" href="https://github.com/harshitg123/"><p>Github</p></a>
-    <a class="sign nav-linkedin-size" target="_blank" href="https://www.linkedin.com/in/harshit-gupta-38377117b/"><p>Linkedin</p></a>
-    <a class="sign nav-resume-size" target="_blank" href="https://drive.google.com/file/d/1Cd_bWYADrw6Yz6AnGh2BYwZHkPdoKA3B/view?usp=sharing"><p>Resume</p></a>
-  </nav>
 
+  <!-- Unicons -->
+  <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.8/css/line.css">
 </head>
 
 <body>
-  <div class="top-container container-fluid">
-    <img class="top-cloud"src="Images/cloud.png" alt="cloud-image." />
-      <h1>I'm Harshit.</h1>
-      <h2>a web developer & budding youtuber.</h2>
-    <img class="bottom-cloud" src="Images/cloud.png" alt="cloud-image.">
-    <img class="mountain" src="Images/mountain.png" alt="mountain-image.">
-  </div>
-
-  <div class="middle-container">
-    <img class="round" src="Images/Harshit.jpg" alt="harshit's image">
-    <h3>Hey, There</h3>
-    <p class="spacing">
-      I'm an independent web developer who is passionate about web development, I'm an undergraduate student, IoT enthusiast & self-learned programmer.
-        I am eager to hear about potential career opportunities, so I would be pleased to chat about job openings in the engineering sphere.
-    </p>
-  </div>
-
-    <hr>
-
-<!--- EDUCATION --->
-
-  <div class="education">
-    <h1>Education</h1>
-    <img class="university" src="Images/university.jpg" alt="">
-    <div class="education-row">
-      <img class="oriental-img" src="Images/logo.png" alt="computer images">
-      <h4>Electronics & Communication Engineering</h4>
-      <p class="c-bold">
-        Pursuing B.Tech from Oriental Institute of Science and Technology, Bhopal M.P,
-        I am in third year of my engineering with the score of 8.59/10 C.G.P.A.
-      </p>
-    </div>
 
-    <div class="education-row">
-      <img class="miss-hill-img" src="Images/miss hill.png" alt="pcb image">
-      <h4>Higher Secondary Education</h4>
-      <p class="c-bold">
-        I have completed my higher secondary education in 2018, from Miss Hill Higher
-        Secondary school, Gwalior M.P with a score of 76.4 percentile.
-      </p>
-    </div>
+  <header class="header" id="header">
+    <nav class="nav container">
+      <a href="#" class="nav__logo">Harshit</a>
+
+      <div class="nav__menu" id="nav-menu">
+        <ul class="nav__list grid">
+          <li class="nav__item">
+            <a href="#home" class="nav__link active-link">
+              <i class="uil uil-estate nav__icon"></i> Home
+            </a>
+          </li>
+          <li class="nav__item">
+            <a href="#about" class="nav__link"> 
+              <i class="uil uil-user nav__icon"></i> About
+            </a>
+          </li>
+          <li class="nav__item">
+            <a href="#skills" class="nav__link">
+              <i class="uil uil-file-alt nav__icon"></i> Skills
+            </a>
+          </li>
+          <li class="nav__item">
+            <a href="#qualifications" class="nav__link">
+              <i class="uil uil-briefcase-alt nav__icon"></i> Qualifications
+            </a>
+          </li>
+          <li class="nav__item">
+            <a href="#portfolio" class="nav__link">
+              <i class="uil uil-scenery nav__icon"></i> Portfolio
+            </a>
+          </li>
+          <li class="nav__item">
+            <a href="#contact" class="nav__link">
+              <i class="uil uil-message nav__icon"></i> Contactme
+            </a>
+          </li>
+        </ul>
+        <i class="uil uil-times nav__close" id="nav-close"></i>
+      </div>
 
-    <div class="education-row">
-      <img class="sanskriti-img" src="Images/sanskriti.jfif">
-      <h4>High School Education</h4>
-      <p class="c-bold">
-        I have completed my high school education in 2016, from sanskriti public
-        school, Karera M.P with a score of 9.6/10 C.G.P.A.
-      </p>
-    </div>
-  </div>
+      <div class="nav__btns">
 
-  <hr>
+        <i class="uil uil-moon change-theme" id="theme-button"></i>
 
-<!--- SKILLS --->
+        <div class="nav__toggle" id="nav-toggle">
+          <i class="uil uil-apps"></i>
+        </div>
+      </div>
+    </nav>
+  </header>
 
-  <div class="education">
+  <main class="main">
 
-    <h1>Skills</h1>
+    <!-- Home -->
 
-    <div class="skill-row">
-      <img class="development-img" src="Images/development-la.png" alt="computer images">
-      <h4>Design & Development</h4>
+    <section class="home section" id="home">
+      <div class="container home__container grid">
+        <div class="home__content grid">
+          
+          <div href="" class="home__social">
+            <a href="https://www.linkedin.com/in/harshit-gupta-38377117b/" target="_blank" class="home__social-icon">
+              <i class="uil uil-linkedin-alt"></i>
+            </a>
+
+            <a href="https://github.com/harshitg123" target="_blank" class="home__social-icon">
+              <i class="uil uil-github-alt"></i>
+            </a>
+          </div>
 
-      <p>Python</p>
-      <div title="80%" class="container">
-        <div class="skills python">
-          <div class="round-circle round-python">
+          <div class="home__img">
+            <svg class="home__blob" viewBox="0 0 200 187" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+              <mask id="mask0" mask-type="alpha">
+                  <path d="M190.312 36.4879C206.582 62.1187 201.309 102.826 182.328 134.186C163.346 165.547 
+                  130.807 187.559 100.226 186.353C69.6454 185.297 41.0228 161.023 21.7403 129.362C2.45775 
+                  97.8511 -7.48481 59.1033 6.67581 34.5279C20.9871 10.1032 59.7028 -0.149132 97.9666 
+                  0.00163737C136.23 0.303176 174.193 10.857 190.312 36.4879Z"/>
+              </mask>
+              <g mask="url(#mask0)">
+                  <path d="M190.312 36.4879C206.582 62.1187 201.309 102.826 182.328 134.186C163.346 
+                  165.547 130.807 187.559 100.226 186.353C69.6454 185.297 41.0228 161.023 21.7403 
+                  129.362C2.45775 97.8511 -7.48481 59.1033 6.67581 34.5279C20.9871 10.1032 59.7028 
+                  -0.149132 97.9666 0.00163737C136.23 0.303176 174.193 10.857 190.312 36.4879Z"/>
+
+                  <image class="home__blob-img" x=0 y=20 href="img/harshit.png"/>
+
+              </g>
+          </svg>
+          </div>
 
+          <div class="home__data">
+            <h1 class="home__title">Hi, I'm Harshit</h1>
+            <h3 class="home__subtitle">Fullstack developer</h3>
+            <p class="home__description">
+              Mid level experience in Web development, delevering quality work.
+            </p>
+            <a href="#contact" class="button button--flex">
+              Contact me <i class="uil uil-message button__icon"></i>
+            </a>
           </div>
+
         </div>
-      </div>
 
-      <p>Javascript</p>
-      <div title="70%" class="container">
-        <div class="skills Javascript"> <div class="round-circle round-Javascript"> </div> </div>
+        <div class="home__scroll">
+          <a href="#about" class="home__scroll-button button--flex">
+            <i class="uil uil-mouse-alt home__scroll-mouse"></i>
+            <span class="home__scroll-name">Scroll down</span>
+            <i class="uil uil-arrow-down home__scroll-arrow"></i>
+          </a>
       </div>
 
-      <p>HTML/CSS</p>
-      <div title="75%" class="container">
-        <div class="skills html-css"> <div class="round-circle round-html-css"> </div> </div>
-      </div>
+    </section>
 
-      <p>Express.js</p>
-      <div title="71%" class="container">
-        <div class="skills express"> <div class="round-circle round-express"> </div> </div>
-      </div>
+    <!-- About -->
 
-      <p>Node.js</p>
-      <div title="68%" class="container">
-        <div class="skills node"> <div class="round-circle round-node"> </div> </div>
-      </div>
+    <section class="about section" id="about">
+      <h2 class="section__title">About Me</h2>
+      <span class="section__subtitle">My introduction</span>
 
-      <p>MongoDB</p>
-      <div title="65%" class="container">
-        <div class="skills mongo"> <div class="round-circle round-mongo"> </div> </div>
-      </div>
+      <div class="about__container container grid">
+        <img src="img/about.png" alt="" class="about__img">
 
-    </div>
+        <div class="about__data">
+          <p class="about__description">Fullstack developer, with extensive knowledge and years of experience, working in fullstack technologies, delevering quality work.</p>
 
-    <div class="skill-row">
-      <img class="PCB-img" src="Images/PCB.png" alt="pcb image">
-      <h4>Electronics</h4>
+          <div class="about__info">
+            <div>
+              <span class="about__info-title">01+</span>
+              <span class="about__info-name">Years <br> experience</span>
+            </div>
 
-      <p>PCB Design</p>
-      <div title="85%"class="container">
-        <div class="skills PCB"> <div class="round-circle round-PCB"> </div> </div>
-      </div>
+            <div>
+              <span class="about__info-title">03+</span>
+              <span class="about__info-name">Completed <br> projects</span>
+            </div>
 
-      <p>EasyEda</p>
-      <div title="80%" class="container">
-        <div class="skills easyeda"> <div class="round-circle round-easyeda"> </div> </div>
-      </div>
+            <div>
+              <span class="about__info-title">01</span>
+              <span class="about__info-name">Company <br> worked</span>
+            </div>
+          </div>
 
-      <p>Embedded C</p>
-      <div title="70%" class="container">
-        <div class="skills node embedded"> <div class="round-circle round-embedded"> </div> </div>
+          <div class="about__buttons">
+            <a download="" href="files/Resume_harshit_gupta.pdf" class="button button--flex">
+              Download Resume<i class="uil uil-download-alt button__icon"></i>
+            </a>
+          </div>
+        </div>
       </div>
+    </section>
 
-      <p>Micro-controllers</p>
-      <div title="68%" class="container">
-        <div class="skills micro"> <div class="round-circle round-micro"> </div> </div>
-      </div>
-    </div>
-  </div>
+    <!-- Skills -->
 
-  <hr>
+    <section class="section skills" id="skills">
+      <h2 class="section__title">Skills</h2>
+      <span class="section__subtitle">My technical level</span>
 
-  <div class="second-last-container"> <!--middle container added for padding -->
-    <h1 class="c-style">Projects</h1>
+      <div class="skills__container container grid">
 
-    <img class="project-back" src="Images/project-back.jpg" alt="">
+        <div class="skills__content skills__open">
+          <div class="skills__header">
+            <i class="uil uil-brackets-curly skills__icon"></i>
 
-    <div class="card c-cards">
-      <img class="card-img-top " src="Images/project-1.jpg" alt="Card image cap">
-      <div class="card-body">
-        <h5 class="card-title">Robotic Hand</h5>
-        <p class="card-text c-spacing">Robotic hand developed after small research on human hand anatomy.</p>
-        <a target="_blank" href="https://www.linkedin.com/feed/update/urn:li:activity:6615848272772853760/" class="c-button btn btn-primary">More Details</a>
-      </div>
-    </div>
+            <div>
+              <h1 class="skills_title">Frontend developer</h1>
+              <span class="skills__subtitle">More than 1 years</span>
+            </div>
 
-    <div class="card c-cards">
-      <img class="card-img-top " src="Images/project-2.jpg" alt="Card image cap">
-      <div class="card-body">
-        <h5 class="card-title">Tech Journal</h5>
-        <p class="card-text">Blogging application for posting projects & technical blogs.</p>
-        <a target="_blank" href="https://www.harshitgupta.co.in/" class="c-button btn btn-primary">More Details</a>
-      </div>
-    </div>
+            <i class="uil uil-angle-down skills__down skills__arrow"></i>
+          </div>
 
-    <div class="card c-cards">
-      <img class="card-img-top " src="Images/pro-pcb.jpg" alt="Card image cap">
-      <div class="card-body">
-        <h5 class="card-title">Breadboard Power Supply</h5>
-        <p class="card-text">PCB for breadboard to supply power (Independent from batteries).</p>
-        <a target="_blank" href="https://oshwlab.com/harshit.28.sps/bread-bord-power-supply" class="c-button btn btn-primary">More Details</a>
-      </div>
-    </div>
+          <div class="skills__list grid">
+            
+            <div class="skills__data">
+              <div class="skills__title">
+                <h3 class="skills__name">HTML</h3>
+                <span class="skills_number">80%</span>
+              </div>
+
+              <div class="skills__bar">
+                <span class="skills__percentage skills__html"></span>
+              </div>
+            </div>
+
+            <div class="skills__data">
+              <div class="skills__title">
+                <h3 class="skills__name">CSS</h3>
+                <span class="skills_number">70%</span>
+              </div>
+
+              <div class="skills__bar">
+                <span class="skills__percentage skills__css"></span>
+              </div>
+            </div>
+
+            <div class="skills__data">
+              <div class="skills__title">
+                <h3 class="skills__name">Javascript</h3>
+                <span class="skills_number">40%</span>
+              </div>
+
+              <div class="skills__bar">
+                <span class="skills__percentage skills__js"></span>
+              </div>
+            </div>
 
-    <div class="card c-cards">
-      <img class="card-img-top " src="Images/PCB-home automation.jpg" alt="Card image cap">
-      <div class="card-body">
-        <h5 class="card-title">Home Automation</h5>
-        <p class="card-text">PCB for controling upto 4 electronics appliance over the internet using (IoT).</p>
-        <a target="_blank" href="https://oshwlab.com/harshit.28.sps/alexa-home-automation" class="c-button btn btn-primary">More Details</a>
-      </div>
-    </div>
+          </div>
+
+        </div>
+
+        <div class="skills__content skills__close">
+          
+          <div class="skills__header">
+            <i class="uil uil-server-network skills__icon"></i>
+
+            <div>
+              <h1 class="skills_title">Backend developer</h1>
+              <span class="skills__subtitle">More than 1 years</span>
+            </div>
+
+            <i class="uil uil-angle-down skills__down skills__arrow"></i>
+          </div>
+
+          <div class="skills__list grid">
+      
+            <div class="skills__data">
+              <div class="skills__title">
+                <h3 class="skills__name">Java</h3>
+                <span class="skills_number">60%</span>
+              </div>
+
+              <div class="skills__bar">
+                <span class="skills__percentage skills__java"></span>
+              </div>
+            </div>
+
+            <div class="skills__data">
+              <div class="skills__title">
+                <h3 class="skills__name">Spring Boot</h3>
+                <span class="skills_number">50%</span>
+              </div>
+
+              <div class="skills__bar">
+                <span class="skills__percentage skills__spring-boot"></span>
+              </div>
+            </div>
+
+            <div class="skills__data">
+              <div class="skills__title">
+                <h3 class="skills__name">Python</h3>
+                <span class="skills_number">70%</span>
+              </div>
+
+              <div class="skills__bar">
+                <span class="skills__percentage skills__python"></span>
+              </div>
+            </div>
+          </div>
+
+        </div>
 
-    <div class="card c-cards">
-      <img class="card-img-top " src="Images/Rakshak.jpg" alt="Card image cap">
-      <div class="card-body">
-        <h5 class="card-title">Rakshak</h5>
-        <p class="card-text rak-space">Home security system, Will notify owner if intruder try's to break through door & window.</p>
-        <a target="_blank" href="https://drive.google.com/file/d/1Dq2CXmB3CZPoQoICH-XJrQmteRCFo1b-/view?usp=sharing" class="c-button btn btn-primary">More Details</a>
       </div>
-    </div>
+    </section>
 
-    <a href="https://www.harshitgupta.co.in/"><button class="btn custom-btn" type="button" name="button"> See More....</button></a>
+    <!-- Education -->
 
-  </div>
+    <section class="section qualification" id="qualifications">
+      <h2 class="section__title">Qualification</h2>
+      <span class="section__subtitle">My journey</span>
 
-  <!-- <hr> -->
+      <div class="qualification__container container">
+        <div class="qualification__tabs">
+          <div class="qualification__button button--flex" data-target="#education">
+            <i class="uil uil-graduation-cap qualification__icon"></i>
+            Education
+          </div>
 
-  <div class="contact-me">
-    <h3>Want to hire?</h3>
-    <a class="c-btn" href="mailto:harshitofficial28@gmail.com">CONTACT ME</a>
-  </div>
+          <div class="qualification__button button--flex qualification__active" data-target="#work">
+            <i class="uil uil-briefcase-alt qualification__icon"></i>
+            Work
+          </div>
+        </div>
+        
+        <div class="qualification__section">
+
+          <!-- Education -->
+          <div class="qualification__content" data-content id="education">
+
+            <data class="qualtifaction__data">
+              
+              <div>
+                <h3 class="qualification__title">Electronics and Communication</h3>
+                <span class="qualification__subtitle">India - Oriental Institute of Science and Technology</span>
+                <div class="qualification__calendar">
+                  <i class="uil uil-calendar-alt"></i>
+                  2018 - 2022
+                </div>
+              </div>
+
+              <div>
+                <span class="qualification__rounder"></span>
+                <span class="qualification__line"></span>
+              </div>
+            </data>
+
+            <data class="qualtifaction__data">
+
+              <div></div>
+
+              <div>
+                <span class="qualification__rounder"></span>
+                <span class="qualification__line"></span>
+              </div>
+
+              <div>
+                <h3 class="qualification__title">Senior Secondary Education</h3>
+                <span class="qualification__subtitle">India - Miss Hill Higher Secondary School</span>
+                <div class="qualification__calendar">
+                  <i class="uil uil-calendar-alt"></i>
+                  2017 - 2018
+                </div>
+              </div>
+            </data>
+
+            <data class="qualtifaction__data">
+              <div>
+                <h3 class="qualification__title">Secondary Education</h3>
+                <span class="qualification__subtitle">India - Sanskriti Public School</span>
+                <div class="qualification__calendar">
+                  <i class="uil uil-calendar-alt"></i>
+                  2015 - 2016
+                </div>
+              </div>
+
+              <div>
+                <span class="qualification__rounder"></span>
+                <!-- <span class="qualification__line"></span> -->
+              </div>
+            </data>
+
+          </div>
 
-  <div class="bottom-container">
+          <!-- Work -->
+          <div class="qualification__content qualification__active" data-content id="work">
+
+            <data class="qualtifaction__data">
+              <div>
+                <h3 class="qualification__title">Product Engineer</h3>
+                <span class="qualification__subtitle">Tata Consultancy Services - India</span>
+                <div class="qualification__calendar">
+                  <i class="uil uil-calendar-alt"></i>
+                  2022 - Present
+                </div>
+              </div>
+
+              <div>
+                <span class="qualification__rounder"></span>
+                <span class="qualification__line"></span>
+              </div>
+            </data>
+
+            <data class="qualtifaction__data">
+              
+              <div></div>
+
+              <div>
+                <span class="qualification__rounder"></span>
+                <!-- <span class="qualification__line"></span> -->
+              </div>
+
+              <div>
+                <h3 class="qualification__title">Product Intern</h3>
+                <span class="qualification__subtitle">Tata Consultancy Services - India</span>
+                <div class="qualification__calendar">
+                  <i class="uil uil-calendar-alt"></i>
+                  Jan 2022 - May 2022
+                </div>
+              </div>
+            </data>
+
+          </div>
+
+        </div>
 
-    <h3 class="footer-msg" >Find me on social media platforms</h3>
+      </div>
+    </section>
+
+    <!-- Projects -->
+
+    <!-- Contact Me -->
+    <section class="section contact" id="contact">
+      <h2 class="section__title">Contact Me</h2>
+      <span class="section__subtitle">Get in touch</span>
+
+      <div class="contact__container container grid">
+        <div>
+          
+          <div class="contact__information">
+            <i class="uil uil-phone contact__icon"></i>
+            <div>
+              <h3 class="contact__title">Call Me</h3>
+              <span class="contact__subtitle">+91 6266478162</span>
+            </div>
+          </div>
+
+          <div class="contact__information">
+            <i class="uil uil-envelope contact__icon"></i>
+            <div>
+              <h3 class="contact__title">Email Me</h3>
+              <span class="contact__subtitle">harshitofficial28@gmail.com</span>
+            </div>
+          </div>
+
+        </div>
+
+        <form action="" class="contact__form grid">
+          <div class="contact__inputs grid">
+            <div class="contact__content">
+              <label for="" class="contact__label">Name</label>
+              <input type="text" class="contact__input">
+            </div>
+            <div class="contact__content">
+              <label for="" class="contact__label">Email</label>
+              <input type="email" class="contact__input">
+            </div>
+          </div>
+          <div class="contact__content">
+            <label for="" class="contact__label">Subject</label>
+            <input type="text" class="contact__input">
+          </div>
+          <div class="contact__content">
+            <label for="" class="contact__label">Message</label>
+            <textarea name="" id="" cols="0" rows="7" class="contact__input"></textarea>
+          </div>
+
+          <div>
+            <a href="#" class="button button--flex">
+              Send Message <i class="uil uil-message button__icon"></i>
+            </a>
+          </div>
+        </form>
+      </div>
+    </section>
+  </main>
+
+  <footer class="footer">
+    <div class="footer__bg">
+      <div class="footer__container container grid">
+        <div>
+          <h1 class="footer__title">Harshit</h1>
+          <span class="footer__subtitle">Fullstack developer</span>
+        </div>
+
+        <ul class="footer__links">
+          <li>
+            <a href="#portfolio" class="footer__link">Portfolio</a>
+          </li>
+          <li>
+            <a href="#skills" class="footer__link">Skills</a>
+          </li>
+          <li>
+            <a href="#contact" class="footer__link">Contact me</a>
+          </li>
+        </ul>
+      </div>
+      <p class="footer__rights">Made with ❤️ by Harshit</p>
+    </div>
+  </footer>
 
-    <a class="icons" href="https://www.linkedin.com/in/harshit-gupta-38377117b/" target="_blank"><img class="" src="https://img.icons8.com/color/34/000000/linkedin-circled--v3.png"/></a>
-    <a class="icons" href="https://github.com/harshitg123/" target="_blank"><i class=" fa-2x fab fa-github font-aw"></i></a>
-    <a class="icons" href="https://www.hackerrank.com/harshit_28_sps" target="_blank"><i class="fa-2x fab fa-hackerrank font-aw"></i></a>
-    <a class="icons" href="https://stackoverflow.com/users/15226447/harshit-gupta" target="_blank"><i class=" fa-2x fab fa-stack-overflow"></i></a>
-    <a class="icon" href="https://easyeda.com/harshit.28.sps" target="_blank"> <img class="eda" src="Images/easyeda.png" alt=""> </i></a>
-    <a class="icons" href="https://drive.google.com/file/d/1Cd_bWYADrw6Yz6AnGh2BYwZHkPdoKA3B/view?usp=sharing" target="_blank"><img src="https://img.icons8.com/dotty/34/000000/submit-resume.png"/></a>
-    <p class="copyright">Made with ❤️ by Harshit Gupta.</p>
-  </div>
+  <a href="#" class="scrollup" id="scroll-up">
+    <i class="uil uil-arrow-up scrollup__icon"></i>
+  </a>
 
-  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
-  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
   <script src="app.js" charset="utf-8"></script>
 </body>
 </html>