From 007b9ac3e42349f7e1777ac221a10458151bc783 Mon Sep 17 00:00:00 2001 From: Valentijn Date: Mon, 20 Apr 2026 21:56:21 +0200 Subject: [PATCH] start of hero layout, mostly positioning --- src/components/Hero/Button.astro | 52 ++++++++ src/components/Hero/Page.astro | 56 +++++++++ src/components/Welcome.astro | 210 ------------------------------- src/data/site.ts | 20 +++ src/layouts/Layout.astro | 2 +- src/pages/index.astro | 8 +- src/utils/getAge.ts | 17 +++ src/utils/getCurrentStudy.ts | 23 ++++ 8 files changed, 172 insertions(+), 216 deletions(-) create mode 100644 src/components/Hero/Button.astro create mode 100644 src/components/Hero/Page.astro delete mode 100644 src/components/Welcome.astro create mode 100644 src/data/site.ts create mode 100644 src/utils/getAge.ts create mode 100644 src/utils/getCurrentStudy.ts diff --git a/src/components/Hero/Button.astro b/src/components/Hero/Button.astro new file mode 100644 index 0000000..f7e71cd --- /dev/null +++ b/src/components/Hero/Button.astro @@ -0,0 +1,52 @@ +--- +const { label, href } = Astro.props; +--- + +
+ + {label} + +
+ + + \ No newline at end of file diff --git a/src/components/Hero/Page.astro b/src/components/Hero/Page.astro new file mode 100644 index 0000000..a222909 --- /dev/null +++ b/src/components/Hero/Page.astro @@ -0,0 +1,56 @@ +--- +import {age} from "../../utils/getAge" +import {study} from "../../utils/getCurrentStudy" + +import Button from "./Button.astro" +--- + +
+
+

Valentijn van der Jagt

+

{age} - {study?.label}

+
+ +
+
+ + +
+ + diff --git a/src/components/Welcome.astro b/src/components/Welcome.astro deleted file mode 100644 index 1b2cf9c..0000000 --- a/src/components/Welcome.astro +++ /dev/null @@ -1,210 +0,0 @@ ---- -import astroLogo from '../assets/astro.svg'; -import background from '../assets/background.svg'; ---- - -
- -
-
- Astro Homepage -

- To get started, open the 
src/pages
 directory in your project. -

- -
-
- - - -

What's New in Astro 6.0?

-

- Redesigned dev server, fonts, live collections, built-in CSP support, and more! Click to - explore Astro 6.0's new features. -

- -
- - diff --git a/src/data/site.ts b/src/data/site.ts new file mode 100644 index 0000000..1eb52b2 --- /dev/null +++ b/src/data/site.ts @@ -0,0 +1,20 @@ +export const siteData = { + name: "Valentijn van der Jagt", + birthDate: new Date("2006-06-27"), + studies: [ + { + school: "Hogeschool Rotterdam", + study: "Technische Informatica", + label: "Student Technische Informatica", + start: new Date("2025-09-01"), + end: null, + }, + { + school: "Hogeschool Rotterdam", + study: "Technische Informatica", + label: "Student Software Developer", + start: new Date("2021-09-01"), + end: new Date("2025-06-18"), + } + ] +} \ No newline at end of file diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index f6b55d4..540b4ff 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -6,7 +6,7 @@ - Astro Basics + Valentijn van der Jagt diff --git a/src/pages/index.astro b/src/pages/index.astro index c04f360..807b275 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,11 +1,9 @@ --- -import Welcome from '../components/Welcome.astro'; import Layout from '../layouts/Layout.astro'; - -// Welcome to Astro! Wondering what to do next? Check out the Astro documentation at https://docs.astro.build -// Don't want to use any of this? Delete everything in this file, the `assets`, `components`, and `layouts` directories, and start fresh. +import Hero from '../components/Hero/Page.astro'; --- + - + diff --git a/src/utils/getAge.ts b/src/utils/getAge.ts new file mode 100644 index 0000000..8166eb8 --- /dev/null +++ b/src/utils/getAge.ts @@ -0,0 +1,17 @@ +import { siteData } from '../data/site'; + +function getAge(dateOfBirth: Date){ + const today = new Date() + + // calculate year, and month difference + let age = today.getFullYear() - dateOfBirth.getFullYear() + let monthDiff = today.getMonth() - dateOfBirth.getMonth() + + if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < dateOfBirth.getDate())) { + // birthday has not yet happened this year + age--; + } + return age; +} + +export const age = getAge(siteData.birthDate) \ No newline at end of file diff --git a/src/utils/getCurrentStudy.ts b/src/utils/getCurrentStudy.ts new file mode 100644 index 0000000..16666f9 --- /dev/null +++ b/src/utils/getCurrentStudy.ts @@ -0,0 +1,23 @@ +import { siteData } from '../data/site'; + +type Study = { + school: string; + study: string; + label: string; + start: Date; + end: Date | null; +}; + + +function getStudy(studies: Study[]){ + if (studies.length === 0) return null; + + return studies.reduce((latest, study) => { + if (latest.end === null) return latest; + if (study.end === null) return study; + + return study.start.getTime() > latest.start.getTime() ? study : latest; + }); +} + +export const study = getStudy(siteData.studies) \ No newline at end of file