valentijn/Portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update dependencies and enhance Hero component

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/Hero/Button.astro
View File

@@ -1,8 +1,17 @@
---
const { label, href } = Astro.props;
import { Icon } from 'astro-icon/components';
interface Props {
label: string;
href: string;
icon: string;
}
const { label, href, icon } = Astro.props;
---
<div class="button">
<Icon name={icon} class="icon" />
<a href={href} target="_blank">
{label}
</a>
@@ -15,7 +24,7 @@ const { label, href } = Astro.props;
--transition-time: .3s;
}
.button {
aspect-ratio: 6/2;
aspect-ratio: 6/2 !important;
min-width: 130px;
width: 10dvw;
border-radius: 10pt;
@@ -27,6 +36,9 @@ const { label, href } = Astro.props;
cursor: pointer;
transition: all var(--transition-time);
gap:.2rem;
padding-left: .5rem;
}
.button:hover {
@@ -39,7 +51,15 @@ const { label, href } = Astro.props;
.button a {
text-decoration: none;
color: black
color: black;
text-align: left !important;
width: 80%;
}
.icon {
width: 1.1rem;
height: 1.1rem;
flex-shrink: 0;
}
@media (max-width: 600px) {

27
src/components/Hero/Page.astro
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;
}