horses/index.php

<?php require $_SERVER['DOCUMENT_ROOT'] . "/includes/main.php"; require $_SERVER['DOCUMENT_ROOT'] . "/includes/header.php"; ?>

<div style="height: calc(20vw + 50px); position: fixed; top: 0; left: 0; right: 0; z-index: 10;" id="hero">
    <div class="container" style="padding-top: 10vh; display: grid; height: 100%;">
        <div style="font-size: 5vw; white-space: nowrap; display: flex; align-items: center; justify-content: center;">
            <div style="font-family: 'Find Your Sparkle', sans-serif;">Ponies doing&nbsp;</div>
            <div style="font-family: 'Find Your Sparkle', sans-serif;-webkit-background-clip: text !important;background-clip: text !important;-webkit-text-fill-color: transparent;background:linear-gradient(45deg, #fff090 0%, rgba(255,255,255,1) 100%);text-shadow: 0 0 20px #fff0904a;">magic</div>
            <div style="font-family: 'Find Your Sparkle', sans-serif;">&nbsp;with computers</div>
        </div>
    </div>
</div>
<div id="particle-canvas" style="height: calc(20vw + 50px);top:0;left:0;right:0;background-color: #836fbb;"></div>
<img id="banner" style="position: fixed;top: calc(20vw + 49px);left:0;right:0; height: 10vh; width: 100%;" src="/assets/banner.png">

<script>
    let particleCanvas = new ParticleNetwork(document.getElementById('particle-canvas'), {
        particleColor: '#bbb',
        interactive: false,
        speed: 'high',
        density: 'low'
    });

    window.addEventListener("scroll", () => {
        document.getElementById("hero").style.top = document.getElementById("particle-canvas").style.top = "-" + window.scrollY + "px";
        document.getElementById("banner").style.top = "calc(20vw + 49px + -" + window.scrollY + "px)";

        if (document.getElementById("banner").offsetTop < 0) {
            document.getElementById("navigation").classList.add("background");
        } else {
            document.getElementById("navigation").classList.remove("background");
        }
    })
</script>
<p style="padding-top: calc(20vw + 10vh + 70px);"></p>

<div class="container" style="text-align: center;">
    <h3 style="margin-bottom: 1rem;"><?= floor((time() - 1517443200) / 31557600) ?> years of experience and still standing</h3>
    <p>We're still learning and making software to fulfill your and our needs. With a total count of <?= count([...getProjectsList(), ...getArchivesList()]) ?> projects (excluding unfinished or unarchived projects), we have tried about anything that is possible to do with the technologies in our hooves. We are still making new things every so often.</p>

    <hr style="margin: 2rem 0;">

    <h3>Based on simple principes</h3>

    <div id="principles" style="display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 20px;">
        <div>
            <img alt="" src="/assets/home/open.svg" style="filter: invert(1); height: 64px;">
            <h4>Open and future-proof</h4>
            <p>Most of our software is released under an open-source license, encouraging community contributions and improvements. We also make sure this software can be used not only now, but also any time in the future.</p>
        </div>
        <div>
            <img alt="" src="/assets/home/security.svg" style="filter: invert(1); height: 64px;">
            <h4>Secure and private</h4>
            <p>We put user security and privacy at the top. Using encryption when deemed necessary, and being extremely transparent when it comes to how we use user data, our software is protecting what matters for users rest assured.</p>
        </div>
        <div>
            <img alt="" src="/assets/home/fun.svg" style="filter: invert(1); height: 64px;">
            <h4>Fun and rewarding</h4>
            <p>Every single line of code we write is written voluntarily, on our free time, and to learn more about programming and computer science as we go. This makes Equestria.dev a perfect learning experience for us.</p>
        </div>
        <div>
            <img alt="" src="/assets/home/bugs.svg" style="filter: invert(1); height: 64px;">
            <h4>Stable and reliable</h4>
            <p>Although bugs can sometimes appear, we make sure to squash them as quickly as possible. We write our code in a way that makes crashes almost impossible, or extremely rare, so that users can get the best out of our work.</p>
        </div>
    </div>

    <hr style="margin: 1rem 0;">

    <h3 style="margin-bottom: 1rem;">Mastering a wide range of languages</h3>
    <div style="display: grid; grid-template-columns: repeat(12, 1fr);" id="home-languages">
        <div data-bs-toggle="tooltip" title="HTML" style="display: flex; align-items: center; justify-content: center;">
            <img alt="" src="/assets/languages/html.svg" style="height: 96px; width: 96px; border-radius: 10px;">
        </div>
        <div data-bs-toggle="tooltip" title="CSS" style="display: flex; align-items: center; justify-content: center;">
            <img alt="" src="/assets/languages/css.svg" style="height: 96px; width: 96px; border-radius: 10px;">
        </div>
        <div data-bs-toggle="tooltip" title="JavaScript" style="display: flex; align-items: center; justify-content: center;">
            <img alt="" src="/assets/languages/js.svg" style="height: 72px; width: 72px; border-radius: 10px;">
        </div>
        <div data-bs-toggle="tooltip" title="TypeScript" style="display: flex; align-items: center; justify-content: center;">
            <img alt="" src="/assets/languages/ts.svg" style="height: 72px; width: 72px; border-radius: 10px;">
        </div>
        <div data-bs-toggle="tooltip" title="PHP" style="display: flex; align-items: center; justify-content: center;">
            <img alt="" src="/assets/languages/php.svg" style="height: 72px; width: 72px; border-radius: 10px;">
        </div>
        <div data-bs-toggle="tooltip" title="JSON" style="display: flex; align-items: center; justify-content: center;">
            <img alt="" src="/assets/languages/json.svg" style="height: 72px; width: 72px; border-radius: 10px;">
        </div>
        <div data-bs-toggle="tooltip" title="YAML" style="display: flex; align-items: center; justify-content: center;">
            <img alt="" src="/assets/languages/yaml.svg" style="height: 72px; width: 72px;">
        </div>
        <div data-bs-toggle="tooltip" title="XML" style="display: flex; align-items: center; justify-content: center;">
            <img alt="" src="/assets/languages/xml.svg" style="height: 72px; width: 72px; border-radius: 10px;">
        </div>
        <div data-bs-toggle="tooltip" title="Kotlin" style="display: flex; align-items: center; justify-content: center;">
            <img alt="" src="/assets/languages/kotlin.svg" style="height: 72px; width: 72px;">
        </div>
        <div data-bs-toggle="tooltip" title="Python" style="display: flex; align-items: center; justify-content: center;">
            <img alt="" src="/assets/languages/python.svg" style="height: 72px; width: 72px;">
        </div>
        <div data-bs-toggle="tooltip" title="C#" style="display: flex; align-items: center; justify-content: center;">
            <img alt="" src="/assets/languages/cs.svg" style="height: 72px; width: 72px;">
        </div>
        <div data-bs-toggle="tooltip" title="Bash" style="display: flex; align-items: center; justify-content: center;">
            <img alt="" src="/assets/languages/bash.svg" style="height: 72px; width: 72px;">
        </div>
    </div>

    <hr style="margin: 1rem 0;">

    <h3 style="margin-bottom: 1rem;">This is only a fraction of what we've done</h3>

    <div id="projects-grid" style="display: grid; grid-template-columns: repeat(9, 1fr); margin-top: 20px;">
        <?php

        $list = array_values(array_filter([...getProjectsList(), ...getArchivesList()], function ($i) {
            return isset($i["icon"]) && $i["icon"] !== "/assets/icons/project.svg";
        }));

        $showcase = array_slice($list, 0, 9);

        foreach ($showcase as $project):
            ?>
            <a data-bs-toggle="tooltip" title="<?= $project["display_name"] ?? $project["name"] ?>" href="<?= $project["source"] ?? $project["website"] ?>" style="text-align: center;">
                <img alt="" src="<?= $project["icon"] ?>" style="height: 96px; width: 96px; border-radius: 10px;">
            </a>
        <?php endforeach; ?>
    </div>
    <p style="margin-top: 1rem;"><a href="/projects">See more</a></p>
</div>

<?php require $_SERVER['DOCUMENT_ROOT'] . "/includes/footer.php"; ?>