Ajout : header

src/components/Header.astro

@@ -0,0 +1,44 @@
+---
+import NavButton from '../components/NavButton.astro'
+---
+
+<nav>
+  <div class="left">
+    <span>Ahurac</span>
+    <div class="navButtons">
+      <NavButton link="/">Home</NavButton>
+      <NavButton link="mailto:hchauvin@mailbox.org">Contact (mail)</NavButton>
+    </div>
+  </div>
+</nav>
+
+<style>
+nav {
+  height: 120px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  padding: 0 20px;
+  box-sizing: border-box;
+  backdrop-filter: blur(6px);
+  margin-bottom: 10px;
+}
+
+span {
+  font-size: 60px;
+  margin: 0;
+  font-weight: bold;
+  text-transform: uppercase;
+}
+
+.left {
+  display: flex;
+  align-items: center;
+}
+
+.navButtons {
+  display: flex;
+  align-items: center;
+  height: 30px;
+}
+</style>

src/components/NavButton.astro

@@ -0,0 +1,38 @@
+---
+const { link } = Astro.props;
+---
+
+<a href={link}>
+  <slot />
+</a>
+
+<style>
+a {
+  text-decoration: none;
+  margin-left: 20px;
+  color: inherit;
+  width: auto;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+
+a::after {
+  content: '';
+  position: absolute;
+  width: 100%;
+  transform: scaleX(0);
+  height: 2px;
+  bottom: 0;
+  left: 0;
+  background-color: white;
+  transform-origin: bottom right;
+  transition: transform 0.25s ease-out;
+}
+
+a:hover::after {
+  transform: scaleX(1);
+  transform-origin: bottom left;
+}
+</style>