<script>
</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" />
	<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] hover:text-blue-500">
						<a href="https://dutchellie.nl/DutchEllie/svelte-testing">Gitea Repo</a>
					</li>
					<li class="underline text-[#002896] hover:text-blue-500">
						<a href="https://drone.dutchellie.nl/DutchEllie/svelte-testing"
							>Drone CI/CD
							<img
								class="ml-2 mb-1 inline"
								src="https://drone.dutchellie.nl/api/badges/DutchEllie/svelte-testing/status.svg?ref=refs/heads/main"
								alt="Drone build status"
							/>
						</a>
					</li>
				</ul>
				<br />
				<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>

<!-- 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>
