diff --git a/assets/Group.png b/assets/Group.png
new file mode 100644
index 0000000..54e3cbe
Binary files /dev/null and b/assets/Group.png differ
diff --git a/assets/Icon (1).png b/assets/Icon (1).png
new file mode 100644
index 0000000..bff1cd0
Binary files /dev/null and b/assets/Icon (1).png differ
diff --git a/assets/Icon2.png b/assets/Icon2.png
new file mode 100644
index 0000000..25e1045
Binary files /dev/null and b/assets/Icon2.png differ
diff --git a/assets/Illustration-header@2x.png b/assets/Illustration-header@2x.png
new file mode 100644
index 0000000..50a2f24
Binary files /dev/null and b/assets/Illustration-header@2x.png differ
diff --git a/assets/Illustration.png b/assets/Illustration.png
new file mode 100644
index 0000000..c4a802b
Binary files /dev/null and b/assets/Illustration.png differ
diff --git a/assets/Rectangle55.png b/assets/Rectangle55.png
new file mode 100644
index 0000000..1b1920f
Binary files /dev/null and b/assets/Rectangle55.png differ
diff --git a/assets/Rectangle56.png b/assets/Rectangle56.png
new file mode 100644
index 0000000..5ae3987
Binary files /dev/null and b/assets/Rectangle56.png differ
diff --git a/assets/Rectangle57.png b/assets/Rectangle57.png
new file mode 100644
index 0000000..d867bc8
Binary files /dev/null and b/assets/Rectangle57.png differ
diff --git a/assets/Snapshoot-Portfolio.png b/assets/Snapshoot-Portfolio.png
new file mode 100644
index 0000000..58276bc
Binary files /dev/null and b/assets/Snapshoot-Portfolio.png differ
diff --git a/assets/Snapshoot-Portfolio1.png b/assets/Snapshoot-Portfolio1.png
new file mode 100644
index 0000000..a5cfa6b
Binary files /dev/null and b/assets/Snapshoot-Portfolio1.png differ
diff --git a/assets/bg2.png b/assets/bg2.png
new file mode 100644
index 0000000..e976b56
Binary files /dev/null and b/assets/bg2.png differ
diff --git a/assets/bg3.png b/assets/bg3.png
new file mode 100644
index 0000000..f31399b
Binary files /dev/null and b/assets/bg3.png differ
diff --git a/assets/bg4.png b/assets/bg4.png
new file mode 100644
index 0000000..5e44974
Binary files /dev/null and b/assets/bg4.png differ
diff --git a/assets/bg5.png b/assets/bg5.png
new file mode 100644
index 0000000..e976b56
Binary files /dev/null and b/assets/bg5.png differ
diff --git a/assets/bg6.png b/assets/bg6.png
new file mode 100644
index 0000000..f31399b
Binary files /dev/null and b/assets/bg6.png differ
diff --git a/assets/gymnast.png b/assets/gymnast.png
new file mode 100644
index 0000000..7af965d
Binary files /dev/null and b/assets/gymnast.png differ
diff --git a/assets/illustration-about-me-mobile.png b/assets/illustration-about-me-mobile.png
new file mode 100644
index 0000000..ff3dac8
Binary files /dev/null and b/assets/illustration-about-me-mobile.png differ
diff --git a/assets/pic.png b/assets/pic.png
new file mode 100644
index 0000000..71e3d70
Binary files /dev/null and b/assets/pic.png differ
diff --git a/assets/projects-background.png b/assets/projects-background.png
new file mode 100644
index 0000000..47a28bb
Binary files /dev/null and b/assets/projects-background.png differ
diff --git a/assets/whitebg (1).png b/assets/whitebg (1).png
new file mode 100644
index 0000000..e07b057
Binary files /dev/null and b/assets/whitebg (1).png differ
diff --git a/assets/whitebg.png b/assets/whitebg.png
new file mode 100644
index 0000000..e07b057
Binary files /dev/null and b/assets/whitebg.png differ
diff --git a/index.css b/index.css
index 20760ac..dae090d 100644
--- a/index.css
+++ b/index.css
@@ -1,829 +1,1094 @@
-@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Urbanist:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Crete Round&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=InaiMathi&display=swap');
 
-* {
-  margin: 0;
+body {
   padding: 0;
-  /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
-  font-family: Poppins;
+  margin: 0;
+  box-sizing: border-box;
+  overflow-x: hidden;
 }
 
-/* error message */
-.hidden {
+.menu-list {
   display: none;
 }
 
-.wrapper {
-  width: 375px;
-  background-color: #e5e5e5;
-  display: grid;
-}
-
-.top-container {
-  background-color: white;
-  border-bottom-left-radius: 10%;
+#title {
+  font-family: 'Crete Round', Arial, Helvetica, sans-serif;
+  font-weight: 400;
+  font-size: 32px;
+  line-height: 44px;
 }
 
-.header {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 8%;
-  margin-left: 5%;
-  width: 85%;
-  margin-top: 5%;
-  text-align: center;
+#close-menu {
+  border: none;
+  color: #67798e;
+  background-color: #3c3a39;
+  font-size: 25px;
+  margin-right: 30px;
+  float: right;
+  font-weight: 800;
+  cursor: pointer;
 }
 
-/* desktop nav */
-.nav-li {
+.mobile-nav {
   position: fixed;
-  height: 100vh;
-  z-index: 1;
-  right: 0;
-  left: 0;
   top: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  overflow-y: scroll;
+  left: 100%;
   width: 100%;
-  text-align: left;
-  background: #6070ffba;
-  transform: translateY(100%);
-  transition: transform 0.5s ease-in;
-  backdrop-filter: blur(5px);
-  padding: 1rem;
+  height: 100vh;
+  display: block;
+  background-color: #3c3a39;
+  padding-top: 30px;
+  transition: 0.4s;
 }
 
-.nav-li a {
-  text-align: left;
-  margin-bottom: 3rem;
-  color: white;
-  text-decoration: none;
-  font-weight: bolder;
-  font-size: xx-large;
+.mobile-nav.is-active {
+  left: 0;
 }
 
-.nav-active {
-  transform: translateY(0);
+.project1 {
+  padding: 0 24px 24px;
 }
 
-.right-hamburger {
-  cursor: pointer;
+.mobile-nav a {
+  display: block;
+  width: 80%;
+  text-align: left;
+  padding: 12px 16px;
+  color: #fff5e1;
+  text-decoration: none;
+  border-bottom: 1px solid #6f6c6b;
+  font-family: 'Inter', Arial, Helvetica, sans-serif;
+  font-size: 32px;
+  line-height: 44px;
+  font-weight: 700;
 }
 
-.x-men {
+.header {
   display: flex;
-  margin-bottom: 2rem;
-  justify-content: flex-end;
-  width: 90%;
-  cursor: pointer;
-  color: white;
+  justify-content: space-between;
+  background-color: #3c3a39;
+  padding: 40px;
+  padding-bottom: 10px;
 }
 
-.left-text {
-  font-weight: 700;
-  font-style: normal;
-  font-size: 18px;
-  color: #6070ff;
+/* animtions and transitions */
+.navbar-brand {
+  color: #fff;
   text-decoration: none;
-  animation-name: rotation;
-  animation-duration: 6s;
+  font-size: 18px;
+  font-weight: 700;
+  font-family: 'Roboto', Arial, Helvetica, sans-serif;
+  transition: all 0.3s ease-in-out;
 }
 
-.top-body-background {
-  background-image: url("./assets/header-shapes\ mobile.png");
-  background-size: contain;
-  background-position: 1ch -1em;
-  background-repeat: no-repeat;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  height: 630px;
+#open-menu {
+  color: #fff;
+  border: none;
+  background-color: #3c3a39;
+  font-size: 25px;
 }
 
-@keyframes rotation {
-  0% { transform: rotate(0deg); }
-  16% { transform: rotate(180deg); }
-  50% { transform: rotate(360deg); }
-  100% { transform: rotate(360deg); }
+.navbar-brand:hover,
+#open-menu:hover,
+#close-menu:hover {
+  cursor: pointer;
+  color: #ff6b00;
+  transform: scale(1.5);
+  text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
 }
 
-.top-image {
-  /* stylelint-disable-next-line length-zero-no-unit */
-  filter: blur(0px);
-  animation-name: rotation;
-  animation-duration: 6s;
+.social-icons {
+  order: -1;
 }
 
-.top-image:hover {
-  filter: blur(3px);
+.social i {
+  color: #505f79;
+  list-style: none;
+  margin-inline: 7px;
+  font-size: x-large;
 }
 
-.top-body {
-  justify-content: center;
-  height: 80vh;
-  margin-left: 5%;
+.navbar i:hover {
+  cursor: pointer;
+  color: #ff6b00;
+  transform: scale(1.9);
 }
 
-.top-body h1 {
-  font-size: 40px;
-  line-height: 52px;
-  font-style: normal;
-  display: flex;
-  align-items: center;
-  font-weight: 700;
-  padding: 5px;
-  width: 70%;
-  color: #172b4d;
+.socials i:hover,
+.social i:hover {
+  cursor: pointer;
+  color: #ff6b00;
+  transform: scale(1.5);
+  text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
 }
 
-.top-body p {
-  width: 95%;
-  margin-bottom: 5%;
-  color: #344563;
+.mobile-container {
+  background-color: #1c1a19;
+  height: 650px;
 }
 
-.footer-connect {
-  margin-bottom: 5%;
-  color: hsl(234, 100%, 75%);
-  text-decoration: none;
+.info {
+  padding: 80px 24px 120px 24px;
 }
 
-.footer-connect a {
-  text-decoration: none;
-  font-size: large;
+.see-proj {
+  padding: 0 24px 24px 24px;
 }
 
-.top-footer {
-  width: 60%;
-  display: flex;
-  justify-content: space-between;
-  list-style: none;
+.intro {
+  font-family: 'Crete Round', Arial, Helvetica, sans-serif;
+  font-weight: 400;
+  font-size: 46px;
+  color: #ff6b00;
+  transition: all 0.5s ease-in;
+  animation: spin 1s linear 1;
 }
 
-.second-container {
-  box-sizing: border-box;
-  margin-top: 5%;
-  padding-left: 3%;
-  padding-right: 3%;
+.intro:hover {
+  cursor: pointer;
+  color: #fff;
 }
 
-.inner-second-container {
-  padding: 4%;
-  margin-top: 20%;
-  box-shadow: rgb(163, 17, 17);
-  background-color: white;
-  border-radius: 4%;
+#works {
+  padding: 0 24px;
 }
 
-.inner-second-containerr {
-  padding: 4%;
-  margin-top: 20%;
-  box-shadow: rgb(163, 17, 17);
-  background-color: white;
-  border-radius: 4%;
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
 }
 
-.inner-second-containerl {
-  padding: 4%;
-  box-shadow: rgb(163, 17, 17);
-  background-color: white;
-  border-radius: 4%;
-  margin-top: 20%;
-  margin-bottom: 100px;
+.skill {
+  font-family: 'Roboto', Arial, Helvetica, sans-serif;
+  font-weight: 700;
+  font-size: 24px;
+  color: #fff;
+  animation: color-change 2s infinite alternate;
 }
 
-.top-image img {
-  width: 100%;
+@keyframes color-change {
+  0% {
+    color: #edda0d;
+  }
+
+  25% {
+    color: #14932f;
+  }
+
+  75% {
+    color: #1e1868;
+  }
+
+  100% {
+    color: #f3f4f7;
+  }
 }
 
-.text-inner-container h2 {
-  font-weight: 800;
-  color: #344563;
-  margin-bottom: 2%;
+.bio {
+  font-family: 'Poppins', Arial, Helvetica, sans-serif;
+  font-weight: 400;
+  font-size: 16px;
+  color: #fff;
+  animation: fade-in 0.8s alternate;
 }
 
-.canopy-inner-container {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 20px;
+.bio:hover {
+  cursor: pointer;
+  color: #ff6b00;
 }
 
-.canopy-inner-container #text1 {
-  padding-right: 10px;
-  font-size: 13px;
-  color: #344563;
+@keyframes fade-in {
+  0% {
+    opacity: 1;
+    color: #ff6b00;
+  }
+
+  100% {
+    opacity: 0;
+  }
 }
 
-.canopy-inner-container #text {
-  color: #7a869a;
+.projects-btn {
+  font-family: 'Inter', Arial, Helvetica, sans-serif;
+  font-size: 15px;
+  color: #fff;
+  padding: 10px 12px 10px 12px;
+  background-color: rgba(255, 255, 255, 0.24);
+  border: none;
+  margin-left: -8px;
+  margin-inline: 5px;
 }
 
-.canopy-inner-container ul {
+.project-btn ul,
+li {
   display: flex;
-  font-size: 13px;
-  justify-content: space-around;
-  width: 70%;
+  margin-inline: 5px;
+  padding-left: 0;
 }
 
-.canopy-daily {
-  margin-bottom: 20px;
+.projects-btn:hover {
+  cursor: pointer;
+  background-color: #ff6b00;
+  transform: scale(1.2);
+  text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
 }
 
-.canopy-list {
-  display: flex;
-  justify-content: space-between;
-  width: 70%;
+.works-btn {
+  padding: 10px 12px 10px 12px;
+  font-family: 'Inter', Arial, Helvetica, sans-serif;
+  font-size: 15px;
+  color: #091e42;
+  background-color: #fff;
+  border: 1px solid;
+  border-color: #8993a4;
 }
 
-.canopy-list li {
-  background-color: #ebebff;
-  border-radius: 10px;
-  padding: 3px 3px;
-  margin: 1px;
-  color: #6070ff;
-  list-style: none;
+.see,
+.resume {
+  padding: 10px 12px 10px 12px;
+  font-family: 'Inter', Arial, Helvetica, sans-serif;
+  font-size: 17px;
+  color: #fff;
+  background-color: #ff6b00;
+  border: none;
 }
 
-.all-button {
-  border: 1px solid #396df2;
-  background-color: white;
-  width: 50%;
-  border-radius: 10px;
-  margin: 20px 0;
-  padding: 8px;
-  color: #396df2;
-  font-size: large;
+.see:hover,
+.works-btn:hover {
+  cursor: pointer;
+  color: #f4f5f7;
+  background-color: #091e42;
+  transform: scale(1.05);
+  text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
 }
 
-.all-button:hover {
-  background-color: rgb(91, 91, 238);
-  color: white;
+.see-project {
+  width: 327px;
+  background-color: #ff6b00;
+  border: none;
+  padding: 20px;
+  font-family: 'Inter', Arial, Helvetica, sans-serif;
+  font-size: 17px;
+  color: #fff;
 }
 
-.all-button:active {
-  background-color: hsl(235, 72%, 48%);
-  color: white;
+.sees-project {
+  width: 327px;
+  background-color: #ff6b00;
+  border: none;
+  padding: 20px;
+  font-family: 'Inter', Arial, Helvetica, sans-serif;
+  font-size: 17px;
+  color: #fff;
+  margin-top: 38px;
+}
+
+.get-in-touch {
+  margin-top: 50px;
+  padding: 12px;
+  background-color: #ff6b00;
+  font-family: 'Inter', Arial, Helvetica, sans-serif;
+  font-size: 17px;
+  font-weight: 700;
+  color: #fff;
+  border: none;
 }
 
-.third-container {
-  padding: 3%;
-  background-color: white;
-  border-radius: 0 15% 0 0;
+.sees-project:hover,
+.see-project:hover,
+.get-in-touch:hover,
+.resume:hover {
+  cursor: pointer;
+  background-color: #8993a4;
+  transform: scale(1.01);
+  text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
 }
 
-.lower-body {
-  margin-top: 20%;
-  width: 90%;
+.social-icons ul {
+  display: flex;
+  padding-left: 0;
 }
 
-.lower-body h2 {
-  font-weight: 800;
-  font-size: 42px;
-  color: #172b4d;
-  margin-bottom: 15px;
+.socials a {
+  color: #fff;
+  list-style: none;
+  margin-inline: 10px;
+  margin-left: 0;
+  font-size: larger;
+  cursor: pointer;
 }
 
-.lower-body p {
-  color: #344563;
-  margin-bottom: 20px;
+.back a {
+  text-decoration: none;
+  color: #ff6b00;
+  font-family: 'Poppins', Arial, Helvetica, sans-serif;
+  font-size: 15px;
+  cursor: pointer;
 }
 
-.footer-third-container {
-  margin-top: 10px;
-  margin-bottom: 10%;
+.mobile-nav a:hover {
+  color: #ff6b00;
 }
 
-.footer-third-container a {
-  text-decoration: none;
-  color: #7f8cff;
+.social-icons li img:hover {
+  color: #ff6b00;
 }
 
-.lower-footer {
-  display: flex;
-  justify-content: space-between;
-  width: 60%;
-  margin-bottom: 3%;
-  padding-left: 15px;
-  list-style: none;
+.projects-background h2,
+.projects-heading {
+  font-family: 'Crete Round', Arial, Helvetica, sans-serif;
+  font-size: 32px;
+  color: #fff;
+  font-weight: 400;
+  margin-top: -5px;
 }
 
-#third-container-button {
-  border: 1px solid #396df2;
-  width: 55%;
-  border-radius: 10px;
-  margin: 20px 0;
-  padding: 15px 5px;
-  color: #396df2;
-  font-size: large;
+.first-page-deco-img {
+  background-image: url('./assets/Illustration.png');
+  background-repeat: no-repeat;
+  height: 300px;
+  margin-top: -320px;
+  background-position: right;
+  padding-right: 0;
 }
 
-#third-container-button:hover {
-  background-color: rgb(91, 91, 238);
-  color: white;
+.recent-works h1 {
+  color: #1c1a19;
+  font-family: 'crete Round', Arial, Helvetica, sans-serif;
+  font-weight: 400;
+  font-size: 40px;
 }
 
-#third-container-button:active {
-  background-color: hsl(235, 72%, 48%);
-  color: white;
+.gymnast {
+  background-image: url('./assets/pic.png');
+  background-repeat: no-repeat;
+  height: 237px;
+  margin-top: 50px;
+  margin-bottom: 60px;
 }
 
-.languages-container {
-  background-color: white;
-  margin-top: 0.5%;
-  padding: 20% 3% 15% 3%;
-  width: 90%;
+.recent1 {
+  font-family: 'Crete Round', Arial, Helvetica, sans-serif;
+  font-size: 32px;
+  color: #091e42;
+  font-weight: 400;
+  margin-top: -40px;
 }
 
-.language-container-top {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 15%;
+.About h1 {
+  font-family: 'Crete Round', Arial, Helvetica, sans-serif;
+  font-size: 72px;
+  color: #ff6b00;
+  margin-bottom: 10px;
+  font-weight: 400;
+}
+
+.grid h2:hover,
+.flex h1:hover {
+  cursor: pointer;
+  color: #ff6b00;
+  transform: scale(1.05);
+  text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
 }
 
-#dropdown-img {
-  height: 8px;
+.recentp {
+  font-family: 'Inter', Arial, Helvetica, sans-serif;
+  font-size: 16px;
+  color: #091e42;
+  width: 327px;
 }
 
-.dropside-img {
-  height: 8px;
-  transform: rotate(-90deg);
+.languages {
+  margin-left: -45px;
 }
 
-.language-java-script {
+.langu {
   display: flex;
-  justify-content: space-between;
-  background-color: #f7f7f9;
-  border-radius: 5px;
-  position: relative;
-  margin-bottom: 20px;
-  padding-left: 10px;
-  box-shadow: 10px 10px 50px 0 #d7e7f8;
+  list-style: none;
 }
 
-#javascript {
-  position: absolute;
-  top: 15px;
-  left: 80px;
+.projects-background {
+  background-image: url('./assets/projects-background.png');
+  background-repeat: no-repeat;
+  width: 327px;
+  height: 370px;
+  margin-top: 24px;
 }
 
-.language-html {
-  display: flex;
-  justify-content: space-between;
-  background-color: #f7f7f9;
-  border-radius: 5px;
-  position: relative;
-  margin-bottom: 20px;
-  padding-left: 10px;
-  box-shadow: 10px 10px 50px 0 #d7e7f8;
+.background {
+  padding: 62px 13px 1px 13px;
 }
 
-#html {
-  position: absolute;
-  top: 15px;
-  left: 80px;
+.gymnast:hover {
+  transform: scale(1.05);
 }
 
-.language-css {
-  display: flex;
-  justify-content: space-between;
-  background-color: #f7f7f9;
-  border-radius: 5px;
-  position: relative;
-  margin-bottom: 20px;
-  padding-left: 10px;
-  box-shadow: 10px 10px 50px 0 #d7e7f8;
+.projects-background:hover {
+  cursor: pointer;
+  transform: scale(1.01);
 }
 
-#css {
-  position: absolute;
-  top: 15px;
-  left: 80px;
+.projects-background .para {
+  font-family: 'Inter', Arial, Helvetica, sans-serif;
+  font-size: 16px;
+  color: #fff;
 }
 
-.language-footer {
-  margin-top: 40px;
+#pro-btn,
+#pro-btn1 {
+  margin-left: -10px;
 }
 
-.language-framwork {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 8%;
+.projects-background li {
+  list-style: none;
 }
 
-.language-skill {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 8%;
+.About {
+  background-color: #1c1a19;
+  margin-top: 50px;
+  padding: 50px 24px 50px 24px;
 }
 
-.section-background {
-  background: white;
+.About h1:hover {
+  cursor: pointer;
+  color: white;
+  transform: scale(1.1);
+  text-shadow: 0 0 10px rgba(251, 198, 40, 0.5);
 }
 
-.section {
-  margin-top: 20%;
-  background-color: #6070ff;
-  background-image: url("./assets/header-shapes\ mobile.png");
-  background-size: contain;
+.About p {
+  font-family: 'Inter', Arial, Helvetica, sans-serif;
+  font-size: 16px;
+  color: #f4f5f7;
+  margin-bottom: 40px;
+}
+
+.deco-img {
+  background-image: url("./assets/illustration-about-me-mobile.png");
   background-repeat: no-repeat;
-  border-top-left-radius: 15%;
-  padding: 4% 3% 15% 3%;
+  height: 258px;
+  margin-right: -23px;
+  margin-top: -40px;
+  background-position: right;
+}
+
+.myUL li {
+  margin-top: 100px;
+  justify-content: center;
+  color: #fff;
+  font-family: 'InaiMathi', Arial, Helvetica, sans-serif;
+  font-weight: 700;
+  font-size: 22px;
+  margin-left: -45px;
 }
 
-.contact-me-section {
-  margin-top: 80px;
+.myUL1 li {
+  justify-content: center;
   margin-bottom: 40px;
-  text-align: center;
-  color: white;
-  width: 90%;
+  color: #fff;
+  font-family: 'Inter', Arial, Helvetica, sans-serif;
+  font-size: 22px;
+  font-weight: 400;
+  margin-left: -45px;
+}
+
+.myUL2 li {
+  justify-content: center;
+  margin-bottom: 40px;
+  color: #fff;
+  font-family: 'Inter', Arial, Helvetica, sans-serif;
+  font-size: 22px;
+  font-weight: 400;
+  margin-left: -45px;
 }
 
-.contact-me-section #contact-me {
-  font-weight: bold;
-  font-size: xx-large;
-  margin-bottom: 15px;
+.Skills,
+.framework {
+  font-family: 'Inter', Arial, Helvetica, sans-serif;
+  font-size: 32px;
+  color: #fff;
+  margin-left: -45px;
 }
 
-#contact-me p {
-  font-weight: bold;
-  font-size: xx-large;
-  margin-bottom: 1px;
+.myUL-frameworks li,
+.myUL-skills li {
+  justify-content: center;
 }
 
-form .text {
-  width: 90%;
-  font-size: 1.2rem;
+.horizontal {
+  border: 1px solid #dfe1e6;
+  margin-top: -40px;
+}
+
+.social-icon ul {
   display: flex;
-  padding: 3px;
-  border-radius: 10px;
-  margin-bottom: 3%;
-  border: none;
+  justify-content: center;
+  list-style: none;
 }
 
-form #type-msg {
-  width: 90%;
-  height: 20vh;
-  padding-left: 15px;
-  padding-bottom: 50%;
-  border-radius: 10px;
-  margin-bottom: 5%;
+.fieldset {
   border: none;
 }
 
-.btn-sec {
-  position: relative;
+.line {
+  margin-top: 50px;
+  height: 5px;
+  display: flex;
+  justify-content: center;
 }
 
-.sec-btn {
-  padding: 10px 20px;
-  border-radius: 10px;
-  border: none;
-  color: #6070ff;
-  cursor: pointer;
-  transition: all 0.5s;
+.contact {
+  padding: 1px 1px 10px 1px;
 }
 
-.sec-btn span {
-  cursor: pointer;
-  display: inline-block;
-  position: relative;
-  transition: 0.5s;
+.contact-form {
+  padding: 40px 24px 80px 24px;
 }
 
-/* stylelint-disable-next-line selector-pseudo-element-colon-notation */
-.sec-btn span:after {
-  content: '\00bb';
-  position: absolute;
-  opacity: 0;
-  top: 0;
-  right: -20px;
-  transition: 0.5s;
+.contact-me {
+  font-family: 'Inter', Arial, Helvetica, sans-serif;
+  font-size: 32px;
+  font-weight: 700;
+  text-align: center;
+  color: #172b4d;
+  line-height: 52px;
 }
 
-/* stylelint-disable-next-line selector-pseudo-element-colon-notation */
-.sec-btn:hover span:after {
-  opacity: 1;
-  right: 0;
+.name-field,
+.email-field {
+  border: 1px solid;
+  border-color: #ded8d7;
+  border-top: none;
+  border-left: none;
+  border-right: none;
+  margin-top: 50px;
+  width: 98%;
+  font-family: 'Inter', Arial, Helvetica, sans-serif;
+  font-size: 15px;
+  font-weight: 400;
+  color: #1a1919;
+  padding-left: 10px;
 }
 
-.sec-btn:hover span {
-  padding-right: 25px;
+.text-area-field {
+  width: 98%;
+  background-color: #fbf8f7;
+  margin-top: 20px;
+  font-family: 'Inter', Arial, Helvetica, sans-serif;
+  font-size: 15px;
+  font-style: italic;
+  border: none;
+  padding-top: 10px;
+  padding-left: 10px;
 }
 
-.sec-btn:hover {
-  background-color: rgb(91, 91, 238);
-  color: white;
+.get {
+  display: flex;
+  justify-content: center;
 }
 
-.sec-btn:active {
-  background-color: #5a38f6;
-  box-shadow: 0 2px rgb(127, 160, 251);
-  transform: translateY(4px);
+.back {
+  margin-top: -20px;
+  margin-left: 50px;
 }
 
-.dot {
-  height: 30px;
-  width: 30px;
-  background-color: white;
-  border-radius: 50%;
-  display: inline-block;
-  position: absolute;
-  left: 75%;
-  top: 8px;
+.modal {
+  position: fixed;
+  top: 5%;
+  left: 63px;
+  transform: translate(-50px, -50px) scale(0);
+  width: 310px;
+  height: 718px;
+  transition: 200ms ease-in-out;
+  padding: 16px 16px 16px 16px;
+  border: 1px solid #dfe1e6;
+  background-color: #fff;
+  z-index: 98;
 }
 
-.black-linen {
-  margin-top: 15px;
-  text-align: center;
+.modal.active {
+  transform: translate(-50px, -50px) scale(1);
 }
 
-.bold-text {
-  font-weight: bold;
+.modal-header {
+  display: flex;
+  justify-content: space-between;
 }
 
-#hr {
-  margin-bottom: 20px;
+.mod-header {
+  margin-top: 4px;
+  font-family: 'Roboto', Arial, Helvetica, sans-serif;
+  font-size: 32px;
+  line-height: 44px;
+  font-weight: 700;
+  color: #172b4d;
 }
 
-/* Pop windows for card */
+#mod-button {
+  background-color: #fff;
+  color: #67798e;
+  font-size: 25px;
+  border: none;
+  margin-top: 16px;
+}
 
-.pop-up {
-  width: 343px;
-  height: auto;
-  position: fixed;
-  top: 60px;
-  right: 5%;
-  bottom: 0;
-  left: calc(50% - 343px / 2);
-  overflow: scroll;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 12px;
-  border-radius: 10px;
-  background-color: #1e0404;
+.mod-btn {
+  list-style: none;
+  padding: 12px;
+  border: 1px solid #dfe1e6;
+  background-color: transparent;
+  color: #3c3a39;
+  font-family: 'Poppins', Arial, Helvetica, sans-serif;
+  font-size: 13px;
+  line-height: 24px;
+  font-weight: 700;
 }
 
-.top {
+.mod-btn:hover {
+  cursor: pointer;
+  color: #fff;
+  background-color: #ff6b00;
+  transform: scale(1.05);
+}
+
+.mod-buttons {
   display: flex;
-  align-items: center;
-  justify-content: space-around;
-  width: 100%;
-  margin-top: 30px;
+  margin-left: -44px;
 }
 
-.top-1 {
-  width: 10px;
-  height: 20px;
-  position: relative;
+.mod-para {
+  color: #344563;
+  font-family: 'Inter', Arial, Helvetica, sans-serif;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 24px;
 }
 
-.overlay {
-  filter: blur(10px);
-  mix-blend-mode: multiply;
-  background: #c1c7d0;
+.mod-btns {
+  list-style: none;
+  padding: 12px;
+  border: 1px solid #dfe1e6;
+  background-color: #ff6b00;
+  color: #fff;
+  font-family: 'Inter', Arial, Helvetica, sans-serif;
+  font-size: 17px;
+  line-height: 24px;
+  font-weight: 700;
 }
 
-.error {
-  width: auto;
-  height: auto;
-  background-color: #fff;
-  color: red;
-  font-family: 'poppins', sans-serif;
-  text-align: center;
-  border-radius: 8px;
-  margin-top: 10px;
+.mod-btns:hover {
+  cursor: pointer;
+  background-color: #091e42;
+  transform: scale(1.05);
 }
 
-@media only screen and (min-width: 768px) {
-  .wrapper {
-    width: auto;
-    overflow: hidden;
-  }
+#overlay {
+  opacity: 0;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  transition: 200ms ease-in-out;
+  pointer-events: none;
+  background-color: rgba(0, 0, 0, 0.5);
+}
 
-  .header {
-    margin-top: 1rem;
-  }
+#overlay.active {
+  opacity: 1;
+  pointer-events: all;
+}
+
+.background1 {
+  margin: 40px;
+}
 
-  .right-hamburger {
+@media only screen and (max-width: 768px) {
+  .Desktop-heading,
+  #my,
+  .heading3,
+  .mod-header1,
+  .first,
+  .mod-img1 {
     display: none;
   }
+}
 
-  .nav-li {
+@media only screen and (min-width: 768px) {
+  .menu-list {
     display: flex;
-    justify-content: space-between;
+    margin-right: 100px;
   }
 
-  .nav-li > a {
+  .menu {
+    color: #fff;
     text-decoration: none;
-    margin: 0 1rem;
+    font-size: 15px;
+    font-weight: 700;
+    font-family: 'Roboto', Arial, Helvetica, sans-serif;
+    margin-inline: 10px;
+    transition: all 0.3s ease-in-out;
   }
 
-  .top-body-background {
-    background-size: cover;
-    background-position: 2ch em;
-    background-repeat: no-repeat;
-    margin-top: 1rem;
+  /* animations and transitions */
+  .menu:hover,
+  .menu:active,
+  .menu i:hover {
+    cursor: pointer;
+    color: #ff6b00;
+    transform: scale(1.5);
+    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
   }
 
-  .top-body {
-    height: 30vh;
-    width: 90vw;
-    margin-left: 20%;
-    margin-bottom: 10rem;
+  .info {
+    display: flex;
   }
 
-  .top-body h1 {
+  .intro1 {
     width: 40%;
-    margin-top: 2rem;
+    margin-left: 50px;
   }
 
-  .top-body p {
-    width: 60%;
-    margin-bottom: 2rem;
+  .intro {
+    font-size: 72px;
   }
 
-  .footer-connect {
-    margin-bottom: 1%;
+  .skill {
+    font-size: 32px;
+    margin-top: -50px;
   }
 
-  .top-footer {
-    width: 15%;
+  .recent-works {
+    padding: 120px;
   }
 
-  .mobile-first-card {
-    display: none;
+  .recent1 {
+    margin-top: -70px;
   }
 
-  .inner-second-container {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-gap: 3.5rem;
-    width: 90%;
-    margin: 0 auto;
+  .bio {
+    font-size: 20px;
   }
 
-  .inner-second-containerr {
-    display: flex;
-    flex-direction: row-reverse;
-    width: 90%;
-    margin: 0 auto;
+  .social-icons ul {
+    display: inline-block;
+    padding-top: 150px;
+    margin-left: 30px;
   }
 
-  .inner-second-containerl {
-    display: flex;
-    flex-direction: row-reverse;
-    width: 90%;
-    margin: 0 auto;
-    margin-bottom: 5%;
+  .socials {
+    margin-block: 20px;
   }
 
-  .same {
-    flex: 0 0 calc(50% - 2rem);
+  .mobile-container {
+    height: 850px;
   }
 
-  .top-image img {
+  .second-img {
+    background-image: url('./assets/Illustration-header@2x.png');
+    background-repeat: no-repeat;
+    height: 768px;
+    margin-top: -43%;
+    background-position: right;
+    background-size: 49%;
+  }
+
+  .recentp {
     width: 100%;
   }
 
-  @keyframes rotation {
-    0% { transform: rotate(0deg); }
-    16% { transform: rotate(180deg); }
-    50% { transform: rotate(360deg); }
-    100% { transform: rotate(360deg); }
+  .see {
+    height: 50px;
+    width: 30%;
   }
 
-  .top-image {
-    /* stylelint-disable-next-line length-zero-no-unit */
-    filter: blur(0px);
-    animation-name: rotation;
-    animation-duration: 6s;
+  .grid {
+    display: grid;
+    grid-template-columns: 1fr 0.75fr;
+    margin-top: 120px;
   }
 
-  .top-image:hover {
-    filter: blur(3px);
+  .grid h2 {
+    padding-top: 45px;
+    font-size: 40px;
   }
 
-  .text-inner-container {
-    width: 90%;
-    margin-right: 5%;
+  .grid p {
+    font-size: 20px;
   }
 
-  .canopy-inner-container {
-    width: 50%;
+  .gymnast {
+    background-image: url('./assets/gymnast.png');
+    height: 448px;
+    transition: transform 0.3s ease-out;
+    margin-top: -30px;
   }
 
-  .canopy-inner-container ul {
-    gap: 1rem;
-    width: 60%;
-    margin-left: 5%;
+  .About h1 {
+    font-size: 72px;
   }
 
-  .canopy-list {
+  .flex {
     display: flex;
-    justify-content: space-between;
-    gap: 0.2rem;
-    width: 45%;
+    flex: 1;
   }
 
-  .canopy-list li {
-    padding: 8px;
+  .hor {
+    flex-grow: 1;
+    height: 0;
   }
 
-  .all-button {
-    margin: 40px 0;
-    width: 30%;
+  .flex h1 {
+    flex-grow: 0.1;
+    margin-top: -20px;
   }
 
-  .third-container {
-    display: flex;
-    width: 95%;
-    margin: 0 auto;
-    border-radius: 0 15% 0 0;
+  #bg1 {
+    background-image: url('./assets/whitebg.png');
+    background-repeat: no-repeat;
+    width: 100%;
+    height: 435px;
+    margin-top: 12px;
   }
 
-  .lower-body {
-    width: 50%;
+  #see-proj-btn {
+    width: 370px;
+    background-color: #ff6b00;
+    border: none;
+    padding: 20px;
+    font-family: 'Inter', Arial, Helvetica, sans-serif;
+    font-size: 17px;
+    color: #fff;
+    margin-top: 280px;
+    position: absolute;
   }
 
-  .lower-footer {
-    width: 40%;
+  #see-proj-btn:hover {
+    cursor: pointer;
+    background-color: #8993a4;
+    transform: scale(1.01);
+    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
   }
 
-  .languages-container {
-    width: 80%;
-    margin-top: 1rem;
+  #bg2 {
+    background-image: url('./assets/bg2.png');
+    background-repeat: no-repeat;
+    width: 100%;
+    height: 425px;
+    margin-top: 24px;
   }
 
-  .languages-tools {
-    margin-top: 2px;
+  #bg3 {
+    background-image: url('./assets/bg3.png');
+    background-repeat: no-repeat;
+    width: 100%;
+    height: 425px;
+    margin-top: 24px;
   }
 
-  .language-li {
-    display: none;
+  #bg4 {
+    background-image: url('./assets/bg4.png');
+    background-repeat: no-repeat;
+    width: 100%;
+    height: 425px;
+    margin-top: 24px;
   }
 
-  .section {
-    background-size: cover;
-    background-position: 2ch -8em;
+  #bg5 {
+    background-image: url('./assets/bg5.png');
     background-repeat: no-repeat;
-    margin-top: 2rem;
+    width: 100%;
+    height: 425px;
+    margin-top: 24px;
   }
 
-  .contact-me-section {
-    margin-top: 80px;
-    margin-bottom: 40px;
-    text-align: center;
-    width: 70%;
+  #bg6 {
+    background-image: url('./assets/bg6.png');
+    background-repeat: no-repeat;
+    width: 100%;
+    height: 425px;
+    margin-top: 24px;
   }
 
-  .contact-me-section #contact-msg {
-    margin-bottom: 40px;
-    margin-left: 50%;
-    text-align: center;
-    width: 50%;
+  .gymnast:hover {
+    transform: scale(1.05);
+  }
+
+  .About {
+    padding: 130px 142px 130px 142px;
+  }
+
+  .About p {
+    font-size: 20px;
+    line-height: 32px;
+  }
+
+  .grider {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
   }
 
-  .contact-me-section #contact-me {
+  .group {
+    background-image: url('./assets/Group.png');
+    background-repeat: no-repeat;
+    height: 353px;
+    background-position: right;
+    margin-right: -150px;
+  }
+
+  .resume {
+    margin-bottom: 150px;
+  }
+
+  .abilities {
+    display: flex;
+    margin-top: 144px;
+  }
+
+  .myUL li {
+    justify-content: left;
+  }
+
+  .myUL1 li {
+    justify-content: left;
+    margin-left: 200px;
+  }
+
+  .Skills {
+    margin-left: 100px;
+  }
+
+  .framework {
+    margin-left: 185px;
+  }
+
+  #myUL-heading {
+    margin-top: -80px;
+  }
+
+  .myUL2 li {
+    justify-content: left;
     margin-bottom: 40px;
-    margin-left: 50%;
-    text-align: center;
-    width: 50%;
+    color: #fff;
+    font-family: 'Inter', Arial, Helvetica, sans-serif;
+    font-size: 22px;
+    font-weight: 400;
+    margin-left: -15px;
   }
 
-  .form-section {
-    width: 50%;
-    margin-left: 30%;
+  .contact-form {
+    padding: 120px 135px 180px 135px;
+    display: grid;
+    grid-template-columns: 0.6fr 1fr;
+    padding-left: 140px;
+    padding-right: 140px;
+    gap: 40px;
   }
 
-  form .text {
-    border-radius: 0%;
+  .Initials {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 25px;
+    width: 99%;
   }
 
-  form #type-msg {
-    border-radius: 0%;
-    width: 89%;
-    height: 5vh;
+  .contact-me {
+    font-family: 'Inter', Arial, Helvetica, sans-serif;
+    font-size: 40px;
+    font-weight: 700;
+    text-align: left;
+    color: #172b4d;
+    line-height: 52px;
   }
 
-  .dot {
-    display: none;
+  .get {
+    justify-content: left;
   }
 
-  .sec-btn {
-    margin-left: 35%;
+  .para {
+    margin-right: 40px;
   }
 
-  .black-linen {
+  .hamburger,
+  .first-page-deco-img,
+  .see-project,
+  .projects-heading,
+  #whitebg h2,
+  #whitebg .para,
+  .deco-img,
+  .line,
+  .btn-ul li,
+  .mobile-nav,
+  #open-menu,
+  .mod-img,
+  .mod-header,
+  .p,
+  .heading1,
+  #p,
+  #h,
+  #pro-btn1 {
     display: none;
   }
 
-  /* pop up */
+  #grid-projects h2 {
+    margin-top: 60px;
+  }
+
+  #b3 h2 {
+    margin-top: 210px;
+  }
+
+  .grid-container {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    margin-top: -150px;
+    padding: 0 90px;
+  }
+
+  #d-heading2 {
+    margin-top: 120px;
+  }
+
+  #d-heading {
+    margin-top: 70px;
+  }
+
+  .modal {
+    width: 80%;
+    height: 631px;
+    top: 13%;
+    left: 15%;
+  }
+
+  .images-popup {
+    display: grid;
+    grid-template-columns: 1fr 0.8fr;
+  }
+
+  #modal-btn {
+    margin-top: 40px;
+  }
+
+  .mod-para {
+    line-height: 30px;
+    font-size: 16px;
+    margin-top: -20px;
+  }
 
-  .overlay {
-    filter: blur(10px);
-    mix-blend-mode: multiply;
-    background: #c1c7d0;
+  .mod-header1 {
+    font-family: 'Crete Round', Arial, Helvetica, sans-serif;
+    font-size: 32px;
+    font-weight: 400;
+    line-height: 44px;
+    letter-spacing: 0;
+    text-align: left;
   }
 }
diff --git a/index.html b/index.html
index ed606df..c548b9e 100644
--- a/index.html
+++ b/index.html
@@ -1,267 +1,178 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-
-    <link rel="stylesheet" href="./index.css" />
-    
-    <title>Toyyib</title>
-  </head>
-  <body>
-
-    <div class="wrapper">
-
-        <div class="top-container">
-
-    
-            <div class="header">
-    
-                <a href="#" class="left-text">My Logo</a>
-    
-                <nav class="right-hamburger" id="hamburger">
-    
-                    <img src="./assets/Union.png" alt="" >
-    
-                </nav>
-
-                <nav class="nav-li">
-                    <div class="x-men"><span>X</span></div>
-
-                    <a href="#portfolio" class="lis active">Portfolio</a>
-                    <a href="#about" class="lis">About</a>
-                    <a href="#contact" class="lis">Contact</a>
-
-                </nav>
-    
-            </div>
-    
-            <section class="top-body-background">
-                <div class="top-body">
-    
-                    <h1>I'm Toyyib. Glad to see you!</h1>
-            
-                    <p>
-                    I’m a software developer! I can help you build a product , feature or
-                    website Look through some of my work and <br> experience! If you like what
-                    you see and have a project you need coded, don’t hestiate to contact
-                    me.
-                    </p>
-
-                    <div class="footer-connect">
-                    
-                        <a href="#">LET'S CONNECT</a>
-                  
-                    </div>
-
-                    <ul class="top-footer">
-            
-                        <li><a href="#"><img src="./assets/twitter.svg" alt=""></a></li> 
-                        <li><a href="#"><img src="./assets/linkdn.svg" alt=""></a></li> 
-                        <li><a href="#"><img src="./assets/medium.svg" alt=""></a></li> 
-                        <li><a href="#"> <img src="./assets/github.svg" alt=""></a></li> 
-                        <li><a href="#"><img src="./assets/rabbit.svg" alt=""></a></li> 
-                 
-                     </ul>
-
-
-            
-                </div>
-            
-    
-            </section>
-    
-        </div>
-        <!-- returning other part after pr -->
-
-        <div class="second-container" id="portfolio"></div>
-
-        <div class="pop"></div>
-
-        <!-- <div class="overlay"></div> -->
-
-        <div class="third-container" id="about">
-
-                <div class="lower-body">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Portfolio</title>
+</head>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+<link rel="stylesheet" href="./index.css">
+
+<body>
+    <header class="header">
+        <a href="#" class="navbar-brand"> SimpleShaikh </a>
+    <nav class="navbar"> 
+        <button id="open-menu" class="fa-solid fa-bars" ></button>      
+        <ul class="menu-list" id = "menu-items">
+            <li><a href="" class="menu">Portfolio</a></li>
+            <li><a href="#about" class="menu">About</a></li>
+            <li><a href="#contact" class="menu">Contact</a></li>
+            <li><a href="" class="menu"><i class="fa fa-envelope-o envelope"></i></a></li>
+            
+        </ul> 
         
-                    <h2>About Myself</h2>
-            
-                    <p>
-                      I’m a software developer! I can help you build a product , feature or <br>
-                      website Look through some of my work and experience! If you like what
-                      you see and have a project you need coded, don’t hestiate to contact
-                      me.
-                    </p>
-    
-                    <div class="footer-third-container">
-                    
-                        <p><a href="#">LET'S CONNECT</a> </p>
-                
-                    </div>
-                
-                    <ul class="lower-footer">
-                
-                        <li><a href="#"><img src="./assets/twitter.svg" alt="twitter icon"></a></li>
-                        <li><a href="#"><img src="./assets/linkdn.svg" alt=""></a></li>
-                        <li><a href="#"><img src="./assets/medium.svg" alt=""></a></li>
-                        <li><a href="#"><img src="./assets/github.svg" alt=""></a></li>
-                        <li><a href="#"><img src="./assets/rabbit.svg" alt=""></a></li>
-                
+        <nav class="mobile-nav">
+            <button id="close-menu" class="fa-solid fa-xmark" ></button>
+            <ul>
+                <a href="#Portfolio" id="mobile-menu">Portfolio</a>
+                <a href="#about" id="mobile-menu">About</a>
+                <a href="#contact" id="mobile-menu">Contact</a>
+            </ul>
+            
+        </nav>
+             
+    </nav>
+    </header>
+    
+
+    <section class="Mobile-view">
+        <div class="mobile-container">
+            <div class="info">
+                <div class="intro1">
+                <h1 class="intro">Hey There. I'm Toyyib.</h1>
+                <h2 class="skill">I'm a Software Developer</h2>
+                <p class="bio">
+                I can help you build a product , feature or website Look through some of my work and experience! If you like what you see and have a project you need coded, 
+don't hesitate to contact me.
+                </p>
+                </div>
+                <div class="social-icons">
+                    <ul>
+                        <li class="socials"><a href=""><i class="fa fa-github" ></i></a></li>
+                        <li class="socials"><a href=""><i class="fa fa-linkedin"></i></a></li>
+                        <li class="socials"><a href=""><i class="fa fa-angellist"></i></a></li>
+                        <li class="socials"><a href=""><i class="fa fa-twitter"></i></a></li>
+                        <li class="socials"><a href=""><i class="fa fa-medium"></i></a></li>
                     </ul>
-                
-                    <div class=" top-footer-btn">
-                        <button id="third-container-button" class="all-button">Get my resume</button>
-                    </div>
-            
                 </div>
-            
-               
-            
-                <ul class="languages-container">
-            
-                    <li class="language-container-top">
-            
-                        <p class="bold-text">Languages</p>
-            
-                        <img src="./assets/dropdown.png" alt="" id="dropdown-img">
-            
-                    </li>
-            
-                    <ul class="language-tools ">
+            </div>
+            <div class="first-page-deco-img" ></div>
+            <div class="second-img"></div>
+        </div>     
+        
+     <section id="works">
+        
+     </section> 
+     <section class="recent">
+        
+     </section>  
+     <div class="modal-views modal" id="modal">
+        
+     </div>
+    <section class="About" id="about">
+        <div class="grider">
+            <div >
+        <h1>About me</h1>
+        <p>
+            Hello I'm a software developer! I can help you build a product , feature or website Look through some of my work and experience! If you like what you see and have a project you need coded, don't hesitate to contact me.
+        </p>
+    </div>
+        <div class="group"></div>
+    </div>
     
-                        <img src="./assets/js.png" alt="" class="lang-img">
-                        <img src="./assets/html.png" alt="" class="lang-img">
-                        <img src="./assets/css.png" alt="" class="lang-img">
-            
-                        <li class="language-java-script language-li">
-            
-                            <img src="./assets/jsLogo.png" alt="">
-            
-                            <div id="javascript">
-                                
-                                <span> JavaScript</span>
-            
-                            </div>
-            
-                        </li>
-            
-                        <li class="language-html language-li">
-            
-                            <img src="./assets/h5Logo.png" alt="">
-            
-                            <div id="html">
-                                <span> HTML</span>
-                            </div>
-                        </li>
-            
-                        <li class="language-css language-li">
-            
-                            <img src="./assets/css3Logo.png" alt="">
-            
-                            <div id="css"> 
-                                
-                                <span> CSS </span>
-            
-                            </div>
-            
-                        </li>
-            
-                    </ul>
-            
-                    <ul class="language-footer">
-                        
-                        <li class="language-framwork">
-            
-                            <p class="bold-text">Frameworks</p>
-            
-                            <img src="./assets/dropdown.png" alt="" class="dropside-img">
+        <div class="about-me">
+            <button class="resume">Get my resume</button>
+        </div>
+        <div class="deco-img"></div>
+        <hr>
+        </div>
+        <div class="abilities">
+            <div>
+            <ul class="myUL" id="myUL-heading">
+                <li><h2 class="language"><img src="./assets/Rectangle55.png" alt="diamond-shape" class="diamond">&nbsp Language</h2></li>
+            </ul>
+            <ul class="myUL2" id="myUL-li"> 
+                <li class="lan">JavaScript</li>
+                <li class="lan">Ruby</li>
+                <li class="lan">Nodejs</li>
+                <li class="lan">GoLang</li>
+                <li class="lan">CSS</li>
                 
-                        </li>
-            
-                        <hr id="hr">
-            
-                        <li class="language-skill">
-            
-                            <p  class="bold-text">Skills</p>
-            
-                            <img src="./assets/dropdown.png" alt="" class=" dropside-img">
+            </ul>
+              </div>  
+              <div>
+            <ul class="myUL-frameworks" id="myUL-frame">
+                <li><h2 class="framework"><img src="./assets/Rectangle56.png" alt="diamond-shape" class="diamond">&nbsp Frameworks</h2></li>
+            </ul>
+            <ul class="myUL1 id="> 
+                <li class="frame">React.js</li>
+                <li class="frame">Ruby on Rails</li>
+                <li class="frame">Expressjs</li>
+                <li class="frame">Nextjs</li>
                 
-                        </li>
-            
-                        <hr>
-            
-            
-            
-                    </ul>
-            
-            
-                </ul>
-        
-        </div>
-
-        <div class="section-background" id="contact ">
-
-            <div class="section">
-
-                    <div class="contact-me-section">
-
-                        <div id="contact-me">
-                            <p >Contact me</p>
-                        </div>
-            
-    
-                        <div id="contact-msg">
-                            <p > 
-                                If you have an application you <br> are 
-                                interested in developing, a feature 
-                                that you need built or a project that
-                                needs coding. <br> I’d love to help with it 
-                            </p>
-                        </div>
-            
-                    </div>
-            
-            
-                    <div class="form-section">
-            
-                        <form action="https://formspree.io/f/mayzpyer" method="post">
-            
-                            <input type="text" name="name" placeholder="Name" class="name-input text" maxlength="30" onchange="changeEvent()" required> 
-                            <input type="email" name="email" placeholder="Email" class="email-input text" id="text2" onchange="changeEvent()" required> 
-                            <textarea name="textareaName" cols="30" rows="2" maxlength="500" id="type-msg" class="text" placeholder="Write your message here" onchange="changeEvent()" required></textarea>
-                            
-    
-                            <div class="btn-sec">
-            
-                                <button type="submit" class="sec-btn">   
-                                    <span>Get in touch</span>
-                                </button>
-                                <div class="error hidden">Email must be in lowercase</div>
-                                <span class="dot"></span>
+            </ul>
+            </div>
+            <div>
+            <ul class="myUL-skills" id="myUL-sk">
+                <li><h2 class="Skills"><img src="./assets/Rectangle57.png" alt="diamond-shape" class="diamond">&nbsp Skills</h2></li>
+            </ul>
+            <ul class="myUL1" id="myUL-li2"> 
+                <li class="Skill">Database Management</li>
+                <li class="Skill">Version Control</li>
+                <li class="Skil">CLI</li>
+                <li class="Skill">API Design</li>
+                <li class="Skill">Web Development</li>
                 
-                            </div>
-                        </form>   
-                    </div>
-                </div>
+            </ul> 
+            </div>
+            </div>   
+            <div class="back"><a href="">back to the top</a></div>
+    </section>
+    <section class="contact" id="contact">
+        <div class="contact-form">
+            <div>
+            <h3 class="contact-me">I'm always interested in hearing about new projects, so if you'd like to chat please get in touch.</h3>
+            </div>
     
-
-        
-                <div class="black-linen">
-                    <img src="./assets/Home Indicator/Shape.png" alt="">
+    
+    <fieldset class="fieldset">
+            <form action="https://formspree.io/f/xgebyodb" method="POST">
+                <div class="Initials">
+                <input class="name-field" type="text" name="name" id="me" placeholder="First name"  maxlength="30" required>
+                <input class="name-field" type="text" name="name" id="my" placeholder="Last name"  maxlength="30" required>
                 </div>
-        
+                <input class="email-field" type="email" name="email" id="mail" placeholder="Email address" required >
+                <textarea class="text-area-field" name="area" id="text-area" rows="5" maxlength="500" placeholder="write me something..."></textarea>
+            <div class="get">
+                <button  class="get-in-touch" type="submit" id="submit">Get in touch</button>
             </div>
-
+        </form>
+            </fieldset>
         </div>
-        
-
     
+        <footer>
+            <hr class="horizontal">
+            <div class="social-icon">
+                <ul>
+                    <li class="social"><a href=""><i class="fa fa-github" ></i></a></li>
+                    <li class="social"><a href=""><i class="fa fa-linkedin"></i></a></li>
+                    <li class="social"><a href=""><i class="fa fa-angellist"></i></a></li>
+                    <li class="social"><a href=""><i class="fa fa-twitter"></i></a></li>
+                    <li class="social"><a href=""><i class="fa fa-medium"></i></a></li>
+                </ul>
+                
+            </div>
+            <div class="back"><a href="">back to the top</a></div>
+            <div class="line"><img src="images/Shape.png" alt="decorative backgroung shape"></div>
+        </footer>
+    
+    </section>
     </div>
-    <script defer src="./index.js"></script>
-  </body>
-
-</html>
+    
+    <script src="https://kit.fontawesome.com/e0661bd0f3.js" crossorigin="anonymous"></script>
+    <script src="./index.js"></script>
+    </body>
+    </html>
+    
+    
\ No newline at end of file
diff --git a/index.js b/index.js
index a5363b5..817c100 100644
--- a/index.js
+++ b/index.js
@@ -1,239 +1,285 @@
-const hamburgMenu = document.querySelector('.right-hamburger');
-const menuList = document.querySelector('.nav-li');
-const xMen = document.querySelector('.x-men');
-
-hamburgMenu.addEventListener('click', () => {
-  menuList.classList.toggle('nav-active');
+const menuBtn = document.querySelector('#open-menu');
+const mobileMenu = document.querySelector('.mobile-nav');
+const closeBtn = document.querySelector('#close-menu');
+const menuItems = document.querySelectorAll('#mobile-menu');
+
+menuBtn.addEventListener('click', () => {
+  menuBtn.classList.toggle('is-active');
+  mobileMenu.classList.toggle('is-active');
 });
 
-xMen.addEventListener('click', () => {
-  xMen.classList.toggle('nav-active');
+closeBtn.addEventListener('click', () => {
+  mobileMenu.classList.remove('is-active');
 });
 
-menuList.addEventListener('click', () => {
-  menuList.classList.toggle('nav-active');
+menuItems.forEach((item) => {
+  item.addEventListener('click', () => {
+    mobileMenu.classList.remove('is-active');
+  });
 });
 
-// cards
-
-const projectDetails = [
+const cards = [
   {
     id: 1,
-    name: 'Tonic',
-    title: 'Canopy',
-    stack: 'Back End Dev',
-    year: '2015',
-    description: 'Experimental content creation feature that allows users to add to an existing stay over the course of a day without spamming their friends',
-    mobileImg: './assets/Snapshoot Portfolio.png',
-    desktopImg: './assets/first-desktop-card.png',
-    live: '#',
-    source: '#',
-    skills: {
-      skill1: 'html',
-      skill2: 'css',
-      skill3: 'javaScript',
-    },
+    title2: 'Multi Post Stories',
+    title1: 'Keeping track of hundreds  of components website',
+    title3: 'Profesional Art Printing Data',
+    title4: 'Data Dashboard Healthcare',
+    title5: 'Website Portfolio',
+    title6: 'Profesional Art Printing Data More',
+    tags: ['HTML', 'Bootstrap', 'Ruby on Rails'],
+    img1: './assets/Snapshoot-Portfolio.png',
+    img2: './assets/Snapshoot-Portfolio1.png',
+    description1:
+      'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essent',
+    description2:
+      'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it 1960s.',
+    description3:
+      'Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it 1960s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it 1960s with the releax map lapora verita.',
+    seelive: 'See live',
+    seesource: 'See source',
   },
-
   {
     id: 2,
-    name: 'Multi-Post Stories',
-    title: 'Canopy',
-    stack: 'Back End Dev',
-    year: '2015',
-    description: 'A daily selection of privately personalized reads; no accounts or sign-ups required.',
-    mobileImg: './assets/Snapshoot Portfolio 2.png',
-    desktopImg: './assets/second-desktop-card.png',
-    live: '#',
-    source: '#',
-    skills: {
-      skill1: 'html',
-      skill2: 'css',
-      skill3: 'javaScript',
-    },
+    title: 'My Recent Works',
+    img1: './assets/pic.png',
+    img2: './assets/gymnst.png',
+    heading: 'Multi-Post Stories',
+    description1:
+      'A daily selection of privately personalized reads; no accounts or sign-ups required. has been the industry standard dummy text ever since the 1500s, when an unknown printer took a standard dummy text.',
+    description2:
+      'A daily selection of privately personalized reads; no accounts or sign-ups required. This has been the industry standard dummy text ever since the 1500s, when an unknown printer took a standard dummy text.',
+    tags: ['CSS', 'HTML', 'Bootstrap', 'Ruby'],
+    button: 'see project',
   },
-
   {
     id: 3,
-    name: 'Tonic',
-    title: 'Canopy',
-    stack: 'Back End Dev',
-    year: '2015',
-    description: 'A daily selection of privately personalized reads; no accounts or sign-ups required.',
-    mobileImg: './assets/Snapshoot Portfolio 3.png',
-    desktopImg: './assets/second-desktop-card.png',
-    live: '#',
-    source: '#',
-    skills: {
-      skill1: 'html',
-      skill2: 'css',
-      skill3: 'javaScript',
-    },
+    img1: './assets/projects-backgound.png',
+    img2: './assets/whitebg.png',
+    title1: 'Profesional Art Printing Data',
+    title3: '',
+    description1:
+      'A daily selection of privately personalized reads; no accounts or sign-ups required. Has been the industry standard.',
+    tags: ['HTML', 'Bootstrap', 'Ruby'],
+    button: 'see project',
   },
-
   {
     id: 4,
-    name: 'Multi-Post Stories',
-    title: 'Canopy',
-    stack: 'Back End Dev',
-    year: '2015',
-    description: 'Experimental content creation feature that allows users to add to an existing stay over the course of a day without spamming their friends.',
-    mobileImg: './assets/Snapshoot Portfolio 4.png',
-    desktopImg: './assets/fourth-desktop-card.png',
-    live: '#',
-    source: '#',
-    skills: {
-      skill1: 'html',
-      skill2: 'css',
-      skill3: 'javaScript',
-    },
+    img1: './assets/projects-backgound.png',
+    img2: './assets/bg2.png',
+    title1: 'Profesional Art Printing Data',
+    title3: '',
+    title2: 'Data Dashboard Healthcare',
+    description1:
+      'A daily selection of privately personalized reads; no accounts or sign-ups required. Has been the industry standard.',
+    tags: ['HTML', 'Bootstrap', 'Ruby'],
+    button: 'see project',
+  },
+  {
+    id: 5,
+    img1: './assets/projects-backgound.png',
+    img2: './assets/bg3.png',
+    title1: 'Profesional Art Printing Data',
+    title2: '',
+    title3: 'Website Portfolio',
+    description1:
+      'A daily selection of privately personalized reads; no accounts or sign-ups required. Has been the industry standard.',
+    tags: ['HTML', 'Bootstrap', 'Ruby'],
+    button: 'see project',
+  },
+  {
+    id: 6,
+    img1: './assets/projects-backgound.png',
+    img2: './assets/bg4.png',
+    title1: 'Profesional Art Printing Data',
+    title2: 'Profesional Art Printing Data More',
+    title3: '',
+    description1:
+      'A daily selection of privately personalized reads; no accounts or sign-ups required. Has been the industry standard.',
+    tags: ['HTML', 'Bootstrap', 'Ruby'],
+    button: 'see project',
+  },
+  {
+    id: 7,
+    img1: './assets/projects-backgound.png',
+    img2: './assets/bg5.png',
+    title1: 'Profesional Art Printing Data',
+    title2: 'Data Dashboard Healthcare',
+    title3: '',
+    description1:
+      'A daily selection of privately personalized reads; no accounts or sign-ups required. Has been the industry standard.',
+    tags: ['HTML', 'Bootstrap', 'Ruby'],
+    button: 'see project',
+  },
+  {
+    id: 8,
+    img1: './assets/projects-backgound.png',
+    img2: './assets/bg6.png',
+    title1: 'Profesional Art Printing Data',
+    title2: '',
+    title3: 'Website Portfolio',
+    description1:
+      'A daily selection of privately personalized reads; no accounts or sign-ups required. Has been the industry standard.',
+    tags: ['HTML', 'Bootstrap', 'Ruby'],
+    button: 'see project',
   },
-
 ];
 
-projectDetails.forEach((projects, index) => {
-  const section = document.createElement('div');
-
-  const isSecond = index === 1;
-  const isLast = index === 3;
-  const reverseClass = isSecond ? 'inner-second-containerr' : '';
-  const marginB = isLast ? 'inner-second-containerl' : '';
-
-  section.innerHTML = `
-    <section class = "second-container">
-      <div class = "inner-second-container ${reverseClass} ${marginB}">
-        <div class = "top-image same ${projects.id}">
-          <img src=" ${projects.mobileImg} " class="mobile-first-card ${projects.id}"></img>
-          <img src="${projects.desktopImg}" class="desktop-first-card ${projects.id}"></img>
-        </div>
-
-        <div class = "text-inner-container same">
-          <h2> ${projects.name}</h2>
-          <div class = "canopy-inner-container">
-            <p id ="text1"> ${projects.title} </p>
-            <ul> 
-              <li> ${projects.stack} </li> 
-              <li> ${projects.year} </li> 
+// function to display cardss
+function displayCard(card) {
+  const worksElement = document.getElementById('works');
+  // create the card HTML
+  const cardHTML = `
+    <div class='recent-works'>
+      <div class='flex'>
+        <h1>${card.title}</h1>
+        <hr class='hor' >
+      </div>
+      <div class='grid'>
+        <div class='gymnast'></div>
+        <div>     
+          <h2 class='recent1'>${card.heading}</h2>
+          <p class='recentp'>${card.description1}</p>
+          <div class='languages'>
+            <ul class='langu'>
+              ${card.tags.map((tag) => `<li><button id='btn-btn' class='works-btn' type='button'>${tag}</button></li>`).join('')}
             </ul>
           </div>
 
-          <div class = "canopy-daily"> 
-            <p> ${projects.description} </p>
-          </div>
-              
-          <ul class = "canopy-list"> 
-            <li> ${projects.skills.skill1} </li>
-            <li> ${projects.skills.skill2} </li>
-            <li> ${projects.skills.skill3} </li> 
-          </ul>
-
-          <div>
-            <button id="second-container-button" class="all-button"> See Project </button>
+          <button class='see' data-modal-target='#modal'>${card.button}</button>
+        </div>    
+  `;
+  // add the card HTML to the 'works' element
+  worksElement.innerHTML = cardHTML;
+}
+displayCard(cards[1]);
+
+const Cards = document.querySelector('.recent');
+
+function display() {
+  const firstCard = `
+    <div class='see-proj'>
+      <div class='projects-background' id='bg1'> 
+        <div class='background'>
+        <h2 class='projects-heading' id='h'>${cards[3].title1}</h2>
+        <p class='para' id='p'>${cards[3].description1}</p>
+          <div class='project-btn'>
+            <ul class='langu'>
+            ${cards[3].tags.map((tag) => `<li><button id='pro-btn1' class='projects-btn' type='button'>${tag}</button></li>`).join('')}
+            </ul>
           </div>
-
-        </div>
-
+        </div class='btn-container'>
+        <button class='sees-project' id='see-proj-btn' data-modal-target='#modal'>${cards[3].button}</button>
       </div>
-
-    </section>
-              
+    </div>
   `;
 
-  const sections = document.querySelector('.second-container');
-  sections.append(section);
-
-  const allButton = document.querySelectorAll('.all-button');
-  const pop = document.querySelector('.pop');
-
-  allButton.forEach((btn) => {
-    btn.addEventListener('click', (e) => {
-      let { id } = e.target;
-      id = Number(id);
-      if (id === projects.id) {
-        pop.innerHTML = ` 
-          <div class = "pop-up">
-            <div class = "top">
-              <div class = "top-1">
-                <h2> ${projects.title} </h2>
-                <div class = "canopy-inner-container">
-                  <p id = "text1"> ${projects.title} </p>
-                  <ul> <li> ${projects.stack} </li> </ul>
-                  <ul> <li> ${projects.year} </li> </ul>
-                </div>
-              </div>
-
-              <div class="upper-2">
-                <i class="fa-solid fa-xmark close-btns"></i>
-              </div>
-
-            </div>
-
-            <img src = "${projects.img}" class = "mobile-first-card">
-
-            <div class = "canopy-daily">
-              <p> ${projects.description} </p>
-
-              <div class = "canopy-list">
-                <ul> <li> ${projects.skills.skill1} </li> </ul>
-                <ul> <li> ${projects.skills.skill2} </li> </ul>
-                <ul> <li> ${projects.skills.skill3} </li> </ul>
-              </div>
-
-              <div class="btns">
-                <button class="project-btn">See live&nbsp; <img src="./assets/Icon.png" alt=""></button>
-                <button class="project-btn">See source &nbsp;<img src="./assets/github.svg" alt=""> </button>
-              </div>
+  let displayCard = '';
+  for (let i = 3; i < cards.length; i += 1) {
+    displayCard += `
+      <div class='see-proj'>
+        <div class='projects-background' id='bg${i - 1}'> 
+          <div class='background' >
+            <h2 class='projects-heading'>${cards[i].title1}</h2>
+            <h2 class='Desktop-heading' id='d-heading2'>${cards[i].title3}</h2>
+            <h2 class='Desktop-heading' id='d-heading'>${cards[i].title2}</h2>
+              
+            <p class='para'>${cards[i].description1}</p>
+            <div class='project-btn'>
+              <ul class='langu'>
+                ${cards[i].tags.map((tag) => `<li><button id='pro-btn' class='projects-btn' type='button'>${tag}</button></li>`).join('')}
+              </ul>
             </div>
           </div>
-        `;
+            <button class='see-project' data-modal-target='#modal' >${cards[i].button} </button>
+        </div>
+      </div>
+    `;
+  }
 
-        document.querySelector('.top-container').classList.add('overlay');
-        sections.classList.add('overlay');
+  const gridContainer = document.createElement('div');
+  gridContainer.classList.add('grid-container');
+  gridContainer.innerHTML = firstCard + displayCard;
+  Cards.appendChild(gridContainer);
+}
 
-        const closeBtn = document.querySelector('.close-btn');
+display();
 
-        closeBtn.addEventListener('click', (e) => {
-          e.preventDefault();
+const popUpWindow = document.getElementById('modal');
 
-          pop.innerHTML = '';
+function popUpDisaplay(card) {
+  const popUp = `
+    <div class='modal-view'>
+      <div class='modal-header'>
+        <div>
+          <h1 class='mod-header'>${card.title2}</h1>
+          <h1 class='mod-header1'>${card.title1}</h1>
+        </div>
+        <div>
+          <button data-close-button id='mod-button' class='fa-solid fa-xmark'></button>
+        </div>
+      </div>
+      <div class='mod-btn-container'>
+        <ul class='mod-buttons'>
+            <li><button class='mod-btn' type='button'>${card.tags[0]}</button></li>
+            <li><button class='mod-btn' type='button'>${card.tags[1]}</button></li>
+            <li><button class='mod-btn' type='button'>${card.tags[2]}</button></li>
+        </ul>
+      </div>
+      <div class='images-popup'>
+        <div>
+            <img src='${card.img1}' alt='IOT-10-image' class='mod-img'>
+            <img src='${card.img2}' alt='IOT-10-image2' class='mod-img1'>
+        </div>
+        <div class='mod-para'><p class='first'>${card.description2}<br><br>${card.description3}</p>
+            <p class='p'>${card.description1}</p>
 
-          document.querySelector('.top-container').classList.remove('overlay');
+              <ul class='mod-buttons' id='modal-btn'>
+                <li><button class='mod-btns' type='button'>${card.seelive} &nbsp  <img src='./assets/Icon.png' alt='icon'></button></li>
+                <li><button class='mod-btns' type='button'>${card.seesource} &nbsp <img src='./assets/Icon2.png' alt='icon'></button></li>
+            </ul>
+        </div> 
+      </div>
+      <div id='overlay'></div>
+    </div>
+  `;
+  popUpWindow.innerHTML = popUp;
+}
+popUpDisaplay(cards[0]);
+
+const openModalButtons = document.querySelectorAll('[data-modal-target]');
+const closeModalButtons = document.querySelectorAll('[data-close-button]');
+const overlay = document.getElementById('overlay');
+
+function openModal(modal) {
+  if (modal == null) return;
+  modal.classList.add('active');
+  overlay.classList.add('active');
+}
+
+function closeModal(modal) {
+  if (modal == null) return;
+  modal.classList.remove('active');
+  overlay.classList.remove('active');
+}
+
+openModalButtons.forEach((button) => {
+  button.addEventListener('click', () => {
+    const modal = document.querySelector(button.dataset.modalTarget);
+    openModal(modal);
+  });
+});
 
-          sections.classList.remove('overlay');
-        });
-      }
-    });
+overlay.addEventListener('click', () => {
+  const modals = document.querySelectorAll('.modal.active');
+  modals.forEach((modal) => {
+    closeModal(modal);
   });
 });
 
-const form = document.forms[0];
-form.addEventListener('submit', (e) => {
-  const email = form.elements.email.value;
-  const errorMsg = document.querySelector('.error');
-  if (email === email.toLowerCase()) {
-    form.onsubmit();
-  } else {
-    errorMsg.innerHTML = 'Email should be lowercase';
-    errorMsg.classList.remove('hidden');
-  }
-  e.preventDefault();
+closeModalButtons.forEach((button) => {
+  button.addEventListener('click', () => {
+    const modal = button.closest('#modal');
+    closeModal(modal);
+  });
 });
-const changeEvent = () => {
-  const userName = document.querySelector('.name-input').value;
-  const userEmail = document.querySelector('.email-input').value;
-  const message = document.querySelector('textarea').value;
-  const data = {
-    name: userName,
-    email: userEmail,
-    message,
-  };
-  const jsonData = JSON.stringify(data);
-  localStorage.setItem('data', jsonData);
-};
-const localData = JSON.parse(localStorage.getItem('data'));
-document.querySelector('.name-input').value = localData.name;
-document.querySelector('.email-input').value = localData.email;
-document.querySelector('textarea').value = localData.message;
-
-const sendBtn = document.querySelector('.sec-btn');
-sendBtn.addEventListener('change', changeEvent);
\ No newline at end of file
diff --git a/index.txt b/index.txt
new file mode 100644
index 0000000..141de08
--- /dev/null
+++ b/index.txt
@@ -0,0 +1,270 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+
+    <link rel="stylesheet" href="./index.css" />
+    
+    <title>Toyyib</title>
+  </head>
+
+  <body>
+
+    <div class="wrapper">
+
+        <div class="top-container">
+
+    
+            <div class="header">
+    
+                <a href="#" class="left-text">My Logo</a>
+    
+                <nav class="right-hamburger" id="hamburger">
+    
+                    <img src="./assets/Union.png" alt="" >
+    
+                </nav>
+
+                <nav class="nav-li">
+                    <div class="x-men"><span>X</span></div>
+
+                    <a href="#portfolio" class="lis active">Portfolio</a>
+                    <a href="#about" class="lis">About</a>
+                    <a href="#contact" class="lis">Contact</a>
+
+                </nav>
+    
+            </div>
+    
+            <section class="top-body-background">
+                <div class="top-body">
+    
+                    <h1>I'm Toyyib. Glad to see you!</h1>
+            
+                    <p>
+                    I’m a software developer! I can help you build a product , feature or
+                    website Look through some of my work and <br> experience! If you like what
+                    you see and have a project you need coded, don’t hestiate to contact
+                    me.
+                    </p>
+
+                    <div class="footer-connect">
+                    
+                        <a href="#">LET'S CONNECT</a>
+                  
+                    </div>
+
+                    <ul class="top-footer">
+            
+                        <li><a href="#"><img src="./assets/twitter.svg" alt="twitter icon"></a></li> 
+                        <li><a href="#"><img src="./assets/linkdn.svg" alt=""></a></li> 
+                        <li><a href="#"><img src="./assets/medium.svg" alt=""></a></li> 
+                        <li><a href="#"> <img src="./assets/github.svg" alt=""></a></li> 
+                        <li><a href="#"><img src="./assets/rabbit.svg" alt=""></a></li> 
+                 
+                     </ul>
+
+
+            
+                </div>
+            
+    
+            </section>
+    
+        </div>
+        <!-- returning other part after pr -->
+
+        <section class="second-container" id="portfolio"></section>
+
+        <div class="pop" id="modal">
+
+        </div>
+
+        <div class="overlay"></div>
+
+        <div class="third-container" id="about">
+
+                <div class="lower-body">
+        
+                    <h2>About Myself</h2>
+            
+                    <p>
+                      I’m a software developer! I can help you build a product , feature or <br>
+                      website Look through some of my work and experience! If you like what
+                      you see and have a project you need coded, don’t hestiate to contact
+                      me.
+                    </p>
+    
+                    <div class="footer-third-container">
+                    
+                        <p><a href="#">LET'S CONNECT</a> </p>
+                
+                    </div>
+                
+                    <ul class="lower-footer">
+                
+                        <li><a href="#"><img src="./assets/twitter.svg" alt="twitter icon"></a></li>
+                        <li><a href="#"><img src="./assets/linkdn.svg" alt=""></a></li>
+                        <li><a href="#"><img src="./assets/medium.svg" alt=""></a></li>
+                        <li><a href="#"><img src="./assets/github.svg" alt=""></a></li>
+                        <li><a href="#"><img src="./assets/rabbit.svg" alt=""></a></li>
+                
+                    </ul>
+                
+                    <div class=" top-footer-btn">
+                        <button id="third-container-button" class="all-button">Get my resume</button>
+                    </div>
+            
+                </div>
+            
+               
+            
+                <ul class="languages-container">
+            
+                    <li class="language-container-top">
+            
+                        <p class="bold-text">Languages</p>
+            
+                        <img src="./assets/dropdown.png" alt="" id="dropdown-img">
+            
+                    </li>
+            
+                    <ul class="language-tools ">
+    
+                        <img src="./assets/js.png" alt="" class="lang-img">
+                        <img src="./assets/html.png" alt="" class="lang-img">
+                        <img src="./assets/css.png" alt="" class="lang-img">
+            
+                        <li class="language-java-script language-li">
+            
+                            <img src="./assets/jsLogo.png" alt="">
+            
+                            <div id="javascript">
+                                
+                                <span> JavaScript</span>
+            
+                            </div>
+            
+                        </li>
+            
+                        <li class="language-html language-li">
+            
+                            <img src="./assets/h5Logo.png" alt="">
+            
+                            <div id="html">
+                                <span> HTML</span>
+                            </div>
+                        </li>
+            
+                        <li class="language-css language-li">
+            
+                            <img src="./assets/css3Logo.png" alt="">
+            
+                            <div id="css"> 
+                                
+                                <span> CSS </span>
+            
+                            </div>
+            
+                        </li>
+            
+                    </ul>
+            
+                    <ul class="language-footer">
+                        
+                        <li class="language-framwork">
+            
+                            <p class="bold-text">Frameworks</p>
+            
+                            <img src="./assets/dropdown.png" alt="" class="dropside-img">
+                
+                        </li>
+            
+                        <hr id="hr">
+            
+                        <li class="language-skill">
+            
+                            <p  class="bold-text">Skills</p>
+            
+                            <img src="./assets/dropdown.png" alt="" class=" dropside-img">
+                
+                        </li>
+            
+                        <hr>
+            
+            
+            
+                    </ul>
+            
+            
+                </ul>
+        
+        </div>
+
+        <div class="section-background" id="contact ">
+
+            <div class="section">
+
+                    <div class="contact-me-section">
+
+                        <div id="contact-me">
+                            <p >Contact me</p>
+                        </div>
+            
+    
+                        <div id="contact-msg">
+                            <p > 
+                                If you have an application you <br> are 
+                                interested in developing, a feature 
+                                that you need built or a project that
+                                needs coding. <br> I’d love to help with it 
+                            </p>
+                        </div>
+            
+                    </div>
+            
+            
+                    <div class="form-section">
+            
+                        <form action="https://formspree.io/f/mayzpyer" method="post">
+            
+                            <input type="text" name="name" placeholder="Name" class="name-input text" maxlength="30" onchange="changeEvent()" required> 
+                            <input type="email" name="email" placeholder="Email" class="email-input text" id="text2" onchange="changeEvent()" required> 
+                            <textarea name="textareaName" cols="30" rows="2" maxlength="500" id="type-msg" class="text" placeholder="Write your message here" onchange="changeEvent()" required></textarea>
+                            
+    
+                            <div class="btn-sec">
+            
+                                <button type="submit" class="sec-btn">   
+                                    <span>Get in touch</span>
+                                </button>
+                                <div class="error hidden">Email must be in lowercase</div>
+                                <span class="dot"></span>
+                
+                            </div>
+                        </form>   
+                    </div>
+                </div>
+    
+
+        
+                <div class="black-linen">
+                    <img src="./assets/Home Indicator/Shape.png" alt="">
+                </div>
+        
+            </div>
+
+        </div>
+        
+
+    
+    </div>
+    <script defer src="./index.js"></script>
+  </body>
+
+</html>
diff --git a/index2.css b/index2.css
new file mode 100644
index 0000000..20760ac
--- /dev/null
+++ b/index2.css
@@ -0,0 +1,829 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Urbanist:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+
+* {
+  margin: 0;
+  padding: 0;
+  /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
+  font-family: Poppins;
+}
+
+/* error message */
+.hidden {
+  display: none;
+}
+
+.wrapper {
+  width: 375px;
+  background-color: #e5e5e5;
+  display: grid;
+}
+
+.top-container {
+  background-color: white;
+  border-bottom-left-radius: 10%;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 8%;
+  margin-left: 5%;
+  width: 85%;
+  margin-top: 5%;
+  text-align: center;
+}
+
+/* desktop nav */
+.nav-li {
+  position: fixed;
+  height: 100vh;
+  z-index: 1;
+  right: 0;
+  left: 0;
+  top: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  overflow-y: scroll;
+  width: 100%;
+  text-align: left;
+  background: #6070ffba;
+  transform: translateY(100%);
+  transition: transform 0.5s ease-in;
+  backdrop-filter: blur(5px);
+  padding: 1rem;
+}
+
+.nav-li a {
+  text-align: left;
+  margin-bottom: 3rem;
+  color: white;
+  text-decoration: none;
+  font-weight: bolder;
+  font-size: xx-large;
+}
+
+.nav-active {
+  transform: translateY(0);
+}
+
+.right-hamburger {
+  cursor: pointer;
+}
+
+.x-men {
+  display: flex;
+  margin-bottom: 2rem;
+  justify-content: flex-end;
+  width: 90%;
+  cursor: pointer;
+  color: white;
+}
+
+.left-text {
+  font-weight: 700;
+  font-style: normal;
+  font-size: 18px;
+  color: #6070ff;
+  text-decoration: none;
+  animation-name: rotation;
+  animation-duration: 6s;
+}
+
+.top-body-background {
+  background-image: url("./assets/header-shapes\ mobile.png");
+  background-size: contain;
+  background-position: 1ch -1em;
+  background-repeat: no-repeat;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: 630px;
+}
+
+@keyframes rotation {
+  0% { transform: rotate(0deg); }
+  16% { transform: rotate(180deg); }
+  50% { transform: rotate(360deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.top-image {
+  /* stylelint-disable-next-line length-zero-no-unit */
+  filter: blur(0px);
+  animation-name: rotation;
+  animation-duration: 6s;
+}
+
+.top-image:hover {
+  filter: blur(3px);
+}
+
+.top-body {
+  justify-content: center;
+  height: 80vh;
+  margin-left: 5%;
+}
+
+.top-body h1 {
+  font-size: 40px;
+  line-height: 52px;
+  font-style: normal;
+  display: flex;
+  align-items: center;
+  font-weight: 700;
+  padding: 5px;
+  width: 70%;
+  color: #172b4d;
+}
+
+.top-body p {
+  width: 95%;
+  margin-bottom: 5%;
+  color: #344563;
+}
+
+.footer-connect {
+  margin-bottom: 5%;
+  color: hsl(234, 100%, 75%);
+  text-decoration: none;
+}
+
+.footer-connect a {
+  text-decoration: none;
+  font-size: large;
+}
+
+.top-footer {
+  width: 60%;
+  display: flex;
+  justify-content: space-between;
+  list-style: none;
+}
+
+.second-container {
+  box-sizing: border-box;
+  margin-top: 5%;
+  padding-left: 3%;
+  padding-right: 3%;
+}
+
+.inner-second-container {
+  padding: 4%;
+  margin-top: 20%;
+  box-shadow: rgb(163, 17, 17);
+  background-color: white;
+  border-radius: 4%;
+}
+
+.inner-second-containerr {
+  padding: 4%;
+  margin-top: 20%;
+  box-shadow: rgb(163, 17, 17);
+  background-color: white;
+  border-radius: 4%;
+}
+
+.inner-second-containerl {
+  padding: 4%;
+  box-shadow: rgb(163, 17, 17);
+  background-color: white;
+  border-radius: 4%;
+  margin-top: 20%;
+  margin-bottom: 100px;
+}
+
+.top-image img {
+  width: 100%;
+}
+
+.text-inner-container h2 {
+  font-weight: 800;
+  color: #344563;
+  margin-bottom: 2%;
+}
+
+.canopy-inner-container {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 20px;
+}
+
+.canopy-inner-container #text1 {
+  padding-right: 10px;
+  font-size: 13px;
+  color: #344563;
+}
+
+.canopy-inner-container #text {
+  color: #7a869a;
+}
+
+.canopy-inner-container ul {
+  display: flex;
+  font-size: 13px;
+  justify-content: space-around;
+  width: 70%;
+}
+
+.canopy-daily {
+  margin-bottom: 20px;
+}
+
+.canopy-list {
+  display: flex;
+  justify-content: space-between;
+  width: 70%;
+}
+
+.canopy-list li {
+  background-color: #ebebff;
+  border-radius: 10px;
+  padding: 3px 3px;
+  margin: 1px;
+  color: #6070ff;
+  list-style: none;
+}
+
+.all-button {
+  border: 1px solid #396df2;
+  background-color: white;
+  width: 50%;
+  border-radius: 10px;
+  margin: 20px 0;
+  padding: 8px;
+  color: #396df2;
+  font-size: large;
+}
+
+.all-button:hover {
+  background-color: rgb(91, 91, 238);
+  color: white;
+}
+
+.all-button:active {
+  background-color: hsl(235, 72%, 48%);
+  color: white;
+}
+
+.third-container {
+  padding: 3%;
+  background-color: white;
+  border-radius: 0 15% 0 0;
+}
+
+.lower-body {
+  margin-top: 20%;
+  width: 90%;
+}
+
+.lower-body h2 {
+  font-weight: 800;
+  font-size: 42px;
+  color: #172b4d;
+  margin-bottom: 15px;
+}
+
+.lower-body p {
+  color: #344563;
+  margin-bottom: 20px;
+}
+
+.footer-third-container {
+  margin-top: 10px;
+  margin-bottom: 10%;
+}
+
+.footer-third-container a {
+  text-decoration: none;
+  color: #7f8cff;
+}
+
+.lower-footer {
+  display: flex;
+  justify-content: space-between;
+  width: 60%;
+  margin-bottom: 3%;
+  padding-left: 15px;
+  list-style: none;
+}
+
+#third-container-button {
+  border: 1px solid #396df2;
+  width: 55%;
+  border-radius: 10px;
+  margin: 20px 0;
+  padding: 15px 5px;
+  color: #396df2;
+  font-size: large;
+}
+
+#third-container-button:hover {
+  background-color: rgb(91, 91, 238);
+  color: white;
+}
+
+#third-container-button:active {
+  background-color: hsl(235, 72%, 48%);
+  color: white;
+}
+
+.languages-container {
+  background-color: white;
+  margin-top: 0.5%;
+  padding: 20% 3% 15% 3%;
+  width: 90%;
+}
+
+.language-container-top {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 15%;
+}
+
+#dropdown-img {
+  height: 8px;
+}
+
+.dropside-img {
+  height: 8px;
+  transform: rotate(-90deg);
+}
+
+.language-java-script {
+  display: flex;
+  justify-content: space-between;
+  background-color: #f7f7f9;
+  border-radius: 5px;
+  position: relative;
+  margin-bottom: 20px;
+  padding-left: 10px;
+  box-shadow: 10px 10px 50px 0 #d7e7f8;
+}
+
+#javascript {
+  position: absolute;
+  top: 15px;
+  left: 80px;
+}
+
+.language-html {
+  display: flex;
+  justify-content: space-between;
+  background-color: #f7f7f9;
+  border-radius: 5px;
+  position: relative;
+  margin-bottom: 20px;
+  padding-left: 10px;
+  box-shadow: 10px 10px 50px 0 #d7e7f8;
+}
+
+#html {
+  position: absolute;
+  top: 15px;
+  left: 80px;
+}
+
+.language-css {
+  display: flex;
+  justify-content: space-between;
+  background-color: #f7f7f9;
+  border-radius: 5px;
+  position: relative;
+  margin-bottom: 20px;
+  padding-left: 10px;
+  box-shadow: 10px 10px 50px 0 #d7e7f8;
+}
+
+#css {
+  position: absolute;
+  top: 15px;
+  left: 80px;
+}
+
+.language-footer {
+  margin-top: 40px;
+}
+
+.language-framwork {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 8%;
+}
+
+.language-skill {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 8%;
+}
+
+.section-background {
+  background: white;
+}
+
+.section {
+  margin-top: 20%;
+  background-color: #6070ff;
+  background-image: url("./assets/header-shapes\ mobile.png");
+  background-size: contain;
+  background-repeat: no-repeat;
+  border-top-left-radius: 15%;
+  padding: 4% 3% 15% 3%;
+}
+
+.contact-me-section {
+  margin-top: 80px;
+  margin-bottom: 40px;
+  text-align: center;
+  color: white;
+  width: 90%;
+}
+
+.contact-me-section #contact-me {
+  font-weight: bold;
+  font-size: xx-large;
+  margin-bottom: 15px;
+}
+
+#contact-me p {
+  font-weight: bold;
+  font-size: xx-large;
+  margin-bottom: 1px;
+}
+
+form .text {
+  width: 90%;
+  font-size: 1.2rem;
+  display: flex;
+  padding: 3px;
+  border-radius: 10px;
+  margin-bottom: 3%;
+  border: none;
+}
+
+form #type-msg {
+  width: 90%;
+  height: 20vh;
+  padding-left: 15px;
+  padding-bottom: 50%;
+  border-radius: 10px;
+  margin-bottom: 5%;
+  border: none;
+}
+
+.btn-sec {
+  position: relative;
+}
+
+.sec-btn {
+  padding: 10px 20px;
+  border-radius: 10px;
+  border: none;
+  color: #6070ff;
+  cursor: pointer;
+  transition: all 0.5s;
+}
+
+.sec-btn span {
+  cursor: pointer;
+  display: inline-block;
+  position: relative;
+  transition: 0.5s;
+}
+
+/* stylelint-disable-next-line selector-pseudo-element-colon-notation */
+.sec-btn span:after {
+  content: '\00bb';
+  position: absolute;
+  opacity: 0;
+  top: 0;
+  right: -20px;
+  transition: 0.5s;
+}
+
+/* stylelint-disable-next-line selector-pseudo-element-colon-notation */
+.sec-btn:hover span:after {
+  opacity: 1;
+  right: 0;
+}
+
+.sec-btn:hover span {
+  padding-right: 25px;
+}
+
+.sec-btn:hover {
+  background-color: rgb(91, 91, 238);
+  color: white;
+}
+
+.sec-btn:active {
+  background-color: #5a38f6;
+  box-shadow: 0 2px rgb(127, 160, 251);
+  transform: translateY(4px);
+}
+
+.dot {
+  height: 30px;
+  width: 30px;
+  background-color: white;
+  border-radius: 50%;
+  display: inline-block;
+  position: absolute;
+  left: 75%;
+  top: 8px;
+}
+
+.black-linen {
+  margin-top: 15px;
+  text-align: center;
+}
+
+.bold-text {
+  font-weight: bold;
+}
+
+#hr {
+  margin-bottom: 20px;
+}
+
+/* Pop windows for card */
+
+.pop-up {
+  width: 343px;
+  height: auto;
+  position: fixed;
+  top: 60px;
+  right: 5%;
+  bottom: 0;
+  left: calc(50% - 343px / 2);
+  overflow: scroll;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  border-radius: 10px;
+  background-color: #1e0404;
+}
+
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  width: 100%;
+  margin-top: 30px;
+}
+
+.top-1 {
+  width: 10px;
+  height: 20px;
+  position: relative;
+}
+
+.overlay {
+  filter: blur(10px);
+  mix-blend-mode: multiply;
+  background: #c1c7d0;
+}
+
+.error {
+  width: auto;
+  height: auto;
+  background-color: #fff;
+  color: red;
+  font-family: 'poppins', sans-serif;
+  text-align: center;
+  border-radius: 8px;
+  margin-top: 10px;
+}
+
+@media only screen and (min-width: 768px) {
+  .wrapper {
+    width: auto;
+    overflow: hidden;
+  }
+
+  .header {
+    margin-top: 1rem;
+  }
+
+  .right-hamburger {
+    display: none;
+  }
+
+  .nav-li {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .nav-li > a {
+    text-decoration: none;
+    margin: 0 1rem;
+  }
+
+  .top-body-background {
+    background-size: cover;
+    background-position: 2ch em;
+    background-repeat: no-repeat;
+    margin-top: 1rem;
+  }
+
+  .top-body {
+    height: 30vh;
+    width: 90vw;
+    margin-left: 20%;
+    margin-bottom: 10rem;
+  }
+
+  .top-body h1 {
+    width: 40%;
+    margin-top: 2rem;
+  }
+
+  .top-body p {
+    width: 60%;
+    margin-bottom: 2rem;
+  }
+
+  .footer-connect {
+    margin-bottom: 1%;
+  }
+
+  .top-footer {
+    width: 15%;
+  }
+
+  .mobile-first-card {
+    display: none;
+  }
+
+  .inner-second-container {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: 3.5rem;
+    width: 90%;
+    margin: 0 auto;
+  }
+
+  .inner-second-containerr {
+    display: flex;
+    flex-direction: row-reverse;
+    width: 90%;
+    margin: 0 auto;
+  }
+
+  .inner-second-containerl {
+    display: flex;
+    flex-direction: row-reverse;
+    width: 90%;
+    margin: 0 auto;
+    margin-bottom: 5%;
+  }
+
+  .same {
+    flex: 0 0 calc(50% - 2rem);
+  }
+
+  .top-image img {
+    width: 100%;
+  }
+
+  @keyframes rotation {
+    0% { transform: rotate(0deg); }
+    16% { transform: rotate(180deg); }
+    50% { transform: rotate(360deg); }
+    100% { transform: rotate(360deg); }
+  }
+
+  .top-image {
+    /* stylelint-disable-next-line length-zero-no-unit */
+    filter: blur(0px);
+    animation-name: rotation;
+    animation-duration: 6s;
+  }
+
+  .top-image:hover {
+    filter: blur(3px);
+  }
+
+  .text-inner-container {
+    width: 90%;
+    margin-right: 5%;
+  }
+
+  .canopy-inner-container {
+    width: 50%;
+  }
+
+  .canopy-inner-container ul {
+    gap: 1rem;
+    width: 60%;
+    margin-left: 5%;
+  }
+
+  .canopy-list {
+    display: flex;
+    justify-content: space-between;
+    gap: 0.2rem;
+    width: 45%;
+  }
+
+  .canopy-list li {
+    padding: 8px;
+  }
+
+  .all-button {
+    margin: 40px 0;
+    width: 30%;
+  }
+
+  .third-container {
+    display: flex;
+    width: 95%;
+    margin: 0 auto;
+    border-radius: 0 15% 0 0;
+  }
+
+  .lower-body {
+    width: 50%;
+  }
+
+  .lower-footer {
+    width: 40%;
+  }
+
+  .languages-container {
+    width: 80%;
+    margin-top: 1rem;
+  }
+
+  .languages-tools {
+    margin-top: 2px;
+  }
+
+  .language-li {
+    display: none;
+  }
+
+  .section {
+    background-size: cover;
+    background-position: 2ch -8em;
+    background-repeat: no-repeat;
+    margin-top: 2rem;
+  }
+
+  .contact-me-section {
+    margin-top: 80px;
+    margin-bottom: 40px;
+    text-align: center;
+    width: 70%;
+  }
+
+  .contact-me-section #contact-msg {
+    margin-bottom: 40px;
+    margin-left: 50%;
+    text-align: center;
+    width: 50%;
+  }
+
+  .contact-me-section #contact-me {
+    margin-bottom: 40px;
+    margin-left: 50%;
+    text-align: center;
+    width: 50%;
+  }
+
+  .form-section {
+    width: 50%;
+    margin-left: 30%;
+  }
+
+  form .text {
+    border-radius: 0%;
+  }
+
+  form #type-msg {
+    border-radius: 0%;
+    width: 89%;
+    height: 5vh;
+  }
+
+  .dot {
+    display: none;
+  }
+
+  .sec-btn {
+    margin-left: 35%;
+  }
+
+  .black-linen {
+    display: none;
+  }
+
+  /* pop up */
+
+  .overlay {
+    filter: blur(10px);
+    mix-blend-mode: multiply;
+    background: #c1c7d0;
+  }
+}
diff --git a/index2.hbs b/index2.hbs
new file mode 100644
index 0000000..fe52267
--- /dev/null
+++ b/index2.hbs
@@ -0,0 +1,285 @@
+const hamburgMenu = document.querySelector('.right-hamburger');
+const menuList = document.querySelector('.nav-li');
+const xMen = document.querySelector('.x-men');
+
+hamburgMenu.addEventListener('click', () => {
+  menuList.classList.toggle('nav-active');
+});
+
+xMen.addEventListener('click', () => {
+  xMen.classList.toggle('nav-active');
+});
+
+menuList.addEventListener('click', () => {
+  menuList.classList.toggle('nav-active');
+});
+
+// cards
+
+const projectDetails = [
+  {
+    id: 1,
+    name: 'Tonic',
+    title: 'Canopy',
+    stack: 'Back End Dev',
+    year: '2015',
+    description: 'Experimental content creation feature that allows users to add to an existing stay over the course of a day without spamming their friends',
+    mobileImg: './assets/Snapshoot Portfolio.png',
+    desktopImg: './assets/first-desktop-card.png',
+    live: '#',
+    source: '#',
+    skills: {
+      skill1: 'html',
+      skill2: 'css',
+      skill3: 'javaScript',
+    },
+  },
+
+  {
+    id: 2,
+    name: 'Multi-Post Stories',
+    title: 'Canopy',
+    stack: 'Back End Dev',
+    year: '2015',
+    description: 'A daily selection of privately personalized reads; no accounts or sign-ups required.',
+    mobileImg: './assets/Snapshoot Portfolio 2.png',
+    desktopImg: './assets/second-desktop-card.png',
+    live: '#',
+    source: '#',
+    skills: {
+      skill1: 'html',
+      skill2: 'css',
+      skill3: 'javaScript',
+    },
+  },
+
+  {
+    id: 3,
+    name: 'Tonic',
+    title: 'Canopy',
+    stack: 'Back End Dev',
+    year: '2015',
+    description: 'A daily selection of privately personalized reads; no accounts or sign-ups required.',
+    mobileImg: './assets/Snapshoot Portfolio 3.png',
+    desktopImg: './assets/second-desktop-card.png',
+    live: '#',
+    source: '#',
+    skills: {
+      skill1: 'html',
+      skill2: 'css',
+      skill3: 'javaScript',
+    },
+  },
+
+  {
+    id: 4,
+    name: 'Multi-Post Stories',
+    title: 'Canopy',
+    stack: 'Back End Dev',
+    year: '2015',
+    description: 'Experimental content creation feature that allows users to add to an existing stay over the course of a day without spamming their friends.',
+    mobileImg: './assets/Snapshoot Portfolio 4.png',
+    desktopImg: './assets/fourth-desktop-card.png',
+    live: '#',
+    source: '#',
+    skills: {
+      skill1: 'html',
+      skill2: 'css',
+      skill3: 'javaScript',
+    },
+  },
+
+];
+
+projectDetails.forEach((projects, index) => {
+  const section = document.createElement('div');
+
+  const isSecond = index === 1;
+  const isLast = index === 3;
+  const reverseClass = isSecond ? 'inner-second-containerr' : '';
+  const marginB = isLast ? 'inner-second-containerl' : '';
+
+  section.innerHTML = `
+    <section class = "second-container">
+      <div class = "inner-second-container ${reverseClass} ${marginB}">
+        <div class = "top-image same ${projects.id}">
+          <img src=" ${projects.mobileImg} " class="mobile-first-card ${projects.id}"></img>
+          <img src="${projects.desktopImg}" class="desktop-first-card ${projects.id}"></img>
+        </div>
+
+        <div class = "text-inner-container same">
+          <h2> ${projects.name}</h2>
+          <div class = "canopy-inner-container">
+            <p id ="text1"> ${projects.title} </p>
+            <ul> 
+              <li> ${projects.stack} </li> 
+              <li> ${projects.year} </li> 
+            </ul>
+          </div>
+
+          <div class = "canopy-daily"> 
+            <p> ${projects.description} </p>
+          </div>
+              
+          <ul class = "canopy-list"> 
+            <li> ${projects.skills.skill1} </li>
+            <li> ${projects.skills.skill2} </li>
+            <li> ${projects.skills.skill3} </li> 
+          </ul>
+
+          <div>
+            <button id="second-container-button" class="all-button"> See Project </button>
+          </div>
+
+        </div>
+
+      </div>
+
+    </section>
+              
+  `;
+
+
+
+const popUpWindow = document.getElementById('modal');
+  function popUpDisaplay(card) {
+
+    const popUp = `
+      <div class = "pop-up">
+        <div class = "top">
+          <div class = "top-1">
+            <h2> ${projects.title} </h2>
+              <div class = "canopy-inner-container">
+                <p id = "text1"> ${projects.title} </p>
+                <ul> <li> ${projects.stack} </li> </ul>
+                <ul> <li> ${projects.year} </li> </ul>
+              </div>
+          </div>
+    
+          <div class="upper-2">
+            <i class="fa-solid fa-xmark close-btns"></i>
+          </div>
+    
+        </div>
+    
+        <img src = "${projects.img}" class = "mobile-first-card">
+    
+        <div class = "canopy-daily">
+          <p> ${projects.description} </p>
+    
+          <div class = "canopy-list">
+            <ul> 
+             <li> ${projects.skills.skill1} </li> 
+             <li> ${projects.skills.skill2} </li> 
+             <li> ${projects.skills.skill3} </li> 
+            </ul>
+          </div>
+    
+          <div class="btns">
+            <button class="project-btn">See live&nbsp; <img src="./assets/Icon.png" alt=""></button>
+            <button class="project-btn">See source &nbsp;<img src="./assets/github.svg" alt=""> </button>
+          </div>
+        </div>
+      </div>
+    `;
+    popUpWindow.innerHTML = popUp;
+  }
+
+  // const sections = document.querySelector('.second-container');
+  // sections.append(section);
+
+  // const allButton = document.querySelectorAll('.all-button');
+  // const pop = document.querySelector('.pop');
+
+  // allButton.forEach((btn) => {
+  //   btn.addEventListener('click', (e) => {
+  //     let { id } = e.target;
+  //     id = Number(id);
+  //     if (id === projects.id) {
+  //       pop.innerHTML = ` 
+  //         <div class = "pop-up">
+  //           <div class = "top">
+  //             <div class = "top-1">
+  //               <h2> ${projects.title} </h2>
+  //               <div class = "canopy-inner-container">
+  //                 <p id = "text1"> ${projects.title} </p>
+  //                 <ul> <li> ${projects.stack} </li> </ul>
+  //                 <ul> <li> ${projects.year} </li> </ul>
+  //               </div>
+  //             </div>
+
+  //             <div class="upper-2">
+  //               <i class="fa-solid fa-xmark close-btns"></i>
+  //             </div>
+
+  //           </div>
+
+  //           <img src = "${projects.img}" class = "mobile-first-card">
+
+  //           <div class = "canopy-daily">
+  //             <p> ${projects.description} </p>
+
+  //             <div class = "canopy-list">
+  //               <ul> <li> ${projects.skills.skill1} </li> </ul>
+  //               <ul> <li> ${projects.skills.skill2} </li> </ul>
+  //               <ul> <li> ${projects.skills.skill3} </li> </ul>
+  //             </div>
+
+  //             <div class="btns">
+  //               <button class="project-btn">See live&nbsp; <img src="./assets/Icon.png" alt=""></button>
+  //               <button class="project-btn">See source &nbsp;<img src="./assets/github.svg" alt=""> </button>
+  //             </div>
+  //           </div>
+  //         </div>
+  //       `;
+
+  //       document.querySelector('.top-container').classList.add('overlay');
+  //       sections.classList.add('overlay');
+
+  //       const closeBtn = document.querySelector('.close-btn');
+
+  //       closeBtn.addEventListener('click', (e) => {
+  //         e.preventDefault();
+
+  //         pop.innerHTML = '';
+
+  //         document.querySelector('.top-container').classList.remove('overlay');
+
+  //         sections.classList.remove('overlay');
+  //       });
+  //     }
+  //   });
+  // });
+});
+
+const form = document.forms[0];
+form.addEventListener('submit', (e) => {
+  const email = form.elements.email.value;
+  const errorMsg = document.querySelector('.error');
+  if (email === email.toLowerCase()) {
+    form.onsubmit();
+  } else {
+    errorMsg.innerHTML = 'Email should be lowercase';
+    errorMsg.classList.remove('hidden');
+  }
+  e.preventDefault();
+});
+const changeEvent = () => {
+  const userName = document.querySelector('.name-input').value;
+  const userEmail = document.querySelector('.email-input').value;
+  const message = document.querySelector('textarea').value;
+  const data = {
+    name: userName,
+    email: userEmail,
+    message,
+  };
+  const jsonData = JSON.stringify(data);
+  localStorage.setItem('data', jsonData);
+};
+const localData = JSON.parse(localStorage.getItem('data'));
+document.querySelector('.name-input').value = localData.name;
+document.querySelector('.email-input').value = localData.email;
+document.querySelector('textarea').value = localData.message;
+
+const sendBtn = document.querySelector('.sec-btn');
+sendBtn.addEventListener('change', changeEvent);
\ No newline at end of file