added CV button, and made contact form work

.gitignore

@@ -6,6 +6,7 @@ dist/
 
 # dependencies
 node_modules/
+package-lock.json
 
 # logs
 npm-debug.log*

package-lock.json

@@ -9,7 +9,8 @@
       "dependencies": {
         "@iconify-json/mdi": "^1.2.3",
         "astro": "^6.1.8",
-        "astro-icon": "^1.1.5"
+        "astro-icon": "^1.1.5",
+        "sweetalert2": "^11.26.24"
       },
       "engines": {
         "node": ">=22.12.0"
@@ -4712,6 +4713,16 @@
         "url": "https://opencollective.com/svgo"
       }
     },
+    "node_modules/sweetalert2": {
+      "version": "11.26.24",
+      "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.26.24.tgz",
+      "integrity": "sha512-SLgukW4wicewpW5VOukSXY5Z6DL/z7HCOK2ODSjmQPiSphCN8gJAmh9npoceXOtBRNoDN0xIz+zHYthtfiHmjg==",
+      "license": "MIT",
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/sponsors/limonte"
+      }
+    },
     "node_modules/tar": {
       "version": "7.5.13",
       "resolved": "https://registry.npmjs.org/tar/-/tar-7.5.13.tgz",

package.json

@@ -14,6 +14,7 @@
   "dependencies": {
     "@iconify-json/mdi": "^1.2.3",
     "astro": "^6.1.8",
-    "astro-icon": "^1.1.5"
+    "astro-icon": "^1.1.5",
+    "sweetalert2": "^11.26.24"
   }
 }

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">
+    <form id="contactForm">
-        <input type="text" name="name" id="nameInput" class="name" placeholder="John Doe" autocomplete="name">
+        <input type="text" name="_honey" id="honey" style="display:none;" tabindex="-1" autocomplete="off" />
-        <input type="email" name="email" id="emailInput" class="email" placeholder="john@example.com" autocomplete="email">
+        <input type="text" name="name" id="nameInput" class="name"placeholder="John Doe" autocomplete="name" required>
-        <textarea name="message" id="messageInput" placeholder="Your message here"></textarea>
+        <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;
     }
 

src/data/site.ts

@@ -26,6 +26,7 @@ export const siteData = {
     socials: [
         { icon: "mdi:git", platform: "Gitea", url: "https://git.herpiederpiee.nl/valentijn?tab=repositories" },
         { icon: "mdi:linkedin", platform: "LinkedIn", url: "https://nl.linkedin.com/in/valentijn-van-der-jagt" },
+        { icon: "mdi:document", platform: "CV", url: "/CV.pdf"}
     ],
     projects: [
         {

src/layouts/Layout.astro

@@ -12,6 +12,7 @@
 		<link rel="preconnect" href="https://fonts.googleapis.com">
 		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 		<link href="https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
+		<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
 	</head>
 	<body>
 		<slot />