aria.coffee/src/pages/about.astro

---
import FriendLink from "../components/FriendLink.astro";
import Partition from "../components/Partition.astro";
import Donations from "../components/Donations.astro";
import BaseLayout from "../layouts/BaseLayout.astro";
import "../styles/aria.css";

const pageTitle = "About Aria";
const description = "All about Aria, her system, her hobbies and more!";

const identity = {
	firstName: "Aria",
	country: "Australia",
	occupation: "Phone & Computer Repair Tech",
	hobbies: ["gaming", "software/game development", "3D printing"],
};

const skills = ["Rust", "GDScript", "FFMPEG"];

const currentSystem = {
	name: "I/O",
	operatingSystem: "EndeavourOS",
	host: "X570 Phantom Gaming 4",
	shell: "zsh",
	mainDisplay: "Gigabyte M27U",
	mainDisplayRtings: "https://www.rtings.com/monitor/reviews/gigabyte/m27u",
	cpu: "AMD Ryzen 9 5900X",
	gpu: "AMD Radeon RX 7800 XT",
	ram: "48GB",
	localIP: "192.168.20.2",
};

const skillColor = "#F5A8B7";
---

<BaseLayout pageTitle={pageTitle} description={description}>
    <Partition>
        <p>It's about time I actually write up my own website right?</p>
        <br />
        <h2 class="text-2xl">Here are a few facts about me:</h2>
        <ul class="list-disc p-4">
            <li>My name is {identity.firstName}.</li>
            <li>
                I live in {identity.country} and I work as a {
                    identity.occupation
                }.
            </li>
            {
                identity.hobbies.length >= 2 && (
                    <li>
                        Two of my hobbies are: {identity.hobbies[0]} and{" "}
                        {identity.hobbies[1]}
                    </li>
                )
            }
        </ul>
    </Partition>
    <Partition>
        <h2 class="text-2xl">What powers me & this website?</h2>

        <p>What powers my system?</p>
        <br />
        <p>
            I daily drive EndeavourOS with the KDE Plasma desktop, use Firefox
            for the internet, qBittorrent for "linux ISOs", Jellyfin for
            streaming those "ISOs"
        </p>
        <div class="flex outline-dotted p-2 flex-wrap">
            <FriendLink
                name="EndeavourOS"
                image="/static/img/88x31/EndeavourOS-88x31.webp"
                target="https://endeavouros.com/"
            />
            <FriendLink
                name="DKE Plasma"
                image="/static/img/88x31/kde.gif"
                target="https://kde.org/plasma-desktop/"
            />
            <FriendLink
                name="Firefox"
                image="/static/img/88x31/firefox.gif"
                target="https://www.mozilla.org/en-US/firefox/new/"
            />
            <FriendLink
                name="qBittorrent"
                image="/static/img/88x31/qbittorrent.png"
                target="https://www.qbittorrent.org/"
            />
            <FriendLink
                name="Jellyfin"
                image="/static/img/88x31/jellyfin.gif"
                target="https://jellyfin.org/"
            />
        </div>
        <br />
        <p>This website is powered written in VSCode, hosted with Caddy, created using Astro and with zero AI involvement!</p>
        <div class="flex outline-dotted p-2 flex-wrap">
            <FriendLink
                name="Visual Studio Code"
                image="/static/img/88x31/vscbutton.gif"
                target="https://code.visualstudio.com/"
            />
            <FriendLink
                name="Caddy"
                image="/static/img/88x31/caddy.png"
                target="https://caddyserver.com/"
            />
            <FriendLink
                name="Astro"
                image="/static/img/88x31/astro.png"
                target="https://astro.build/"
            />
            <FriendLink
                name="Brain made"
                image="/static/img/88x31/brainmade.avif"
                target="https://brainmade.org/"
            />
            <FriendLink
                name="Hand coded"
                image="/static/img/88x31/handcoded.avif"
                target="https://brushwarriors.com/no-to-ai/"
            />
        </div>
    </Partition>
    <Partition>
        <h2 class="text-2xl">Some of my skilled areas are:</h2>
        <ul class="list-disc p-4">
            {skills.map((skill) => <li class="skill">{skill}</li>)}
        </ul>
    </Partition>
    <Partition>
        <h2 class="text-2xl">My PC:</h2>
        <ul class="list-disc p-4">
            <li>
                <span class="skill">Computer's Name:</span>
                {currentSystem.name}
            </li>
            <li>
                <span class="skill">OS:</span>
                {currentSystem.operatingSystem}
            </li>
            <li><span class="skill">Host:</span> {currentSystem.host}</li>
            <li><span class="skill">Shell:</span> {currentSystem.shell}</li>
            <li>
                <span class="skill">Main Display:</span>
                <a href={currentSystem.mainDisplayRtings}
                    >{currentSystem.mainDisplay}</a
                >
            </li>
            <li><span class="skill">CPU:</span> {currentSystem.cpu}</li>
            <li><span class="skill">GPU:</span> {currentSystem.gpu}</li>
            <li><span class="skill">RAM:</span> {currentSystem.ram}</li>
            <li>
                <span class="skill">Local IP:</span>
                {currentSystem.localIP}
            </li>
        </ul>
    </Partition>

    <Partition>
        <h1 class="text-xl">Credits:</h1><br />
        <ul class="list-disc p-4">
            <li>
                <p>
                    Profile Picture (Which also appears in the site's button) is
                    done by: <span class="font-extrabold text-xl">Auryn</span
                    ><sub>[No link yet]</sub>
                </p>
            </li>
            <li>
                <p>
                    Website inspiration: <FriendLink
                        name="Alyxia"
                        image="https://alyxia.dev/static/img/88x31/self.png"
                        target="https://alyxia.dev"
                    /> & <div class="outline-dotted w-fit">
                        <FriendLink
                            name="Amemoia"
                            image="https://buh.moe/resources/buttons/88x31.gif"
                            target="https://buh.moe/"
                        /><sub>[Alex]</sub>
                    </div>
                </p>
            </li>
        </ul>
    </Partition>
    <Donations />
</BaseLayout>

<style define:vars={{ skillColor }}>
    .skill {
        color: var(--skillColor);
        font-weight: bold;
    }
</style>