---
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! I'm <strong class="text-peach">trafficlunar</strong>. I'm a <Age client:only /> year old self-proclaimed full-stack developer.
		</p>
		<p class="mt-2">I like coding things, maintaining and setting up servers, playing video games, and listening to music.</p>

		<div class="flex gap-1 mt-4">
			<div data-tooltip="Pronouns" class="text-sm rounded bg-peach/25 text-peach w-fit pl-1 pr-2 py-1 flex gap-1 items-center">
				<PersonIcon />
				he/him
			</div>
			<div data-tooltip="Location" class="text-sm rounded bg-peach/25 text-peach w-fit pl-1 pr-2 py-1 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>
