<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>sajed's homepage</title>
    <meta name="author" content="S. S.">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="my homepage!">
    <style>
        img {
            image-rendering: pixelated;
        }

        html {
            font-family: Roboto Mono, monospace;
            font-size: 14px;
            line-height: 1.2em;
            height: 100%;
        }

        body {
            max-width: 768px;
            margin: 1em auto;
            color: var(--text-color);
        }

        li {
            list-style-type: square;
            list-style-position: inside;
            margin-top: .25em;
        }

        #navbar {
            display: flex;
            justify-content: space-between;
        }

        #navbar-links b:after {
            content: "|";
            margin: 0 .5rem;
        }

        #navbar-links b:last-child:after {
            content: "";
        }

        :root {
            --text-color: #000000;
            --link-color: #0000ee;
        }

        a,
        a:visited {
            color: var(--link-color);
        }

        a:active,
        a:hover {
            color: #fff;
            background-color: var(--link-color);
        }

        @media (prefers-color-scheme: dark) {
            :root {
                --text-color: #eeeeee;
                --link-color: #0392da;
            }

            body {
                background: #000;
                color: var(--text-color);
            }

            hr {
                filter: brightness(.3);
            }
        }

        *,
        *:before,
        *:after {
            box-sizing: inherit;
        }

        * {
            padding: 0;
            margin: 0;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        hr {
            font-size: 1em;
            position: relative;
            margin: 1em 0;
        }

        h1:first-child {
            margin-top: 0;
        }

        h1:after {
            content: "=================================================";
            position: absolute;
            left: 0;
            top: 1em;
        }

        h1 {
            padding-bottom: 1em;
            overflow-x: hidden;
        }

        h2:before {
            content: "### ";
        }
    </style>
</head>

<body>
    <div id="navbar">
        <div>
            <h1>sajed's homepage</h1>
        </div>
        <div id="navbar-links">
            <b><a href="/">home</a></b>
            <!--<b><a href="/potd">picture of the day</a></b> -->
            <b><a href="/cat">cat</a></b>
            <b><a href="/batman">top secret</a></b>
        </div>
    </div>

    <p>
        Hello! This is my personal space online. I'm Sajed (S. S.), a programmer and a student, this is my place on the
        WWW.<br>
        I mostly work on systems programming, RE, and things that touch the network.<br><br>
        Currently interested in servers programming, Machine Learning and AI, and reverse engineering.<br>
        I play with low-level code and have strong opinions about high-level abstractions.<br>
    </p>

    <h2>Projects</h2>
    <ul>
        <li><a href="https://github.com/novastosha/rustmine" target="_blank" rel="noreferrer">Rustmine</a> - A
            work-in-progress barebones Minecraft server implementation written in Rust</li>
        <li>More coming soon...</li>
    </ul>

    <h2>Programming Languages</h2>
    <ul>
        <li>Experienced: Rust, Java, C</li>
        <li>Intermediate: Python, Go, F#</li>
        <li>Beginner: Haskell </li>
    </ul>

    <h2>Contacts</h2>
    <ul>
        <li>GitHub: <a href="https://github.com/novastosha" target="_blank" rel="noreferrer">@novastosha</a></li>
        <li>Email: <a id="email">reveal</a> <span id="click_text"></li>
    </ul>

    <h2>Favorite Artists</h2>
    <ul>
        <li>CAS, TV Girl, Arctic Monkeys</li>
        <li>Guns N' Roses <3, Metallica, AC/DC, Nirvana</li>
        <li>C418, and whatever loops in the background while I do something on my computer</li>
    </ul>

    <hr>

    <marquee id="badges" direction="right"></marquee>
    <script type="text/javascript">
        const email = 'bWVAc2FqZWQuZGV2';
        document.getElementById("email").addEventListener("click", function () {
            const convertedEmail = atob(email);

            if (this.textContent === "reveal") {
                this.textContent = convertedEmail;
                document.getElementById("click_text").textContent = " (click to copy)";
            } else {
                navigator.clipboard.writeText(convertedEmail).then(() => {
                    document.getElementById("click_text").textContent = " (copied!)";
                }).catch(err => {
                    document.getElementById("click_text").textContent = " (failed to copy D:)";
                    console.error("Failed to copy email: ", err);
                });
            }


        })

        const badges = [
            { src: "assets/88x31/best_viewed_with_eyes.gif", title: "Best viewed with eyes" },
            { src: "assets/88x31/moist.gif", title: "Moist", href: "https://www.youtube.com/watch?v=8v9d1a6b2eY" },
            { src: "assets/88x31/autism.gif", title: "Autism Awareness", href: "https://www.autismspeaks.org/" },
            { src: "assets/88x31/click_here.gif", title: "Click here", href: "https://www.youtube.com/watch?v=dQw4w9WgXcQ" },
        ];

        const container = document.getElementById("badges");

        badges.forEach(({ src, title, href }) => {
            const img = document.createElement("img");
            img.src = src;
            img.title = title;
            img.style.imageRendering = "pixelated";

            if (href) {
                const a = document.createElement("a");
                a.href = href;
                a.target = "_blank";
                a.rel = "noreferrer";
                a.appendChild(img);
                container.appendChild(a);
            } else {
                container.appendChild(img);
            }
        });
    </script>
    <script type="text/javascript">
        // oneko.js: https://github.com/adryd325/oneko.js

        (function oneko() {
            const isReducedMotion =
                window.matchMedia(`(prefers-reduced-motion: reduce)`) === true ||
                window.matchMedia(`(prefers-reduced-motion: reduce)`).matches === true;

            if (isReducedMotion) return;

            const nekoEl = document.createElement("div");

            let nekoPosX = 32;
            let nekoPosY = 32;

            let mousePosX = 0;
            let mousePosY = 0;

            let frameCount = 0;
            let idleTime = 0;
            let idleAnimation = null;
            let idleAnimationFrame = 0;

            const nekoSpeed = 10;
            const spriteSets = {
                idle: [[-3, -3]],
                alert: [[-7, -3]],
                scratchSelf: [
                    [-5, 0],
                    [-6, 0],
                    [-7, 0],
                ],
                scratchWallN: [
                    [0, 0],
                    [0, -1],
                ],
                scratchWallS: [
                    [-7, -1],
                    [-6, -2],
                ],
                scratchWallE: [
                    [-2, -2],
                    [-2, -3],
                ],
                scratchWallW: [
                    [-4, 0],
                    [-4, -1],
                ],
                tired: [[-3, -2]],
                sleeping: [
                    [-2, 0],
                    [-2, -1],
                ],
                N: [
                    [-1, -2],
                    [-1, -3],
                ],
                NE: [
                    [0, -2],
                    [0, -3],
                ],
                E: [
                    [-3, 0],
                    [-3, -1],
                ],
                SE: [
                    [-5, -1],
                    [-5, -2],
                ],
                S: [
                    [-6, -3],
                    [-7, -2],
                ],
                SW: [
                    [-5, -3],
                    [-6, -1],
                ],
                W: [
                    [-4, -2],
                    [-4, -3],
                ],
                NW: [
                    [-1, 0],
                    [-1, -1],
                ],
            };

            function init() {
                nekoEl.id = "oneko";
                nekoEl.ariaHidden = true;
                nekoEl.style.width = "32px";
                nekoEl.style.height = "32px";
                nekoEl.style.position = "fixed";
                nekoEl.style.pointerEvents = "none";
                nekoEl.style.imageRendering = "pixelated";
                nekoEl.style.left = `${nekoPosX - 16}px`;
                nekoEl.style.top = `${nekoPosY - 16}px`;
                nekoEl.style.zIndex = 2147483647;

                let nekoFile = "assets/oneko.gif"
                const curScript = document.currentScript
                if (curScript && curScript.dataset.cat) {
                    nekoFile = curScript.dataset.cat
                }
                nekoEl.style.backgroundImage = `url(${nekoFile})`;

                document.body.appendChild(nekoEl);

                document.addEventListener("mousemove", function (event) {
                    mousePosX = event.clientX;
                    mousePosY = event.clientY;
                });

                window.requestAnimationFrame(onAnimationFrame);
            }

            let lastFrameTimestamp;

            function onAnimationFrame(timestamp) {
                // Stops execution if the neko element is removed from DOM
                if (!nekoEl.isConnected) {
                    return;
                }
                if (!lastFrameTimestamp) {
                    lastFrameTimestamp = timestamp;
                }
                if (timestamp - lastFrameTimestamp > 100) {
                    lastFrameTimestamp = timestamp
                    frame()
                }
                window.requestAnimationFrame(onAnimationFrame);
            }

            function setSprite(name, frame) {
                const sprite = spriteSets[name][frame % spriteSets[name].length];
                nekoEl.style.backgroundPosition = `${sprite[0] * 32}px ${sprite[1] * 32}px`;
            }

            function resetIdleAnimation() {
                idleAnimation = null;
                idleAnimationFrame = 0;
            }

            function idle() {
                idleTime += 1;

                // every ~ 20 seconds
                if (
                    idleTime > 10 &&
                    Math.floor(Math.random() * 200) == 0 &&
                    idleAnimation == null
                ) {
                    let avalibleIdleAnimations = ["sleeping", "scratchSelf"];
                    if (nekoPosX < 32) {
                        avalibleIdleAnimations.push("scratchWallW");
                    }
                    if (nekoPosY < 32) {
                        avalibleIdleAnimations.push("scratchWallN");
                    }
                    if (nekoPosX > window.innerWidth - 32) {
                        avalibleIdleAnimations.push("scratchWallE");
                    }
                    if (nekoPosY > window.innerHeight - 32) {
                        avalibleIdleAnimations.push("scratchWallS");
                    }
                    idleAnimation =
                        avalibleIdleAnimations[
                        Math.floor(Math.random() * avalibleIdleAnimations.length)
                        ];
                }

                switch (idleAnimation) {
                    case "sleeping":
                        if (idleAnimationFrame < 8) {
                            setSprite("tired", 0);
                            break;
                        }
                        setSprite("sleeping", Math.floor(idleAnimationFrame / 4));
                        if (idleAnimationFrame > 192) {
                            resetIdleAnimation();
                        }
                        break;
                    case "scratchWallN":
                    case "scratchWallS":
                    case "scratchWallE":
                    case "scratchWallW":
                    case "scratchSelf":
                        setSprite(idleAnimation, idleAnimationFrame);
                        if (idleAnimationFrame > 9) {
                            resetIdleAnimation();
                        }
                        break;
                    default:
                        setSprite("idle", 0);
                        return;
                }
                idleAnimationFrame += 1;
            }

            function frame() {
                frameCount += 1;
                const diffX = nekoPosX - mousePosX;
                const diffY = nekoPosY - mousePosY;
                const distance = Math.sqrt(diffX ** 2 + diffY ** 2);

                if (distance < nekoSpeed || distance < 48) {
                    idle();
                    return;
                }

                idleAnimation = null;
                idleAnimationFrame = 0;

                if (idleTime > 1) {
                    setSprite("alert", 0);
                    // count down after being alerted before moving
                    idleTime = Math.min(idleTime, 7);
                    idleTime -= 1;
                    return;
                }

                let direction;
                direction = diffY / distance > 0.5 ? "N" : "";
                direction += diffY / distance < -0.5 ? "S" : "";
                direction += diffX / distance > 0.5 ? "W" : "";
                direction += diffX / distance < -0.5 ? "E" : "";
                setSprite(direction, frameCount);

                nekoPosX -= (diffX / distance) * nekoSpeed;
                nekoPosY -= (diffY / distance) * nekoSpeed;

                nekoPosX = Math.min(Math.max(16, nekoPosX), window.innerWidth - 16);
                nekoPosY = Math.min(Math.max(16, nekoPosY), window.innerHeight - 16);

                nekoEl.style.left = `${nekoPosX - 16}px`;
                nekoEl.style.top = `${nekoPosY - 16}px`;
            }

            init();
        })();

    </script>

    <br>
    Website design was basically stolen from golden @ <a href="https://goldenstack.net">goldenstack.net</a>
    <br>
</body>

</html>