move ityped to js asset, implement experiences horizontal vertical line in css

assets/scripts/pages/home.js

@@ -0,0 +1,16 @@
+import {init} from 'ityped';
+
+// =========== Typing Carousel ================
+// get data from hidden ul and set as typing data
+document.addEventListener('DOMContentLoaded', () => {
+  $ul = document.getElementById('typing-carousel-data')?.children;
+  if($ul == null || $ul.length === 0) return;
+
+  const strings = Array.from($ul).map($el => $el.textContent);
+
+  init('#ityped', {
+    strings,
+    startDelay: 200,
+    loop: true
+  });
+});

assets/scripts/pages/index.js

@@ -1,3 +1,4 @@
 import './note';
 import './search';
 import './single';
+import './home';

static/css/sections/experiences.css

@@ -47,7 +47,7 @@
   left: 50%;
 }
 
-.vertical-line-left-adjustment::after {
+.timeline .vertical-line:nth-child(even)::after {
   left: calc(50% - 3px) !important;
 }
 
@@ -75,26 +75,26 @@
   border-radius: 15px;
 }
 
-.top-left {
+.timeline .row:nth-child(2n) div:nth-child(1) .corner {
-  left: -50%;
-  top: -50%;
-}
-
-.top-right {
   left: 50%;
   top: -50%;
 }
 
-.bottom-left {
+.timeline .row:nth-child(2n) div:nth-child(3) .corner {
   left: -50%;
   top: calc(50% - 3px);
 }
 
-.bottom-right {
+.timeline .row:nth-child(4n) div:nth-child(1) .corner {
   left: 50%;
   top: calc(50% - 3px);
 }
 
+.timeline .row:nth-child(4n) div:nth-child(3) .corner {
+  left: -50%;
+  top: -50%;
+}
+
 /* ============= Device specific fixes ======= */
 
 /* Large screens such as TV */

static/js/home.js

@@ -24,45 +24,6 @@ var projectCards, publicationCards;
     }
     detectDevice();
 
-    // =========== Typing Carousel ================
-    // get data from hidden ul and set as typing data
-    if (document.getElementById('typing-carousel-data') != undefined) {
-      var ul = document.getElementById('typing-carousel-data').children;
-
-      if (ul.length != 0) {
-        var data = [];
-        Array.from(ul).forEach(el => {
-          data.push(el.textContent);
-        })
-
-        ityped.init('#ityped', {
-          strings: data,
-          startDelay: 200,
-          loop: true
-        });
-      }
-    }
-
-    // ============== Fix Timelines Horizontal Lines =========
-    var hLines = document.getElementsByClassName("horizontal-line");
-    for (let i = 0; i < hLines.length; i++) {
-      if (i % 2) {
-        hLines[i].children[0].children[0].classList.add("bottom-right");
-        hLines[i].children[2].children[0].classList.add("top-left");
-      } else {
-        hLines[i].children[0].children[0].classList.add("top-right");
-        hLines[i].children[2].children[0].classList.add("bottom-left");
-      }
-    }
-
-    // ============== Fix Timelines Vertical lines =========
-    var vLines = document.getElementsByClassName("vertical-line");
-    for (let i = 0; i < vLines.length; i++) {
-      if (i % 2) {
-        vLines[i].classList.add("vertical-line-left-adjustment");
-      }
-    }
-
 
     // ================== Project cards =====================
     // Add click action on project category selector buttons