added contact form, css class name clarification

src/components/Contact/ContactForm.astro

@@ -0,0 +1,101 @@
+---
+const { title, description } = Astro.props;
+---
+
+<div class="container">
+    <div class="content">
+        <form method="POST" action="https://example.com/example">
+            <input type="text" name="name" id="nameInput" class="name" placeholder="John Doe" autocomplete="name">
+            <input type="email" name="email" id="emailInput" class="email" placeholder="john@example.com" autocomplete="email">
+            <textarea name="message" id="messageInput" placeholder="Your message here"></textarea>
+            <input type="submit" value="Indienen" class="submitBtn">
+        </form>
+    </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: 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;
+        margin-top: 0.5rem;
+        padding: 1rem;
+    }
+
+    .container:hover {
+        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;
+    }
+
+    input, textarea {
+        font-family: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
+        border-radius: 10pt;
+        padding:10px;
+        font-size: .8rem;
+
+        color: white;
+        border: 1px solid rgba(255, 255, 255, 0.14);
+        background: rgba(18, 18, 28, 0.24);
+        backdrop-filter: blur(2px);
+        box-shadow: 0 24px 50px rgba(0, 0, 0, 0.18);
+
+        transition: transform var(--transition-time), border-color var(--transition-time), background var(--transition-time), box-shadow var(--transition-time);
+        padding: 0.95rem 1.2rem;
+
+    }
+
+    .submitBtn {
+        padding: unset !important;
+        background: rgba(96, 67, 8, 0.24);
+    }
+
+    form {
+        display: flex;
+        flex-direction: column;
+        justify-content: start;
+        gap: .5rem;
+        width: 50%;
+    }
+
+    form input {
+        height: 2.1rem;
+    }
+
+
+    form textarea {
+        height: 5rem;
+        resize: none;
+    }
+
+
+    @media (max-width: 768px) {
+        .container {
+            min-height: 100px;
+            padding: 0.85rem 0.85rem 0.85rem 0.75rem;
+            gap: 0.8rem;
+        }
+
+        form {
+            width: 100%;
+        }
+
+    }
+</style>

src/components/Contact/Page.astro

@@ -0,0 +1,48 @@
+---
+import TitleCard from '../TitleCard.astro';
+import ContactForm from './ContactForm.astro';
+
+---
+
+<div id="container">
+    <section class="contact-section" aria-label="Contact">
+        <TitleCard title="Contact" description="Neem gerust contact met me op!"/>
+        <ContactForm/>
+    </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;
+}
+
+.contact-section {
+    min-width: 0;
+}
+
+
+/* Mobile: collapse to one column,
+   so "Kennis" ends up fully under contact */
+@media (max-width: 768px) {
+    #container {
+        margin: 5px;
+        padding: 1rem;
+        grid-template-columns: 1fr;
+        gap: 1rem;
+    }
+}
+</style>

src/components/Experience/ExperienceBox.astro

@@ -48,6 +48,7 @@ const color: string = experience.color
         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;
+        margin-top: 0.5rem;
     }
 
     .container:hover {

src/components/Experience/Page.astro

@@ -8,8 +8,8 @@ const sortedExperience = experience.sort((a, b) => b.start.getTime() - a.start.g
 ---
 
 <div id="container">
-    <section class="studies-section" aria-label="Studies">
+    <section class="experience-section" aria-label="Experience">
-        <div class="studies-list">
+        <div class="experience-list">
             <TitleCard title="Ervaringen" description="Hieronder zie je alle werkervaring die ik tot nu toe hebv opgedaan. "/>
             {sortedExperience.map((experience) => (
                 <ExperienceBox experience={experience} />
@@ -37,11 +37,11 @@ const sortedExperience = experience.sort((a, b) => b.start.getTime() - a.start.g
     align-items: start;
 }
 
-.studies-section {
+.experience-section {
     min-width: 0;
 }
 
-.studies-list {
+.experience-list {
     display: flex;
     flex-direction: column;
     gap: 1.3rem;
@@ -49,7 +49,7 @@ const sortedExperience = experience.sort((a, b) => b.start.getTime() - a.start.g
 }
 
 /* Mobile: collapse to one column,
-   so "Kennis" ends up fully under studies */
+   so "Kennis" ends up fully under experience */
 @media (max-width: 768px) {
     #container {
         margin: 5px;
@@ -58,7 +58,7 @@ const sortedExperience = experience.sort((a, b) => b.start.getTime() - a.start.g
         gap: 1rem;
     }
 
-    .studies-section {
+    .experience-section {
         margin-top: 2rem;
     }
 }

src/components/Hero/EmailButton.astro

@@ -56,6 +56,7 @@ const clipboardHandler = `navigator.clipboard.writeText('${safeEmail}').then(()=
         transform: translateY(-2px);
         box-shadow: 0 24px 65px rgba(0, 0, 0, 0.22);
         width: min(15rem, 100%);
+        transition: all .3s;
     }
 
     .email-button:hover .label {

src/components/Projects/Page.astro

@@ -7,8 +7,8 @@ const projects = [...siteData.projects];
 ---
 
 <div id="container">
-    <section class="studies-section" aria-label="Studies">
+    <section class="projects-section" aria-label="Projects">
-        <div class="studies-list">
+        <div class="projects-list">
             <TitleCard title="Projecten" description="Hieronder zie je een aantal van mijn favoriete persoonlijke projecten!"/>
             {projects.map((project) => (
                 <ProjectBox project={project} />
@@ -36,11 +36,11 @@ const projects = [...siteData.projects];
     align-items: start;
 }
 
-.studies-section {
+.projects-section {
     min-width: 0;
 }
 
-.studies-list {
+.projects-list {
     display: flex;
     flex-direction: column;
     gap: 1.3rem;
@@ -57,7 +57,7 @@ const projects = [...siteData.projects];
         gap: 1rem;
     }
 
-    .studies-section {
+    .projects-section {
         margin-top: 2rem;
     }
 }

src/components/Projects/ProjectBox.astro

@@ -12,6 +12,9 @@ import Button from "../Button.astro";
     <div class="content">
         <div class="titleRow">
             <div class="titleContainer">
+                
+                <h3 class="main-title">{project.title}</h3>
+                <p class="sub-title">{project.description}</p>
                 <div class="tech-stack">
                     {project.tech.map((item: string) => {
                         const color = colors[item] || colors["Default"];
@@ -22,8 +25,6 @@ import Button from "../Button.astro";
                         );
                     })}
                 </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>
@@ -46,6 +47,7 @@ import Button from "../Button.astro";
         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;
+        margin-top:0.5rem;
     }
 
     .container:hover {
@@ -91,7 +93,7 @@ import Button from "../Button.astro";
         display: flex;
         flex-wrap: wrap;
         gap: 0.6rem;
-        margin-bottom: 0.5rem; /* Space between tags and title */
+        margin-top: 1rem; /* Space between tags and title */
     }
 
     .tech-badge {

src/pages/index.astro

@@ -4,6 +4,7 @@ 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"
+import Contact from "../components/Contact/Page.astro"
 ---
 
 
@@ -12,4 +13,5 @@ import Experience from "../components/Experience/Page.astro"
 	<Projects/>
 	<Experience/>
 	<!-- <Studies/> -->
+	<Contact/>
 </Layout>