all repos — websitemeow @ main

src/pages/index.astro (view raw)

 1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
 100
 101
 102
 103
 104
 105
 106
 107
 108
 109
 110
 111
 112
 113
 114
 115
 116
 117
 118
 119
 120
 121
 122
 123
 124
 125
 126
 127
 128
 129
 130
 131
 132
 
---
import { getCollection } from "astro:content";
import { Layout } from "@/layouts";
import { ProjectCard } from "@/components";

const links = [
	{ label: "bluesky", href: "https://bsky.app/profile/did:web:vt3e.cat" },
	{ label: "my git server", href: "https://git.vt3e.cat/" },
	{
		label: "tangled (git but social)",
		href: "https://tangled.org/did:web:vt3e.cat",
	},
	{ label: "listenbrainz", href: "https://listenbrainz.org/user/aprvi" },
];

const testimonials = [
	{
		text: "you bring a very SSRI type of vibe to the function",
		author: "khls",
	},
];

const projects = await getCollection("projects");
---

<Layout>
	<Fragment slot="left">
		<header class="page-head">
			<img
				src="/kittens.webp"
				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'."
			/>
			<div class="title">
				<h1 class="name">apirl</h1>
				<h2 class="name-ext">or whatever idk!!</h2>
				<p class="pronouns">fae/faer</p>
			</div>
			<p class="subtitle">
				stupid {"{rat,cat}"}girl frontend developer thing!
			</p>
		</header>
	</Fragment>

	<Fragment slot="right">
		<section>
			<header>
				<h2>links</h2>
				<p>find me . locate me .</p>
			</header>
			<div class="content links">
				{
					links.map((link) => (
						<a href={link.href} data-text={link.label}>
							{link.label}
						</a>
					))
				}
			</div>
		</section>

		<section>
			<header>
				<h2>projects</h2>
			</header>
			<div class="content projects">
				{
					projects.map((project) => (
						<ProjectCard page={project.id} project={project.data} />
					))
				}
			</div>
		</section>

		<section>
			<header>
				<h2>testimonials</h2>
			</header>
			<div class="content testimonials">
				{
					testimonials.map((testimonial) => (
						<figure class="testimonial">
							<blockquote>
								<p>"{testimonial.text}"</p>
							</blockquote>
							<figcaption>
								<cite>{testimonial.author}</cite>
							</figcaption>
						</figure>
					))
				}
			</div>
		</section>
	</Fragment>
</Layout>

<style>
	.testimonials {
		display: flex;
		flex-direction: column;
		gap: 1.25rem;
	}

	figure.testimonial {
		display: flex;
		flex-direction: column;

		blockquote p {
			position: relative;
			color: hsl(var(--text));
			line-height: 1;
		}

		figcaption cite {
			font-style: normal;
			font-weight: 600;
			font-size: 0.875rem;
			color: hsl(var(--subtext0));
			line-height: 1;

			&::before {
				content: "— ";
				color: hsl(var(--overlay1));
			}
		}
	}

	.projects {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
	}
</style>