@@ -7,6 +7,7 @@ "dev": "astro dev --host",
 		"build": "astro build",
 		"preview": "astro preview",
 		"astro": "astro",
+		"astro:sync": "bunx astro sync",
 		"fmt": "bunx prettier . --write"
 	},
 	"dependencies": {

@@ -0,0 +1,1 @@
+export { default as Line } from "./line.svg";

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 4">
+    <path
+        fill="currentColor"
+        d="M0,3.5 c 5,0, 5, -3, 10, -3 s 5,3, 10, 3 V0 H0 Z"
+    />
+</svg>

@@ -0,0 +1,88 @@
+/*
+	id           evergarden
+	name         Evergarden
+	attribution  https://codeberg.org/evergarden/nvim
+	license      eupl-1.2
+*/
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		color-scheme: dark;
+
+		/* ui */
+		--text: 64 58.621% 94.314%;
+		--subtext1: 152 20.588% 73.333%;
+		--subtext0: 160 16.667% 64.706%;
+		--overlay2: 171 12.217% 56.667%;
+		--overlay1: 182 10.121% 48.431%;
+		--overlay0: 194 10.66% 38.627%;
+		--surface2: 193 10.843% 32.549%;
+		--surface1: 197 11.29% 24.314%;
+		--surface0: 200 12.245% 19.216%;
+		--base: 202 13.58% 15.882%;
+		--mantle: 200 13.846% 12.745%;
+		--crust: 203 14.815% 10.588%;
+
+		/* accents */
+		--red: 358 85.507% 72.941%;
+		--orange: 16 87.97% 73.922%;
+		--yellow: 36 82.301% 77.843%;
+		--lime: 72 52.381% 79.412%;
+		--green: 90 46.154% 79.608%;
+		--aqua: 149 46.154% 79.608%;
+		--skye: 167 50.495% 80.196%;
+		--snow: 194 52.381% 79.412%;
+		--blue: 216 62.105% 81.373%;
+		--purple: 263 69.231% 84.706%;
+		--pink: 316 68% 85.294%;
+		--cherry: 326 68.966% 88.627%;
+	}
+
+	:root {
+		--shadow: var(--crust);
+		--on-accent: var(--crust);
+	}
+}
+
+@media (prefers-color-scheme: light) {
+	:root {
+		color-scheme: light;
+
+		/* ui */
+		--text: 203 14.815% 10.588%;
+		--subtext1: 195 13.333% 29.412%;
+		--subtext0: 193 12.299% 36.667%;
+		--overlay2: 192 11.607% 43.922%;
+		--overlay1: 193 10.843% 51.176%;
+		--overlay0: 194 13.744% 58.627%;
+		--surface2: 193 16.471% 66.667%;
+		--surface1: 195 19.048% 75.294%;
+		--surface0: 203 22.5% 84.314%;
+		--base: 210 33.333% 88.235%;
+		--mantle: 209 29.412% 83.333%;
+		--crust: 212 29.412% 80%;
+
+		/* accents */
+		--red: 359 40.845% 58.235%;
+		--orange: 19 40.952% 58.824%;
+		--yellow: 36 37.674% 57.843%;
+		--lime: 68 28.251% 56.275%;
+		--green: 89 24.887% 56.667%;
+		--aqua: 149 21.659% 57.451%;
+		--skye: 169 18.584% 55.686%;
+		--snow: 194 20.188% 58.235%;
+		--blue: 214 25.683% 64.118%;
+		--purple: 263 27.848% 69.02%;
+		--pink: 318 29.333% 70.588%;
+		--cherry: 326 26.316% 73.922%;
+	}
+
+	:root {
+		--shadow: var(--subtext1);
+		--on-accent: var(--text);
+	}
+}
+
+:root {
+	--accent: var(--pink);
+}

@@ -0,0 +1,93 @@
+@import url("./evergarden.css");
+
+::-webkit-scrollbar {
+	width: 0.5rem;
+	height: 6px;
+	background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+	background: hsla(var(--overlay1) / 1);
+	border-radius: 3px;
+}
+
+::-webkit-scrollbar-track {
+	background: transparent;
+}
+
+:root {
+	--ease: cubic-bezier(0.4, 0, 0.2, 1);
+	--ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+	--ease-springier: cubic-bezier(0.25, 2.2, 0.5, 1);
+	--ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
+	--ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
+
+	--transition-properties:
+		margin, grid-template-rows, grid-template-columns, stroke-dasharray,
+		stroke-dashoffset, outline-color, outline-offset, color, background-color,
+		box-shadow, outline, border-color, border-radius, font-weight, opacity,
+		transform, backdrop-filter, text-decoration-color, filter, scale, height;
+	--transition-duration: 0.2s;
+	--transition: var(--transition-duration) var(--ease);
+}
+
+.sr-only {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	border: 0;
+}
+
+body {
+	color: hsl(var(--text));
+	font-family:
+		"Google Sans Flex",
+		system-ui,
+		-apple-system,
+		BlinkMacSystemFont,
+		"Segoe UI",
+		Roboto,
+		sans-serif;
+	background-color: hsl(var(--surface0));
+	/*font-family: monospace;*/
+	font-size: 15px;
+	line-height: 1.5;
+	text-rendering: optimizeLegibility;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+	margin: 0;
+	padding: 0;
+	font-weight: normal;
+
+	scrollbar-width: thin;
+	scrollbar-color: hsla(var(--overlay1) / 1) transparent;
+
+	-webkit-tap-highlight-color: transparent;
+	outline: 2px solid;
+	outline-offset: 2px;
+	outline-color: hsla(var(--blue) / 0);
+
+	transition-property: var(--transition-properties);
+	transition-duration: var(--transition-duration);
+	transition-timing-function: var(--ease);
+}
+
+*:focus-visible {
+	outline-color: hsl(var(--blue));
+	z-index: 5;
+}
+
+::selection {
+	background-color: hsla(var(--overlay0) / 1);
+	color: hsl(var(--accent));
+}

@@ -0,0 +1,150 @@
+---
+import "../css/index.css";
+---
+
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width" />
+		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		<link rel="icon" href="/favicon.ico" />
+		<meta name="generator" content={Astro.generator} />
+		<title>viii</title>
+	</head>
+	<body>
+		<div class="viewport">
+			<header class="left panel">
+				<slot name="left" />
+			</header>
+			<main class="right panel">
+				<slot name="right" />
+			</main>
+		</div>
+	</body>
+</html>
+
+<style is:global>
+	body {
+		height: 100%;
+	}
+
+	.viewport {
+		display: flex;
+		flex-direction: row;
+		align-items: flex-start;
+
+		gap: 0.5rem;
+		padding: 0.5rem;
+		height: 100%;
+		max-width: 1167px;
+		width: 100%;
+		margin: 1rem auto;
+
+		.panel {
+			--padding: 0.5rem;
+			--radii: 1.5rem;
+			--inner-radii: calc(var(--radii) - var(--padding));
+
+			border: 0.5px solid hsla(var(--overlay0) / 0.1);
+
+			display: inline-flex;
+			flex-direction: column;
+			flex: 1;
+
+			gap: 1rem;
+			border-radius: var(--radii);
+
+			min-height: 0;
+			overflow-y: auto;
+			background-color: hsla(var(--mantle) / 1);
+		}
+	}
+
+	.left {
+		flex: 1 1 auto;
+		max-width: 400px;
+		position: sticky;
+		top: 0.5rem;
+		padding: var(--padding);
+
+		img {
+			border-radius: var(--inner-radii);
+			width: 100%;
+			object-fit: cover;
+		}
+	}
+
+	.right {
+		padding: 0;
+		padding-bottom: 2rem;
+
+		.header-section {
+			h1 {
+				font-size: 2rem;
+				font-weight: 900;
+				line-height: 1;
+			}
+		}
+
+		.link-section {
+			.links {
+				display: inline-flex;
+				flex-direction: row;
+				gap: 0.25rem;
+			}
+		}
+	}
+
+	header.page-head {
+		position: relative;
+		padding: 1rem 0.75rem;
+		background-color: hsl(var(--accent));
+		z-index: 1;
+
+		&::after {
+			--height: 0.5rem;
+			content: "";
+			position: absolute;
+			top: calc(100%);
+			left: 0;
+			display: block;
+			width: 100%;
+			height: var(--height);
+
+			background-color: hsl(var(--accent));
+
+			mask-image: url("../assets/line.svg");
+			mask-size: calc(var(--height) * 5) 100%;
+			mask-repeat: repeat-x;
+		}
+
+		.title {
+			display: flex;
+			align-items: center;
+			gap: 1ch;
+
+			h1 {
+				font-size: 2.5rem;
+				font-weight: 900;
+				color: hsl(var(--on-accent));
+				line-height: 1;
+			}
+			.pronouns {
+				background: hsl(var(--surface0));
+				color: hsl(var(--text));
+
+				font-size: 0.75rem;
+				padding: 0.1rem 0.5rem;
+				border-radius: 5rem;
+				user-select: none;
+			}
+		}
+
+		p.subtitle {
+			font-size: 1.25rem;
+			font-weight: 500;
+			color: hsl(var(--on-accent));
+		}
+	}
+</style>

@@ -0,0 +1,1 @@
+export { default as Layout } from "./Layout.astro";

@@ -0,0 +1,23 @@
+---
+import { Layout } from "@/layouts";
+---
+
+<Layout>
+	<Fragment slot="left">
+		<img
+			src="/kittens.jpg"
+			alt="two small orange & white kittens huddled together on a white surface. there is white text overlay over each of the kittens, the first reads 'you are made of stardust', the last reads 'and i am made of dirt'. there is a date stamp in the bottom right corner, it says '04.04.2008'."
+		/>
+	</Fragment>
+	<Fragment slot="right">
+		<header class="page-head">
+			<div class="title">
+				<h1 class="title">vvvvvv</h1>
+				<p class="pronouns">fae/faer</p>
+			</div>
+			<p class="subtitle">
+				demifem {"{rat,cat}"}girl frontend developer thing!
+			</p>
+		</header>
+	</Fragment>
+</Layout>