<svelte:head>
    <title>Portfolio | Felix Baumgärtner | Designer & Developer</title> 
</svelte:head>

<div class="container max-w-screen-lg lg:min-h-full mx-auto flex justify-center items-center p-6 lg:p-0 lg:py-20">
	<div class="grid grid-cols-12 w-full gap-6">
		<a href="https://mue.incom.org/project/3782" target="_blank" class="col-span-12 lg:col-span-4 flex justify-center items-center" id="weather-wand">
			<img src="/images/weather-wand-preview.jpg" alt="">
			<p class="text-2xl sm:text-4xl">Weather Wand</p>
		</a>
		<a href="https://mue.incom.org/project/3610" target="_blank" class="col-span-12 lg:col-span-4 flex justify-center items-center" id="mockup-generator">
			<img src="/images/mockup-generator-preview.jpg" alt="">
			<p class="text-2xl sm:text-4xl">mockup-generator.com</p>
		</a>
		<a href="https://mue.incom.org/project/2355" target="_blank" class="col-span-12 lg:col-span-4 flex justify-center items-center" id="busplan-app-weiden">
			<img src="/images/busplan-app-weiden-preview.jpg" alt="">
			<p class="text-2xl sm:text-4xl">Busplan-App Weiden</p>
		</a>

		<a href="https://mue.incom.org/project/2327" target="_blank" class="col-span-12 lg:col-span-4 flex justify-center items-center" id="oepnv-daytimes">
			<img src="/images/oepnv-daytimes-preview.jpg" alt="">
			<p class="text-2xl sm:text-4xl">ÖPNV Time Analysis</p>
		</a>
		<a href="https://mue.incom.org/project/1954" target="_blank" class="col-span-12 lg:col-span-4 flex justify-center items-center" id="switch-comparator">
			<img src="/images/switch-comparator-preview.jpg" alt="">
			<p class="text-2xl sm:text-4xl">Switch Comparator</p>
		</a>
		<a href="https://mue.incom.org/project/2280" target="_blank" class="col-span-12 lg:col-span-4 flex justify-center items-center" id="custom-keyboard">
			<img src="/images/custom-keyboard-preview.jpg" alt="">
			<p class="text-2xl sm:text-4xl">Custom Keyboard</p>
		</a>
	</div>
</div>
<a href="/" class="fixed top-4 left-4 flex justify-center items-center p-2 rounded-lg text-tertiary-500 bg-primary-500">
	<svg xmlns="http://www.w3.org/2000/svg" height="0.9rem" viewBox="0 0 448 512" class="mr-1"><!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M7.4 273.4C2.7 268.8 0 262.6 0 256s2.7-12.8 7.4-17.4l176-168c9.6-9.2 24.8-8.8 33.9 .8s8.8 24.8-.8 33.9L83.9 232 424 232c13.3 0 24 10.7 24 24s-10.7 24-24 24L83.9 280 216.6 406.6c9.6 9.2 9.9 24.3 .8 33.9s-24.3 9.9-33.9 .8l-176-168z"/></svg> Back
</a>

<style>
	.grid {
		grid-template-rows: auto;
	}
	@media (min-width: 1024px) { 
		.grid {
			grid-template-rows: 33rem 33rem;
		}
	 }

	.grid > a {
		@apply p-6 text-tertiary-500 rounded-lg transition-colors bg-primary-500;
		position: relative;
		overflow: hidden;
	}
	.grid > a:hover {
		@apply bg-primary-300;
	}

	.grid > a > p {
		z-index: 1;
	}
	.grid > a > img {
		position: absolute;
		width: 100%;
		height: 100%;
		z-index: 0;
		object-fit: cover;
		opacity: 0.2;
	}
	
	a:hover {
		@apply bg-primary-300;
	}
</style>