<script>
	import "$lib/css/base.css";
	import "$lib/css/main.css";

	import CoverImg from "$lib/components/cover-img.svelte";
	import Person from "$lib/components/person.svelte";
	import hubjson from "$lib/json/hub.json";

	let hub_cover =
		"https://share.etheryo.fr/rando/2024.07.28/IMG20240728141949_min.jpg";
	let profile_pic = "https://share.etheryo.fr/personal/yohan/pfp.jpg";
</script>

<div class="main-banner">
	<CoverImg
		cover={hub_cover}
		darken={true}
		title={hubjson.welcomeTitle}
		subtitle={hubjson.welcomeSubtitle}
	/>
</div>
<div class="main-content">
	<div class="section">
		<h1>{hubjson.who}</h1>
	</div>
	<Person
		picture={profile_pic}
		name={hubjson.person.name}
		pronouns={hubjson.person.pronouns}
		description={hubjson.person.description}
		url="/about"
	/>
	<div class="section">
		<h1>{hubjson.projects}</h1>
	</div>
</div>
