<script>
	import HomeIcons from './home-icons.svelte';
</script>

<div class="content-slim">
	<div class="item">
		<HomeIcons />
	</div>
	<div class="item home-greeting">
		<h1>Welcome to my space in the internet</h1>
	</div>
	<div class="item home-description">
		<p>
			Hello, I'm Trivernis, a german software developer, working on way too many projects at once.
			My pronouns are he/they. I primarily use Rust because it's just the best programming language.
		</p>
	</div>
	<div class="item github-stats">
		<img
			alt="Dynamically generated by GitHub readme stats. It displays my total stars earned, total commits, PRs, issues and repositories."
			src="https://github-readme-stats.vercel.app/api?username=trivernis&show_icons=true&theme=tokyonight"
		/>
		<img
			alt="Dynamically generated by GitHub readme stats. It displays my most used languages. At the time of writing this it's rust with 53%."
			src="https://github-readme-stats.vercel.app/api/top-langs/?username=trivernis&hide=html&show_icons=true&theme=tokyonight"
		/>
	</div>
</div>

<style lang="scss">
	.content-slim {
		display: flex;
		flex-direction: column;
		margin: 5% 15% 5em;
	}

	.item {
		flex-basis: 66%;
		margin: auto;
	}

	.home-greeting {
		display: flex;
		margin: auto;
		width: 100%;

		h1 {
			font-size: 3em;
			text-align: center;
			width: 100%;
		}
	}

	.home-description {
		width: 100%;
		font-size: 1.5em;
		margin: auto;
		text-align: center;
	}

	.github-stats {
		margin: auto;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		width: 100%;

		img {
			padding: 5px;
			margin: auto;
			display: flex;
			max-width: 100%;
		}
	}
	@media screen and (max-width: 1000px) {
		.home-greeting {
			h1 {
				font-size: 2em;
			}
		}
		.home-description {
			font-size: 1.2em;
		}
	}
</style>
