update dependencies and enhance Hero component

This commit is contained in:
Valentijn
2026-04-22 17:20:05 +02:00
parent 007b9ac3e4
commit a436da316d
8 changed files with 681 additions and 12 deletions

View File

@@ -2,6 +2,9 @@
import {age} from "../../utils/getAge"
import {study} from "../../utils/getCurrentStudy"
import hero_img from "../../assets/hero.png"
const hero_img_src = `url(${hero_img.src})`;
import Button from "./Button.astro"
---
@@ -12,21 +15,27 @@ import Button from "./Button.astro"
</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"/>
<Button icon="mdi:git" label="Gitea" href="https://git.herpiederpiee.nl/valentijn?tab=repositories"/>
<Button icon="mdi:linkedin" label="LinkedIn", href="https://nl.linkedin.com/in/valentijn-van-der-jagt"/>
<Button icon="mdi:email-outline" label="E-mail" href="mailto:valentijn@example.com"/>
</div>
</div>
<style>
<style define:vars={{hero_img_src}}>
#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);
background-image: var(--hero_img_src) !important;
background-size: cover;
background-position: center;
background-blend-mode: hue;
border-radius: 10pt;
}
@@ -37,12 +46,22 @@ import Button from "./Button.astro"
gap:10px;
}
h1, h3 {
font-family: "Work Sans", sans-serif;
font-optical-sizing: auto;
font-style: normal;
margin:0;
}
.main-title {
font-size: max(min(8dvw, 130px), 30px);
font-weight: 600;
}
.sub-title {
font-size: max(min(3dvw, 90px), 18px);
font-weight: 300;
}