added projects, removed ugly skill chart

src/components/Button.astro

@@ -13,7 +13,7 @@ const navigationHandler = `window.open('${href}', '_blank')`;
 
 <div class="button" onclick={navigationHandler}>
     <Icon name={icon} class="icon" />
-    <a href={href} target="_blank" rel="noreferrer">
+    <a rel="noreferrer">
         {label}
     </a>
 </div>

src/components/Hero/Page.astro

@@ -4,7 +4,7 @@ import {study} from "../../utils/getCurrentStudy"
 
 import hero_img from "../../assets/hero.png"
 
-import Button from "./Button.astro"
+import Button from "../Button.astro"
 import EmailButton from "./EmailButton.astro"
 
 const hero_img_src = `url(${hero_img.src})`;

src/components/Projects/Page.astro

@@ -0,0 +1,64 @@
+---
+import { siteData } from '../../data/site';
+import ProjectBox from './ProjectBox.astro';
+import TitleCard from '../TitleCard.astro';
+
+const projects = [...siteData.projects];
+---
+
+<div id="container">
+    <section class="studies-section" aria-label="Studies">
+        <div class="studies-list">
+            <TitleCard title="Projecten" description="Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequuntur amet, quos "/>
+            {projects.map((project) => (
+                <ProjectBox project={project} />
+            ))}
+        </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>

src/components/Projects/ProjectBox.astro

@@ -0,0 +1,138 @@
+---
+const { project } = Astro.props;
+import {techColors} from "../../data/site"
+
+
+const colors: { [id: string] : string; } = {...techColors}
+
+import Button from "../Button.astro";
+---
+
+<div class="container">
+    <div class="content">
+        <div class="titleRow">
+            <div class="titleContainer">
+                <div class="tech-stack">
+                    {project.tech.map((item: string) => {
+                        const color = colors[item] || colors["Default"];
+                        return (
+                            <span class="tech-badge" style={`--brand-color: ${color}`}>
+                                {item}
+                            </span>
+                        );
+                    })}
+                </div>
+                <h3 class="main-title">{project.title}</h3>
+                <p class="sub-title">{project.description}</p>
+            </div>
+            <Button label="Bekijk Project" href={project.link} icon="mdi:link"/>
+        </div>
+    </div>
+</div>
+
+<style>
+    /* ... Existing Styles Stay Exactly the Same ... */
+    .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);
+    }
+
+    .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;
+    }
+
+    .tech-stack {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.6rem;
+        margin-bottom: 0.5rem; /* Space between tags and title */
+    }
+
+    .tech-badge {
+        font-size: 0.7rem;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        padding: 0.2rem 0.6rem;
+        
+        /* The Magic: Using the variable from the style prop */
+        background: rgba(0, 0, 0, 0.2);
+        border: 1.5px solid var(--brand-color);
+        color: var(--brand-color);
+        
+        border-radius: 4px;
+    }
+
+    /* Keep your existing media queries */
+    @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;
+        }
+        
+        /* Ensure badges don't get too small on mobile */
+        .tech-stack {
+            margin-top: 0.6rem;
+        }
+    }
+</style>

src/components/Studies/Page.astro

@@ -1,26 +1,16 @@
 ---
 import { siteData } from '../../data/site';
 import StudyBox from './StudyBox.astro';
-import StudyBoxTitle from './StudyBoxTitle.astro';
+import TitleCard from '../TitleCard.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">
-    <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 />
+            <TitleCard title="Opleidingen" description="Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequuntur amet, quos "/>
             {sortedStudies.map((study) => (
                 <StudyBox study={study} />
             ))}
@@ -42,45 +32,11 @@ const sortedStudies = studies.sort((a, b) => b.start.getTime() - a.start.getTime
     overflow: hidden;
 
     display: grid;
-    grid-template-columns: minmax(220px, 280px) 1fr;
+    grid-template-columns: 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;
 }
@@ -102,10 +58,6 @@ const sortedStudies = studies.sort((a, b) => b.start.getTime() - a.start.getTime
         gap: 1rem;
     }
 
-    .left-column {
-        position: static;
-    }
-
     .studies-section {
         margin-top: 2rem;
     }

src/components/Studies/SkillChart.astro

@@ -1,55 +0,0 @@
----
-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>

src/components/Studies/StudyBox.astro

@@ -4,6 +4,8 @@ const { study } = Astro.props;
 const color: string = study.color
 ---
 
+
+
 <div class="container">
     <div class="accent" aria-hidden="true"></div>
 

src/components/TitleCard.astro

@@ -1,12 +1,13 @@
 ---
+const { title, description } = Astro.props;
 ---
 
 <div class="container">
     <div class="content">
         <div class="titleRow">
             <div class="titleContainer">
-                <h2 class="main-title">Opleidingen</h2>
+                <h2 class="main-title">{title}</h2>
-                <p class="sub-title">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequuntur amet, quos </p>
+                <p class="sub-title">{description}</p>
             </div>
         </div>
     </div>
@@ -21,7 +22,7 @@
         gap: 1rem;
         min-height: 80px;
         padding: 1rem 1rem 1rem 0.9rem;
-        background: rgba(255,255,255,0.05);
+        background: rgba(255,255,255,0.2);
         border: 1px solid rgba(255,255,255,0.08);
         border-radius: 14px;
         box-shadow: 0 8px 20px rgba(0,0,0,0.18);

src/data/site.ts

@@ -2,23 +2,19 @@ export const siteData = {
     name: "Valentijn van der Jagt",
     email: "valentijnkijkuit@outlook.com",
     birthDate: new Date("2006-06-27"),
-    skills: [
+    projects: [
         {
-            name: "C++ / Arduino",
+            title: "Albert Heijn Bonus Scraper",
-            level: 7
+            description: "Een Java-applicatie die via Puppeteer real-time bonusacties scrapt en visualiseert. Bevat een krachtige zoekfunctionaliteit ondersteund door een zelfgeïmplementeerd fuzzy-search algoritme, waardoor er snel en flexibel door de weekelijkse aanbiedingen genavigeerd kan worden.",
+            tech: ["Java", "Puppeteer", "HTML/CSS"],
+            link: "https://git.herpiederpiee.nl/valentijn/Appie-Bonus-Scraper/"
         },
         {
-            name: "Java",
+            title: "Spotify Windows Intergratie ",
-            level: 6
+            description: "Een Python-applicatie die via de Spotify Web API real-time playback-data synchroniseert met een custom Windows Taskbar-widget. Maakt gebruik van Tkinter voor een hardware-versnelde, transparante overlay die naadloos integreert met de Windows Shell-omgeving",
+            tech: ["Python", "Tkinter", "Spotify API"],
+            link: "https://git.herpiederpiee.nl/valentijn/Windows-Spotify-Taskbar/"
         },
-        {
-            name: "Python",
-            level: 8
-        },
-        {
-            name: "Web Development",
-            level: 5
-        }
     ],
     studies: [
         {
@@ -40,4 +36,16 @@ export const siteData = {
             color: "#8FE508"
         }
     ]
-}
+}
+
+export const techColors = {
+    "Default": "#888888",
+    "Java": "#ED8B00",
+    "Python": "#3776AB",
+    "HTML/CSS": "#E34F26",
+    "Puppeteer": "#40B5A4",
+    "Tkinter": "#3e759e",
+    "Spotify API": "#1DB954",
+    "C++": "#00599C",
+    "Arduino": "#00979D"
+};

src/pages/index.astro

@@ -2,10 +2,12 @@
 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"
 ---
 
 
 <Layout>
 	<Hero />
+	<Projects/>
 	<Studies/>
 </Layout>