Navigation menu animation updated

MdRasen · Feb 15, 2023 · d6b7246 · d6b7246
1 parent e0ff359
commit d6b7246
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 16 deletions.
diff --git a/css/style.css b/css/style.css
@@ -40,16 +40,39 @@ ul {
     list-style: none;
 }
 
-.main-content {
-    padding-left: 270px;
-}
-
 .section {
     background: var(--bg-black-900);
     min-height: 100vh;
     display: block;
     padding: 0 30px;
     opacity: 1;
+    position: fixed;
+    left: 270px;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+}
+
+.section.back-section {
+    z-index: 1;
+}
+
+.section.active {
+    z-index: 2;
+    opacity: 1;
+    animation: slideSection 1s ease;
+}
+
+@keyframes slideSection {
+    0% {
+        transform: translateX(100%);
+    }
+
+    100% {
+        transform: translateX(0%);
+    }
 }
 
 .hidden {
@@ -791,4 +814,19 @@ h3.my-profession {
     }
 }
 
+@media (max-width: 416px) {
+
+    h3.hello {
+        font-size: 26px;
+    }
+
+    h3.my-profession {
+        font-size: 25px;
+    }
+
+    .home-info p {
+        font-size: 18px;
+    }
+}
+
 /* Device Responsive End */
diff --git a/images/fabicon.png b/images/fabicon.png
diff --git a/index.html b/index.html
@@ -5,7 +5,7 @@
     <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>Document</title>
+    <title>MdRasen - Modern Portfolio Website</title>
     <!-- Custom CSS -->
     <link rel="stylesheet" href="css/style.css">
     <link rel="stylesheet" href="css/skins/color-1.css">
@@ -19,6 +19,8 @@
     <link rel="stylesheet" href="css/skins/color-5.css" class="alternate-style" title="color-5" disabled>
 
     <link rel="stylesheet" href="css/style-switcher.css">
+    <!-- Favicon -->
+    <link rel="icon" type="image/x-icon" href="images/fabicon.png">
 </head>
 
 <body class="dark">
@@ -44,7 +46,7 @@
         <!-- Main Content Start -->
         <div class="main-content">
             <!-- Home Section Start -->
-            <section class="home section" id="home">
+            <section class="home active section" id="home">
                 <div class="container">
                     <div class="row">
                         <div class="home-info padd-15">
@@ -89,9 +91,6 @@ <h3>I'm Alimi Mousad and <span>Web Developer</span></h3>
                                         <div class="info-item padd-15">
                                             <p>Age : <span>22</span></p>
                                         </div>
-                                        <div class="info-item padd-15">
-                                            <p>Birthday : <span>17 sep 1999</span></p>
-                                        </div>
                                         <div class="info-item padd-15">
                                             <p>Website : <span>www.domain.com</span></p>
 
@@ -102,6 +101,9 @@ <h3>I'm Alimi Mousad and <span>Web Developer</span></h3>
                                         <div class="info-item padd-15">
                                             <p>Degree : <span>CS</span></p>
                                         </div>
+                                        <div class="info-item padd-15">
+                                            <p>Phone : <span>+880 1234567890</span></p>
+                                        </div>
                                         <div class="info-item padd-15">
                                             <p>City : <span>Dhaka</span></p>
                                         </div>
@@ -502,7 +504,8 @@ <h4>Theme Colors</h4>
     </div>
     <!-- Style Switcher End -->
     <!-- Custom JS -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.12/typed.min.js" referrerpolicy="no-referrer"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.12/typed.min.js"
+        referrerpolicy="no-referrer"></script>
     <script src="js/script.js"></script>
     <script src="js/style-switcher.js"></script>
 </body>

diff --git a/js/script.js b/js/script.js
@@ -1,7 +1,48 @@
 // Typing animation
-var typed = new Typed(".typing",{
-    strings:["","Web", "Web Designer","Web Developer","Graphic Designer","Content Creator"],
-    typeSpeed: 100,
-    BackSpeed: 60,
-    loop:true
-})
+var typed = new Typed(".typing", {
+  strings: [
+    "",
+    "Web",
+    "Web Designer",
+    "Web Developer",
+    "Graphic Designer",
+    "Content Creator",
+  ],
+  typeSpeed: 100,
+  BackSpeed: 60,
+  loop: true,
+});
+
+// Aside
+const nav = document.querySelector(".nav"),
+  navList = nav.querySelectorAll("li"),
+  totalNavList = navList.length,
+  allSection = document.querySelectorAll(".section"),
+  totalSection = allSection.length;
+
+for (let i = 0; i < totalNavList; i++) {
+  const a = navList[i].querySelector("a");
+  a.addEventListener("click", function () {
+    for (let k = 0; k < totalSection; k++) {
+      allSection[k].classList.remove("back-section");
+    }
+    //Loop for removing active class
+    for (let j = 0; j < totalNavList; j++) {
+      if (navList[j].querySelector("a").classList.contains("active")) {
+        allSection[j].classList.add("back-section");
+      }
+      navList[j].querySelector("a").classList.remove("active");
+    }
+    //Adding active class
+    this.classList.add("active");
+    showSection(this); //Function call
+  });
+}
+function showSection(element) {
+  //Loop for removing active class
+  for (let k = 0; k < totalSection; k++) {
+    allSection[k].classList.remove("active");
+  }
+  const target = element.getAttribute("href").split("#")[1];
+  document.querySelector("#" + target).classList.add("active");
+}