From 72137466dc08f9d2e81da692b0ab52ce0dfd49e1 Mon Sep 17 00:00:00 2001
From: Valentijn <valentijn@herpiederpiee.nl>
Date: Fri, 15 May 2026 14:19:45 +0200
Subject: [PATCH] added experience page

---
 src/components/Experience/ExperienceBox.astro | 135 ++++++++++++++++++
 src/components/Experience/Page.astro          |  65 +++++++++
 src/data/site.ts                              |  16 ++-
 src/pages/index.astro                         |   4 +-
 4 files changed, 218 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Experience/ExperienceBox.astro
 create mode 100644 src/components/Experience/Page.astro

diff --git a/src/components/Experience/ExperienceBox.astro b/src/components/Experience/ExperienceBox.astro
new file mode 100644
index 0000000..380e0bf
--- /dev/null
+++ b/src/components/Experience/ExperienceBox.astro
@@ -0,0 +1,135 @@
+---
+const { experience } = Astro.props;
+
+const color: string = experience.color
+---
+
+
+
+<div class="container">
+    <div class="accent"></div>
+
+    <div class="content">
+        <div class="titleRow">
+            <div class="titleContainer">
+                <h3 class="main-title">{experience.name}</h3>
+                <p class="sub-title">{experience.role}</p>
+
+                <p class="description">
+                    {experience.description}
+                </p>
+            </div>
+
+            <div class="dateContainer">
+                <p>
+                    {experience.start.toLocaleDateString('en-US', { year: 'numeric', month: 'short' })}
+                    -
+                    {experience.end
+                        ? experience.end.toLocaleDateString('en-US', { year: 'numeric', month: 'short' })
+                        : 'Nu'}
+                </p>
+            </div>
+        </div>
+    </div>
+</div>
+
+<style define:vars={{color}}>
+    .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: rgba(255,255,255,0.05);
+        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: var(--color);
+        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/components/Experience/Page.astro b/src/components/Experience/Page.astro
new file mode 100644
index 0000000..8fd0ff1
--- /dev/null
+++ b/src/components/Experience/Page.astro
@@ -0,0 +1,65 @@
+---
+import { siteData } from '../../data/site';
+import ExperienceBox from './ExperienceBox.astro';
+import TitleCard from '../TitleCard.astro';
+
+const experience = [...siteData.experience];
+const sortedExperience = experience.sort((a, b) => b.start.getTime() - a.start.getTime());
+---
+
+<div id="container">
+    <section class="studies-section" aria-label="Studies">
+        <div class="studies-list">
+            <TitleCard title="Ervaringen" description="Hieronder zie je alle werkervaring die ik tot nu toe hebv opgedaan. "/>
+            {sortedExperience.map((experience) => (
+                <ExperienceBox experience={experience} />
+            ))}
+        </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: 1fr;
+    gap: 1.5rem;
+    align-items: start;
+}
+
+.studies-section {
+    min-width: 0;
+}
+
+.studies-list {
+    display: flex;
+    flex-direction: column;
+    gap: 1.3rem;
+    position: relative;
+}
+
+/* Mobile: collapse to one column,
+   so "Kennis" ends up fully under studies */
+@media (max-width: 768px) {
+    #container {
+        margin: 5px;
+        padding: 1rem;
+        grid-template-columns: 1fr;
+        gap: 1rem;
+    }
+
+    .studies-section {
+        margin-top: 2rem;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/data/site.ts b/src/data/site.ts
index d634a5b..2303560 100644
--- a/src/data/site.ts
+++ b/src/data/site.ts
@@ -35,6 +35,17 @@ export const siteData = {
             end: new Date("2025-06-18"),
             color: "#8FE508"
         }
+    ],
+    experience: [
+        {
+            name: "Brightpark",
+            role: "Stagaire Junior Developer",
+            description: "Bij Brightpark heb ik mijn eerste ervaring opgedaan in het werkveld van Software Ontwikkeling. Ik heb hier gewerkt aan meerdere projecten. Een van de leukere was een iOS app die helpt bij het meten van huizen door gebruik te maken van de Bosch GLM- series meetapperatuur. Deze app heb ik gemaakt in Flutter, met wat kleine stappen Swift in om de meetapperatuur werkend te krijgen.",
+            start: new Date("2024-09-10"),
+            end: new Date("2025-05-1"),
+            tech: ["Flutter", "Swift", "Svelte", "Laravel"],
+            color: "#30e7ffe9"
+        }
     ]
 }
 
@@ -47,5 +58,8 @@ export const techColors = {
     "Tkinter": "#3e759e",
     "Spotify API": "#1DB954",
     "C++": "#00599C",
-    "Arduino": "#00979D"
+    "Arduino": "#00979D",
+    "Flutter": "#02569B",
+    "Svelte": "#FF3E00",
+    "Laravel": "#FF2D20",
 };
\ No newline at end of file
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 2f27e68..71f67fa 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -3,11 +3,13 @@ import Layout from '../layouts/Layout.astro';
 import Hero from '../components/Hero/Page.astro';
 import Studies from "../components/Studies/Page.astro"
 import Projects from "../components/Projects/Page.astro"
+import Experience from "../components/Experience/Page.astro"
 ---
 
 
 <Layout>
 	<Hero />
 	<Projects/>
-	<Studies/>
+	<Experience/>
+	<!-- <Studies/> -->
 </Layout>