From b626ce3abb6f91155518a67816c361f8b366d163 Mon Sep 17 00:00:00 2001
From: Timothy Pidashev <pidashev.tim@gmail.com>
Date: Wed, 10 Apr 2024 12:29:29 -0700
Subject: [PATCH] Expand hero content

---
 src/web/src/components/hero/content.jsx | 45 ++++++++++++++++++++-----
 1 file changed, 37 insertions(+), 8 deletions(-)

diff --git a/src/web/src/components/hero/content.jsx b/src/web/src/components/hero/content.jsx
index d230fed..52417fe 100644
--- a/src/web/src/components/hero/content.jsx
+++ b/src/web/src/components/hero/content.jsx
@@ -11,20 +11,49 @@ function Content() {
         <div className="relative h-48 overflow-y-auto">
           <Typewriter
             options={{
-              strings: [
-              "<center><span class=''>Hello, I'm</span><br><span class=''>Timothy Pidashev</span></center>", 
-              "<center><span class=''>I'm a 19 year old</span><br><span class=''>on an epic journey to</span><br><span class=''>become a software engineer!</span></center>",
-              "<center><span class=''>I enjoy:</span><br><span class=''>writing code</span><br><span class=''>hiking and camping</span><br><span class=''>driving cars</span><br><span class=''>and much more!</span></center>",
-              "<center><span class=''>Fun facts about me:</span><br><span class=''>I keep a journal</span><br><span class=''>I love rust lang!</span><br><span class=''>I use a corebooted thinkpad</span></center>",
-              "<center><span class=''>Wait your still here?</span></center>",
-              "<center><span class=''>Check out my blog and shop</span><br><span class=''>for many goodies!</span><br><span class=''>or contact me below!</span></center>"
-              ],
               autoStart: true,
               loop: true,
               delay: 50,
               deleteSpeed: 25,
               cursor: ''
             }}
+            onInit={(typewriter) => {
+              typewriter.typeString("<center><span class=''>Hello, I'm</span><br><span class=''>Timothy Pidashev</span></center>")
+                .callFunction(() => {
+                  console.log('Change the background element to a portrait of my face');
+                })
+                .pauseFor(2500)
+                .deleteAll()
+                .callFunction(() => {
+                  console.log('Wipe the background element');
+                })
+                .start()
+
+              typewriter.typeString("<center><span class=''>I'm a 19 year old</span><br><span class=''>on an epic journey to</span><br><span class=''>become a software engineer!</span></center>")
+                .pauseFor(2500)
+                .deleteAll()
+                .start()
+
+              typewriter.typeString("<center><span class=''>I enjoy:</span><br><span class=''>writing code</span><br><span class=''>hiking and camping</span><br><span class=''>driving cars</span><br><span class=''>and much more!</span></center>")
+                .pauseFor(2500)
+                .deleteAll()
+                .start()
+
+              typewriter.typeString("<center><span class=''>Fun facts about me:</span><br><span class=''>I keep a journal</span><br><span class=''>I love rust lang!</span><br><span class=''>I use a corebooted thinkpad</span></center>")
+                .pauseFor(2500)
+                .deleteAll()
+                .start()
+
+              typewriter.typeString("<center><span class=''>Wait your still here?</span></center>")
+                .pauseFor(2500)
+                .deleteAll()
+                .start()
+
+              typewriter.typeString("<center><span class=''>Check out my blog and shop</span><br><span class=''>for many goodies!</span><br><span class=''>or contact me below!</span></center>")
+                .pauseFor(2500)
+                .deleteAll()
+                .start()
+            }}
           />
         </div>
       </div>