From a9926fbbb7d3ae0f94a9c095375d6e52b4bab7e0 Mon Sep 17 00:00:00 2001 From: Valentijn Date: Wed, 22 Apr 2026 17:51:30 +0200 Subject: [PATCH] updated look and feel of the hero component --- src/components/Hero/Button.astro | 65 +++++++------ src/components/Hero/EmailButton.astro | 131 ++++++++++++++++++++++++++ src/components/Hero/Page.astro | 102 +++++++++++++++----- src/data/site.ts | 1 + 4 files changed, 249 insertions(+), 50 deletions(-) create mode 100644 src/components/Hero/EmailButton.astro diff --git a/src/components/Hero/Button.astro b/src/components/Hero/Button.astro index bae0add..13e2343 100644 --- a/src/components/Hero/Button.astro +++ b/src/components/Hero/Button.astro @@ -8,65 +8,72 @@ interface Props { } const { label, href, icon } = Astro.props; +const navigationHandler = `window.open('${href}', '_blank')`; --- -
+
- + {label}
- \ No newline at end of file + diff --git a/src/components/Hero/EmailButton.astro b/src/components/Hero/EmailButton.astro new file mode 100644 index 0000000..051a715 --- /dev/null +++ b/src/components/Hero/EmailButton.astro @@ -0,0 +1,131 @@ +--- +import { Icon } from 'astro-icon/components'; +import { siteData } from '../../data/site'; + +interface Props { + label: string; + icon: string; +} + +const { label, icon } = Astro.props; +const safeEmail = siteData.email; +const clipboardHandler = `navigator.clipboard.writeText('${safeEmail}').then(()=>{const btn=this.querySelector('.copy-button') || this; btn.dataset.copied='true'; setTimeout(()=>{ delete btn.dataset.copied }, 1200)})`; +--- + + + + diff --git a/src/components/Hero/Page.astro b/src/components/Hero/Page.astro index 1fc68bd..2e464a6 100644 --- a/src/components/Hero/Page.astro +++ b/src/components/Hero/Page.astro @@ -3,9 +3,12 @@ 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" +import EmailButton from "./EmailButton.astro" + +const hero_img_src = `url(${hero_img.src})`; + ---
@@ -16,8 +19,8 @@ import Button from "./Button.astro"
@@ -29,47 +32,104 @@ import Button from "./Button.astro" #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; + position: relative; + min-height: clamp(420px, 58vh, 680px); + margin: 10px; + padding: clamp(1.5rem, 3vw, 2.5rem); + background: radial-gradient(circle at 15% 18%, rgba(255, 246, 228, 0.32), transparent 24%), + linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(10, 10, 10, 0.24)), + var(--hero_img_src); background-size: cover; background-position: center; - background-blend-mode: hue; - border-radius: 10pt; + border-radius: 20px; + box-shadow: 0 24px 60px rgba(16, 14, 12, 0.18); + overflow: hidden; + display: flex; + flex-direction: column; + justify-content: flex-start; + animation: driftBackground 16s ease-in-out infinite alternate; } .buttonContainer { - padding-left:10px; display: flex; - justify-content: start; - gap:10px; + flex-wrap: wrap; + align-items: center; + justify-content: flex-start; + gap: 1rem; + margin-top: 1.4rem; + padding: 0; + } + + .buttonContainer > * { + flex: 0 1 auto; + } + + .titleContainer { + display: flex; + flex-direction: column; + gap: 0.9rem; } h1, h3 { font-family: "Work Sans", sans-serif; font-optical-sizing: auto; font-style: normal; - margin:0; + margin: 0; + color: #ecfbff; } .main-title { - font-size: max(min(8dvw, 130px), 30px); - font-weight: 600; - + font-size: clamp(2.5rem, 6vw, 5.25rem); + font-weight: 700; + line-height: 0.95; + letter-spacing: -0.03em; + animation: floatText 10s ease-in-out infinite alternate; } .sub-title { - font-size: max(min(3dvw, 90px), 18px); + font-size: clamp(1.5rem, 2.5vw, 2.5rem); font-weight: 300; + color: rgba(255, 255, 255, 0.9); + margin-top: 0.7rem; + opacity: 0.94; } + @keyframes floatText { + 0% { transform: translateY(0); } + 100% { transform: translateY(-8px); } + } + + @keyframes driftBackground { + 0% { background-position: center top; } + 100% { background-position: 12% 62%; } + } + + @media (max-width: 900px) { + #container { + padding: 1.5rem 1.2rem; + } - - @media (max-width: 600px) { .buttonContainer { - justify-content: space-around; - padding-left:0 + justify-content: center; + } + } + + @media (max-width: 760px) { + .buttonContainer { + justify-content: center; + gap: 0.85rem; + } + } + + @media (max-width: 600px) { + #container { + min-height: 360px; + } + + .buttonContainer { + justify-content: center; + gap: 0.8rem; + padding: 0.75rem 0 0; } } diff --git a/src/data/site.ts b/src/data/site.ts index 1eb52b2..9c69b24 100644 --- a/src/data/site.ts +++ b/src/data/site.ts @@ -1,5 +1,6 @@ export const siteData = { name: "Valentijn van der Jagt", + email: "valentijnkijkuit@outlook.com", birthDate: new Date("2006-06-27"), studies: [ {