<!DOCTYPE html>
<html>
    <head>
        <title>nick s.</title>
    </head>

    <body>
        <!-- <h1 style="transition: all 0.3s;" onclick = "var audio = new Audio('audio/pop.mp3'); audio.play();" onmouseover = "this.style.color='#808080'" onmouseout = "this.style.color='#ddb895'" onmousedown = "this.style.color='#bebebe'" onmouseup = "this.style.color='#808080'">
            [ nick s. ]
        </h1> -->
        <h1>
            nick s.
        </h1>
        <script> // remove if doesnt fix preloading issues
            var audio = new Audio('audio/pop.mp3');
        </script>
        
        <p id = "fadingtext"></p>
        <script>
            let fadingtexts = ["nkdmns on telegram", "nkei#aim on val", "domiiinos on discord", "nkdmns on twitter", "FUCK lala"];
            let fadingtextindex = 0;
            let fadingtextopacity = 1;
            let fadingtextdirection = 1;
            let element = document.getElementById("fadingtext");
            setInterval(() => {
                element.innerHTML = `<i>${fadingtexts[fadingtextindex]}</i>`;
                element.style.opacity = fadingtextopacity;
                fadingtextopacity += 0.01 * fadingtextdirection;
                if (fadingtextopacity < 0 || fadingtextopacity > 1) {
                    fadingtextdirection *= -1;
                    if (fadingtextopacity <= 0) {
                        fadingtextindex = (fadingtextindex + 1) % fadingtexts.length;
                    }
                }
            }, 24);
        </script>

        <div id = "datadisplay"></div>
        <script>
            document.addEventListener("DOMContentLoaded", function () {
            fetch('https://api.lanyard.rest/v1/users/488358859589812244')
                .then(response => response.json())
                .then(data => {
                    const datadisplay = document.getElementById("datadisplay");
                
                    const statuselement = document.createElement("p");
                    statuselement.innerHTML = "<b>discord status</b> " + data.data.discord_status;
                    datadisplay.appendChild(statuselement);
                })
                .catch(error => console.error("Error fetching JSON data:", error));
        });
        </script>

        <h1 id = "header">
            experience
        </p>
            <p id = "paragraph">
                <strong>lua</strong> 4+ years, 15+ projects
            </p>
            <p id = "paragraph">
                <strong>python</strong> 3 years, 5+ projects
            </p>
            <p id = "paragraph">
                <strong>c++</strong> 1 year, 3+ projects
            </p>
            <p id = "paragraph">
                <strong>html</strong> beginner, first project
            </p>

        <h1 id = "header">
            peripherals & settings
        </p>
            <p id = "paragraph">
                <strong>mouse</strong> ninjutso sora v2
            </p>
            <p id = "paragraph">
                <strong>keyboard</strong> ying63
            </p>
            <p id = "paragraph">
                <strong>pad</strong> artisan zero soft
            </p>
            <p id = "paragraph">
                <strong>val sens</strong> 0.13 1600 4khz
            </p>
            <p id = "paragraph">
                <strong>monitor</strong> aw2521hfa 240hz
            </p>

        <h1 id = "header">
            links
        </p>
            <p id = "paragraph" style = "transition: all 0.3s;" onmouseover = "this.style.color='#bebebe'" onmouseout = "this.style.color='#808080'" onclick = "window.open('https://kovaaks.com/kovaaks/profile?username=nkdmns')">
                <strong>kovaaks</strong> nkdmns
            </p>
            <p id = "paragraph" style = "transition: all 0.3s;" onmouseover="this.style.color='#bebebe'" onmouseout = "this.style.color='#808080'" onclick="window.open('https://tracker.gg/valorant/profile/riot/nkei%23aim/overview?playlist=competitive&season=all')">
                <strong>tracker network</strong> nkei#aim
            </p>
            <p id = "paragraph" style = "transition: all 0.3s;" onmouseover="this.style.color='#bebebe'" onmouseout = "this.style.color='#808080'" onclick="window.open('https://nkdmns.info/media')">
                <strong>nkdmns.info/media</strong> image host
            </p>
        
        <div style = "position: fixed; bottom: 0; left: 0; padding: 10px;">
            <p style = "padding-left: 40px;" id = "paragraph">
                last updated: 
                <script>
                    let lastUpdated = new Date("January 19, 2025 18:37");
                    let timeSinceLastUpdate = new Date() - lastUpdated;
                    let daysSinceLastUpdate = Math.floor(timeSinceLastUpdate / (1000 * 60 * 60 * 24));
                    let hoursSinceLastUpdate = Math.floor((timeSinceLastUpdate % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                    let minutesSinceLastUpdate = Math.floor((timeSinceLastUpdate % (1000 * 60 * 60)) / (1000 * 60));
                    if (daysSinceLastUpdate > 1) {
                        document.write(`${daysSinceLastUpdate} days ago`);
                    } else if (hoursSinceLastUpdate > 1) {
                        document.write(`${hoursSinceLastUpdate} hours ago`);
                    } else if (minutesSinceLastUpdate > 1) {
                        if (hoursSinceLastUpdate > 0) {
                            document.write(`${hoursSinceLastUpdate} hours and ${minutesSinceLastUpdate} minutes ago`);
                        } else {
                            document.write(`${minutesSinceLastUpdate} minutes ago`);
                        }
                    } else {
                        document.write(`less than a minute ago`);
                    }
                </script>
            </p>
        </div>
    </body>
    <style>
        * {
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
        body {
            text-align: left;
            padding-left: 40px;
            padding-top: 10px;
            vertical-align: top;
            background-color: #141414;
            font-family: monospace;
            font-size: 12px;
            font-weight: normal;
            color: #4d5b83; 
            /* #ddb895 */
        }
        #header {
            color: #4d5b83;
            font-size: 20px;
            text-align: center;
        }
        #paragraph {
            color: #bebebe;
            font-weight: normal;
        }
        p {
            color: #bebebe;
            font-size: 18px;
        }
    </style>
</html>