New Typer Class - Allows for multiple phrases to be typed and displayed
This commit is contained in:
lukejelse04
parent
5d21baaac7
commit
d184972e11
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
12
css/type.css
Normal file
12
css/type.css
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
16
index.php
16
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>
|
||||
|
||||
58
js/carousel.js
Normal file
58
js/carousel.js
Normal file
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
57
js/type.js
57
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();
|
||||
}
|
||||
|
||||
console.log(i);
|
||||
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();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
type();
|
||||
var work = new typer(["//Junior Software Developer", "//Aspiring Backend Engineer"], true);
|
||||
Loading…
Reference in New Issue
Block a user