home title in typewritter format

_layouts/default.html

@@ -56,5 +56,6 @@
     <!-- Add JavaScript files here -->
     <script src="{{ site.baseurl }}/assets/js/carousel.js"></script>
     <script src="{{ site.baseurl }}/assets/js/dark-mode-toggle.js"></script>
+    <script src="{{ site.baseurl }}/assets/js/typewriter.js"></script>
   </body>
 </html>

_layouts/home.html

@@ -17,8 +17,8 @@ <h1 class="page-heading">{{ page.title }}</h1>
         {%- assign date_format = site.minima.date_format | default: "%b %-d, %Y" -%}
         <!-- <span class="post-meta">{{ post.date | date: date_format }}</span> -->
         <h3>
-          <a class="post-link" href="{{ post.url | relative_url }}" style="text-align: center;">
-           {{ post.title | escape }}
+          <a class="post-link typewriter" data-title="{{ post.title | escape }}" href="{{ post.url | relative_url }}" style="text-align: center;">
+            {{ post.title | escape }}
           </a>
         </h3>
         <!-- <p class="grey-italic-caption">Click on the title post</p> -->

assets/css/font.css

@@ -12,3 +12,16 @@
 .page-content, .wrapper, main {
     text-align: justify;
 }
+
+.typewriter::after {
+    content: "|";
+    display: inline-block;
+    margin-left: 2px;
+    animation: blink 1s steps(2, start) infinite;
+}
+
+@keyframes blink {
+    50% {
+        opacity: 0;
+    }
+}

assets/js/typewriter.js

@@ -0,0 +1,22 @@
+// function to animate text typewriter effect
+
+document.addEventListener("DOMContentLoaded", function () {
+    const typewriterLinks = document.querySelectorAll(".typewriter");
+
+    typewriterLinks.forEach(link => {
+        const text = link.getAttribute("data-title");
+        link.textContent = ""; // Clear initial text
+        let index = 0;
+
+        function type() {
+            if (index < text.length) {
+                link.textContent += text.charAt(index);
+                index++;
+                setTimeout(type, 100); // Adjust typing speed here (100ms per letter)
+            }
+        }
+
+        type();
+    });
+});
+

index.markdown

@@ -7,4 +7,4 @@ layout: home
 ---
 
 
-To explore datastory about movies data, let's you surprised by cliking on the following link...
+To explore the data story behind movies, let yourself be surprised by clicking on the following link…