Website/main.js

const Maths = Math; // Yes, I'm that patriotic.
const hellos = ['Hewwo!', 'Hello!', 'Awoo!'];

const imaTypingSpeed = 75;
const imaDeletingSpeed = 50;
const imaGapTime = 1500;
const imaTexts = shuffle([
    'I\'m a $dumbass$.dog',
    'I\'m a $network engineer',
    'I\'m an $Arch Linux user',
    'I\'m a $programmer',
    'I\'m a $furry',
    'I\'m a $massive nerd',
    'I\'m a $Home Assistant addict',
    'I\'m a $House M.D. enjoyer',
    'I\'m a $DJ',
    'I\'m an $ice skater',
    'I\'m a $masochist'
]);

function shuffle(array) {
    return array
    .map(value => ({ value, sort: Maths.random() }))
    .sort((a, b) => a.sort - b.sort)
    .map(({ value }) => value);
}

function pickRandom(array) {
    return array[Maths.floor(Maths.random() * array.length)];
}

function switchTab(tabID, playAnimation=true) {
    // Get tab ID from button
    if (typeof(tabID) == 'object') {
        tabID = tabID.id.split('button-')[1];
    }

    let tabTransitionTime = Number(getComputedStyle(document.body).getPropertyValue('--tab-transition-time').slice(0, -2));
    let tabs = document.getElementsByTagName('main')[0].children;
    let tab = document.getElementById(`tab-${tabID}`);
    let buttons = document.getElementsByTagName('header')[0].getElementsByTagName('button');
    let button = document.getElementById(`button-${tabID}`)

    // Error checking
    if (tab == undefined) {
        console.error(`Error switching tab: Tab ID "${tabID}" not found.`);
        return;
    }

    // Hide all tabs
    for (let i = 0; i < tabs.length; i++) {
        if (tabs[i] == tab) { continue; }
        tabs[i].classList.add('hiddenTab');
        if (playAnimation) {
            setTimeout(() => { tabs[i].style.display = 'none'; }, tabTransitionTime);
        } else {
            tabs[i].style.display = 'none';
        }

        if (button != null) {
            button.classList.remove('buttonHighlight');
        }
    }

    // Un-highlight all buttons
    for (let i = 0; i < buttons.length; i++) {
        buttons[i].classList.remove('buttonHighlight');
    }

    // Show selected tab
    if (playAnimation) {
        setTimeout(() => { tab.style.display = null; }, tabTransitionTime);
    } else {
        tab.style.display = null;
    }
    // Required for animation to play
    let intervalID = setInterval(() => {
        if (tab.checkVisibility()) {
            tab.classList.remove('hiddenTab');
            clearInterval(intervalID);
        }
    }, 10);

    // Highlight button
    button.classList.add('buttonHighlight');
}

window.addEventListener('load', (e) => {
    switchTab('home', false);

    // ----- Hellos section -----
    const helloEl = document.getElementById('helloText');
    helloEl.innerText = pickRandom(hellos);

    // ----- I'm a text section -----
    const imaEl = document.getElementById('imaText');
    let currentEl = document.createElement('span');
    imaEl.appendChild(currentEl);
    let imaSelection = 0;
    let imaCharIdx = 0;

    const typeFunc = () => {
        let controlChar = imaTexts[imaSelection][imaCharIdx] == '$';
        if (controlChar) {
            let highlight = !currentEl.classList.contains('textHighlight');
            currentEl = document.createElement('span');
            if (highlight) {
                currentEl.classList.add('textHighlight');
            }
            imaEl.appendChild(currentEl);
        } else {
            currentEl.innerText += imaTexts[imaSelection][imaCharIdx];
        }
        imaCharIdx++;

        if (imaCharIdx >= imaTexts[imaSelection].length) {
            setTimeout(deleteFunc, imaGapTime);
        } else {
            setTimeout(typeFunc, imaTypingSpeed*!controlChar);
        }
    };

    const deleteFunc = () => {
        // This is honestly quite disgusting, but it does work...
        let textAttrib = imaEl.lastChild.nodeName == '#text' ? 'data' : 'innerText';
        imaEl.lastChild.innerText = imaEl.lastChild.innerText.slice(0, -1);
        if (imaEl.lastChild.innerText == '') {
            imaEl.lastChild.remove();
        }

        if (imaEl.innerText == '') {
            currentEl = imaEl;
            imaCharIdx = 0;
            imaSelection += 1;
            if (imaSelection >= imaTexts.length) {
                imaSelection = 0;
            }
            currentEl = document.createElement('span');
            imaEl.appendChild(currentEl);
            setTimeout(typeFunc, imaTypingSpeed);
        } else {
            setTimeout(deleteFunc, imaDeletingSpeed);
        }
    };

    typeFunc();
});