<script>
	import VendorMarquee from '$lib/Landing/VendorMarquee.svelte';
	import VendorCarousel from '../lib/Landing/VendorCarousel.svelte';
	import { Heading, Mark } from 'flowbite-svelte';
	import portfolio from '$lib/images/portfolio.png';
	import hero from '$lib/images/hero.webp';

	const images = [
		{
			title: '/projects/nextjs',
			image: portfolio
		}
	];
</script>

<div class="text-center text-xl">
	<div class="flex my-4 gap-4">
		<Heading tag="h1" class="md:text-right">father by day <Mark>developer</Mark> by night</Heading>
		<img
			src={hero}
			alt=""
			class="hidden md:block rounded-xl max-h-36 w-auto shadow-inner border border-slate-700"
		/>
	</div>
	<h2 class="py-2">
		welcome to my space. For now it is used to document my learnings and share my projects. It might
		expand over time.
	</h2>
	<p class="py-2">
		I like to explore many different technologies and frameworks mostly surrounding web development
		and infrastructure.
	</p>
	<div class="hidden md:block py-2">
		<VendorMarquee />
	</div>
	<div class="md:hidden py-2">
		<VendorCarousel />
	</div>
	<h2 class="py-2">
		You can see some of my web dev projects and a small write-up on my homelab in the projects
		section.
	</h2>
</div>
