<script>
	import Avif from './profile.avif';
	import Jpeg from './profile.avif?format=jpeg';
	import WebP from './profile.avif?format=webp';

	import {
		EnvelopeSimple,
		FilePlus,
		GithubLogo,
		LinkedinLogo,
		MastodonLogo,
	} from 'phosphor-svelte';
</script>

<picture>
	<source srcset={Avif} type="image/avif" />
	<source srcset={WebP} type="image/webp" />
	<img
		src={Jpeg}
		class="circle"
		alt="Kaan, wearing a beanie, in front of some shrubbery."
		style="max-width:20rem"
	/>
</picture>

<h1>Kaan Barmore-Genç</h1>

<p>
	Hi! I'm a software engineer with a diverse technical toolkit: Linux enthusiast, polyglot
	programmer, home chef, and (when time allows) an amateur cyclist. Currently, I'm building
	microservices and polished UIs at <a
		target="blank"
		rel="noreferrer"
		href="https://tailwindapp.com">Tailwind</a
	> alongside a fantastic team.
</p>

<p>
	My focus is building seamless web applications, and I excel in both front-end and back-end
	development. My experience includes TypeScript, React, SvelteKit, TailwindCSS, Rust, Docker, SQL,
	and AWS technologies (DynamoDB, Lambda, EventBridge, and more).
</p>

<p>
	I'm an active contributor to the open-source world: check out my <a
		href="https://github.com/SeriousBug"
		target="_blank"
		rel="noreferrer me">Github profile</a
	>! For a closer look at my work, visit my <a href="/portfolio/">portfolio</a> where I highlight my
	favorite projects. I sometimes write about the tools I use or challenges I've solved on my
	<a href="/posts/">blog</a>. I'm always open to feedback, reach out to me through my socials linked
	below.
</p>

<ul class="socials">
	<li>
		<a target="_blank" rel="noreferrer me" href="mailto:kaan@bgenc.net">
			<EnvelopeSimple aria-hidden />
			<span>Email</span>
		</a>
	</li>
	<li>
		<a target="_blank" rel="noreferrer me" href="https://github.com/SeriousBug">
			<GithubLogo aria-hidden />
			<span>Github</span>
		</a>
	</li>
	<li>
		<a target="_blank" rel="noreferrer me" href="https://fosstodon.org/@kaan">
			<MastodonLogo aria-hidden />
			<span>Mastodon</span>
		</a>
	</li>
	<li>
		<a target="_blank" rel="noreferrer me" href="https://www.linkedin.com/in/kaan-barmore-genc">
			<LinkedinLogo aria-hidden />
			<span>LinkedIn</span>
		</a>
	</li>
	<li>
		<a target="_blank" href="/static/cv.pdf">
			<FilePlus />
			<span>CV</span>
		</a>
	</li>
</ul>

<style lang="scss">
	@import '../vars';
	@import '../button';

	picture {
		max-width: 320px;
		max-height: 320px;
		margin: 0 auto;
		clip-path: var(--clip-path);
	}

	.socials {
		display: flex;
		flex-wrap: wrap;
		gap: 1rem;
		justify-content: center;
		align-items: center;
	}

	.socials li {
		list-style-type: none;
	}

	.socials a {
		@include button($color-secondary, $color-secondary-text);
		min-width: 8rem;
	}

	h1 {
		width: 100%;
		text-align: center;
	}
</style>
