added CV button, and made contact form work

src/components/Contact/ContactForm.astro

@@ -1,17 +1,90 @@
 ---
 const { title, description } = Astro.props;
+
 import Box from "../Box.astro";
 ---
+<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+
 
 <Box>
-    <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>
+    <form id="contactForm">
+        <input type="text" name="_honey" id="honey" style="display:none;" tabindex="-1" autocomplete="off" />
+        <input type="text" name="name" id="nameInput" class="name"placeholder="John Doe" autocomplete="name" required>
+        <input type="email" name="email" id="emailInput" class="email" placeholder="john@example.com" autocomplete="email" required>
+        <textarea name="message" id="messageInput" placeholder="Your message here" required></textarea>
         <input type="submit" value="Indienen" class="submitBtn">
     </form>
 </Box>
 
+
+<script>
+    import Swal from 'sweetalert2';
+
+    const form = document.getElementById('contactForm') as HTMLFormElement | null;
+
+    if (form) {
+        form.addEventListener('submit', async (e) => {
+            e.preventDefault();
+
+            const nameInput = document.getElementById('nameInput') as HTMLInputElement | null;
+            const emailInput = document.getElementById('emailInput') as HTMLInputElement | null;
+            const messageInput = document.getElementById('messageInput') as HTMLTextAreaElement | null;
+            const honeyInput = document.getElementById('honey') as HTMLInputElement | null;
+
+            if (!nameInput || !emailInput || !messageInput || !honeyInput) {
+                console.error("One or more form fields were not found in the DOM.");
+                return;
+            }
+
+            const formData = new FormData();
+            formData.append('name', nameInput.value);
+            formData.append('email', emailInput.value);
+            formData.append('message', messageInput.value);
+            formData.append('_honey', honeyInput.value);
+
+            Swal.fire({
+                title: 'Sending...',
+                didOpen: () => Swal.showLoading()
+            });
+
+            try {
+                const response = await fetch('https://contact.herpiederpiee.nl/submit', {
+                    method: 'POST',
+                    body: formData
+                });
+
+                const result = await response.json();
+
+                if (response.status === 201) {
+                    Swal.fire({
+                        icon: 'success',
+                        title: 'Success!',
+                        text: 'Your message has been received!',
+                    });
+                    form.reset();
+                } else if (response.status === 429) {
+                    Swal.fire({
+                        icon: 'error',
+                        title: 'Slow down!',
+                        text: result.detail,
+                    });
+                } else {
+                    Swal.fire({
+                        icon: 'error',
+                        title: 'Oops...',
+                        text: result.detail || 'Something went wrong.',
+                    });
+                }
+            } catch (error) {
+                Swal.fire({
+                    icon: 'error',
+                    title: 'Error',
+                    text: 'Could not connect to the contact server.',
+                });
+            }
+        });
+    }
+</script>
 <style>
     input, textarea {
         font-family: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
@@ -51,6 +124,8 @@ import Box from "../Box.astro";
         cursor: pointer;
         padding: unset !important;
         transition: all 200ms ease;
+        height: 3rem !important;
+        border-radius: 10px;
     }
 
     .submitBtn:hover {
@@ -73,13 +148,9 @@ import Box from "../Box.astro";
         gap: 0.6rem;
     }
 
-    form input {
-        height: 2.1rem;
-    }
-
 
     form textarea {
-        height: 5rem;
+        height: 8rem;
         resize: none;
     }