Add p tag typing effect

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"
+            }
+        ]
+    }
 }

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>

static/css/background.css

@@ -5,7 +5,7 @@
     bottom: 0;
     left: 0;
     width: 100%;
-    height: 150%;
+    height: 200%;
     overflow-y: hidden;
     z-index: -1;
 

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 {

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 }}

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) {