From a06ee73c4a9cb4c268bcbbcb48c4828d084aec46 Mon Sep 17 00:00:00 2001
From: Aaron Qian <aaron@yeet.io>
Date: Fri, 11 Nov 2022 10:47:14 -0800
Subject: [PATCH] move ityped to js asset, implement experiences horizontal
 vertical line in css

---
 assets/scripts/pages/home.js        | 16 ++++++++++++
 assets/scripts/pages/index.js       |  1 +
 static/css/sections/experiences.css | 18 ++++++-------
 static/js/home.js                   | 39 -----------------------------
 4 files changed, 26 insertions(+), 48 deletions(-)
 create mode 100644 assets/scripts/pages/home.js

diff --git a/assets/scripts/pages/home.js b/assets/scripts/pages/home.js
new file mode 100644
index 0000000..b8af3fe
--- /dev/null
+++ b/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
+  });
+});
diff --git a/assets/scripts/pages/index.js b/assets/scripts/pages/index.js
index ce04008..6306587 100644
--- a/assets/scripts/pages/index.js
+++ b/assets/scripts/pages/index.js
@@ -1,3 +1,4 @@
 import './note';
 import './search';
 import './single';
+import './home';
diff --git a/static/css/sections/experiences.css b/static/css/sections/experiences.css
index e668e4b..cab7fbd 100644
--- a/static/css/sections/experiences.css
+++ b/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 {
-  left: -50%;
-  top: -50%;
-}
-
-.top-right {
+.timeline .row:nth-child(2n) div:nth-child(1) .corner {
   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 */
diff --git a/static/js/home.js b/static/js/home.js
index 614540d..22b0d9b 100644
--- a/static/js/home.js
+++ b/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