<script>
	import profil from '$lib/images/profil.webp';
	import { confetti } from '@neoconfetti/svelte';
</script>

<div use:confetti />
<div class="hero">
	<div>
		<h1 class="hero-title">Theodor Vallier</h1>
		<p class="hero-body">
			Welcome on my portfolio, I'm an engineer in computer science and I'm passionate about web
			development.
		</p>
	</div>
	<div>
		<img src={profil} alt="Profil" />
	</div>
</div>

<style>
	.hero {
		display: flex;
		justify-content: space-around;
		margin: 0 auto;
	}

	.hero-title {
		font-size: 2.5em;
		font-weight: 600;
		-webkit-text-fill-color: transparent;
		background: linear-gradient(130deg, #5183f5, #af002d 41.07%, #c79191 76.05%);
		background-clip: text;
		-webkit-background-clip: text;
	}

	.hero-body {
		font-size: 1.2em;
		font-weight: 400;
	}

	.hero img {
		max-width: 300px;
		height: 100%;
		border-radius: 5%;
		display: block;
		margin: 0 auto;
	}

	@media (max-width: 768px) {
		.hero {
			flex-direction: column;
			align-items: center;
		}

		.hero img {
			max-width: 80%;
		}
	}
</style>
