---
import Layout from "../layouts/Layout.astro";

import Age from "../components/Age.svelte";
import Projects from "../components/Projects.svelte";
import Tools from "../components/Tools.astro";

import PersonIcon from "../assets/icons/person.svg";
import LocationIcon from "../assets/icons/location.svg";
---

<Layout>
	<section>
		<legend>about</legend>
		<p>
			Hey there, I'm <strong class="text-peach">trafficlunar</strong>. I'm a <Age client:only /> year old self-proclaimed full-stack developer and sysadmin.
		</p>
		<p class="my-2">You can view what I'm currently doing by going <a href="/status" class="link">here</a>.</p>

		<div class="flex gap-1 mt-4">
			<div class="text-sm rounded-lg bg-peach/25 text-peach w-fit px-2 py-0.5 flex gap-1 items-center">
				<PersonIcon />
				he/him
			</div>
			<div class="text-sm rounded-lg bg-peach/25 text-peach w-fit pl-1 pr-2 py-0.5 flex gap-1 items-center">
				<LocationIcon />
				Scotland
			</div>
		</div>
	</section>

	<Tools />

	<div class="flex items-center gap-4 text-subtext0 text-sm font-medium my-4">
		<hr class="flex-grow border-surface1" />
		<span>projects</span>
		<hr class="flex-grow border-surface1" />
	</div>

	<Projects client:only />
</Layout>