Removal of Jquery library

index.html

@@ -4,23 +4,20 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta
-      description="Juma Chaje Portfolio #Software Engineer"
+      description="Juma Chaje Portfolio"
       content="projects done by Juma Chaje, about, and contacts."
     />
     <title>Juma Chaje | Personal Portfolio Website</title>
     <link rel="shortcut icon" type="image/png" href="images/juma1.png" />
 
-    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
+    <!-- <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.11/typed.min.js"></script>
 
     <link
       href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,700;1,300;1,700&display=swap"
       rel="stylesheet"
     />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap"
-      rel="stylesheet"
-    />
+
     <link
       rel="stylesheet"
       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"

script/script.js

@@ -1,4 +1,4 @@
-//A Function to get elements id
+//A Function to ease retrieval of DOM elements
 elem = (x) => {
   return document.getElementById(x);
 };
@@ -10,15 +10,16 @@ var text = elem("text");
 
 loader = () => {
   let count = setInterval(function () {
-    var c = parseInt($(".counter").text());
-    $(".counter").text((++c).toString());
+    var c = parseInt(counter.innerText);
+    counter.innerText = `${(++c).toString()}`;
 
     if (c == 100) {
       clearInterval(count);
       counter.classList.add("hide");
-      $(text).fadeIn(1000);
-
-      $(text).fadeOut(2000);
+      // $(text).fadeIn(1000);
+      text.classList.add("fadeIn");
+      // $(text).fadeOut(2000);
+      text.classList.add("fadeOut");
 
       preloader.classList.add("active");
       //Get Visitor's name

style/style.css

@@ -75,12 +75,44 @@ main {
   font-size: 0.5em;
 }
 .text {
-  display: none;
+  opacity: 0;
   font-size: 25px;
   font-weight: 700;
   letter-spacing: 5px;
   margin: 10px;
+  transition: all 0.3s linear;
 }
+.text.fadeIn {
+  animation: fadeIn 0.5s linear;
+}
+.text.fadeOut {
+  animation: fadeOut 1s linear;
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 50%;
+  }
+  100% {
+    opacity: 100%;
+  }
+}
+
+@keyframes fadeOut {
+  0% {
+    opacity: 100%;
+  }
+  50% {
+    opacity: 50%;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
 .text span {
   color: limegreen;
 }
@@ -193,6 +225,11 @@ main {
 #visitor {
   color: var(--theme-color-dark);
   font-weight: 700;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: inline-flex;
+  max-width: 200px;
 }
 .typing_part {
   margin-top: -5rem;