https://kris.software/

Scan ID:: 9b14398d-35c1-468b-aa67-250a49888474Finished
Submitted URL:: https://kris.software/
Report Finished:: Nov 20, 2024, 11:34:19
Links · 1 found

The outgoing links identified from the page
Link	Text
https://github.com/Kris-0605	y
JavaScript Variables · 16 found

Global JavaScript variables loaded on the window object of a page, are variables declared outside of functions and accessible from anywhere in the code within the current scope
Name	Type
onbeforetoggle	object
documentPictureInPicture	object
onscrollend	object
resizeCanvas	function
cullBlocks	function
drawBackgroundBlocks	function
updatePhysics	function
draw	function
spawnBlock	function
handleClick	function
Console log messages · 0 found

Messages logged to the web console
HTML

The raw HTML body of the page
<!DOCTYPE html><html lang="en"><head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Kris Software is the home of projects by Kris, a 19-year old British software developer.">
    <title>Kris Software</title>
    
    
    <link href="https://fonts.googleapis.com/css2?family=Kode+Mono:wght@500&amp;display=swap" rel="stylesheet">
    <link rel="icon" href="kris.webp">
    <meta content="Kris Software" property="og:title">
    <meta content="Kris Software is the home of projects by Kris, a 19-year old British software developer." property="og:description">
    <meta content="https://kris.software" property="og:url">
    <meta content="https://kris.software/kris.webp" property="og:image">
    <meta content="#ff00ff" data-react-helmet="true" name="theme-color">
    <style>
body,
html {
    width: 100%;
    height: 100%;
}

body {
    background-color: black;
    color: white;
    font-family: "Kode Mono", monospace;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    margin: 0px;
    overflow: hidden;
    user-select: none;
}

canvas {
    position: absolute;
}

#background {
    z-index: -2;
}

#particle {
    z-index: -1;
}

.page-content {
    padding: 1rem;
    display: flex;
    align-items: center;
    flex-direction: column;
    backdrop-filter: blur(5px);
    height: 100%;
}

.page-content * {
    display: inline;
}

.title img {
    height: 2.1rem;
    padding: 0rem;
    margin: 0rem;
}

h1,
h2,
.github h2 a {
    font-size: 3rem;
    color: black;
    margin-bottom: 0rem;
    margin-top: 1rem;
}

h2,
.github h2 a,
#cursor2 {
    font-size: 2rem;
}

@media only screen and (max-width: 586px) {
    .page-content {
        padding: 2.73vw;
    }

    .title img {
        height: 5.73vw;
    }

    h1,
    h2,
    .github h2 a {
        font-size: 8.19vw;
        margin-top: 2.73vw;
    }

    h2,
    .github h2 a,
    #cursor2 {
        font-size: 5vw;
    }
}
    </style>
</head>
<body>
    <canvas id="background" width="800" height="600"></canvas>
    <canvas id="particle" width="800" height="600"></canvas>
    <div class="page-content">
        <div class="title">
            <picture>
                <source srcset="kris.webp" type="image/webp">
                <source srcset="kris.png" type="image/png">
                <img src="kris.png" alt="Simple logo">
            </picture>
            <h1>
                <span>K</span><span>r</span><span>i</span><span>s</span><span> </span><span>S</span><span>o</span><span>f</span><span>t</span><span>w</span><span>a</span><span>r</span><span>e</span><span class="cursor" id="cursor1">█</span>
            </h1>
        </div>
        <div class="github">
            <h2>
                <a href="https://github.com/Kris-0605" target="_blank">M</a><a href="https://github.com/Kris-0605" target="_blank">y</a><a href="https://github.com/Kris-0605" target="_blank"> </a><a href="https://github.com/Kris-0605" target="_blank">G</a><a href="https://github.com/Kris-0605" target="_blank">i</a><a href="https://github.com/Kris-0605" target="_blank">t</a><a href="https://github.com/Kris-0605" target="_blank">H</a><a href="https://github.com/Kris-0605" target="_blank">u</a><a href="https://github.com/Kris-0605" target="_blank">b</a>
            </h2>
        </div>
        <div class="more">
            <h2>
                <span>M</span><span>o</span><span>r</span><span>e</span> <span>s</span><span>o</span><span>o</span><span>n</span><span> </span><span>:</span><span>)</span>
            </h2>
        </div>
        <div class="counter">
            <h2>
                <span id="value">1</span><span> </span><span>p</span><span>e</span><span>o</span><span>p</span><span>l</span><span>e</span><span> </span><span>a</span><span>r</span><span>e</span><span> </span><span>c</span><span>u</span><span>r</span><span>r</span><span>e</span><span>n</span><span>t</span><span>l</span><span>y</span><span> </span><span>h</span><span>e</span><span>r</span><span>e</span>
            </h2>
        </div>
        <div>
            <h2>
                <span>T</span><span>r</span><span>y</span><span> </span><span>c</span><span>l</span><span>i</span><span>c</span><span>k</span><span>i</span><span>n</span><span>g</span><span> </span><span>a</span><span>r</span><span>o</span><span>u</span><span>n</span><span>d</span><span>!</span></h2><span class="cursor" id="cursor2">█</span>
        </div>
    </div>
<style>
:root {
    --github: #a58fe2;
}

@keyframes reveal-white {
    0% {
        color: black;
        background-color: black;
    }

    49.99% {
        color: black;
        background-color: black;
    }

    50% {
        color: white;
        background-color: white;
    }

    99.99% {
        color: white;
        background-color: white;
    }

    100% {
        color: white;
        background-color: transparent;
    }
}

h1 span,
h2 span {
    animation: reveal-white 0.08s forwards;
}

h2 span {
    animation-duration: 0.04s;
}

h1 span:nth-child(1),
.github h2 a:nth-child(1) {
    animation-delay: 0.04s;
}

h1 span:nth-child(2),
.github h2 a:nth-child(2) {
    animation-delay: 0.08s;
}

h1 span:nth-child(3),
.github h2 a:nth-child(3) {
    animation-delay: 0.12s;
}

h1 span:nth-child(4),
.github h2 a:nth-child(4) {
    animation-delay: 0.16s;
}

h1 span:nth-child(5),
.github h2 a:nth-child(5) {
    animation-delay: 0.2s;
}

h1 span:nth-child(6),
.github h2 a:nth-child(6) {
    animation-delay: 0.24s;
}

h1 span:nth-child(7),
.github h2 a:nth-child(7) {
    animation-delay: 0.28s;
}

h1 span:nth-child(8),
.github h2 a:nth-child(8) {
    animation-delay: 0.32s;
}

h1 span:nth-child(9),
.github h2 a:nth-child(9) {
    animation-delay: 0.36s;
}

h1 span:nth-child(10) {
    animation-delay: 0.4s;
}

h1 span:nth-child(11) {
    animation-delay: 0.44s;
}

h1 span:nth-child(12) {
    animation-delay: 0.48s;
}

h1 span:nth-child(13) {
    animation-delay: 0.52s;
}

h2 span:nth-child(1) {
    animation-delay: 0.02s;
}

h2 span:nth-child(2) {
    animation-delay: 0.04s;
}

h2 span:nth-child(3) {
    animation-delay: 0.06s;
}

h2 span:nth-child(4) {
    animation-delay: 0.08s;
}

h2 span:nth-child(5) {
    animation-delay: 0.1s;
}

h2 span:nth-child(6) {
    animation-delay: 0.12s;
}

h2 span:nth-child(7) {
    animation-delay: 0.14s;
}

h2 span:nth-child(8) {
    animation-delay: 0.16s;
}

h2 span:nth-child(9) {
    animation-delay: 0.18s;
}

h2 span:nth-child(10) {
    animation-delay: 0.2s;
}

h2 span:nth-child(11) {
    animation-delay: 0.22s;
}

h2 span:nth-child(12) {
    animation-delay: 0.24s;
}

h2 span:nth-child(13) {
    animation-delay: 0.26s;
}

h2 span:nth-child(14) {
    animation-delay: 0.28s;
}

h2 span:nth-child(15) {
    animation-delay: 0.3s;
}

h2 span:nth-child(16) {
    animation-delay: 0.32s;
}

h2 span:nth-child(17) {
    animation-delay: 0.34s;
}

h2 span:nth-child(18) {
    animation-delay: 0.36s;
}

h2 span:nth-child(19) {
    animation-delay: 0.38s;
}

h2 span:nth-child(20) {
    animation-delay: 0.4s;
}

h2 span:nth-child(21) {
    animation-delay: 0.42s;
}

h2 span:nth-child(22) {
    animation-delay: 0.44s;
}

h2 span:nth-child(23) {
    animation-delay: 0.46s;
}

h2 span:nth-child(24) {
    animation-delay: 0.48s;
}

h2 span:nth-child(25) {
    animation-delay: 0.5s;
}

h2 span:nth-child(26) {
    animation-delay: 0.52s;
}

h2 span:nth-child(27) {
    animation-delay: 0.54s;
}

@keyframes reveal-github {
    0% {
        color: black;
        background-color: black;
    }

    49.99% {
        color: black;
        background-color: black;
    }

    50% {
        color: var(--github);
        background-color: var(--github);
    }

    99.99% {
        color: var(--github);
        background-color: var(--github);
    }

    100% {
        color: var(--github);
        background-color: transparent;
    }
}

.github h2 {
    display: inline-block;
}

.github h2 a {
    animation: reveal-github 0.08s forwards;
}

@keyframes cursor {
    0% {
        opacity: 100%;
    }

    50% {
        opacity: 100%;
    }

    50.01% {
        opacity: 0%;
    }

    100% {
        opacity: 0%;
    }
}

.counter {
    display: inline-block;
    margin-top: 1rem;
}

.cursor {
    opacity: 0%;
    animation: cursor 1s infinite 0.56s;
    color: white;
}
</style>
    <script type="text/javascript">
const backgroundCanvas = document.getElementById("background");
const backgroundCtx = backgroundCanvas.getContext("2d");
const particleCanvas = document.getElementById("particle");
const particleCtx = particleCanvas.getContext("2d");

const maxWidth = 20;
const maxHeight = 20;
const acceleration = 0.003;
const maxHorizontalVelocity = 0.3;
const maxVerticalVelocity = -0.3;
const maxBlocksPerClick = 10;

const maxBackgroundWidth = 200;
const maxBackgroundHeight = 200;
const maxBackgroundHorizontalVelocity = 0.2;

function resizeCanvas() {
    backgroundCanvas.width = window.innerWidth;
    backgroundCanvas.height = window.innerHeight;
    particleCanvas.width = window.innerWidth;
    particleCanvas.height = window.innerHeight;
}

window.addEventListener('resize', resizeCanvas);
resizeCanvas();

let blocks = [];
let backgroundBlocks = [];

function cullBlocks() {
    blocks = blocks.filter(function (item) { return item.y < particleCanvas.height });
    backgroundBlocks = backgroundBlocks.filter(function (item) { return item.x >= -maxBackgroundWidth - 50 && item.x <= backgroundCanvas.width + 50 })
}

function drawBackgroundBlocks(timestamp) {
    backgroundCtx.clearRect(0, 0, backgroundCanvas.width, backgroundCanvas.height);

    for (let i = 0; i < backgroundBlocks.length; i++) {
        let block = backgroundBlocks[i]

        if (block.timestamp === 0) {
            block.timestamp = timestamp;
        }

        block.x = block.x_start + block.uHor * (timestamp - block.timestamp);

        backgroundCtx.fillStyle = "#f0f";
        backgroundCtx.globalCompositeOperation = "destination-over";
        backgroundCtx.fillRect(block.x, block.y, block.w, block.h);
        backgroundCtx.globalCompositeOperation = "lighter";
        backgroundCtx.shadowBlur = block.w / 10;
        backgroundCtx.shadowColor = "#f0f";
        backgroundCtx.shadowOffsetX = 0;
        backgroundCtx.shadowOffsetY = 0;
        backgroundCtx.fillRect(block.x - backgroundCtx.shadowBlur, block.y - backgroundCtx.shadowBlur, block.w + 2 * backgroundCtx.shadowBlur, block.h + 2 * backgroundCtx.shadowBlur);
    }
}

function updatePhysics(block, timestamp) {
    if (block.timestamp === 0) {
        block.timestamp = timestamp;
    }

    time = timestamp - block.timestamp;

    block.x = block.x_start + block.uHor * time;
    block.y = block.y_start + block.uVer * time + acceleration * time * time * 0.5;
}

function draw(timestamp) {
    particleCtx.clearRect(0, 0, particleCanvas.width, particleCanvas.height);
    drawBackgroundBlocks(timestamp);
    for (let i = 0; i < blocks.length; i++) {
        let block = blocks[i];
        updatePhysics(block, timestamp);
        if (block.colour === 0) {
            particleCtx.fillStyle = `rgba(255, 0, 255, ${block.opacity})`;
        } else if (block.colour === 1) {
            particleCtx.fillStyle = `rgba(0, 0, 255, ${block.opacity})`;
        } else {
            particleCtx.fillStyle = `rgba(255, 0, 0, ${block.opacity})`;
        }
        particleCtx.fillRect(block.x, block.y, block.w, block.h);
    }
    requestAnimationFrame(draw);
}

requestAnimationFrame(draw);

function spawnBlock(colour, amount, x, y) {
    let opacity = Math.random() + 0.3;

    for (let i = 0; i < amount; i++) {
        blocks.push({
            x: x,
            y: y,
            x_start: x,
            y_start: y,
            w: maxWidth * Math.random() + 10,
            h: maxHeight * Math.random() + 10,
            opacity: opacity,
            uHor: 2 * maxHorizontalVelocity * Math.random() - maxHorizontalVelocity,
            uVer: 4 * maxVerticalVelocity * Math.random() - maxVerticalVelocity,
            timestamp: 0,
            colour: colour,
        });
    }
}

function handleClick(event) {
    let numOfBlocks = maxBlocksPerClick * Math.random();
    spawnBlock(0, numOfBlocks, event.clientX, event.clientY);
    socket.send(new Float32Array([event.clientX / particleCanvas.width, event.clientY / particleCanvas.height]))
}

document.addEventListener('click', handleClick);

function spawnBackgroundBlock() {
    if (!document.hidden) {
        let uHor = 2 * maxBackgroundHorizontalVelocity * Math.random() - maxBackgroundHorizontalVelocity + 0.0005;
        if (uHor > 0) {
            x = -maxBackgroundWidth - 50;
        } else {
            x = particleCanvas.width + 50;
        }

        backgroundBlocks.push({
            x: x,
            y: particleCanvas.height * Math.random(),
            x_start: x,
            w: maxBackgroundWidth * Math.random() + 50,
            h: maxBackgroundHeight * Math.random(),
            uHor: uHor,
            timestamp: 0,
        })
    }
}

setInterval(spawnBackgroundBlock, 1000)
setInterval(cullBlocks, 200)

function updateCounter(event) {
    document.getElementById("value").innerHTML = String(new Uint32Array(event.data)[0]);
}

function openWebSocket(event) {
    const socket = new WebSocket("wss://particle.kris.software/");
    socket.binaryType = 'arraybuffer';

    socket.addEventListener("open", (event) => { requestUpdateCounter(); });
    socket.addEventListener("close", openWebSocket);
    socket.addEventListener("error", openWebSocket);
    socket.addEventListener("message", (event) => {
        data = new Float32Array(event.data);
        if (data.length === 1) {
            updateCounter(event);
        } else {
            if (Math.random() < 0.5) {
                colour = 1;
            } else {
                colour = 2;
            }
            spawnBlock(colour, 1, data[0] * particleCanvas.width, data[1] * particleCanvas.height);
        }
    });
    return socket;
}

let socket = openWebSocket();

function requestUpdateCounter() {
    socket.send(new Uint8Array([0]))
}

setInterval(requestUpdateCounter, 5000);
    </script>

</body></html>