@@ -1,5 +1,5 @@
 // @ts-check
-import { defineConfig } from 'astro/config';
+import { defineConfig } from "astro/config";
 
 // https://astro.build/config
 export default defineConfig({});

@@ -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,88 @@
+@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(--crust) / 1);
+	color: hsl(var(--accent));
+}

@@ -0,0 +1,206 @@
+---
+import Image from "astro/components/Image.astro";
+import PondImage from "../assets/pond.avif";
+
+import "../css/index.css";
+
+interface Props {
+	width?: "narrow" | "wide";
+}
+const { width = "narrow" } = Astro.props;
+---
+
+<!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 id="background" class="background">
+			<div class="background-overlay" id="backgroundOverlay"></div>
+			<Image
+				class="background-image"
+				id="backgroundImage"
+				src={PondImage}
+				alt="Small pound surrounded by green vegetation, with a wooden bench visible in the backgroud among some trees. The sky and surrounding foliage are reflected in the water"
+			/>
+		</div>
+
+		<div class={`content ${width}`}>
+			<slot />
+		</div>
+	</body>
+</html>
+
+<style is:global>
+	.background {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		z-index: -1;
+
+		.background-overlay {
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+
+			@media (prefers-color-scheme: dark) {
+				background: hsla(var(--crust) / 0.25);
+			}
+		}
+
+		img {
+			width: 100%;
+			height: 100%;
+			object-fit: cover;
+		}
+	}
+
+	.content {
+		position: relative;
+		z-index: 1;
+		background: hsla(var(--crust) / 1);
+		box-shadow: 0 0.5rem 2rem hsla(var(--shadow) / 0.5);
+
+		width: calc(100% - 1rem);
+		max-width: 60ch;
+		margin: 90dvh 0.5rem 0 0.5rem;
+		border-radius: 2rem 2rem 0 0;
+		overflow: hidden;
+
+		&.wide {
+			max-width: 120ch;
+		}
+	}
+
+	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: 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));
+		}
+	}
+
+	section {
+		--section-bg: var(--crust);
+		--container-bg: var(--mantle);
+		background-color: hsl(var(--section-bg));
+		position: relative;
+		padding: 0.75rem;
+
+		header {
+			h2 {
+				font-size: 1.5rem;
+				font-weight: 700;
+			}
+			p.subtitle {
+				font-size: 1.25rem;
+				font-weight: 500;
+			}
+		}
+
+		&:nth-child(odd) {
+			--section-bg: var(--mantle);
+			--container-bg: var(--base);
+		}
+
+		&::after {
+			--height: 0.5rem;
+			content: "";
+			position: absolute;
+			bottom: calc(var(--height) * -1);
+			left: 0;
+			display: block;
+			width: 100%;
+			height: var(--height);
+			z-index: 100;
+
+			background-color: hsl(var(--section-bg));
+
+			mask-image: url("../assets/line.svg");
+			mask-size: calc(var(--height) * 5) 100%;
+			mask-repeat: repeat-x;
+		}
+	}
+
+	a.link {
+		position: relative;
+		padding: 0 0.25rem;
+		color: hsl(var(--text));
+		text-decoration: none;
+
+		&::after {
+			content: "";
+			display: block;
+			height: 3px;
+			left: 0;
+			bottom: 0;
+			width: 100%;
+			position: absolute;
+			backdrop-filter: invert(1);
+			background: hsla(var(--accent) / 1);
+		}
+
+		&:hover,
+		&:focus-visible {
+			&::after {
+				background: hsla(var(--accent) / 0);
+				height: 100%;
+				z-index: 5;
+			}
+		}
+	}
+</style>

@@ -0,0 +1,8 @@
+---
+import ProjectComponent from "@/components/Project.astro";
+import Layout from "@/layouts/Layout.astro";
+---
+
+<Layout>
+    bweh
+</Layout>