From f6caea99db1cac6abf57a9d3e400a8adcc930ea6 Mon Sep 17 00:00:00 2001
From: Tyler Perkins <tperki17@kent.edu>
Date: Wed, 19 Jul 2023 22:14:23 -0400
Subject: [PATCH] Add p tag typing effect

---
 data/index.json                           | 39 ++++++++++++++++-------
 layouts/index.html                        | 20 ++++++++++++
 static/css/background.css                 |  2 +-
 static/css/styles.css                     | 18 +++++++++++
 themes/clortox/layouts/_default/list.html |  2 +-
 themes/clortox/static/js/script.js        | 27 ++++++++++++++++
 6 files changed, 95 insertions(+), 13 deletions(-)

diff --git a/data/index.json b/data/index.json
index f882fe7..991f410 100644
--- a/data/index.json
+++ b/data/index.json
@@ -1,13 +1,30 @@
 {
-    "Hobbies": [
-        {
-            "value": "Software Architecture"
-        },
-        {
-            "value": "Front End Development"
-        },
-        {
-            "value": "Back End Development"
-        }
-    ]
+    "About": {
+        "Content": [
+            {
+                "value": "Software developer with a passion for literally just about everything."
+            },
+            {
+                "value": "Aspiring postmath; Jack of all trades, master of few."
+            },
+            {
+                "value": "Full stack developer at Etactics Inc, with a focus on back end development and system architecture."
+            },
+            {
+                "value": "Passion for low level software, embedded systems, software architecture, and machine learning."
+            }
+
+        ],
+        "Hobbies": [
+            {
+                "value": "Software Architecture"
+            },
+            {
+                "value": "Front End Development"
+            },
+            {
+                "value": "Back End Development"
+            }
+        ]
+    }
 }
diff --git a/layouts/index.html b/layouts/index.html
index 3dc9d49..ad2634e 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -4,6 +4,24 @@
             {{ .Content }}
         </div>
     </div>
+    <div class="homepage-card">
+        <h1 data-show="about-description" data-value="uname -a" class="typewriter card-title">~ $&nbsp;</h1>
+        <div class="about-grid">
+            <div id="about-description" class="about-description">
+                {{ range .Site.Data.index.About.Content }}
+                    <p data-value="{{ .value }}"></p>
+                {{ end }}
+            </div>
+            <div class="hobbies">
+                <p data-show="about-hobbies" data-value="cat hobbies.txt | less" class="typewriter">~ $&nbsp;</p>
+                <div id="about-hobbies">
+                    {{ range .Site.Data.index.About.Hobbies }}
+                        <p data-value="{{ .value }}"></p>
+                    {{ end }}
+                </div>
+            </div>
+        </div>
+    </div>
     <div class="homepage-card">
         <h1 to-show="about-description" data-value="uname -a" class="typewriter">~ $&nbsp;</h1>
         <div class="about-grid">
@@ -12,6 +30,8 @@
             everything.</p>
             <p>Aspiring postmath; Jack of all trades, master of few.</p>
             <p>Full stack developer at Etactics Inc.</p>
+            <p>Passion for low level software, embedded systems, software
+            architecture, and machine learning.</p>
             </div>
             <div class="hobbies">
                 <p data-value="cat hobbies.txt | less" class="typewriter">~ $&nbsp;</p>
diff --git a/static/css/background.css b/static/css/background.css
index 09ec94b..20a37d8 100644
--- a/static/css/background.css
+++ b/static/css/background.css
@@ -5,7 +5,7 @@
     bottom: 0;
     left: 0;
     width: 100%;
-    height: 150%;
+    height: 200%;
     overflow-y: hidden;
     z-index: -1;
 
diff --git a/static/css/styles.css b/static/css/styles.css
index 02263fa..49323cb 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -91,12 +91,30 @@ html {
     background-color: rgba(11,11,12,0.4);
     corner-radius: 10px;
     margin: 2vh 2vw;
+    display: grid;
+    grid-template-rows: auto 1fr;
+    overflow-y: hidden;
 }
 
 .about-grid {
     display: grid;
     grid-template-columns: 65% 1fr;
+    grid-template-rows: 1fr max-content;
+    height: 100%;
+    width: 100%;
+}
 
+.card-title {
+    display: inline-block;
+    margin: 10px;
+    margin-right: auto;
+    padding-right: 10px;
+
+}
+
+.about-description p {
+    word-wrap: break-word;
+    white-space: pre-wrap;
 }
 
 .hobbies {
diff --git a/themes/clortox/layouts/_default/list.html b/themes/clortox/layouts/_default/list.html
index 9caaf01..04531c9 100644
--- a/themes/clortox/layouts/_default/list.html
+++ b/themes/clortox/layouts/_default/list.html
@@ -1,6 +1,6 @@
 {{ define "main" }}
 <div class="page-header dashed-bottom">
-    <h1 data-value="Posts" class="scramble">Posts</h1>
+    <h1 data-value="Posts" class="typewriter scramble"></h1>
     <p>Ideas, projects, and other musings.</p>
 </div>
 {{ range.Pages }}
diff --git a/themes/clortox/static/js/script.js b/themes/clortox/static/js/script.js
index 7d0d4af..c87d322 100644
--- a/themes/clortox/static/js/script.js
+++ b/themes/clortox/static/js/script.js
@@ -21,6 +21,11 @@ function sleep(milliseconds) {
   return new Promise(resolve => setTimeout(resolve, milliseconds));
 }
 
+function replaceSpacesWithNbsp(string) {
+    if (string == null) return;
+    return string.replace(/ /g, "\xa0");
+}
+
 function scramble(event){
     scrambleLetters(event.target);
 }
@@ -51,6 +56,7 @@ async function typeWriter(element) {
     let typeWriterText = element.getAttribute("data-value");
     let output = element.innerText;
 
+    // write the main text
     for(let i = 0; i < typeWriterText.length; ++i){
         output += typeWriterText.charAt(i);
         // sleep for typeWriterSpeed milliseconds
@@ -58,6 +64,27 @@ async function typeWriter(element) {
         element.innerText = output;
     }
 
+    //try and do the paragraphs associated
+    let hiddenElementId = element.getAttribute("data-show");
+
+    if(hiddenElementId == null) return;
+
+    let hiddenElement = document.getElementById(hiddenElementId);
+    let hiddenElementSpeed = 5;
+
+    let paragraphs = hiddenElement.querySelectorAll("p");
+    for (let p of paragraphs){
+        let hiddenElementText = p.getAttribute("data-value");
+        //hiddenElementText = replaceSpacesWithNbsp(hiddenElementText);
+        p.innerHtml = "";
+
+        for (let i = 0; i < hiddenElementText.length; ++i){
+            p.innerText += hiddenElementText.charAt(i);
+            await sleep(hiddenElementSpeed);
+        }
+
+        await sleep(50);
+    }
 }
 
 let observer = new IntersectionObserver(function(entries) {