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

const pageTitle = "About Aria";

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}>
    <Partition>
        <p>It's about time I actually write up my own website right?</p>
        <br />
        <p class="text-2xl">Here are a few facts about me:</p>
        <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>
        <p class="text-2xl">Some of my skilled areas are:</p>
        <ul class="list-disc p-4">
            {skills.map((skill) => <li class="skill">{skill}</li>)}
        </ul>
    </Partition>
    <Partition>
        <p class="text-2xl">My PC:</p>
        <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>
</BaseLayout>

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