From 9012debcfe043b6b4569a95a5dfe61e76d8527bd Mon Sep 17 00:00:00 2001
From: Valentijn <valentijn@herpiederpiee.nl>
Date: Wed, 22 Apr 2026 20:22:08 +0200
Subject: [PATCH] finished skills + studies section. + responsiveness

---
 astro.config.mjs                           |   5 +-
 src/components/Studies/Page.astro          | 186 ++++++++++-----------
 src/components/Studies/SkillChart.astro    |  55 ++++++
 src/components/Studies/StudyBox.astro      |   8 +-
 src/components/Studies/StudyBoxTitle.astro |  90 ++++++++++
 src/data/site.ts                           |  20 +++
 6 files changed, 259 insertions(+), 105 deletions(-)
 create mode 100644 src/components/Studies/SkillChart.astro
 create mode 100644 src/components/Studies/StudyBoxTitle.astro

diff --git a/astro.config.mjs b/astro.config.mjs
index ccc9bf5..a3a14e2 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -4,5 +4,8 @@ import icon from "astro-icon"
 
 // https://astro.build/config
 export default defineConfig({
-    integrations:[icon()]
+    integrations:[icon()],
+    server: {
+        allowedHosts: ["bag-valium-thee-distinct.trycloudflare.com"]
+    }
 });
diff --git a/src/components/Studies/Page.astro b/src/components/Studies/Page.astro
index 1c213a5..e78cb7d 100644
--- a/src/components/Studies/Page.astro
+++ b/src/components/Studies/Page.astro
@@ -1,24 +1,26 @@
 ---
 import { siteData } from '../../data/site';
 import StudyBox from './StudyBox.astro';
+import StudyBoxTitle from './StudyBoxTitle.astro';
+import SkillChart from './SkillChart.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>
+    <div class="left-column">
+        <aside class="sidebar-card">
+            <h2>Kennis</h2>
+            <div class="skillChart">
+                <SkillChart skills={siteData.skills} />
+            </div>
+        </aside>
+    </div>
 
     <section class="studies-section" aria-label="Studies">
         <div class="studies-list">
+            <StudyBoxTitle />
             {sortedStudies.map((study) => (
                 <StudyBox study={study} />
             ))}
@@ -27,103 +29,85 @@ const sortedStudies = studies.sort((a, b) => b.start.getTime() - a.start.getTime
 </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;
+}
+
+.left-column {
+    position: sticky;
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+}
+
+.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);
+    margin-bottom: 1rem;
+}
+
+.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;
+}
+
+.skillChart {
+    margin-top: 1rem;
+}
+
+.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 {
-        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;
+        margin: 5px;
+        padding: 1rem;
+        grid-template-columns: 1fr;
+        gap: 1rem;
     }
 
-    .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;
+    .left-column {
+        position: static;
     }
 
     .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;
-        }
+        margin-top: 2rem;
     }
+}
 </style>
\ No newline at end of file
diff --git a/src/components/Studies/SkillChart.astro b/src/components/Studies/SkillChart.astro
new file mode 100644
index 0000000..c19a37d
--- /dev/null
+++ b/src/components/Studies/SkillChart.astro
@@ -0,0 +1,55 @@
+---
+const { skills } = Astro.props;
+
+interface Skill {
+    name: string;
+    level: number;
+}
+---
+
+<div class="skills-chart">
+    {skills.map((skill: Skill) => (
+        <div class="skill">
+            <span class="skill-name">{skill.name}</span>
+            <div class="skill-bar">
+                <span
+                    style={{
+                        width: `${(skill.level / 10) * 100}%`
+                    }}
+                ></span>
+            </div>
+        </div>
+    ))}
+</div>
+
+<style>
+    .skills-chart {
+        display: flex;
+        flex-direction: column;
+        gap: 0.7rem;
+    }
+
+    .skill {
+        display: grid;
+        gap: 0.3rem;
+    }
+
+    .skill-name {
+        font-size: 0.88rem;
+        opacity: 0.9;
+    }
+
+    .skill-bar {
+        height: 8px;
+        background: rgba(255, 255, 255, 0.08);
+        border-radius: 999px;
+        overflow: hidden;
+    }
+
+    .skill-bar span {
+        display: block;
+        height: 100%;
+        border-radius: inherit;
+        background: linear-gradient(90deg, #7dd3fc, #38bdf8);
+    }
+</style>
\ No newline at end of file
diff --git a/src/components/Studies/StudyBox.astro b/src/components/Studies/StudyBox.astro
index 86ae046..48eaefd 100644
--- a/src/components/Studies/StudyBox.astro
+++ b/src/components/Studies/StudyBox.astro
@@ -1,5 +1,7 @@
 ---
 const { study } = Astro.props;
+
+const color: string = study.color
 ---
 
 <div class="container">
@@ -25,7 +27,7 @@ const { study } = Astro.props;
     </div>
 </div>
 
-<style>
+<style define:vars={{color}}>
     .container {
         font-family: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
         position: relative;
@@ -34,7 +36,7 @@ const { study } = Astro.props;
         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));
+        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);
@@ -51,7 +53,7 @@ const { study } = Astro.props;
     .accent {
         width: 4px;
         border-radius: 999px;
-        background: linear-gradient(180deg, #7dd3fc 0%, #38bdf8 100%);
+        background: var(--color);
         flex-shrink: 0;
     }
 
diff --git a/src/components/Studies/StudyBoxTitle.astro b/src/components/Studies/StudyBoxTitle.astro
new file mode 100644
index 0000000..02d754b
--- /dev/null
+++ b/src/components/Studies/StudyBoxTitle.astro
@@ -0,0 +1,90 @@
+---
+---
+
+<div class="container">
+    <div class="content">
+        <div class="titleRow">
+            <div class="titleContainer">
+                <h2 class="main-title">Opleidingen</h2>
+                <p class="sub-title">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequuntur amet, quos </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: 80px;
+        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);
+    }
+
+
+    .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: clamp(1.4rem,2vw,1.9rem);
+        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;
+    }
+
+
+    @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;
+        }
+
+        .sub-title {
+            font-size: 0.84rem;
+        }
+
+    }
+</style>
\ No newline at end of file
diff --git a/src/data/site.ts b/src/data/site.ts
index 87bd2e7..6150028 100644
--- a/src/data/site.ts
+++ b/src/data/site.ts
@@ -2,6 +2,24 @@ export const siteData = {
     name: "Valentijn van der Jagt",
     email: "valentijnkijkuit@outlook.com",
     birthDate: new Date("2006-06-27"),
+    skills: [
+        {
+            name: "C++ / Arduino",
+            level: 7
+        },
+        {
+            name: "Java",
+            level: 6
+        },
+        {
+            name: "Python",
+            level: 8
+        },
+        {
+            name: "Web Development",
+            level: 5
+        }
+    ],
     studies: [
         {
             school: "Hogeschool Rotterdam",
@@ -10,6 +28,7 @@ export const siteData = {
             label: "Student Technische Informatica",
             start: new Date("2025-09-01"),
             end: null,
+            color: "#D3104C"
         },
         {
             school: "Grafisch Lyceum Rotterdam",
@@ -18,6 +37,7 @@ export const siteData = {
             label: "Student Software Developer",
             start: new Date("2021-09-01"),
             end: new Date("2025-06-18"),
+            color: "#8FE508"
         }
     ]
 }
\ No newline at end of file