all repos — websitemeow @ f80f3c20f1ab0530009715d466cfe561212a37dd

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
 
---
import { getCollection } from "astro:content";
import { Layout } from "@/layouts";
import { ProjectCard } from "@/components";

const links = [
	{ label: "on bluesky", href: "https://bsky.app/profile/did:web:vt3e.cat" },
	{ label: "on tangled (git)", href: "https://tangled.org/did:web:vt3e.cat" },
	{ label: "on 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.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'."
			/>
			<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>