From 4cee5f089f8febad3fa5e3216f05b7ab35b8c721 Mon Sep 17 00:00:00 2001
From: Solomon Laing <solomonlaing@protonmail.com>
Date: Sun, 13 Apr 2025 12:38:47 +0930
Subject: [PATCH] touching up styling/js

---
 index.html |  7 ++++---
 main.js    | 36 ++++++++++++++++++++++++++++++++++++
 style.css  | 11 ++++++++++-
 3 files changed, 50 insertions(+), 4 deletions(-)
 create mode 100644 main.js

diff --git a/index.html b/index.html
index ce06bba..98b2d2e 100644
--- a/index.html
+++ b/index.html
@@ -21,14 +21,14 @@
     <main>
         <section class="accent1 region">
             <div class="container row">
-                <div class="col">
+                <div class="col f-row">
                     <p class="animate-me">Trained in Engineering and IT I spend my time building and maintaining
                         software for
                         various companies and organisations. Solving problems is my passion and I strive to get
                         things
                         done, and do them well.</p>
                 </div>
-                <div class="col">
+                <div class="col f-row">
                     <p class="animate-me">
                         I have a penchant for Linux (or GNU/Linux if you prefer) and besides maintaining a
                         collection of personalisations through scripts and software customisations, I also manage a
@@ -92,7 +92,7 @@
                         <p class="contact">@inkletblot pretty much everywhere</p>
                     </div>
                 </div>
-                <div class="col center">
+                <div class="col center top-gap">
                     <div class="stagger-visualizer"></div>
                 </div>
             </div>
@@ -105,6 +105,7 @@
     </footer>
 
     <script src="https://cdn.jsdelivr.net/npm/animejs@4.0.0/lib/anime.iife.min.js"></script>
+    <script src="main.js"></script>
     <script src="cards.js"></script>
     <script src="demo.js"></script>
 </body>
diff --git a/main.js b/main.js
new file mode 100644
index 0000000..728da1e
--- /dev/null
+++ b/main.js
@@ -0,0 +1,36 @@
+const texts = document.querySelectorAll('.animate-me')
+var letterSets = Array.from(texts).map((element) => {
+    return element.innerText.split(' ');
+})
+
+letterSets = letterSets.map((set) => set.map((letter) => letter + '\xa0'))
+
+var letterNodes = [];
+
+for (let i = 0; i < texts.length; i++) {
+    letterNodes[i] = []
+    texts[i].textContent = ''
+    letterSets[i].forEach(letter => {
+        const letterNode = document.createElement('span');
+        letterNode.className = 'animate-letter'
+        // Replace spaces with &nbsp; so it has width after letterizing
+        letterNode.textContent = letter === " " ? "\xa0" : letter;
+        texts[i].before(letterNode)
+        letterNodes[i].push(letterNode);
+    });
+}
+
+texts.forEach((textNode, idx) => {
+    textNode.parentNode.addEventListener('click', () => {
+        anime.animate(letterNodes[idx], {
+            // Property keyframes
+            y: [
+                { to: anime.stagger(['-10rem', '-1rem']), ease: 'outExpo', duration: 150 },
+                { to: 0, ease: 'outBounce', duration: 800, delay: 50 }
+            ],
+            // Property specific parameters
+            delay: (_, i) => i * 50, // Function based value
+            ease: 'inOutCirc',
+        });
+    })
+})
diff --git a/style.css b/style.css
index 7fbd2de..9c43f59 100644
--- a/style.css
+++ b/style.css
@@ -5,6 +5,7 @@
 }
 
 body {
+    overflow-x: hidden;
     margin: 0;
     font-family: Roboto, sans-serif;
     color: #d7d6d4;
@@ -56,7 +57,15 @@ img {
 
 .row {
     display: block;
-    text-align: justify;
+}
+
+.f-row {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.top-gap {
+    margin-top: 2rem;
 }
 
 .col:not(:first-child) {