---
import ProjectComponent from "@/components/Project.astro";
import { LANGUAGES as LANG } from "@/constants";
import Layout from "@/layouts/Layout.astro";

import type { Project } from "@/types";

type Link = {
	title: string;
	href: string;
};
const links: Link[] = [
	{
		title: "tangled (git)",
		href: "https://tangled.org/did:web:vt3e.cat",
	},
	{
		title: "bluesky",
		href: "https://witchsky.app/profile/did:web:vt3e.cat",
	},
];

const projects: Project[] = [
	{
		name: "bluebell",
		description: "a pretty client for bluesky on the web.",
		links: {
			live: "https://bbell.vt3e.cat",
			source: "https://tangled.org/bbell.vt3e.cat",
		},
		languages: [LANG.Vue, LANG.TypeScript],
	},
	{
		name: "website",
		description: "this website!!",
		links: {
			source: "https://tangled.org/vt3e.cat/catsite",
		},
		languages: [LANG.Astro, LANG.TypeScript],
	},
	{
		name: "flake",
		description: "my nix flake used on my server & desktop.",
		links: {
			source: "https://tangled.org/vt3e.cat/flake",
		},
		languages: [LANG.Nix],
	},
	{
		name: "cmd",
		description: "a fully typesafe, lighweight cli framework",
		links: {
			source: "https://git.vt3e.cat/cmd.git",
		},
		languages: [LANG.TypeScript],
	},
];
---

<Layout>
	<header class="page-head">
		<div class="title">
			<h1>viii</h1>
			<p class="pronouns">it/she</p>
		</div>
		<p class="subtitle">
			demifem {"{rat,cat}"}girl frontend developer thing!
		</p>
	</header>
	<section class="links">
		<header><h2>links</h2></header>
		<ul>
			{
				links.map((link) => (
					<li>
						<a class="link" href={link.href}>
							{link.title}
						</a>
					</li>
				))
			}
		</ul>
	</section>
	<section class="projects">
		<header>
			<h2>projects</h2>
			<p>some things that are public that i am working on!</p>
		</header>
		<div class="project-list">
			{projects.map((project) => <ProjectComponent project={project} />)}
		</div>
	</section>
</Layout>

<style>
	.links ul {
		display: inline-flex;
		flex-direction: column;
		gap: 0.5rem;
		list-style: none;

		li {
			margin-left: 2ch;
		}

		a {
			--fg: var(--subtext1);

			display: inline-flex;
			align-items: center;
			gap: 1ch;

			font-size: 1.25rem;
			font-weight: 500;

			svg {
				width: 1.5rem;
				height: 1.5rem;
			}
		}
	}

	.projects .project-list {
		border-radius: 1.5rem;
		overflow: hidden;
		border: 2px solid hsla(var(--overlay0) / 0.25);

		margin-top: 0.75rem;
		display: flex;
		flex-direction: column;
		background-color: hsl(var(--container-bg));

		.project:first-child {
			padding-top: 0.75rem;
		}

		.project:not(:last-child) {
			border-bottom: 2px solid hsla(var(--overlay0) / 0.25);
		}

		/*margin-left: -0.5rem;
        margin-right: -0.5rem;*/
	}
</style>