From d184972e1178c37e923a746815d8ad5929a553eb Mon Sep 17 00:00:00 2001
From: lukejelse04 <luke-else@outlook.com>
Date: Tue, 29 Jun 2021 23:37:10 +0100
Subject: [PATCH] New Typer Class - Allows for multiple phrases to be typed and
 displayed

---
 css/styles.css | 13 +----------
 css/type.css   | 12 ++++++++++
 index.php      | 16 +++++++-------
 js/carousel.js | 58 +++++++++++++++++++++++++++++++++++++++++++++++++
 js/type.js     | 59 ++++++++++++++++++++++++++++++++++++++------------
 5 files changed, 124 insertions(+), 34 deletions(-)
 create mode 100644 css/type.css
 create mode 100644 js/carousel.js

diff --git a/css/styles.css b/css/styles.css
index 905cc5f..1c2ce73 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -10145,17 +10145,6 @@ section.resume-section .resume-section-content {
 }
 
 
-#type{
-  display: inline;
-  border-right: 4px solid #6c757d;
-  animation: blink 1s infinite;
-  color: rgba(36, 129, 60, 0.7); 
-}
-
-@keyframes blink {
-  50%{
-    border-right: none;
-  }
-}
+
 
 
diff --git a/css/type.css b/css/type.css
new file mode 100644
index 0000000..84fc80a
--- /dev/null
+++ b/css/type.css
@@ -0,0 +1,12 @@
+#type{
+    display: inline;
+    border-right: 4px solid #6c757d;
+    animation: blink 1s infinite;
+    color: rgba(36, 129, 60, 0.7); 
+  }
+  
+  @keyframes blink {
+    50%{
+      border-right: none;
+    }
+  }
\ No newline at end of file
diff --git a/index.php b/index.php
index 3669f75..93ae7cb 100644
--- a/index.php
+++ b/index.php
@@ -21,7 +21,7 @@
         <nav class="navbar navbar-expand-lg navbar-dark bg-secondary fixed-top" id="sideNav">
             <a class="navbar-brand js-scroll-trigger" href="#page-top">
                 <span class="d-block d-lg-none">Luke Else</span>
-                <span class="d-none d-lg-block"><img class="img-fluid img-profile rounded-circle mx-auto mb-2" src="assets/img/profile.jpg" alt="..." /></span>
+                <span class="d-none d-lg-block"><img class="img-fluid img-profile rounded-circle mx-auto mb-2" src="assets/img/profile.jpg" alt="Luke Else" /></span>
             </a>
             <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
             <div class="collapse navbar-collapse" id="navbarSupportedContent">
@@ -83,14 +83,14 @@
                         <br />
 
                         E-Mail: 
-                        <a href="mailto:name@email.com">luke@luke-else.co.uk</a>
+                        <a href="mailto:luke@luke-else.co.uk">luke@luke-else.co.uk</a>
                     </div>
-                    <p class="lead mb-5">I am a Junior but well practised Software Developer. I have a great passion for learning, especially in topics oriented around Software Development, Networks and Backend Engineering. I am constantly striving to learn more whilst pushing myself to explore new technologies!</p>
+                    <p class="lead mb-5">I am a Junior but well-practised Software Developer. I have a great passion for learning, especially in topics oriented around Software Development, Networks and Backend Engineering. I am constantly striving to learn more whilst pushing myself to explore new technologies!</p>
                     <div class="social-icons">
-                        <a class="social-icon" href="https://www.linkedin.com/in/luke-else-a7183a205/"><i class="fab fa-linkedin-in"></i></a>
-                        <a class="social-icon" href="https://github.com/lukejelse04"><i class="fab fa-github"></i></a>
-                        <a class="social-icon" href="https://www.instagram.com/lukejelse04/"><i class="fab fa-instagram"></i></a>
-                        <a class="social-icon" href="assets/Luke Else - CV.pdf"><i class="fas fa-file-download"></i></a>
+                        <a target="_blank" class="social-icon" href="https://www.linkedin.com/in/luke-else-a7183a205/"><i class="fab fa-linkedin-in"></i></a>
+                        <a target="_blank" class="social-icon" href="https://github.com/lukejelse04"><i class="fab fa-github"></i></a>
+                        <a target="_blank" class="social-icon" href="https://www.instagram.com/lukejelse04/"><i class="fab fa-instagram"></i></a>
+                        <a target="_blank" class="social-icon" href="assets/Luke Else - CV.pdf"><i class="fas fa-file-download"></i></a>
                     </div>
                 </div>
             </section>
@@ -228,7 +228,7 @@
                 <div class="resume-section-content">
                     <h2 class="mb-5">Interests</h2>
                     <p>In my spare time, I will often find myself working on some of my smaller projects such as websites for my friends which I host on my own rented cloud servers. As well as this, I am quite interested in reading about system exploits as it is something that I can apply to my own work in order to keep it safe and secure.</p>
-                    <p>I am also an avid member of VATSIM flight simulation community and spend my evening interacting with the many members that it holds. I operate as a virtual air traffic controller on one of the biggest virtual flight networks in the world, VATSIM. In addition, I will also fly on the network in some of the many events they host each week.</p>
+                    <p>I am also an avid member of the VATSIM flight simulation community and spend my evenings interacting with the many members that it holds. I operate as a virtual air traffic controller and will also find myself flying on the network in some of the many events they host each week.</p>
                     <p class="mb-0">From 2015 to 2020 I was also in the 'Royal Air Force Air Cadets' which taught me a lot of leadership, communication and problem solving skills. Whilst there, I partook in the Bronze Duke Of Edinburgh award and joined the squadron band which were both tough but rewarding experiences. Throughout the year we would attend many parades in which drill and discipline standard had to be impeccable.</p>
                 </div>
             </section>
diff --git a/js/carousel.js b/js/carousel.js
new file mode 100644
index 0000000..0f09b4d
--- /dev/null
+++ b/js/carousel.js
@@ -0,0 +1,58 @@
+class carouseltext{
+
+    constructor(elements, carousel, period){
+        this.elements = elements;
+        this.carousel = carousel;
+        this.period = parseInt(period, 10) || 2000;
+        this.loop = 0;
+        this.isDeleting = true;
+        this.text;
+    }
+
+    tick(){
+        var i = this.loop % this.carousel.length;
+        var fullTxt = this.toRotate[i];
+
+        if (this.isDeleting == true) {
+            this.txt = fullTxt.substring(0, this.txt.length - 1);
+        }else{
+            this.txt = fullTxt.substring(0, this.txt.length + 1);
+        }
+
+        this.element.innerHTML = '<span class="wrap">'+this.txt+'</span>';
+
+
+        var that = this;
+        var delta = 300 - Math.random() * 100;
+
+        if (this.isDeleting) { delta /= 2; }
+
+        if (!this.isDeleting && this.txt === fullTxt) {
+            delta = this.period;
+            this.isDeleting = true;
+        } else if (this.isDeleting && this.txt === '') {
+            this.isDeleting = false;
+            this.loopNum++;
+            delta = 500;
+        }
+
+        //Hold the function from executing again until delta time has passed.
+        setTimeout(function() {
+            that.tick();
+          }, delta);
+
+    }
+
+    textLoad() {
+        var elements = document.getElementsByClassName('txt-rotate');
+        for (var i=0; i<elements.length; i++) {
+          var carousel = elements[i].getAttribute('data-rotate');
+          var period = elements[i].getAttribute('data-period');
+          if (toRotate) {
+            new Text(elements[i], JSON.parse(carousel), period);
+            }
+        }
+    }
+
+
+}
\ No newline at end of file
diff --git a/js/type.js b/js/type.js
index f44f6b7..697a8b8 100644
--- a/js/type.js
+++ b/js/type.js
@@ -1,18 +1,49 @@
-var i = 0
-var text="//Junior Software Developer";
-var speed=150;
-var item = document.getElementById("type");
+class typer{
 
-function type(){
-
-    item.innerHTML += text.charAt(i);
-    i++;
-
-    if (i < text.length) {
-        setTimeout(type, speed);
+    constructor(text, retypeText){
+        this.i = 0;
+        this.x = 0;
+        this.item = document.getElementById("type");
+        this.text = text;
+        this.retypeText = retypeText;
+        this.type();
+    }
+
+    type(){
+        this.item.innerHTML += this.text[this.x].charAt(this.i);
+        this.i++;
+
+        if (this.i < this.text[this.x].length) {
+            setTimeout(() => {
+                this.type();
+            }, 150);
+        }else{
+            if(this.retypeText == true){
+                this.i = 0;
+                setTimeout(() => {
+                    this.retype();
+                }, 3000);
+            }
+        }
+    }
+
+    retype() {
+        this.item.innerHTML = this.item.innerHTML.substring(0, this.item.innerHTML.length-1);
+
+        if (this.item.innerHTML.length > 0) {
+            setTimeout(() => {
+                this.retype();
+            }, 100);
+        }else{
+            this.x++;
+            //this.x > this.text.length -1 == loop
+            if(this.x >= this.text.length - 1){
+                //this.x = 0;
+                this.retypeText = false;
+            }
+            this.type();       
+        }
     }
-    
-    console.log(i);
 }
 
-type();
\ No newline at end of file
+var work = new typer(["//Junior Software Developer", "//Aspiring Backend Engineer"], true);
\ No newline at end of file