nayra-singh.github.io/script.js at main · nayra-singh/nayra-singh.github.io · 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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
const words = [
    "web experiences.",
    "full-stack projects.",
    "solutions with code.",
    "and keep learning."
];

let wordIndex = 0;
let charIndex = 0;
let deleting = false;

const typingElement = document.getElementById("typing");

function type() {

    const currentWord = words[wordIndex];

    if (!deleting) {

        typingElement.textContent =
            currentWord.substring(0, charIndex + 1);

        charIndex++;

        if (charIndex === currentWord.length) {

            deleting = true;

            setTimeout(type, 1400);

            return;
        }

    } else {

        typingElement.textContent =
            currentWord.substring(0, charIndex - 1);

        charIndex--;

        if (charIndex === 0) {

            deleting = false;

            wordIndex =
                (wordIndex + 1) % words.length;
        }
    }

    setTimeout(type, deleting ? 45 : 80);
}

type();


/* DARK / LIGHT MODE */

const themeButton =
    document.getElementById("themeToggle");

themeButton.addEventListener("click", () => {

    document.body.classList.toggle("light");

    const lightMode =
        document.body.classList.contains("light");

    themeButton.textContent =
        lightMode ? "☀" : "☾";

    localStorage.setItem(
        "theme",
        lightMode ? "light" : "dark"
    );
});


if (localStorage.getItem("theme") === "light") {

    document.body.classList.add("light");

    themeButton.textContent = "☀";
}


/* SCROLL REVEAL */

const observer =
    new IntersectionObserver(entries => {

        entries.forEach(entry => {

            if (entry.isIntersecting) {

                entry.target.classList.add("visible");

            }

        });

    }, {
        threshold: 0.12
    });


document.querySelectorAll(
    ".skill-card, .project-card, .achievement, .timeline-item"
).forEach(element => {

    element.classList.add("reveal");

    observer.observe(element);

});