update dependencies and enhance Hero component
This commit is contained in:
Valentijn
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1440" height="1024" fill="none"><path fill="url(#a)" fill-rule="evenodd" d="M-217.58 475.75c91.82-72.02 225.52-29.38 341.2-44.74C240 415.56 372.33 315.14 466.77 384.9c102.9 76.02 44.74 246.76 90.31 366.31 29.83 78.24 90.48 136.14 129.48 210.23 57.92 109.99 169.67 208.23 155.9 331.77-13.52 121.26-103.42 264.33-224.23 281.37-141.96 20.03-232.72-220.96-374.06-196.99-151.7 25.73-172.68 330.24-325.85 315.72-128.6-12.2-110.9-230.73-128.15-358.76-12.16-90.14 65.87-176.25 44.1-264.57-26.42-107.2-167.12-163.46-176.72-273.45-10.15-116.29 33.01-248.75 124.87-320.79Z" clip-rule="evenodd" style="opacity:.154"/><path fill="url(#b)" fill-rule="evenodd" d="M1103.43 115.43c146.42-19.45 275.33-155.84 413.5-103.59 188.09 71.13 409 212.64 407.06 413.88-1.94 201.25-259.28 278.6-414.96 405.96-130 106.35-240.24 294.39-405.6 265.3-163.7-28.8-161.93-274.12-284.34-386.66-134.95-124.06-436-101.46-445.82-284.6-9.68-180.38 247.41-246.3 413.54-316.9 101.01-42.93 207.83 21.06 316.62 6.61Z" clip-rule="evenodd" style="opacity:.154"/><defs><linearGradient id="b" x1="373" x2="1995.44" y1="1100" y2="118.03" gradientUnits="userSpaceOnUse"><stop stop-color="#D83333"/><stop offset="1" stop-color="#F041FF"/></linearGradient><linearGradient id="a" x1="107.37" x2="1130.66" y1="1993.35" y2="1026.31" gradientUnits="userSpaceOnUse"><stop stop-color="#3245FF"/><stop offset="1" stop-color="#BC52EE"/></linearGradient></defs></svg>
|
||||
|
Before Width: | Height: | Size: 1.4 KiB |
BIN
src/assets/hero.png
Normal file
BIN
src/assets/hero.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 266 KiB |
@@ -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) {
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -7,6 +7,11 @@
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<title>Valentijn van der Jagt</title>
|
||||
|
||||
<!-- Work Sans -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<slot />
|
||||
@@ -14,10 +19,17 @@
|
||||
</html>
|
||||
|
||||
<style>
|
||||
* {
|
||||
margin:0;
|
||||
padding:0;
|
||||
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #4e4e4e
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user