<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" type="text/css" href="./style.css">
    <link rel="stylesheet" type="text/css" href="./root.css">

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Violet's Purgatory</title>

    <meta name="darkreader-lock">

    <meta content="Welcome to Violet's Purgatory" property="og:title" />
    <meta
        content="Hi, I'm Violet, a 15 year old web developer with strong ambitions. You can find more info on my site!"
        property="og:description" />
    <meta content="https://api.violets-purgatory.dev/v1/pfp" property="og:image" />
    <meta content="#a200ff" data-react-helmet="true" name="theme-color" />

    <!-- To any who dare read this code! I stole the code above off of stack overflow :P-->
</head>

<body>
    <h1 class="animatedTitle">Welcome to <span class="mainTitle">Violet's Purgatory</span><span class="note">Commit {COMMIT_COUNT}</span><br></h1>
    <main class="animatedMain">
        <p>{RANDOM_QUOTE}</p>
        <div id="card">
            <h2>Violet</h2>
            <div style="display: flex; justify-content: center; align-items: center;">
                <img src="https://api.violets-purgatory.dev/v1/pfp" class="pfp">
                <div>
                    <p><a>They/Them</a></p>
                    <p>Developer</p>
                    <p>{DISCORD_STATUS}</p>
                </div>
            </div>        
            <a style="color: rgb(255, 100, 100); " class="chip" href="https://https://ko-fi.com/bingus_violet">Donate (Ko-fi)</a>
            <div>
                <p style="padding: 10px;">Hi! I'm Violet, a 15 year old web and game developer. <br>
                    I aspire to make fast and javascript free websites! I'm currently learning the Godot Engine, and have been becoming quite fluent in NodeJS.</p>
            </div>
        </div>
        {PATH_SOCIALS}
    </main>
</body>

</html>