<script lang="ts">
	import { AtSign, Github, Globe, Linkedin } from '@lucide/svelte';
	import Card from './Card.svelte';
	import Gitea from '$lib/Gitea.svelte';
	import resumeImg from '$lib/resume.webp';
</script>

<Card>
	<div class="flex justify-between">
		<div class="my-4 flex flex-col justify-between gap-2">
			<div>
				<h1 class="text-2xl tracking-tight md:text-4xl">Developer Resume For Christian Rannes</h1>
				<h2 class="text-slate-400 md:text-xl">
					Full Stack Developer Passionate about infrastructure, DevOps and Developer Experience
				</h2>
			</div>
			<div class="flex gap-2">
				<a href="https://www.linkedin.com/in/christian-rannes/">
					<Linkedin />
				</a>
				<a href="mailto:christian@rannes.dev">
					<AtSign />
				</a>
				<a href="http://rannes.dev">
					<Globe />
				</a>
				<a href="https://github.com/ChrQR">
					<Github />
				</a>
				<a href="https://gitea.rannes.dev/explore/repos">
					<Gitea fill="black" height="25" />
				</a>
			</div>
		</div>
		<div class="flex min-w-28 items-center md:min-w-44">
			<img
				src={resumeImg}
				alt="a happy guy"
				class="h-28 w-28 rounded-full shadow-sm md:h-44 md:w-44"
			/>
		</div>
	</div>
</Card>
