From d9163af01e15b2aa720cadf56a01979248989cde Mon Sep 17 00:00:00 2001
From: Valentijn <valentijn@herpiederpiee.nl>
Date: Wed, 22 Apr 2026 19:32:26 +0200
Subject: [PATCH] studies section boilerplate

---
 src/components/Studies/Page.astro     | 129 ++++++++++++++++++++++++++
 src/components/Studies/StudyBox.astro | 127 +++++++++++++++++++++++++
 src/data/site.ts                      |   6 +-
 src/layouts/Layout.astro              |   2 +-
 src/pages/index.astro                 |   2 +
 5 files changed, 263 insertions(+), 3 deletions(-)
 create mode 100644 src/components/Studies/Page.astro
 create mode 100644 src/components/Studies/StudyBox.astro

diff --git a/src/components/Studies/Page.astro b/src/components/Studies/Page.astro
new file mode 100644
index 0000000..1c213a5
--- /dev/null
+++ b/src/components/Studies/Page.astro
@@ -0,0 +1,129 @@
+---
+import { siteData } from '../../data/site';
+import StudyBox from './StudyBox.astro';
+
+const studies = [...siteData.studies];
+const sortedStudies = studies.sort((a, b) => b.start.getTime() - a.start.getTime());
+---
+
+<div id="container">
+    <aside class="sidebar">
+        <div class="sidebar-card">
+            <p class="eyebrow">Kennis & Opleidingen</p>
+            <h2>Opleidingen</h2>
+            <p class="sidebar-copy">
+                A quick overview of my academic path, focus areas, and current progress.
+            </p>
+        </div>
+    </aside>
+
+    <section class="studies-section" aria-label="Studies">
+        <div class="studies-list">
+            {sortedStudies.map((study) => (
+                <StudyBox study={study} />
+            ))}
+        </div>
+    </section>
+</div>
+
+<style>
+    #container {
+        font-family: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
+        position: relative;
+        margin: 10px;
+        padding: clamp(1.5rem, 3vw, 2.5rem);
+        background:
+            linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)),
+            rgb(74, 74, 74);
+        border-radius: 20px;
+        box-shadow: 0 24px 60px rgba(16, 14, 12, 0.18);
+        overflow: hidden;
+        display: grid;
+        grid-template-columns: minmax(220px, 280px) 1fr;
+        gap: 1.5rem;
+        align-items: start;
+    }
+
+    .sidebar {
+        position: sticky;
+        top: 1rem;
+    }
+
+    .sidebar-card {
+        background: rgba(255, 255, 255, 0.05);
+        border: 1px solid rgba(255, 255, 255, 0.08);
+        border-radius: 16px;
+        padding: 1.25rem;
+        color: white;
+        box-shadow: 0 8px 24px rgba(0,0,0,0.18);
+    }
+
+    .eyebrow {
+        margin: 0 0 0.4rem 0;
+        font-size: 0.78rem;
+        text-transform: uppercase;
+        letter-spacing: 0.12em;
+        opacity: 0.68;
+    }
+
+    .sidebar-card h2 {
+        margin: 0;
+        font-size: clamp(1.4rem, 2vw, 1.9rem);
+        line-height: 1.1;
+    }
+
+    .sidebar-copy {
+        margin: 0.8rem 0 1.2rem 0;
+        font-size: 0.95rem;
+        line-height: 1.55;
+        opacity: 0.82;
+    }
+
+    .sidebar-meta {
+        display: grid;
+        gap: 0.85rem;
+    }
+
+    .meta-label {
+        display: block;
+        font-size: 0.74rem;
+        text-transform: uppercase;
+        letter-spacing: 0.08em;
+        opacity: 0.6;
+        margin-bottom: 0.2rem;
+    }
+
+    .meta-value {
+        display: block;
+        font-size: 0.92rem;
+        opacity: 0.92;
+    }
+
+    .studies-section {
+        min-width: 0;
+    }
+
+    .studies-list {
+        display: flex;
+        flex-direction: column;
+        gap: 1.3rem;
+        position: relative;
+    }
+
+    @media (max-width: 768px) {
+        #container {
+            margin: 5px;
+            padding: 1rem;
+            grid-template-columns: 1fr;
+            gap: 1rem;
+        }
+
+        .sidebar {
+            position: static;
+        }
+
+        .sidebar-card {
+            padding: 1rem;
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/components/Studies/StudyBox.astro b/src/components/Studies/StudyBox.astro
new file mode 100644
index 0000000..86ae046
--- /dev/null
+++ b/src/components/Studies/StudyBox.astro
@@ -0,0 +1,127 @@
+---
+const { study } = Astro.props;
+---
+
+<div class="container">
+    <div class="accent" aria-hidden="true"></div>
+
+    <div class="content">
+        <div class="titleRow">
+            <div class="titleContainer">
+                <h3 class="main-title">{study.study}</h3>
+                <p class="sub-title">{study.school} · {study.level}</p>
+            </div>
+
+            <div class="dateContainer">
+                <p>
+                    {study.start.toLocaleDateString('en-US', { year: 'numeric', month: 'short' })}
+                    -
+                    {study.end
+                        ? study.end.toLocaleDateString('en-US', { year: 'numeric', month: 'short' })
+                        : 'Nu'}
+                </p>
+            </div>
+        </div>
+    </div>
+</div>
+
+<style>
+    .container {
+        font-family: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
+        position: relative;
+        display: flex;
+        align-items: stretch;
+        gap: 1rem;
+        min-height: 120px;
+        padding: 1rem 1rem 1rem 0.9rem;
+        background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
+        border: 1px solid rgba(255,255,255,0.08);
+        border-radius: 14px;
+        box-shadow: 0 8px 20px rgba(0,0,0,0.18);
+        color: white;
+        transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
+    }
+
+    .container:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 14px 28px rgba(0,0,0,0.24);
+        border-color: rgba(255,255,255,0.14);
+    }
+
+    .accent {
+        width: 4px;
+        border-radius: 999px;
+        background: linear-gradient(180deg, #7dd3fc 0%, #38bdf8 100%);
+        flex-shrink: 0;
+    }
+
+    .content {
+        flex: 1;
+        min-width: 0;
+        display: flex;
+        align-items: center;
+    }
+
+    .titleRow {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+        gap: 1rem;
+    }
+
+    .titleContainer {
+        min-width: 0;
+    }
+
+    .main-title {
+        font-size: 1.1rem;
+        line-height: 1.2;
+        margin: 0 0 0.3rem 0;
+        font-weight: 700;
+    }
+
+    .sub-title {
+        font-size: 0.92rem;
+        line-height: 1.45;
+        margin: 0;
+        opacity: 0.8;
+    }
+
+    .dateContainer {
+        flex-shrink: 0;
+    }
+
+    .dateContainer p {
+        font-size: 0.8rem;
+        margin: 0;
+        white-space: nowrap;
+        opacity: 0.7;
+    }
+
+    @media (max-width: 768px) {
+        .container {
+            min-height: 100px;
+            padding: 0.85rem 0.85rem 0.85rem 0.75rem;
+            gap: 0.8rem;
+        }
+
+        .titleRow {
+            flex-direction: column;
+            gap: 0.55rem;
+        }
+
+        .main-title {
+            font-size: 1rem;
+        }
+
+        .sub-title {
+            font-size: 0.84rem;
+        }
+
+        .dateContainer p {
+            font-size: 0.74rem;
+            white-space: normal;
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/data/site.ts b/src/data/site.ts
index 9c69b24..87bd2e7 100644
--- a/src/data/site.ts
+++ b/src/data/site.ts
@@ -6,13 +6,15 @@ export const siteData = {
         {
             school: "Hogeschool Rotterdam",
             study: "Technische Informatica",
+            level: "HBO",
             label: "Student Technische Informatica",
             start: new Date("2025-09-01"),
             end: null,
         },
         {
-            school: "Hogeschool Rotterdam",
-            study: "Technische Informatica",
+            school: "Grafisch Lyceum Rotterdam",
+            study: "Software Developer",
+            level: "MBO",
             label: "Student Software Developer",
             start: new Date("2021-09-01"),
             end: new Date("2025-06-18"),
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 18596e7..57b2797 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -30,6 +30,6 @@
 		margin: 0;
 		width: 100%;
 		height: 100%;
-		background: #4e4e4e
+		background: #353535
 	}
 </style>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 807b275..8242e5f 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,9 +1,11 @@
 ---
 import Layout from '../layouts/Layout.astro';
 import Hero from '../components/Hero/Page.astro';
+import Studies from "../components/Studies/Page.astro"
 ---
 
 
 <Layout>
 	<Hero />
+	<Studies/>
 </Layout>