<script>
import Guestbook from "../misc/guestbook.svelte";

</script>

<h1
	class="font-roboto_slab text-center text-2xl lg:text-6xl xl:text-7xl w-auto md:w-max mt-10 lg:mt-32 mx-auto font-bold h1-shadow"
>
	Welcome to my website
</h1>
<!-->
	<br class="hidden lg:block" />
</!-->
<p class="font-roboto_slab text-center lg:text-2xl text-md lg:mt-5">The modern web meets 2000</p>
<hr class="border-black dark:border-[#ffc0f5]" />
<br />
<div class="md:text-center lg:px-40">
	<p class="">
		Welcome! This is my personal website that I made as a hobby project. You are entirely welcome! I
		was inspired to make this page thanks to a couple of friends of mine, whose pages you can check
		out under the "Galaxies" page.
	</p>
</div>
<div class="flex gap-3 mt-2 md:mt-0 lg:px-20 xl:px-40 xl:mt-10">
	<img
		class="h-40 md:h-60 rounded "
		src="https://dutchellie.nl/DutchEllie/proper-website-2/raw/branch/main/web/static/images/rin-2.gif"
		alt="Kagamine Rin excitedly jumping! yay!"
	/>
	<div class="w-full grid md:grid-cols-2 gap-2">
		<div class="col-span-1">
			<h2 class="font-semibold text-left ml-10 mb-2">Tech</h2>
			<ul class="ml-10 list-disc marker:text-blue-400">
				<li>Kubernetes</li>
				<li>Svelte</li>
				<li>SvelteKit</li>
				<li>Lot's of Japanese music</li>
			</ul>
		</div>
		<div class="col-span-1">
			<h2 class="font-semibold text-left ml-10 mb-2">Misc</h2>
			<ul class="ml-10 list-disc marker:text-blue-400">
				<li
					class="underline text-[#002896] dark:text-blue-200 dark:hover:text-blue-50 hover:text-blue-500"
				>
					<a href="https://dutchellie.nl/DutchEllie/svelte-website">Gitea Repo</a>
				</li>
				<li
					class="underline text-[#002896] dark:text-blue-200 dark:hover:text-blue-50 hover:text-blue-500"
				>
					<a href="https://drone.dutchellie.nl/DutchEllie/svelte-website"
						>Drone CI/CD
						<img
							class="ml-2 mb-1 inline"
							src="https://drone.dutchellie.nl/api/badges/DutchEllie/svelte-website/status.svg?ref=refs/heads/main"
							alt="Drone build status"
						/>
					</a>
				</li>
			</ul>
		</div>
	</div>
</div>
<div class="grid md:grid-cols-2 md:gap-2 mt-3">
	<div>
		<h2 class="font-semibold">Details</h2>
		<p>
			This entire project is open source (GPL-3) and the source code is linked above. In addition, a
			CI/CD pipeline deploys this website on every push.
		</p>
	</div>
</div>
<div class="mt-6">
	<Guestbook/>
</div>

<!-- How to do the animation and reverse it: https://stackoverflow.com/a/44742399 -->
<style>
	.h1-shadow {
		text-shadow: 2px 2px gray;
		transition: text-shadow 1s cubic-bezier(0.075, 0.82, 0.165, 1);
	}
	.h1-shadow:hover {
		text-shadow: 5px 5px gray;
		transition: text-shadow 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);
	}
</style>
