valentijn/Portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added CV button, and made contact form work

Browse Source
This commit is contained in:
Valentijn
2026-05-15 21:50:30 +02:00
parent 8b40305b22
commit badbfd7a74
7 changed files with 97 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

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

13
package-lock.json generated
View File

@@ -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",

3
package.json
View File

@@ -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"
}
}

BIN
public/CV.pdf Normal file
View File

Binary file not shown.

89
src/components/Contact/ContactForm.astro
View File

@@ -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;
}

1
src/data/site.ts
View File

@@ -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: [
{

1
src/layouts/Layout.astro
View File

@@ -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 />