start of hero layout, mostly positioning

src/components/Hero/Page.astro

@@ -0,0 +1,56 @@
+---
+import {age} from "../../utils/getAge"
+import {study} from "../../utils/getCurrentStudy"
+
+import Button from "./Button.astro"
+---
+
+<div id="container">
+	<div class="titleContainer">
+		<h1 class="main-title">Valentijn van der Jagt</h1>
+		<h3 class="sub-title">{age} - {study?.label}</h3>
+	</div>
+
+	<div class="buttonContainer">
+		<Button label="Gitea" href="https://git.herpiederpiee.nl/valentijn?tab=repositories"/>
+		<Button label="LinkedIn", href="https://nl.linkedin.com/in/valentijn-van-der-jagt"/>
+		<Button label="E-mail" href="mailto:valentijn@example.com"/>
+	</div>
+
+
+</div>
+
+<style>
+	
+	#container {
+		font-family: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
+		height: 60dvh;
+		margin: 10px 10px 0px 10px;
+		background:rgb(172, 146, 116);
+		border-radius: 10pt;
+	}
+
+	.buttonContainer {
+		padding-left:10px;
+		display: flex;
+		justify-content: start;
+		gap:10px;
+	}
+
+	.main-title {
+		font-size: max(min(8dvw, 130px), 30px);
+	}
+
+	.sub-title {
+		font-size: max(min(3dvw, 90px), 18px);
+	}
+
+
+	
+	@media (max-width: 600px) {
+		.buttonContainer {
+			justify-content: space-around;
+			padding-left:0
+		}
+	}
+</style>