Portfolio/main.js at main · Kathrina-dev/Portfolio · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
const typewriterContent = [
    "<i>Hi, I’m</i> <span>Kathrina</span>, <i>I love</i> <span>coding.</span>",
    "<i>Bring</i> <span>ideas</span> <i>to life with</i> <span>code.</span>",
    "<span>Tech</span> <i>enthusiast.</i> <span>Web</span> <i>developer.</i>",
    "<i>Exploring</i> <span>open-source</span> <i>tech.</i>",
    "<i>Building the</i> <span>future,</span> <i>one line at a</i> <span>time.</span>",
    "<i>Always</i> <span>learning,</span> <i>always</i> <span>creating.</span>",
    "<i>Driven by</i> <span>code and curiosity.</span>"
];

const durCharFwd = 100;
const durFullGap = 2000;
const durCharBwd = 80;
const durDoneGap = 1000;
let stringIndex = 0;
let isDeleting = false;
let charIndex = 0;

const typewriterElement = document.querySelector('.typewriter');

type();

function type() {
    const currentString = typewriterContent[stringIndex];

    if (isDeleting)
    {
        if (charIndex > 0)
        {
            if (currentString[charIndex] === ">") {
                while (currentString[charIndex] !== "<" && charIndex < currentString.length) {
                    charIndex--;
                }
                charIndex--;
            }
            charIndex--;
            typewriterElement.innerHTML = currentString.substring(0, charIndex);
            setTimeout(type, durCharBwd);
        }
        else
        {
            isDeleting = false;
            stringIndex = (stringIndex + 1) % typewriterContent.length;
            setTimeout(type, durDoneGap);
        }
    }

    else
    {
        if (charIndex < currentString.length)
        {
            if (currentString[charIndex] === "<") {
                while (currentString[charIndex] !== ">" && charIndex < currentString.length) {
                    charIndex++;
                }
                charIndex++;
            }
            typewriterElement.innerHTML = currentString.substring(0, charIndex);
            charIndex++;
            setTimeout(type, durCharFwd);
        }
        else
        {
            isDeleting = true;
            setTimeout(type, durFullGap);
        }
    }
}