vert/src/routes/about/+page.svelte

<script lang="ts">
	import avatarNullptr from "$lib/assets/avatars/nullptr.jpg";
	import avatarRealmy from "$lib/assets/avatars/realmy.jpg";

	const multiplier = 50;

	const credits = [
		{
			name: "nullptr",
			avatar: avatarNullptr,
			url: "https://nullp.tr",
			description: "car mrrow 🐱🐱🐱",
		},
		{
			name: "Realmy",
			avatar: avatarRealmy,
			url: "https://realmy.net",
			description: "scayr dragon 😱 (grrr)",
		},
	];
</script>

<div class="text-lg mx-auto max-w-screen-md">
	<h1
		class="font-display text-3xl text-transition"
		style="--delay: {0 * multiplier}ms"
	>
		⁉️ about VERT
	</h1>
	<p class="mt-6 text-transition" style="--delay: {1 * multiplier}ms">
		You know what sucks? File converters! They're usually riddled with ads,
		and take an ungodly amount of time to complete. <b
			>So we made a better one!</b
		>
	</p>
	<p class="mt-4 text-transition" style="--delay: {2 * multiplier}ms">
		VERT is a file converter that's open source, completely ad free, and
		much much faster than you're used to. All the converting is done on your
		device, which makes it both private and very speedy. And it of course
		has a beautiful UI! ✨
	</p>

	<h2
		class="font-display text-3xl mt-12 text-transition"
		style="--delay: {3 * multiplier}ms"
	>
		🖼️ supported formats
	</h2>
	<p class="mt-6 text-transition" style="--delay: {4 * multiplier}ms">
		As of right now, VERT only supports image conversion of most popular
		formats. Don't worry though, as we'll add support for more formats in
		the future!
	</p>

	<h2
		class="font-display text-3xl mt-12 text-transition"
		style="--delay: {5 * multiplier}ms"
	>
		👨‍💻 source code
	</h2>
	<p class="mt-6 text-transition" style="--delay: {6 * multiplier}ms">
		VERT is licensed under AGPL-3.0, and the source code can be found on <a
			class="hover:underline font-medium text-foreground-highlight"
			href="https://github.com/not-nullptr/VERT">GitHub</a
		>.
	</p>

	<h2
		class="font-display text-3xl mt-12 text-transition"
		style="--delay: {7 * multiplier}ms"
	>
		🎨 credits
	</h2>
	<div class="flex gap-4 mt-8">
		{#each credits as credit, i}
			<div class="hover:scale-105 w-48 transition-transform">
				<div
					class="border-2 credit-transition border-solid border-foreground-muted-alt rounded-2xl overflow-hidden"
					style="--delay: {i * 50 + multiplier * 8}ms;"
				>
					<a class="w-48" href={credit.url} target="_blank">
						<img src={credit.avatar} alt="{credit.name}'s avatar" />
						<div class="text-center py-4 px-2">
							<p class="font-display text-xl">{credit.name}</p>
							<p class="text-sm text-foreground-muted mt-2">
								{credit.description}
							</p>
						</div>
					</a>
				</div>
			</div>
		{/each}
	</div>

	<p
		class="text-foreground-muted text-base mt-10 text-transition"
		style="--delay: {9 * multiplier}ms"
	>
		(obviously inspired by <a
			href="https://cobalt.tools"
			class="hover:underline">cobalt.tools</a
		>)
	</p>
</div>

<style>
	@keyframes credit-transition {
		from {
			opacity: 0;
			transform: translateX(60px);
			filter: blur(18px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
			filter: blur(0);
		}
	}

	@keyframes text-transition {
		from {
			opacity: 0;
			transform: translateY(60px);
			filter: blur(18px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
			filter: blur(0);
		}
	}

	.credit-transition {
		animation: credit-transition 750ms var(--transition) var(--delay)
			forwards;
		opacity: 0;
	}

	.text-transition {
		animation: text-transition 750ms var(--transition) var(--delay) forwards;
		opacity: 0;
	}
</style>