feat: add typing effect for title name (#4)

assets/js/typing.js

@@ -0,0 +1,39 @@
+var part = 0;
+var partIndex = 0;
+var content = [$('meta[name=author]').prop('content'), "@" + $('meta[name=github]').prop('content')];
+var typingObj = document.querySelector("#typing");
+var interval = setInterval(Typing, 100);
+
+function Typing() { 
+	var text =  content[part].substring(0, partIndex + 1);
+	typingObj.innerHTML = text;
+	partIndex++;
+
+	if(text === content[part]) {
+		clearInterval(interval);
+		setTimeout(function() {
+			interval = setInterval(Delete, 50);
+		}, 1000);
+	}
+}
+
+function Delete() {
+	var text =  content[part].substring(0, partIndex - 1);
+	typingObj.innerHTML = text;
+	partIndex--;
+
+	if (text === '') {
+		clearInterval(interval);
+
+		if(part == (content.length - 1))
+			part = 0;
+		else
+			part++;
+
+		partIndex = 0;
+
+		setTimeout(function() {
+			interval = setInterval(Typing, 100);
+		}, 200);
+	}
+}

builder/template.html

@@ -7,6 +7,7 @@
     <meta name="keywords" content="$name, github, profile, portfolio, webpage">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="author" content="$name">
+    <meta name="github" content="$username">
     <meta property="og:url" content="">
     <meta property="og:type" content="website">
     <meta property="og:site_name" content="$title">
@@ -28,7 +29,9 @@
     </header>
     <section class="pt-10 pl-20 pb-10">
       <img class="rounded-full ring-2 ring-white h-20 w-20 md:h-36 md:w-36" src="$avatar_url"/>
-      <h1 class="pt-4 text-2xl md:text-4xl text-slate-800 dark:text-white">Hi there, I'm $name</h1>
+      <h1 class="pt-4 text-2xl md:text-4xl text-slate-800 dark:text-white">Hi there, I'm
+        <div id="typing" class="inline-block font-semibold"></div>
+      </h1>
       <h2 class="pt-10 pr-10 text-xl md:text-3xl text-gray-500 dark:text-gray-300">$bio</h2>
       <h3 class="pt-10 text-lg md:text-2xl text-gray-700 dark:text-white font-semibold">$company</h3>
       <h4 class="pt-2 text-base md:text-1xl text-gray-700 dark:text-white">$location</h4>
@@ -81,6 +84,7 @@ <h2 id="repos-title" class="pt-10 pl-10 text-4xl text-gray-600 dark:text-white"
       if (navigator.serviceWorker) { navigator.serviceWorker.register( '/me/serviceworker.js', {scope: '/me/'}) }
     </script>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+    <script src="assets/js/typing.js"></script>
     <script src="assets/js/dark.js"></script>
     <script src="https://cdn.tailwindcss.com"></script>
     <script>

serviceworker.js

@@ -1,25 +1,26 @@
 var GHPATH = '/me';
 var APP_PREFIX = 'pwa_';
 var VERSION = 'version_003';
-var URLS = [    
+var CACHE_NAME = APP_PREFIX + VERSION
+var URLS = [
   `${GHPATH}/`,
   `${GHPATH}/index.html`,
-  `${GHPATH}/assets/css/background.css`,
   `${GHPATH}/assets/css/style.css`,
-  `${GHPATH}/assets/js/github.js`,
   `${GHPATH}/assets/fonts/Agustina-Signature.otf`,
+  `${GHPATH}/assets/js/dark.js`,
+  `${GHPATH}/assets/js/github.js`,
+  `${GHPATH}/assets/js/typing.js`,
 ]
 
-var CACHE_NAME = APP_PREFIX + VERSION
 self.addEventListener('fetch', function (e) {
   console.log('Fetch request : ' + e.request.url);
   e.respondWith(
     caches.match(e.request).then(function (request) {
       if (request) { 
-        console.log('Responding with cache : ' + e.request.url);
+        console.log('Responding with cache:', e.request.url);
         return request
       } else {
-        console.log('File is not cached, fetching : ' + e.request.url);
+        console.log('File is not cached, fetching:', e.request.url);
         return fetch(e.request)
       }
     })
@@ -44,10 +45,10 @@ self.addEventListener('activate', function (e) {
       cacheWhitelist.push(CACHE_NAME);
       return Promise.all(keyList.map(function (key, i) {
         if (cacheWhitelist.indexOf(key) === -1) {
-          console.log('Deleting cache : ' + keyList[i] );
+          console.log('Deleting cache : ', keyList[i] );
           return caches.delete(keyList[i])
         }
       }))
     })
   )
-})
+})