365DevNet/365devnet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated site completely
Some checks failed
GitHub Actions / build (18) (push) Has been cancelled
Details
GitHub Actions / build (20) (push) Has been cancelled
Details
GitHub Actions / build (22) (push) Has been cancelled
Details
GitHub Actions / check (push) Has been cancelled
Details

Browse Source
This commit is contained in:
becarta
2025-03-29 22:32:31 +01:00
parent a9adf1bb4f
commit 890d7b8670
56 changed files with 1807 additions and 1299 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
netlify/functions/contact.js Normal file
View File

@@ -0,0 +1,30 @@
import { JSDOM } from 'jsdom';
import createDOMPurify from 'dompurify';
export const handler = async (event) => {
try {
const data = JSON.parse(event.body);
const DOMPurify = createDOMPurify(new JSDOM('').window);
// Sanitize user input
const sanitizedData = {
name: DOMPurify.sanitize(data.name),
email: DOMPurify.sanitize(data.email),
message: DOMPurify.sanitize(data.message),
};
// TODO: Process the sanitized data (e.g., send an email)
console.log('Sanitized data:', sanitizedData);
return {
statusCode: 200,
body: JSON.stringify({ message: 'Form submitted successfully!' }),
};
} catch (error) {
console.error('Error:', error);
return {
statusCode: 500,
body: JSON.stringify({ message: 'An error occurred.' }),
};
}
};

9
package-lock.json generated
View File

@@ -4016,9 +4016,9 @@
}
},
"node_modules/caniuse-lite": {
"version": "1.0.30001667",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001667.tgz",
"integrity": "sha512-7LTwJjcRkzKFmtqGsibMeuXmvFDfZq/nzIjnmgCGzKKRVzjD72selLDK1oPF/Oxzmt4fNcPvTDvGqSDG4tCALw==",
"version": "1.0.30001707",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001707.tgz",
"integrity": "sha512-3qtRjw/HQSMlDWf+X79N206fepf4SOOU6SQLMaq/0KkZLmSjPxAkBOQQ+FxbHKfHmYLZFfdWsO3KA90ceHPSnw==",
"funding": [
{
"type": "opencollective",
@@ -4032,7 +4032,8 @@
"type": "github",
"url": "https://github.com/sponsors/ai"
}
]
],
"license": "CC-BY-4.0"
},
"node_modules/ccount": {
"version": "2.0.1",

88
src/assets/styles/tailwind.css
View File

@@ -1,14 +1,16 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind components;
@tailwind utilities;
@layer base {
p, li, div {
@layer base {
p,
li,
div {
line-height: 1.5;
}
}
}
@layer utilities {
@layer utilities {
.bg-page {
background-color: var(--aw-color-bg-page);
}
@@ -24,83 +26,75 @@
.text-muted {
color: var(--aw-color-text-muted);
}
.content-backdrop {
@apply bg-white/20 dark:bg-gray-900/15 backdrop-blur-sm hover:bg-white/30 hover:backdrop-blur-md dark:hover:backdrop-blur-md transition-all duration-300 ease-in-out;
}
.content-card {
@apply rounded-lg p-4 md:p-6 content-backdrop;
}
}
}
@layer components {
@layer components {
.btn {
@apply inline-flex items-center justify-center rounded-full border-gray-400 border bg-transparent font-medium text-center text-base text-page leading-snug transition py-3.5 px-6 md:px-8 ease-in duration-200 focus:ring-blue-500 focus:ring-offset-blue-200 focus:ring-2 focus:ring-offset-2 hover:bg-gray-100 hover:border-gray-600 dark:text-slate-300 dark:border-slate-500 dark:hover:bg-slate-800 dark:hover:border-slate-800 cursor-pointer;
@apply inline-flex items-center justify-center rounded-full border-gray-400 border bg-transparent font-medium text-center text-base text-page leading-snug transition py-3.5 px-6 md:px-8 ease-in duration-200 focus:ring-blue-500 focus:ring-offset-blue-200 focus:ring-2 focus:ring-offset-2 hover:bg-gray-100 hover:border-gray-600 dark:text-slate-300 dark:border-slate-500 dark:hover:bg-slate-800 dark:hover:border-slate-800 cursor-pointer;
}
.btn-primary {
@apply btn font-semibold bg-primary text-white border-primary hover:bg-secondary hover:border-secondary hover:text-white dark:text-white dark:bg-primary dark:border-primary dark:hover:border-secondary dark:hover:bg-secondary;
@apply btn font-semibold bg-primary text-white border-primary hover:bg-secondary hover:border-secondary hover:text-white dark:text-white dark:bg-primary dark:border-primary dark:hover:border-secondary dark:hover:bg-secondary;
}
.btn-secondary {
@apply btn;
@apply btn;
}
.btn-tertiary {
@apply btn border-none shadow-none text-muted hover:text-gray-900 dark:text-gray-400 dark:hover:text-white;
@apply btn border-none shadow-none text-muted hover:text-gray-900 dark:text-gray-400 dark:hover:text-white;
}
}
}
#header.scroll > div:first-child {
#header.scroll > div:first-child {
@apply bg-page md:bg-white/90 md:backdrop-blur-md;
box-shadow: 0 0.375rem 1.5rem 0 rgb(140 152 164 / 13%);
}
.dark #header.scroll > div:first-child,
#header.scroll.dark > div:first-child {
}
.dark #header.scroll > div:first-child,
#header.scroll.dark > div:first-child {
@apply bg-page md:bg-[#030621e6] border-b border-gray-500/20;
box-shadow: none;
}
/* #header.scroll > div:last-child {
}
/* #header.scroll > div:last-child {
@apply py-3;
} */
} */
#header.expanded nav {
#header.expanded nav {
position: fixed;
top: 70px;
left: 0;
right: 0;
bottom: 70px !important;
padding: 0 5px;
}
}
.dropdown:focus .dropdown-menu,
.dropdown:focus-within .dropdown-menu,
.dropdown:hover .dropdown-menu {
.dropdown:focus .dropdown-menu,
.dropdown:focus-within .dropdown-menu,
.dropdown:hover .dropdown-menu {
display: block;
}
}
[astro-icon].icon-light > * {
[astro-icon].icon-light > * {
stroke-width: 1.2;
}
}
[astro-icon].icon-bold > * {
[astro-icon].icon-bold > * {
stroke-width: 2.4;
}
}
[data-aw-toggle-menu] path {
[data-aw-toggle-menu] path {
@apply transition;
}
[data-aw-toggle-menu].expanded g > path:first-child {
}
[data-aw-toggle-menu].expanded g > path:first-child {
@apply -rotate-45 translate-y-[15px] translate-x-[-3px];
}
}
[data-aw-toggle-menu].expanded g > path:last-child {
[data-aw-toggle-menu].expanded g > path:last-child {
@apply rotate-45 translate-y-[-8px] translate-x-[14px];
}
}
/* To deprecated */
/* To deprecated */
.dd *:first-child {
.dd *:first-child {
margin-top: 0;
}
}

24
src/components/CookieBanner.astro
View File

@@ -5,12 +5,18 @@ const { lang = 'en' } = Astro.params;
const t = getTranslation(lang);
---
<div id="cookie-banner" class="fixed bottom-0 left-0 right-0 z-50 p-4 content-backdrop shadow-lg transform transition-transform duration-300 translate-y-full" style="display: none;">
<div
id="cookie-banner"
class="fixed bottom-0 left-0 right-0 z-50 p-4 content-backdrop shadow-lg transform transition-transform duration-300 translate-y-full"
style="display: none;"
>
<div class="container mx-auto max-w-6xl flex flex-col sm:flex-row items-center justify-between gap-4">
<div class="text-sm text-gray-800 dark:text-gray-200 font-medium">
<p>
{t.cookies.message}
<a href={`/${lang}/privacy#cookie-usage`} class="text-blue-600 dark:text-blue-400 hover:underline">{t.cookies.learnMore}</a>
{t.cookies.message}
<a href={`/${lang}/privacy#cookie-usage`} class="text-blue-600 dark:text-blue-400 hover:underline"
>{t.cookies.learnMore}</a
>
</p>
</div>
<div class="flex-shrink-0">
@@ -41,7 +47,7 @@ const t = getTranslation(lang);
// Helper function to set cookie with expiration
function setCookie(name, value, days) {
const date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
const expires = `expires=${date.toUTCString()}`;
document.cookie = `${name}=${value}; ${expires}; path=/; SameSite=Lax`;
}
@@ -49,7 +55,7 @@ const t = getTranslation(lang);
function setupCookieBanner() {
const cookieBanner = document.getElementById('cookie-banner');
const acceptButton = document.getElementById('accept-cookies');
if (!cookieBanner || !acceptButton) return;
// Check if user has already accepted cookies
@@ -83,7 +89,7 @@ const t = getTranslation(lang);
acceptButton.addEventListener('click', () => {
// Store consent in cookie (primary storage)
setCookie('cookieConsentAccepted', 'true', 365);
// Also store in localStorage as backup
try {
localStorage.setItem('cookieConsentAccepted', 'true');
@@ -91,14 +97,14 @@ const t = getTranslation(lang);
console.error('Error setting localStorage:', e);
// Continue with cookie storage
}
// Hide the banner with animation
cookieBanner.classList.add('translate-y-full');
// Remove from DOM after animation completes
setTimeout(() => {
cookieBanner.style.display = 'none';
}, 300);
});
}
</script>
</script>

1
src/components/CustomStyles.astro
View File

@@ -66,5 +66,4 @@ import '@fontsource-variable/inter';
color: snow;
}
}
</style>

132
src/components/LanguageDropdown.astro
View File

@@ -8,16 +8,16 @@ interface Props {
const { currentLang } = Astro.props;
type SupportedLanguage = typeof supportedLanguages[number];
type SupportedLanguage = (typeof supportedLanguages)[number];
const languages = [
{ code: 'en' as SupportedLanguage, name: 'English', flag: 'gb' },
{ code: 'nl' as SupportedLanguage, name: 'Dutch', flag: 'nl' },
{ code: 'de' as SupportedLanguage, name: 'German', flag: 'de' },
{ code: 'fr' as SupportedLanguage, name: 'French', flag: 'fr' },
].filter(lang => supportedLanguages.includes(lang.code));
].filter((lang) => supportedLanguages.includes(lang.code));
const currentLanguage = languages.find(lang => lang.code === currentLang) || languages[0];
const currentLanguage = languages.find((lang) => lang.code === currentLang) || languages[0];
---
<div class="relative inline-block text-left language-dropdown">
@@ -32,9 +32,9 @@ const currentLanguage = languages.find(lang => lang.code === currentLang) || lan
>
<Icon name={`circle-flags:${currentLanguage.flag}`} class="inline-block w-5 h-5 mr-2" />
<span id="selected-language">{currentLanguage.name}</span>
<Icon
name="tabler:chevron-down"
class="ml-2 -mr-1 h-5 w-5 transition-transform duration-200"
<Icon
name="tabler:chevron-down"
class="ml-2 -mr-1 h-5 w-5 transition-transform duration-200"
aria-hidden="true"
id="chevron-icon"
/>
@@ -51,28 +51,35 @@ const currentLanguage = languages.find(lang => lang.code === currentLang) || lan
style="max-height: min(300px, 70vh);"
>
<div class="py-1" role="none">
{languages.map(lang => (
<button
type="button"
data-lang-code={lang.code}
class="text-gray-700 dark:text-gray-300 block w-full text-left px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white transition-colors duration-200"
role="menuitem"
tabindex="-1"
aria-label={`Switch to ${lang.name} language`}
>
<Icon name={`circle-flags:${lang.flag}`} class="inline-block w-5 h-5 mr-2" />
{lang.name}
</button>
))}
{
languages.map((lang) => (
<button
type="button"
data-lang-code={lang.code}
class="text-gray-700 dark:text-gray-300 block w-full text-left px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white transition-colors duration-200"
role="menuitem"
tabindex="-1"
aria-label={`Switch to ${lang.name} language`}
>
<Icon name={`circle-flags:${lang.flag}`} class="inline-block w-5 h-5 mr-2" />
{lang.name}
</button>
))
}
</div>
</div>
<select id="language-select" class="block w-full text-left px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white focus:bg-gray-100 dark:focus:bg-gray-700 focus:text-gray-900 dark:focus:text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 transition-colors duration-200 rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 language-select">
{languages.map(lang => (
<option value={lang.code} selected={lang.code === currentLang}>
{lang.name}
</option>
))}
<select
id="language-select"
class="block w-full text-left px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white focus:bg-gray-100 dark:focus:bg-gray-700 focus:text-gray-900 dark:focus:text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 transition-colors duration-200 rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 language-select"
>
{
languages.map((lang) => (
<option value={lang.code} selected={lang.code === currentLang}>
{lang.name}
</option>
))
}
</select>
</div>
@@ -89,7 +96,7 @@ const currentLanguage = languages.find(lang => lang.code === currentLang) || lan
.language-dropdown {
display: inline-block;
}
/* Keep the native select hidden even on mobile */
.language-select {
display: none;
@@ -168,7 +175,7 @@ const currentLanguage = languages.find(lang => lang.code === currentLang) || lan
// First show the menu to calculate its height
menu.classList.remove('hidden');
menu.classList.remove('open-upward', 'open-downward');
// Calculate available space
const buttonRect = button.getBoundingClientRect();
const menuRect = menu.getBoundingClientRect();
@@ -176,15 +183,12 @@ const currentLanguage = languages.find(lang => lang.code === currentLang) || lan
const spaceBelow = viewportHeight - buttonRect.bottom;
const spaceAbove = buttonRect.top;
const menuHeight = Math.min(menuRect.height, 300); // Cap at 300px
// Determine if menu should open upward
const shouldOpenUpward = spaceBelow < menuHeight && spaceAbove > spaceBelow;
// Position menu
menu.style.maxHeight = `${Math.min(
shouldOpenUpward ? spaceAbove - 8 : spaceBelow - 8,
300
)}px`;
menu.style.maxHeight = `${Math.min(shouldOpenUpward ? spaceAbove - 8 : spaceBelow - 8, 300)}px`;
if (shouldOpenUpward) {
menu.classList.add('open-upward');
@@ -214,7 +218,7 @@ const currentLanguage = languages.find(lang => lang.code === currentLang) || lan
});
// Handle language selection
languageButtons.forEach(langButton => {
languageButtons.forEach((langButton) => {
langButton.addEventListener('click', () => {
const langCode = langButton.dataset.langCode;
if (!langCode) return;
@@ -238,13 +242,13 @@ const currentLanguage = languages.find(lang => lang.code === currentLang) || lan
const currentPath = currentUrl.pathname.replace(/\/$/, '');
const currentHash = currentUrl.hash;
const pathSegments = currentPath.split('/').filter(Boolean);
// Check if we're on a language-specific path
const isLangPath = supportedLanguages.includes(pathSegments[0]);
// Get the previous language code
const previousLangCode = isLangPath ? pathSegments[0] : 'en';
// Extract the page path without language
let pagePath = '';
if (isLangPath && pathSegments.length > 1) {
@@ -254,48 +258,48 @@ const currentLanguage = languages.find(lang => lang.code === currentLang) || lan
// If we're not on a language-specific path, use the current path
pagePath = `/${pathSegments.join('/')}`;
}
// Handle special case for root path
const isRootPath = pathSegments.length === 0 || (isLangPath && pathSegments.length === 1);
// Construct the new URL
let newUrl = isRootPath ? `/${langCode}` : `/${langCode}${pagePath}`;
// Clean up any potential double slashes
newUrl = newUrl.replace(/\/+/g, '/');
// Append hash fragment if it exists
if (currentHash) {
newUrl += currentHash;
}
// Store the language preference in localStorage and cookies
if (window.languageUtils) {
window.languageUtils.storeLanguagePreference(langCode);
} else {
// Fallback if languageUtils is not available
localStorage.setItem('preferredLanguage', langCode);
// Also set a cookie for server-side detection
const expirationDate = new Date();
expirationDate.setFullYear(expirationDate.getFullYear() + 1);
document.cookie = `preferredLanguage=${langCode}; expires=${expirationDate.toUTCString()}; path=/; SameSite=Lax`;
}
// Dispatch the language changed event
const reloadEvent = new CustomEvent('languageChanged', {
detail: {
langCode,
previousLangCode,
path: newUrl,
willReload: true
}
willReload: true,
},
});
document.dispatchEvent(reloadEvent);
// Construct the full URL
const newFullUrl = `${window.location.origin}${newUrl}`;
// Force a complete page reload to ensure all content is updated to the new language
// This bypasses any client-side caching and ensures a fresh server render
window.location.href = newFullUrl + '?t=' + Date.now();
@@ -312,13 +316,13 @@ const currentLanguage = languages.find(lang => lang.code === currentLang) || lan
const currentPath = currentUrl.pathname.replace(/\/$/, '');
const currentHash = currentUrl.hash;
const pathSegments = currentPath.split('/').filter(Boolean);
// Check if we're on a language-specific path
const isLangPath = supportedLanguages.includes(pathSegments[0]);
// Get the previous language code
const previousLangCode = isLangPath ? pathSegments[0] : 'en';
// Extract the page path without language
let pagePath = '';
if (isLangPath && pathSegments.length > 1) {
@@ -328,48 +332,48 @@ const currentLanguage = languages.find(lang => lang.code === currentLang) || lan
// If we're not on a language-specific path, use the current path
pagePath = `/${pathSegments.join('/')}`;
}
// Handle special case for root path
const isRootPath = pathSegments.length === 0 || (isLangPath && pathSegments.length === 1);
// Construct the new URL
let newUrl = isRootPath ? `/${langCode}` : `/${langCode}${pagePath}`;
// Clean up any potential double slashes
newUrl = newUrl.replace(/\/+/g, '/');
// Append hash fragment if it exists
if (currentHash) {
newUrl += currentHash;
}
// Store the language preference in localStorage and cookies
if (window.languageUtils) {
window.languageUtils.storeLanguagePreference(langCode);
} else {
// Fallback if languageUtils is not available
localStorage.setItem('preferredLanguage', langCode);
// Also set a cookie for server-side detection
const expirationDate = new Date();
expirationDate.setFullYear(expirationDate.getFullYear() + 1);
document.cookie = `preferredLanguage=${langCode}; expires=${expirationDate.toUTCString()}; path=/; SameSite=Lax`;
}
// Dispatch the language changed event
const reloadEvent = new CustomEvent('languageChanged', {
detail: {
langCode,
previousLangCode,
path: newUrl,
willReload: true
}
willReload: true,
},
});
document.dispatchEvent(reloadEvent);
// Construct the full URL
const newFullUrl = `${window.location.origin}${newUrl}`;
// Force a complete page reload to ensure all content is updated to the new language
// This bypasses any client-side caching and ensures a fresh server render
window.location.href = newFullUrl + '?t=' + Date.now();
@@ -385,10 +389,10 @@ const currentLanguage = languages.find(lang => lang.code === currentLang) || lan
// Re-run setup when the page content is updated (e.g., after navigation)
document.addEventListener('astro:page-load', setupLanguageDropdown);
// Listen for popstate events (browser back/forward buttons)
window.addEventListener('popstate', (_event) => {
// No need to manually update anything here as the browser will
// automatically load the correct URL, and Astro will handle the rendering
});
</script>
</script>

4
src/components/LanguagePersistence.astro
View File

@@ -96,7 +96,7 @@ declare global {
storeLanguagePreference: (langCode) => {
localStorage.setItem('preferredLanguage', langCode);
setLanguageCookie(langCode);
}
},
};
}
@@ -109,4 +109,4 @@ declare global {
// Re-run setup when the page content is updated (e.g., after navigation)
document.addEventListener('astro:page-load', setupLanguagePersistence);
</script>
</script>

2
src/components/LanguageSelector.astro
View File

@@ -8,4 +8,4 @@ interface Props {
const { defaultLang } = Astro.props;
---
<LanguageSelectorComponent client:load defaultLang={defaultLang} />
<LanguageSelectorComponent client:load defaultLang={defaultLang} />

13
src/components/LanguageSelectorReact.tsx
View File

@@ -41,21 +41,14 @@ export default function LanguageSelectorComponent({ defaultLang }: LanguageSelec
className={`
inline-flex items-center px-3 py-2 text-sm font-medium rounded-md
transition-colors duration-200 hover:bg-gray-100
${language.code === currentLang
? 'text-blue-600 bg-blue-50'
: 'text-gray-600 hover:text-gray-900'
}
${language.code === currentLang ? 'text-blue-600 bg-blue-50' : 'text-gray-600 hover:text-gray-900'}
`}
aria-current={language.code === currentLang ? 'page' : undefined}
>
<Icon
name={`circle-flags:${language.flag}`}
className="w-5 h-5 mr-2"
aria-hidden="true"
/>
<Icon name={`circle-flags:${language.flag}`} className="w-5 h-5 mr-2" aria-hidden="true" />
<span>{language.name}</span>
</button>
))}
</div>
);
}
}

3
src/components/Logo.astro
View File

@@ -4,6 +4,7 @@ import { SITE } from 'astrowind:config';
<span
class="self-center ml-2 rtl:ml-0 rtl:mr-2 text-2xl md:text-xl font-bold text-gray-900 whitespace-nowrap dark:text-white"
aria-label={SITE?.name}
>
{SITE?.name}
{SITE?.name}
</span>

122
src/components/common/BasicScripts.astro
View File

@@ -163,7 +163,7 @@ import { UI } from 'astrowind:config';
// Handle smooth scrolling for anchor links across all pages
function setupSmoothScrolling() {
// Handle links that start with # (pure anchor links)
document.querySelectorAll('a[href^="#"]:not([href="#"])').forEach(anchor => {
document.querySelectorAll('a[href^="#"]:not([href="#"])').forEach((anchor) => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
@@ -173,23 +173,23 @@ import { UI } from 'astrowind:config';
if (targetElement) {
window.scrollTo({
top: targetElement.offsetTop - 50, // Offset for header
behavior: 'smooth'
behavior: 'smooth',
});
}
});
});
// Handle links that contain # but don't start with it (page + anchor)
document.querySelectorAll('a[href*="#"]:not([href^="#"])').forEach(anchor => {
document.querySelectorAll('a[href*="#"]:not([href^="#"])').forEach((anchor) => {
anchor.addEventListener('click', function (e) {
const href = this.getAttribute('href');
const isHashLink = this.getAttribute('data-hash-link') === 'true';
// Check if this is a link to the current page
// First, extract the path part (before the hash)
const hrefPath = href.split('#')[0];
const currentPath = window.location.pathname;
// Consider it's the current page if:
// 1. The path matches exactly
// 2. The href is just a hash (like '/#services')
@@ -198,23 +198,23 @@ import { UI } from 'astrowind:config';
currentPath === hrefPath ||
hrefPath === '' ||
(hrefPath === '/' && (currentPath === '/' || currentPath.endsWith('/index.html')));
// For hash links, we want to update the URL and scroll to the element
if (isHashLink || isCurrentPage) {
e.preventDefault();
const hashIndex = href.indexOf('#');
if (hashIndex !== -1) {
const targetId = href.substring(hashIndex + 1);
const targetElement = document.getElementById(targetId);
if (targetElement) {
// Update the URL with the hash fragment
history.pushState(null, null, href);
window.scrollTo({
top: targetElement.offsetTop - 50, // Offset for header
behavior: 'smooth'
behavior: 'smooth',
});
} else {
// If the target element doesn't exist on the current page, navigate to the page
@@ -245,50 +245,48 @@ import { UI } from 'astrowind:config';
function updateUrlsWithLanguage() {
const currentLang = getStoredLanguage();
const supportedLanguages = ['en', 'nl', 'de', 'fr'];
// Update all internal links to include the language prefix
document.querySelectorAll('a[href^="/"]:not([href^="//"])').forEach(link => {
document.querySelectorAll('a[href^="/"]:not([href^="//"])').forEach((link) => {
const href = link.getAttribute('href');
if (!href) return;
// Skip hash-only links (e.g., "#services")
if (href.startsWith('#')) {
return;
}
// Extract hash fragment if present
let hashFragment = '';
let pathWithoutHash = href;
if (href.includes('#')) {
const parts = href.split('#');
pathWithoutHash = parts[0];
hashFragment = '#' + parts[1];
}
// Parse the URL path (without hash) to check for existing language code
const pathSegments = pathWithoutHash.split('/').filter(Boolean);
const hasLanguagePrefix = pathSegments.length > 0 && supportedLanguages.includes(pathSegments[0]);
// If it already has a language prefix but it's different from the current language,
// update it to the current language
if (hasLanguagePrefix && pathSegments[0] !== currentLang) {
// Replace the existing language prefix with the current one
pathSegments[0] = currentLang;
const newPath = '/' + pathSegments.join('/');
// Set the new href with the hash fragment (if any)
link.setAttribute('href', newPath + hashFragment);
return;
}
// If it doesn't have a language prefix, add the current language
if (!hasLanguagePrefix) {
// Create the new path with the language prefix
const newPath = pathWithoutHash === '/' ?
`/${currentLang}` :
`/${currentLang}${pathWithoutHash}`;
const newPath = pathWithoutHash === '/' ? `/${currentLang}` : `/${currentLang}${pathWithoutHash}`;
// Set the new href with the hash fragment (if any)
link.setAttribute('href', newPath + hashFragment);
}
@@ -300,11 +298,11 @@ import { UI } from 'astrowind:config';
// Store the selected language in localStorage
if (event.detail && event.detail.langCode) {
storeLanguagePreference(event.detail.langCode);
// Always update all internal links with the new language
// regardless of whether we're doing a full page reload
updateUrlsWithLanguage();
// If this event includes a path but doesn't indicate it will reload,
// force a full page reload to ensure all content is properly translated
if (event.detail.path && !event.detail.willReload) {
@@ -312,13 +310,13 @@ import { UI } from 'astrowind:config';
}
}
});
// Process links when the page loads
updateUrlsWithLanguage();
// Process links after client-side navigation
document.addEventListener('astro:page-load', updateUrlsWithLanguage);
// Also update links when the DOM content is loaded
document.addEventListener('DOMContentLoaded', updateUrlsWithLanguage);
@@ -327,25 +325,25 @@ import { UI } from 'astrowind:config';
if (window.location.hash) {
const targetId = window.location.hash.substring(1);
const targetElement = document.getElementById(targetId);
if (targetElement) {
// Use setTimeout to ensure the page has fully loaded
setTimeout(() => {
window.scrollTo({
top: targetElement.offsetTop - 50, // Offset for header
behavior: 'smooth'
behavior: 'smooth',
});
}, 100);
}
}
}
scrollToHashOnLoad();
// Make language functions available globally
window.languageUtils = {
getStoredLanguage,
storeLanguagePreference
storeLanguagePreference,
};
}
@@ -471,36 +469,36 @@ import { UI } from 'astrowind:config';
if (!contactForm) return;
// Form validation and submission
contactForm.addEventListener('submit', async function(e) {
contactForm.addEventListener('submit', async function (e) {
e.preventDefault();
// Reset previous error messages
resetFormErrors();
// Client-side validation
if (!validateForm(contactForm)) {
return;
}
// Show loading state
const submitButton = contactForm.querySelector('button[type="submit"]');
const originalButtonText = submitButton.innerHTML;
submitButton.disabled = true;
submitButton.innerHTML = 'Sending...';
try {
const formData = new FormData(contactForm);
// Add timestamp to help prevent duplicate submissions
formData.append('timestamp', Date.now().toString());
// Submit the form to Netlify
const response = await fetch('/', {
method: 'POST',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
body: new URLSearchParams(formData).toString()
body: new URLSearchParams(formData).toString(),
});
if (response.ok) {
// Show success message
document.getElementById('form-success').classList.remove('hidden');
@@ -516,14 +514,14 @@ import { UI } from 'astrowind:config';
submitButton.innerHTML = originalButtonText;
}
});
// Add input validation on blur
contactForm.querySelectorAll('input, textarea').forEach(input => {
input.addEventListener('blur', function() {
contactForm.querySelectorAll('input, textarea').forEach((input) => {
input.addEventListener('blur', function () {
validateInput(this);
});
input.addEventListener('input', function() {
input.addEventListener('input', function () {
// Remove error styling when user starts typing
this.classList.remove('border-red-500');
const feedbackElement = this.closest('div').querySelector('.invalid-feedback');
@@ -536,29 +534,29 @@ import { UI } from 'astrowind:config';
function validateForm(form) {
let isValid = true;
// Validate all inputs
form.querySelectorAll('input, textarea').forEach(input => {
form.querySelectorAll('input, textarea').forEach((input) => {
if (!validateInput(input)) {
isValid = false;
}
});
return isValid;
}
function validateInput(input) {
if (!input.required) return true;
let isValid = true;
const feedbackElement = input.closest('div').querySelector('.invalid-feedback');
// Reset previous error
if (feedbackElement) {
feedbackElement.classList.add('hidden');
}
input.classList.remove('border-red-500');
// Checkbox validation (special case for disclaimer)
if (input.type === 'checkbox') {
if (input.required && !input.checked) {
@@ -582,7 +580,7 @@ import { UI } from 'astrowind:config';
}
return isValid;
}
// Check if empty
if (input.required && !input.value.trim()) {
isValid = false;
@@ -592,7 +590,7 @@ import { UI } from 'astrowind:config';
}
input.classList.add('border-red-500');
}
// Email validation
if (input.type === 'email' && input.value.trim()) {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
@@ -605,7 +603,7 @@ import { UI } from 'astrowind:config';
input.classList.add('border-red-500');
}
}
// Textarea minimum length
if (input.tagName === 'TEXTAREA' && input.value.trim().length < 10) {
isValid = false;
@@ -615,26 +613,26 @@ import { UI } from 'astrowind:config';
}
input.classList.add('border-red-500');
}
return isValid;
}
function resetFormErrors() {
// Hide all error messages
document.querySelectorAll('.invalid-feedback').forEach(el => {
document.querySelectorAll('.invalid-feedback').forEach((el) => {
el.classList.add('hidden');
});
// Remove error styling
document.querySelectorAll('input, textarea').forEach(input => {
document.querySelectorAll('input, textarea').forEach((input) => {
input.classList.remove('border-red-500');
});
// Remove checkbox container error styling
document.querySelectorAll('.flex.items-start').forEach(container => {
document.querySelectorAll('.flex.items-start').forEach((container) => {
container.classList.remove('checkbox-error');
});
// Hide form-level messages
document.getElementById('form-success')?.classList.add('hidden');
document.getElementById('form-error')?.classList.add('hidden');

2
src/components/common/StructuredData.astro
View File

@@ -2,4 +2,4 @@
const { data } = Astro.props;
---
<script type="application/ld+json" set:html={JSON.stringify(data)} />
<script type="application/ld+json" set:html={JSON.stringify(data)} />

52
src/components/ui/Accordion.astro
View File

@@ -10,25 +10,33 @@ const { items } = Astro.props;
---
<div class="accordion">
{items.map((item, index) => (
<div class="accordion-item">
<button class="accordion-header" data-accordion-target={`#accordion-body-${index}`}>
{item.title}
<svg class="w-4 h-4 ml-2 shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
<div id={`accordion-body-${index}`} class="accordion-body" aria-labelledby={`accordion-header-${index}`}>
<div class="p-5 border border-b-0 dark:border-gray-700 dark:bg-gray-900">
<p class="text-gray-500 dark:text-gray-400">{item.description}</p>
{
items.map((item, index) => (
<div class="accordion-item">
<button class="accordion-header" data-accordion-target={`#accordion-body-${index}`}>
{item.title}
<svg class="w-4 h-4 ml-2 shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
clip-rule="evenodd"
/>
</svg>
</button>
<div id={`accordion-body-${index}`} class="accordion-body" aria-labelledby={`accordion-header-${index}`}>
<div class="p-5 border border-b-0 dark:border-gray-700 dark:bg-gray-900">
<p class="text-gray-500 dark:text-gray-400">{item.description}</p>
</div>
</div>
</div>
</div>
))}
))
}
</div>
<script>
const accordionHeaders = document.querySelectorAll('.accordion-header');
accordionHeaders.forEach(header => {
accordionHeaders.forEach((header) => {
header.addEventListener('click', () => {
const target = header.getAttribute('data-accordion-target');
const body = document.querySelector(target);
@@ -37,7 +45,7 @@ const { items } = Astro.props;
const expanded = (body as HTMLElement).classList.contains('expanded');
// Close all accordion items
document.querySelectorAll('.accordion-body.expanded').forEach(item => {
document.querySelectorAll('.accordion-body.expanded').forEach((item) => {
if (item && 'style' in item) {
(item as any).style.display = 'none';
item.classList.remove('expanded');
@@ -57,7 +65,7 @@ const { items } = Astro.props;
</script>
<style>
.accordion-header {
.accordion-header {
display: flex;
align-items: center;
width: 100%;
@@ -69,17 +77,17 @@ const { items } = Astro.props;
border-bottom: 1px solid #e5e7eb;
cursor: pointer;
transition: background-color 0.15s ease;
}
}
.accordion-header:hover {
.accordion-header:hover {
background-color: #f9fafb;
}
}
.accordion-body {
.accordion-body {
display: none;
}
}
.accordion-body.expanded {
.accordion-body.expanded {
display: block;
}
</style>
}
</style>

16
src/components/ui/BackToTop.astro
View File

@@ -1,12 +1,8 @@
---
---
<button
id="back-to-top"
class="back-to-top"
aria-label="Back to top"
title="Return to Top"
>
---
<button id="back-to-top" class="back-to-top" aria-label="Back to top" title="Return to Top">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
@@ -81,7 +77,7 @@
// Function to initialize the back to top button
function initBackToTop() {
const backToTopButton = document.getElementById('back-to-top');
if (!backToTopButton) return;
// Show button when scrolling down
@@ -98,7 +94,7 @@
e.preventDefault();
window.scrollTo({
top: 0,
behavior: 'smooth'
behavior: 'smooth',
});
};
@@ -116,4 +112,4 @@
// Re-initialize on view transitions (for Astro's View Transitions)
document.addEventListener('astro:page-load', initBackToTop);
document.addEventListener('astro:after-swap', initBackToTop);
</script>
</script>

208
src/components/ui/Background.astro
View File

@@ -70,7 +70,7 @@ const iconNames: string[] = [
'tabler:brand-github',
'tabler:device-desktop',
'tabler:brand-azure',
// Additional tech-related icons
'tabler:cpu',
'tabler:device-mobile',
@@ -79,7 +79,7 @@ const iconNames: string[] = [
'tabler:shield',
'tabler:lock',
'tabler:key',
// Tangentially related icons for visual diversity
'tabler:bulb',
'tabler:compass',
@@ -101,17 +101,13 @@ const getRandomRotation = (): string => {
// Function to get a random size
const getRandomSize = (isDarkMode: boolean = false): string => {
// Slightly larger size range for dark mode for better visibility
return isDarkMode
? `${getRandomInRange(160, 200)}px`
: `${getRandomInRange(140, 180)}px`;
return isDarkMode ? `${getRandomInRange(160, 200)}px` : `${getRandomInRange(140, 180)}px`;
};
// Function to get a random opacity
const getRandomOpacity = (isDarkMode: boolean = false): string => {
// Higher opacity range for dark mode for better visibility
return isDarkMode
? getRandomInRange(0.45, 0.55).toFixed(2)
: getRandomInRange(0.32, 0.38).toFixed(2);
return isDarkMode ? getRandomInRange(0.45, 0.55).toFixed(2) : getRandomInRange(0.32, 0.38).toFixed(2);
};
// Create a spacious layout with well-separated icons
@@ -119,14 +115,14 @@ const createSpacedIcons = (): BaseIconObject[] => {
const icons: BaseIconObject[] = [];
const rows = 6; // Reduced from 8 to 6 for fewer potential positions
const cols = 6; // Reduced from 8 to 6 for fewer potential positions
// Define larger margins to keep icons away from edges (in percentage)
const marginX = 10; // 10% margin from left and right edges (increased from 5%)
const marginY = 10; // 10% margin from top and bottom edges (increased from 5%)
// Minimum distance between icons (in percentage points)
const minDistance = 20; // Ensure at least 20% distance between any two icons
// Create a base grid of positions
for (let row = 0; row < rows; row++) {
for (let col = 0; col < cols; col++) {
@@ -134,46 +130,43 @@ const createSpacedIcons = (): BaseIconObject[] => {
if (Math.random() < 0.75) {
continue;
}
// Base position in the grid with margins applied
const baseX = marginX + ((col / cols) * (100 - 2 * marginX));
const baseY = marginY + ((row / rows) * (100 - 2 * marginY));
const baseX = marginX + (col / cols) * (100 - 2 * marginX);
const baseY = marginY + (row / rows) * (100 - 2 * marginY);
// Add limited randomness to the position (±5%) to maintain spacing
const randomOffsetX = getRandomInRange(-5, 5);
const randomOffsetY = getRandomInRange(-5, 5);
// Ensure positions stay within margins
const x = Math.max(marginX, Math.min(100 - marginX, baseX + randomOffsetX));
const y = Math.max(marginY, Math.min(100 - marginY, baseY + randomOffsetY));
// Check if this position is too close to any existing icon
let tooClose = false;
for (const existingIcon of icons) {
// Extract numeric values from percentage strings
const existingX = parseFloat(existingIcon.x);
const existingY = parseFloat(existingIcon.y);
// Calculate distance between points
const distance = Math.sqrt(
Math.pow(x - existingX, 2) +
Math.pow(y - existingY, 2)
);
const distance = Math.sqrt(Math.pow(x - existingX, 2) + Math.pow(y - existingY, 2));
// If too close to an existing icon, skip this position
if (distance < minDistance) {
tooClose = true;
break;
}
}
if (tooClose) {
continue;
}
// Randomly select an icon from the expanded set
const iconIndex = Math.floor(Math.random() * iconNames.length);
icons.push({
icon: iconNames[iconIndex],
x: `${x}%`,
@@ -184,14 +177,14 @@ const createSpacedIcons = (): BaseIconObject[] => {
});
}
}
return icons;
};
const icons: BaseIconObject[] = createSpacedIcons();
// Assign random colors to each icon
const iconsWithColors: IconWithColors[] = icons.map(icon => ({
const iconsWithColors: IconWithColors[] = icons.map((icon) => ({
icon: icon.icon,
x: icon.x,
y: icon.y,
@@ -202,85 +195,89 @@ const iconsWithColors: IconWithColors[] = icons.map(icon => ({
darkColor: getRandomColor(darkModeColors),
}));
---
<div class:list={['absolute inset-0', { 'backdrop-blur-sm bg-white/5 dark:bg-gray-900/10': isDark }]}>
<slot />
{showIcons && (
/* Decorative background icons with random placement */
<div id="background-icons" class="absolute inset-0 overflow-hidden pointer-events-none z-[-5]">
{iconsWithColors.map(({ icon, x, y, size, opacity, rotate, lightColor, darkColor }) => (
<div
class={`absolute ${lightColor} ${darkColor} background-icon`}
style={`left: ${x}; top: ${y}; opacity: ${opacity}; transform: rotate(${rotate});`}
>
<Icon name={icon} style={`width: ${size}; height: ${size};`} />
</div>
))}
</div>
)}
{
showIcons && (
/* Decorative background icons with random placement */
<div id="background-icons" class="absolute inset-0 overflow-hidden pointer-events-none z-[-5]">
{iconsWithColors.map(({ icon, x, y, size, opacity, rotate, lightColor, darkColor }) => (
<div
class={`absolute ${lightColor} ${darkColor} background-icon`}
style={`left: ${x}; top: ${y}; opacity: ${opacity}; transform: rotate(${rotate});`}
>
<Icon name={icon} style={`width: ${size}; height: ${size};`} />
</div>
))}
</div>
)
}
</div>
{showIcons && (
<script define:vars={{ disableParallax }}>
// Parallax scrolling effect for background icons
document.addEventListener('DOMContentLoaded', () => {
// Get all parallax icons
const parallaxIcons = document.querySelectorAll('.parallax-icon');
// Skip parallax on mobile devices for better performance or if parallax is disabled
const isMobile = window.matchMedia('(max-width: 768px)').matches;
if (isMobile || disableParallax) return;
// Variables to track scroll position
let lastScrollY = window.scrollY;
let ticking = false;
// Function to update icon positions based on scroll
const updateParallax = () => {
parallaxIcons.forEach((icon) => {
const depth = parseFloat(icon.getAttribute('data-depth') || '0.5');
// Calculate parallax offset based on scroll position and depth
// Lower depth value means the icon moves slower (appears further away)
const yOffset = (lastScrollY * depth * 0.15);
// Get the original rotation
const transformValue = icon.style.transform;
const rotateMatch = transformValue.match(/rotate\([^)]+\)/);
const rotateValue = rotateMatch ? rotateMatch[0] : 'rotate(0deg)';
// Apply transform with the original rotation plus the parallax offset
icon.style.transform = `${rotateValue} translate3d(0, ${yOffset}px, 0)`;
<script define:vars={{ disableParallax }}>
// Parallax scrolling effect for background icons
document.addEventListener('DOMContentLoaded', () => {
// Get all parallax icons
const parallaxIcons = document.querySelectorAll('.parallax-icon');
// Skip parallax on mobile devices for better performance or if parallax is disabled
const isMobile = window.matchMedia('(max-width: 768px)').matches;
if (isMobile || disableParallax) return;
// Variables to track scroll position
let lastScrollY = window.scrollY;
let ticking = false;
// Function to update icon positions based on scroll
const updateParallax = () => {
parallaxIcons.forEach((icon) => {
const depth = parseFloat(icon.getAttribute('data-depth') || '0.5');
// Calculate parallax offset based on scroll position and depth
// Lower depth value means the icon moves slower (appears further away)
const yOffset = lastScrollY * depth * 0.15;
// Get the original rotation
const transformValue = icon.style.transform;
const rotateMatch = transformValue.match(/rotate\([^)]+\)/);
const rotateValue = rotateMatch ? rotateMatch[0] : 'rotate(0deg)';
// Apply transform with the original rotation plus the parallax offset
icon.style.transform = `${rotateValue} translate3d(0, ${yOffset}px, 0)`;
});
ticking = false;
};
// Throttle scroll events for better performance
const onScroll = () => {
lastScrollY = window.scrollY;
if (!ticking) {
window.requestAnimationFrame(() => {
updateParallax();
ticking = false;
});
ticking = false;
};
// Throttle scroll events for better performance
const onScroll = () => {
lastScrollY = window.scrollY;
if (!ticking) {
window.requestAnimationFrame(() => {
updateParallax();
ticking = false;
});
ticking = true;
}
};
// Add scroll event listener
window.addEventListener('scroll', onScroll, { passive: true });
// Update on resize (debounced)
let resizeTimer;
window.addEventListener('resize', () => {
ticking = true;
}
};
// Add scroll event listener
window.addEventListener('scroll', onScroll, { passive: true });
// Update on resize (debounced)
let resizeTimer;
window.addEventListener(
'resize',
() => {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(() => {
// Check if device is now mobile and disable parallax if needed
const isMobileNow = window.matchMedia('(max-width: 768px)').matches;
if (isMobileNow) {
// Reset positions on mobile
parallaxIcons.forEach((icon) => {
@@ -294,10 +291,11 @@ const iconsWithColors: IconWithColors[] = icons.map(icon => ({
updateParallax();
}
}, 200);
}, { passive: true });
// Initial update
updateParallax();
});
</script>
)}
},
{ passive: true }
);
// Initial update
updateParallax();
});
</script>

12
src/components/ui/CompactTimeline.astro
View File

@@ -22,7 +22,7 @@ const {
{
items && items.length && (
<div class={twMerge("grid grid-cols-1 md:grid-cols-2 gap-4", containerClass)}>
<div class={twMerge('grid grid-cols-1 md:grid-cols-2 gap-4', containerClass)}>
{items.map(({ title, description, icon, classes: itemClasses = {} }) => (
<div
class={twMerge(
@@ -44,7 +44,11 @@ const {
{description && (
<div class="text-muted mt-2 overflow-hidden">
<div
class={twMerge('text-sm max-h-[6rem] hover:max-h-[300px] transition-all duration-500 ease-description', descriptionClass, itemClasses?.description)}
class={twMerge(
'text-sm max-h-[6rem] hover:max-h-[300px] transition-all duration-500 ease-description',
descriptionClass,
itemClasses?.description
)}
set:html={description}
/>
</div>
@@ -61,9 +65,9 @@ const {
.ease-description {
transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* Fade effect for the gradient overlay */
.hover\:opacity-0:hover {
opacity: 0;
}
</style>
</style>

86
src/components/ui/Form.astro
View File

@@ -15,20 +15,27 @@ const { inputs, textarea, disclaimer, button = 'Contact us', description = '' }
}
</style>
<form id="contact-form" name="contact" method="POST" class="needs-validation" data-netlify="true" data-netlify-honeypot="bot-field" novalidate>
<form
id="contact-form"
name="contact"
method="POST"
class="needs-validation"
data-netlify="true"
data-netlify-honeypot="bot-field"
novalidate
>
<!-- Form status messages -->
<div id="form-success" class="hidden mb-6 p-4 bg-green-100 border border-green-200 text-green-700 rounded-lg">
Your message has been sent successfully. We will get back to you soon!
</div>
<div id="form-error" class="hidden mb-6 p-4 bg-red-100 border border-red-200 text-red-700 rounded-lg">
There was an error sending your message. Please check all fields and try again.
</div>
<!-- Netlify form name -->
<input type="hidden" name="form-name" value="contact" />
<!-- Honeypot field to prevent spam -->
<p class="hidden">
<label>Don't fill this out if you're human: <input name="bot-field" /></label>
@@ -41,7 +48,8 @@ const { inputs, textarea, disclaimer, button = 'Contact us', description = '' }
<div class="mb-6">
{label && (
<label for={name} class="block text-sm font-medium">
{label}{required && <span class="text-red-600">*</span>}
{label}
{required && <span class="text-red-600">*</span>}
</label>
)}
<input
@@ -53,7 +61,7 @@ const { inputs, textarea, disclaimer, button = 'Contact us', description = '' }
class="py-3 px-4 block w-full text-md rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-slate-900"
required={required}
/>
<div class="invalid-feedback hidden text-red-600 text-sm mt-1"></div>
<div class="invalid-feedback hidden text-red-600 text-sm mt-1" />
</div>
)
)
@@ -63,7 +71,8 @@ const { inputs, textarea, disclaimer, button = 'Contact us', description = '' }
textarea && (
<div class="mb-6">
<label for="textarea" class="block text-sm font-medium">
{textarea.label}<span class="text-red-600">*</span>
{textarea.label}
<span class="text-red-600">*</span>
</label>
<textarea
id="textarea"
@@ -73,7 +82,7 @@ const { inputs, textarea, disclaimer, button = 'Contact us', description = '' }
class="py-3 px-4 block w-full text-md rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-slate-900"
required
/>
<div class="invalid-feedback hidden text-red-600 text-sm mt-1"></div>
<div class="invalid-feedback hidden text-red-600 text-sm mt-1" />
</div>
)
}
@@ -92,9 +101,10 @@ const { inputs, textarea, disclaimer, button = 'Contact us', description = '' }
</div>
<div class="ml-3">
<label for="disclaimer" class="cursor-pointer select-none text-sm text-gray-600 dark:text-gray-400">
{disclaimer.label}<span class="text-red-600">*</span>
{disclaimer.label}
<span class="text-red-600">*</span>
</label>
<div class="invalid-feedback hidden text-red-600 text-sm mt-1"></div>
<div class="invalid-feedback hidden text-red-600 text-sm mt-1" />
</div>
</div>
)
@@ -118,3 +128,57 @@ const { inputs, textarea, disclaimer, button = 'Contact us', description = '' }
)
}
</form>
<script>
const form = document.getElementById('contact-form') as HTMLFormElement;
if (form) {
form.addEventListener('submit', async (event) => {
event.preventDefault();
const formData = new FormData(form);
const data = Object.fromEntries(formData.entries());
try {
const response = await fetch('/.netlify/functions/contact', {
method: 'POST',
body: JSON.stringify(data),
});
if (response.ok) {
const result = await response.json();
console.log(result.message); // Log success message
const successElement = document.getElementById('form-success');
if (successElement) {
successElement.classList.remove('hidden');
}
const errorElement = document.getElementById('form-error');
if (errorElement) {
errorElement.classList.add('hidden');
}
form.reset(); // Clear the form
} else {
console.error('Error:', response.status);
const errorElement = document.getElementById('form-error');
if (errorElement) {
errorElement.classList.remove('hidden');
}
const successElement = document.getElementById('form-success');
if (successElement) {
successElement.classList.add('hidden');
}
}
} catch (error) {
console.error('Error:', error);
const errorElement = document.getElementById('form-error');
if (errorElement) {
errorElement.classList.remove('hidden');
}
const successElement = document.getElementById('form-success');
if (successElement) {
successElement.classList.add('hidden');
}
}
});
}
</script>

80
src/components/ui/GlobalBackground.astro
View File

@@ -70,7 +70,7 @@ const iconNames: string[] = [
'tabler:brand-github',
'tabler:device-desktop',
'tabler:brand-azure',
// Additional tech-related icons
'tabler:cpu',
'tabler:device-mobile',
@@ -79,7 +79,7 @@ const iconNames: string[] = [
'tabler:shield',
'tabler:lock',
'tabler:key',
// Tangentially related icons for visual diversity
'tabler:bulb',
'tabler:compass',
@@ -101,17 +101,13 @@ const getRandomRotation = (): string => {
// Function to get a random size
const getRandomSize = (isDarkMode: boolean = false): string => {
// Slightly larger size range for dark mode for better visibility
return isDarkMode
? `${getRandomInRange(160, 200)}px`
: `${getRandomInRange(140, 180)}px`;
return isDarkMode ? `${getRandomInRange(160, 200)}px` : `${getRandomInRange(140, 180)}px`;
};
// Function to get a random opacity
const getRandomOpacity = (isDarkMode: boolean = false): string => {
// Higher opacity range for dark mode for better visibility
return isDarkMode
? getRandomInRange(0.45, 0.55).toFixed(2)
: getRandomInRange(0.32, 0.38).toFixed(2);
return isDarkMode ? getRandomInRange(0.45, 0.55).toFixed(2) : getRandomInRange(0.32, 0.38).toFixed(2);
};
// Create a spacious layout with well-separated icons
@@ -119,14 +115,14 @@ const createSpacedIcons = (): BaseIconObject[] => {
const icons: BaseIconObject[] = [];
const rows = 10; // Increased from 6 to 10 for more coverage across the entire page
const cols = 6;
// Define larger margins to keep icons away from edges (in percentage)
const marginX = 10;
const marginY = 5; // Reduced from 10 to 5 to allow icons to span more of the page height
// Minimum distance between icons (in percentage points)
const minDistance = 15; // Reduced from 20 to 15 to allow more icons
// Create a base grid of positions
for (let row = 0; row < rows; row++) {
for (let col = 0; col < cols; col++) {
@@ -134,62 +130,59 @@ const createSpacedIcons = (): BaseIconObject[] => {
// For small screens: 88% chance to skip (showing ~1/3 of the icons)
// For larger screens: 65% chance to skip (original density)
const skipProbability = 0.65;
// We'll add a data attribute to each icon to control visibility based on screen size
let visibilityClass = '';
// Generate a random number to determine if we skip this position
const randomValue = Math.random();
// Skip for all screen sizes if below the base threshold
if (randomValue < skipProbability) {
continue;
}
// For values between 0.65 and 0.88, create the icon but mark it to be hidden on small screens
if (randomValue < 0.88) {
visibilityClass = 'hidden sm:block'; // Hidden on small screens, visible on sm and up
}
// Base position in the grid with margins applied
const baseX = marginX + ((col / cols) * (100 - 2 * marginX));
const baseY = marginY + ((row / rows) * (100 - 2 * marginY));
const baseX = marginX + (col / cols) * (100 - 2 * marginX);
const baseY = marginY + (row / rows) * (100 - 2 * marginY);
// Add limited randomness to the position (±5%) to maintain spacing
const randomOffsetX = getRandomInRange(-5, 5);
const randomOffsetY = getRandomInRange(-5, 5);
// Ensure positions stay within margins
const x = Math.max(marginX, Math.min(100 - marginX, baseX + randomOffsetX));
const y = Math.max(marginY, Math.min(100 - marginY, baseY + randomOffsetY));
// Check if this position is too close to any existing icon
let tooClose = false;
for (const existingIcon of icons) {
// Extract numeric values from percentage strings
const existingX = parseFloat(existingIcon.x);
const existingY = parseFloat(existingIcon.y);
// Calculate distance between points
const distance = Math.sqrt(
Math.pow(x - existingX, 2) +
Math.pow(y - existingY, 2)
);
const distance = Math.sqrt(Math.pow(x - existingX, 2) + Math.pow(y - existingY, 2));
// If too close to an existing icon, skip this position
if (distance < minDistance) {
tooClose = true;
break;
}
}
if (tooClose) {
continue;
}
// Randomly select an icon from the expanded set
const iconIndex = Math.floor(Math.random() * iconNames.length);
icons.push({
icon: iconNames[iconIndex],
x: `${x}%`,
@@ -201,15 +194,14 @@ const createSpacedIcons = (): BaseIconObject[] => {
});
}
}
return icons;
};
const icons: BaseIconObject[] = createSpacedIcons();
// Assign random colors to each icon
const iconsWithColors: IconWithColors[] = icons.map(icon => ({
const iconsWithColors: IconWithColors[] = icons.map((icon) => ({
icon: icon.icon,
x: icon.x,
y: icon.y,
@@ -224,18 +216,20 @@ const iconsWithColors: IconWithColors[] = icons.map(icon => ({
<div class="fixed inset-0 overflow-hidden pointer-events-none z-[-5]" aria-hidden="true">
<div class:list={['absolute inset-0', { 'backdrop-blur-sm bg-white/5 dark:bg-gray-900/10': isDark }]}></div>
{/* Decorative background icons with random placement */}
<div id="background-icons" class="absolute inset-0 overflow-hidden">
{iconsWithColors.map(({ icon, x, y, size, opacity, rotate, lightColor, darkColor, visibilityClass }) => (
<div
class={`absolute ${lightColor} ${darkColor} ${visibilityClass}`}
style={`left: ${x}; top: ${y}; opacity: ${opacity}; transform: rotate(${rotate});`}
>
<Icon name={icon} style={`width: ${size}; height: ${size};`} />
</div>
))}
{
iconsWithColors.map(({ icon, x, y, size, opacity, rotate, lightColor, darkColor, visibilityClass }) => (
<div
class={`absolute ${lightColor} ${darkColor} ${visibilityClass}`}
style={`left: ${x}; top: ${y}; opacity: ${opacity}; transform: rotate(${rotate});`}
>
<Icon name={icon} style={`width: ${size}; height: ${size};`} />
</div>
))
}
</div>
</div>
<!-- Parallax effect removed while maintaining random icon placement -->
<!-- Parallax effect removed while maintaining random icon placement -->

14
src/components/ui/Headline.astro
View File

@@ -20,16 +20,24 @@ const {
(title || subtitle || tagline) && (
<div class={twMerge('mb-8 md:mx-auto md:mb-12 text-center', containerClass)}>
{tagline && (
<p class="text-base text-secondary dark:text-blue-200 font-bold tracking-wide uppercase content-backdrop p-2 inline-block rounded-md" set:html={tagline} />
<p
class="text-base text-secondary dark:text-blue-200 font-bold tracking-wide uppercase content-backdrop p-2 inline-block rounded-md"
set:html={tagline}
/>
)}
{title && (
<h2
class={twMerge('font-bold leading-tighter tracking-tighter font-heading text-heading text-3xl content-backdrop p-2 block rounded-md', titleClass)}
class={twMerge(
'font-bold leading-tighter tracking-tighter font-heading text-heading text-3xl content-backdrop p-2 block rounded-md',
titleClass
)}
set:html={title}
/>
)}
{subtitle && <p class={twMerge('mt-2 text-muted content-backdrop p-2 rounded-md', subtitleClass)} set:html={subtitle} />}
{subtitle && (
<p class={twMerge('mt-2 text-muted content-backdrop p-2 rounded-md', subtitleClass)} set:html={subtitle} />
)}
</div>
)
}

85
src/components/ui/ImageModal.astro
View File

@@ -2,25 +2,44 @@
// ImageModal.astro - A reusable modal component for displaying enlarged images
---
<div id="image-modal" class="fixed inset-0 z-50 flex items-center justify-center opacity-0 pointer-events-none transition-opacity duration-300 ease-in-out">
<div
id="image-modal"
class="fixed inset-0 z-50 flex items-center justify-center opacity-0 pointer-events-none transition-opacity duration-300 ease-in-out"
>
<!-- Backdrop overlay -->
<div id="modal-backdrop" class="absolute inset-0 bg-black bg-opacity-75 backdrop-blur-sm transition-opacity duration-300"></div>
<div
id="modal-backdrop"
class="absolute inset-0 bg-black bg-opacity-75 backdrop-blur-sm transition-opacity duration-300"
>
</div>
<!-- Modal container with animation -->
<div id="modal-container" class="relative max-w-4xl mx-auto p-4 transform scale-95 transition-all duration-300 ease-in-out flex flex-col items-center">
<div
id="modal-container"
class="relative max-w-4xl mx-auto p-4 transform scale-95 transition-all duration-300 ease-in-out flex flex-col items-center"
>
<!-- Close button -->
<button
id="modal-close"
<button
id="modal-close"
class="absolute top-2 right-2 z-10 bg-white dark:bg-gray-800 rounded-full p-2 shadow-md hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200"
aria-label="Close modal"
>
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-600 dark:text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 text-gray-600 dark:text-gray-300"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
<!-- Image container -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden" style="min-height: 300px; max-height: 75vh;">
<div
class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden"
style="min-height: 300px; max-height: 75vh;"
>
<div class="flex items-center justify-center h-full w-full">
<img
id="modal-image"
@@ -31,7 +50,7 @@
/>
</div>
</div>
<!-- Caption -->
<div id="modal-caption" class="mt-2 text-center text-white text-lg font-medium"></div>
</div>
@@ -53,77 +72,77 @@
const modalImage = document.getElementById('modal-image') as HTMLImageElement;
const modalCaption = document.getElementById('modal-caption');
const closeButton = document.getElementById('modal-close');
// Function to open the modal with a specific image
function openModal(imgSrc, imgAlt) {
if (!modal || !modalImage || !modalCaption) return;
// Create a temporary image to get the natural dimensions
const tempImg = new Image();
tempImg.onload = function() {
tempImg.onload = function () {
// Calculate the certification section height (75% of viewport height as defined in the container)
const certSectionHeight = window.innerHeight * 0.75;
const maxHeight = certSectionHeight * 0.75; // 75% of the certification section height
// If the natural image height is smaller than the max height, use the natural height
if (tempImg.height < maxHeight) {
modalImage.style.setProperty('--cert-max-height', `${tempImg.height}px`);
} else {
modalImage.style.setProperty('--cert-max-height', `${maxHeight}px`);
}
// Set the image source and alt text
modalImage.src = imgSrc;
modalCaption.textContent = imgAlt;
// Make the modal visible
modal.classList.remove('opacity-0', 'pointer-events-none');
modal.classList.add('opacity-100', 'pointer-events-auto');
// Animate the container
if (modalContainer) {
modalContainer.classList.remove('scale-95');
modalContainer.classList.add('scale-100');
}
// Set focus to the close button for accessibility
if (closeButton) {
setTimeout(() => closeButton.focus(), 100);
}
};
// Start loading the image
tempImg.src = imgSrc;
// Prevent scrolling on the body
document.body.style.overflow = 'hidden';
}
// Function to close the modal
function closeModal() {
if (!modal || !modalContainer) return;
// Hide the modal with animation
modal.classList.remove('opacity-100', 'pointer-events-auto');
modal.classList.add('opacity-0', 'pointer-events-none');
// Animate the container
modalContainer.classList.remove('scale-100');
modalContainer.classList.add('scale-95');
// Re-enable scrolling
document.body.style.overflow = '';
// Clear the image source after animation completes
setTimeout(() => {
if (modalImage) modalImage.src = '';
if (modalCaption) modalCaption.textContent = '';
}, 300);
}
// Register the openImageModal function globally so it can be called from anywhere
window.openImageModal = openModal;
// Close modal when clicking the close button
if (closeButton) {
closeButton.addEventListener('click', (e) => {
@@ -131,7 +150,7 @@
closeModal();
});
}
// Close modal when clicking outside the image container
if (modal) {
modal.addEventListener('click', (e) => {
@@ -141,14 +160,14 @@
}
});
}
// Close modal when pressing Escape key
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') {
closeModal();
}
});
// Handle window resize to recalculate image dimensions
let resizeTimeout;
window.addEventListener('resize', () => {
@@ -158,7 +177,7 @@
// Get current image source and recalculate dimensions
const currentSrc = modalImage.src;
const currentAlt = modalCaption?.textContent || '';
// Close and reopen modal to trigger recalculation
closeModal();
setTimeout(() => openModal(currentSrc, currentAlt), 350);
@@ -166,4 +185,4 @@
}, 200); // Debounce resize events
});
});
</script>
</script>

78
src/components/ui/ItemGrid.astro
View File

@@ -19,40 +19,56 @@ const {
{
items && (
<div
class={twMerge(
`grid mx-auto gap-8 md:gap-y-12 ${
columns === 4
? 'lg:grid-cols-4 md:grid-cols-3 sm:grid-cols-2'
: columns === 3
? 'lg:grid-cols-3 sm:grid-cols-2'
: columns === 2
? 'sm:grid-cols-2 '
: ''
} grid-flow-row auto-rows-fr text-center sm:text-left`,
containerClass
)}
>
class={twMerge(
`grid mx-auto gap-8 md:gap-y-12 ${
columns === 4
? 'lg:grid-cols-4 md:grid-cols-3 sm:grid-cols-2'
: columns === 3
? 'lg:grid-cols-3 sm:grid-cols-2'
: columns === 2
? 'sm:grid-cols-2 '
: ''
} grid-flow-row auto-rows-fr text-center sm:text-left`,
containerClass
)}
>
{items.map(({ title, description, icon, callToAction, classes: itemClasses = {} }) => (
<div class="intersect-once motion-safe:md:opacity-0 motion-safe:md:intersect:animate-fade h-full">
<div class={twMerge('flex flex-col sm:flex-row max-w-md mx-auto sm:mx-0 h-full min-h-[220px] backdrop-blur-sm bg-white/15 dark:bg-transparent p-3 rounded-md border border-gray-200 dark:border-gray-700 hover:bg-white/30 hover:backdrop-blur-md dark:hover:backdrop-blur-md transition-all duration-300 ease-in-out', panelClass, itemClasses?.panel)}>
<div class="flex justify-center sm:justify-start flex-shrink-0 mb-2 sm:mb-0">
{(icon || defaultIcon) && (
<Icon
name={icon || defaultIcon}
class={twMerge('w-7 h-7 sm:mr-2 rtl:sm:mr-0 rtl:sm:ml-2', defaultIconClass, itemClasses?.icon)}
/>
)}
</div>
<div class="mt-0.5 flex flex-col overflow-hidden flex-grow items-center sm:items-start">
{title && <h3 class={twMerge('text-xl font-bold', titleClass, itemClasses?.title)}>{title}</h3>}
{description && (
<p
class={twMerge(`${title ? 'mt-3' : ''} text-muted text-base overflow-y-auto`, descriptionClass, itemClasses?.description)}
set:html={description}
/>
)}
<div
class={twMerge(
'flex flex-col sm:flex-row max-w-md mx-auto sm:mx-0 h-full min-h-[220px] backdrop-blur-sm bg-white/15 dark:bg-transparent p-3 rounded-md border border-gray-200 dark:border-gray-700 hover:bg-white/30 hover:backdrop-blur-md dark:hover:backdrop-blur-md transition-all duration-300 ease-in-out',
panelClass,
itemClasses?.panel
)}
>
<div class="flex justify-center sm:justify-start flex-shrink-0 mb-2 sm:mb-0">
{(icon || defaultIcon) && (
<Icon
name={icon || defaultIcon}
class={twMerge('w-7 h-7 sm:mr-2 rtl:sm:mr-0 rtl:sm:ml-2', defaultIconClass, itemClasses?.icon)}
/>
)}
</div>
<div class="mt-0.5 flex flex-col overflow-hidden flex-grow items-center sm:items-start">
{title && <h3 class={twMerge('text-xl font-bold', titleClass, itemClasses?.title)}>{title}</h3>}
{description && (
<p
class={twMerge(
`${title ? 'mt-3' : ''} text-muted text-base overflow-y-auto`,
descriptionClass,
itemClasses?.description
)}
set:html={description}
/>
)}
{callToAction && (
<div class={twMerge(`${title || description ? 'mt-3' : ''} mt-auto`, actionClass, itemClasses?.actionClass)}>
<div
class={twMerge(
`${title || description ? 'mt-3' : ''} mt-auto`,
actionClass,
itemClasses?.actionClass
)}
>
<Button variant="link" {...callToAction} />
</div>
)}

5
src/components/ui/ItemGrid2.astro
View File

@@ -45,7 +45,10 @@ const {
)}
<div class={twMerge('text-xl font-bold', titleClass, itemClasses?.title)}>{title}</div>
{description && (
<p class={twMerge('text-muted text-base mt-2', descriptionClass, itemClasses?.description)} set:html={description} />
<p
class={twMerge('text-muted text-base mt-2', descriptionClass, itemClasses?.description)}
set:html={description}
/>
)}
{callToAction && (
<div class="mt-2">

102
src/components/ui/ModernTimeline.astro
View File

@@ -26,18 +26,21 @@ const {
{
items && items.length && (
<div class={twMerge("relative mx-auto max-w-5xl", containerClass)}>
<div class={twMerge('relative mx-auto max-w-5xl', containerClass)}>
{/* Main timeline line */}
<div class="absolute left-4 md:left-1/2 top-0 h-full w-1 transform -translate-x-1/2 z-0 transition-all duration-300 ease-in-out shadow-sm bg-blue-700/15 dark:bg-blue-700/30" class:list={[timelineClass]}></div>
<div
class="absolute left-4 md:left-1/2 top-0 h-full w-1 transform -translate-x-1/2 z-0 transition-all duration-300 ease-in-out shadow-sm bg-blue-700/15 dark:bg-gray-800"
class:list={[timelineClass]}
/>
<div class="relative">
{items.map((item, index) => {
const { title, description, icon, classes: itemClasses = {} } = item;
const isEven = index % 2 === 0;
// Use the year property if available, otherwise try to extract from date
let year = item.year;
// If year is not provided, try to extract from date in the description
if (!year && description) {
// Look for a date pattern like MM-YYYY
@@ -46,24 +49,32 @@ const {
year = dateMatch[1];
}
}
return (
<div class={`relative ${compact ? 'mb-6' : 'mb-12'}`}>
{/* Year marker (if available) */}
{year && (
<div class={twMerge("absolute left-4 md:left-1/2 transform -translate-x-1/2 -top-4 font-bold text-sm z-10", yearClass)}>
<div
class={twMerge(
'absolute left-4 md:left-1/2 transform -translate-x-1/2 -top-4 font-bold text-sm z-10',
yearClass
)}
>
<span class="relative">
<span class="absolute inset-0 bg-white/20 backdrop-blur-sm rounded-md -z-10"></span>
<span class="absolute inset-0 bg-white/20 backdrop-blur-sm rounded-md -z-10" />
{year}
</span>
</div>
)}
{/* Timeline dot */}
<div class={`absolute left-4 md:left-1/2 transform -translate-x-1/2 top-5 ${compact ? 'w-3 h-3' : 'w-4 h-4'} rounded-full z-10 shadow-md transition-all duration-300 ease-in-out`} class:list={[timelineDotClass]}></div>
<div
class={`absolute left-4 md:left-1/2 transform -translate-x-1/2 top-5 ${compact ? 'w-3 h-3' : 'w-4 h-4'} rounded-full z-10 shadow-md transition-all duration-300 ease-in-out`}
class:list={[timelineDotClass]}
/>
{/* Content card */}
<div
<div
class={twMerge(
'relative ml-10 md:ml-0 md:w-[45%]',
isEven ? 'md:mr-auto md:pr-6' : 'md:ml-auto md:pl-6',
@@ -81,29 +92,51 @@ const {
{(icon || defaultIcon) && (
<Icon
name={icon || defaultIcon}
class={twMerge(`${compact ? 'w-6 h-6 p-1' : 'w-7 h-7 p-1.5'} rounded-full border-2 mr-2 flex-shrink-0`, defaultIconClass, itemClasses?.icon)}
class={twMerge(
`${compact ? 'w-6 h-6 p-1' : 'w-7 h-7 p-1.5'} rounded-full border-2 mr-2 flex-shrink-0`,
defaultIconClass,
itemClasses?.icon
)}
/>
)}
{title && (
<p
class={twMerge(
`${compact ? 'text-base' : 'text-lg'} font-bold`,
titleClass,
itemClasses?.title
)}
set:html={title}
/>
)}
{title && <p class={twMerge(`${compact ? 'text-base' : 'text-lg'} font-bold`, titleClass, itemClasses?.title)} set:html={title} />}
</div>
{description && (
<div class="max-h-0 group-hover:max-h-[500px] overflow-hidden transition-all duration-500 ease-in-out" data-details>
<div
class="max-h-0 group-hover:max-h-[500px] overflow-hidden transition-all duration-500 ease-in-out"
data-details
>
<div class="flex items-center justify-center mb-1 opacity-70 group-hover:opacity-0 transition-opacity duration-200 h-4">
<div class="w-6 h-1 bg-gray-300 dark:bg-gray-700 rounded-full"></div>
<div class="w-6 h-1 bg-gray-300 dark:bg-gray-700 rounded-full" />
</div>
<div
class={twMerge(`text-muted ${compact ? 'text-sm' : 'text-sm'} opacity-0 group-hover:opacity-100 transition-all duration-500 ease-in-out`, descriptionClass, itemClasses?.description)}
class={twMerge(
`text-muted ${compact ? 'text-sm' : 'text-sm'} opacity-0 group-hover:opacity-100 transition-all duration-500 ease-in-out`,
descriptionClass,
itemClasses?.description
)}
set:html={description}
/>
</div>
)}
</div>
{/* Connector line to timeline (visible only on desktop) */}
<div class={twMerge(
'absolute top-5 hidden md:block h-0.5 w-10 z-0',
isEven ? 'right-0 bg-gradient-to-r' : 'left-0 bg-gradient-to-l',
'from-transparent to-blue-700 dark:to-blue-700'
)}></div>
<div
class={twMerge(
'absolute top-5 hidden md:block h-0.5 w-10 z-0',
isEven ? 'right-0 bg-gradient-to-r' : 'left-0 bg-gradient-to-l',
'from-transparent to-blue-700 dark:to-blue-700'
)}
/>
</div>
</div>
);
@@ -125,37 +158,42 @@ const {
transform: translateY(0);
}
}
/* Card container styles */
.card-container {
min-height: 0;
height: auto;
transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition:
transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
will-change: transform, box-shadow;
}
/* Hover effect for details */
[data-details] {
transform-origin: top;
transition: max-height 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition:
max-height 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
will-change: max-height, opacity;
}
/* Add a subtle indicator that more content is available */
.group:not(:hover) [data-details] {
max-height: 0 !important;
overflow: hidden;
}
.group:hover [data-details] {
max-height: 550px; /* Large enough to fit content but still allows animation */
}
@keyframes fadeIn {
to { opacity: 1; }
to {
opacity: 1;
}
}
/* Responsive adjustments */
@media (max-width: 768px) {
.timeline-item {
@@ -163,4 +201,4 @@ const {
margin-left: 2.5rem;
}
}
</style>
</style>

24
src/components/ui/StaggeredTimeline.astro
View File

@@ -100,28 +100,22 @@ const {
{/* Responsive styles for small screens */}
<style>
.ease-staggered {
transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.hover\:opacity-0:hover {
opacity: 0;
}
@media (max-width: 768px) {
#timeline-item-0,
#timeline-item-1,
#timeline-item-2,
#timeline-item-3,
#timeline-item-4 {
[id^="timeline-item-"] {
margin-top: 0 !important;
margin-left: 2rem !important;
margin-right: 0 !important;
width: calc(100% - 2rem) !important;
}
}
/* Custom easing function for staggered timeline */
.ease-staggered {
transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* Fade effect for the gradient overlay */
.hover\:opacity-0:hover {
opacity: 0;
}
</style>
</div>
)

14
src/components/ui/WidgetWrapper.astro
View File

@@ -16,13 +16,13 @@ const WrapperTag = as;
---
<WrapperTag class="relative not-prose scroll-mt-[72px]" {...id ? { id } : {}}>
{!disableBackground && (
<div class="absolute inset-0 pointer-events-none -z-[1]" aria-hidden="true">
<slot name="bg">
{bg ? <Fragment set:html={bg} /> : <Background isDark={isDark} />}
</slot>
</div>
)}
{
!disableBackground && (
<div class="absolute inset-0 pointer-events-none -z-[1]" aria-hidden="true">
<slot name="bg">{bg ? <Fragment set:html={bg} /> : <Background isDark={isDark} />}</slot>
</div>
)
}
<div
class:list={[
twMerge(

4
src/components/widgets/BlogLatestPosts.astro
View File

@@ -52,7 +52,9 @@ const posts = APP_BLOG.isEnabled ? await findLatestPosts({ count }) : [];
</div>
)}
{information && <p class="text-muted dark:text-slate-400 lg:text-sm lg:max-w-md text-sm" set:html={information} />}
{information && (
<p class="text-muted dark:text-slate-400 lg:text-sm lg:max-w-md text-sm" set:html={information} />
)}
</div>
<Grid posts={posts} />

39
src/components/widgets/CompactSkills.astro
View File

@@ -19,10 +19,10 @@ const {
---
<WidgetWrapper id={id} isDark={isDark} containerClass={`max-w-7xl mx-auto ${classes?.container ?? ''}`} bg={bg}>
<Headline
title={title}
subtitle={subtitle}
tagline={tagline}
<Headline
title={title}
subtitle={subtitle}
tagline={tagline}
classes={{
container: 'max-w-3xl',
title: 'text-3xl lg:text-4xl',
@@ -30,17 +30,24 @@ const {
/>
<div class="mt-6 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
{items.map(({ title, description, icon }) => (
<div class="group backdrop-blur-sm bg-white/15 dark:bg-transparent p-3 rounded-lg shadow-sm hover:shadow-md transition-all duration-300 ease-in-out hover:bg-white/30 hover:backdrop-blur-md dark:hover:backdrop-blur-md border border-gray-200 dark:border-gray-700 hover:translate-y-[-2px]">
<div class="flex items-center mb-2">
<Icon name={icon || defaultIcon} class="w-5 h-5 mr-2 text-primary dark:text-blue-300 transition-transform duration-300 group-hover:scale-110 dark:shadow-blue-500/40 dark:shadow-sm" />
<h3 class="text-base font-semibold">{title}</h3>
{
items.map(({ title, description, icon }) => (
<div class="group backdrop-blur-sm bg-white/15 dark:bg-transparent p-3 rounded-lg shadow-sm hover:shadow-md transition-all duration-300 ease-in-out hover:bg-white/30 hover:backdrop-blur-md dark:hover:backdrop-blur-md border border-gray-200 dark:border-gray-700 hover:translate-y-[-2px]">
<div class="flex items-center mb-2">
<Icon
name={icon || defaultIcon}
class="w-5 h-5 mr-2 text-primary dark:text-blue-300 transition-transform duration-300 group-hover:scale-110 dark:shadow-blue-500/40 dark:shadow-sm"
/>
<h3 class="text-base font-semibold">{title}</h3>
</div>
<div class="text-muted overflow-hidden">
<p class="text-base max-h-[12rem] hover:max-h-[300px] transition-all duration-500 ease-skills">
{description}
</p>
</div>
</div>
<div class="text-muted overflow-hidden">
<p class="text-base max-h-[12rem] hover:max-h-[300px] transition-all duration-500 ease-skills">{description}</p>
</div>
</div>
))}
))
}
</div>
</WidgetWrapper>
@@ -49,9 +56,9 @@ const {
.ease-skills {
transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* Fade effect for the gradient overlay */
.hover\:opacity-0:hover {
opacity: 0;
}
</style>
</style>

2
src/components/widgets/CompactSteps.astro
View File

@@ -31,4 +31,4 @@ const {
/>
<CompactTimeline items={items} classes={classes?.items as Record<string, never>} />
</div>
</WidgetWrapper>
</WidgetWrapper>

6
src/components/widgets/Content.astro
View File

@@ -44,7 +44,11 @@ const {
<div class="mx-auto max-w-7xl p-4 md:px-8">
<div class={`md:flex ${isReversed ? 'md:flex-row-reverse' : ''} md:gap-16`}>
<div class="md:basis-1/2 self-center">
{content && <div class="mb-12 text-lg dark:text-slate-400 content-backdrop p-3 rounded-md" set:html={content} />}
{
content && (
<div class="mb-12 text-lg dark:text-slate-400 content-backdrop p-3 rounded-md" set:html={content} />
)
}
{
callToAction && (

61
src/components/widgets/Footer.astro
View File

@@ -27,25 +27,27 @@ export interface Props {
import { supportedLanguages } from '~/i18n/translations';
// Define the type for supported languages
type SupportedLanguage = typeof supportedLanguages[number];
type SupportedLanguage = (typeof supportedLanguages)[number];
// Get current language from URL
const currentPath = `/${Astro.url.pathname.replace(/^\/+|\/+$/g, '')}`;
const pathSegments = currentPath.split('/').filter(Boolean);
// Check for language in URL path
let currentLang = pathSegments[0] && supportedLanguages.includes(pathSegments[0] as SupportedLanguage)
? pathSegments[0] as SupportedLanguage
: null;
let currentLang =
pathSegments[0] && supportedLanguages.includes(pathSegments[0] as SupportedLanguage)
? (pathSegments[0] as SupportedLanguage)
: null;
// If no language in URL, check cookies
if (!currentLang) {
const cookies = Astro.request.headers.get('cookie') || '';
const cookieLanguage = cookies.split(';')
.map(cookie => cookie.trim())
.find(cookie => cookie.startsWith('preferredLanguage='))
const cookieLanguage = cookies
.split(';')
.map((cookie) => cookie.trim())
.find((cookie) => cookie.startsWith('preferredLanguage='))
?.split('=')[1];
if (cookieLanguage && supportedLanguages.includes(cookieLanguage as SupportedLanguage)) {
currentLang = cookieLanguage as SupportedLanguage;
} else {
@@ -60,7 +62,7 @@ const footerData = getFooterData(currentLang);
const {
secondaryLinks = footerData.secondaryLinks,
socialLinks = footerData.socialLinks,
theme = 'light'
theme = 'light',
} = Astro.props;
---
@@ -69,10 +71,8 @@ const {
<div
class="relative max-w-7xl mx-auto px-4 sm:px-6 dark:text-slate-300 intersect-once intersect-quarter intercept-no-queue motion-safe:md:opacity-0 motion-safe:md:intersect:animate-fade"
>
<!-- ✅ Combined Footer Section -->
<div class="flex flex-col md:flex-row md:justify-between py-6 md:py-8 space-y-6 md:space-y-0">
<!-- Left Section: Company Name and Business Details -->
<div class="flex flex-col items-start space-y-2">
<!-- Site Title -->
@@ -86,39 +86,28 @@ const {
</a>
<!-- Business Information (Dutch Law Requirements) -->
<div class="text-sm text-white-500 space-y-1">
<p>KVK: 87654321 | BTW: NL123456789B01</p>
<p>info@365devnet.eu</p>
</div>
</div>
<!-- Right Section: Social Icons and Terms/Privacy Links -->
<div class="flex flex-col items-start md:items-end space-y-4">
<!-- Social Icons -->
{
socialLinks?.length && (
<ul class="flex space-x-4">
{socialLinks.map(({ ariaLabel, href, icon }) => (
<li>
<a
class="text-muted dark:text-white-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg p-2 inline-flex items-center"
aria-label={ariaLabel}
href={href}
>
{icon && <Icon name={icon} class="w-5 h-5" />}
</a>
</li>
))}
</ul>
)
}
<div class="text-sm text-white-500 space-y-1">
<p>KVK: 87654321 | BTW: NL123456789B01</p>
</div>
<!-- Terms & Privacy Policy Links -->
<div class="flex items-center space-x-4 text-sm text-white-500">
{secondaryLinks.map(({ text, href }) => (
<a class="hover:text-gray-700 hover:underline dark:hover:text-gray-200 transition duration-150 ease-in-out" href={href}>
{text}
</a>
))}
{
secondaryLinks.map(({ text, href }) => (
<a
class="hover:text-gray-700 hover:underline dark:hover:text-gray-200 transition duration-150 ease-in-out"
href={href}
>
{text}
</a>
))
}
</div>
</div>
</div>
@@ -130,4 +119,4 @@ const {
border-radius: 0 !important;
overflow: hidden;
}
</style>
</style>

30
src/components/widgets/Header.astro
View File

@@ -7,7 +7,7 @@ import ToggleMenu from '~/components/common/ToggleMenu.astro';
import LanguageDropdown from '~/components/LanguageDropdown.astro';
import { getHomePermalink } from '~/utils/permalinks';
import { trimSlash, getAsset } from '~/utils/permalinks';
import { trimSlash } from '~/utils/permalinks';
import { getHeaderData } from '~/navigation';
interface Link {
@@ -40,21 +40,23 @@ const currentPath = `/${trimSlash(new URL(Astro.url).pathname)}`;
const pathSegments = currentPath.split('/').filter(Boolean);
// Define the type for supported languages
type SupportedLanguage = typeof supportedLanguages[number];
type SupportedLanguage = (typeof supportedLanguages)[number];
// Check for language in URL path
let currentLang = pathSegments[0] && supportedLanguages.includes(pathSegments[0] as SupportedLanguage)
? pathSegments[0] as SupportedLanguage
: null;
let currentLang =
pathSegments[0] && supportedLanguages.includes(pathSegments[0] as SupportedLanguage)
? (pathSegments[0] as SupportedLanguage)
: null;
// If no language in URL, check cookies
if (!currentLang) {
const cookies = Astro.request.headers.get('cookie') || '';
const cookieLanguage = cookies.split(';')
.map(cookie => cookie.trim())
.find(cookie => cookie.startsWith('preferredLanguage='))
const cookieLanguage = cookies
.split(';')
.map((cookie) => cookie.trim())
.find((cookie) => cookie.startsWith('preferredLanguage='))
?.split('=')[1];
if (cookieLanguage && supportedLanguages.includes(cookieLanguage as SupportedLanguage)) {
currentLang = cookieLanguage as SupportedLanguage;
} else {
@@ -65,7 +67,6 @@ if (!currentLang) {
// Get translated header data - ensure we're using the current language
const headerData = getHeaderData(currentLang);
console.log(`Header initialized with language: ${currentLang}`);
const {
id = 'header',
@@ -74,7 +75,7 @@ const {
isDark = false,
isFullWidth = false,
showToggleTheme = false,
showRssFeed = false,
position = 'center',
} = Astro.props;
---
@@ -93,7 +94,7 @@ const {
'relative text-default py-3 px-3 md:px-6 mx-auto w-full',
{
'md:flex md:justify-between': position !== 'center',
},
},
{
'md:grid md:grid-cols-3 md:items-center': position === 'center',
},
@@ -112,7 +113,8 @@ const {
<!-- Improved mobile navigation accessibility -->
<style>
@media (max-width: 767px) {
nav ul li a, nav ul li button {
nav ul li a,
nav ul li button {
padding: 0.75rem 1rem; /* Larger touch targets */
min-height: 44px; /* Minimum touch target size */
display: flex;
@@ -189,4 +191,4 @@ const {
</div>
</div>
</div>
</header>
</header>

14
src/components/widgets/Hero.astro
View File

@@ -26,13 +26,13 @@ const {
---
<section class="relative md:-mt-[76px] not-prose" {...id ? { id } : {}}>
{!disableBackground && (
<div class="absolute inset-0 pointer-events-none" aria-hidden="true">
<slot name="bg">
{bg ? <Fragment set:html={bg} /> : <Background isDark={isDark} disableParallax={true} />}
</slot>
</div>
)}
{
!disableBackground && (
<div class="absolute inset-0 pointer-events-none" aria-hidden="true">
<slot name="bg">{bg ? <Fragment set:html={bg} /> : <Background isDark={isDark} disableParallax={true} />}</slot>
</div>
)
}
<div class="relative max-w-7xl mx-auto px-4 sm:px-6">
<div class="pt-0 md:pt-[76px] pointer-events-none"></div>
<div class="py-12 md:py-20">

28
src/components/widgets/Testimonials.astro
View File

@@ -26,7 +26,12 @@ const {
{
testimonials &&
testimonials.map(({ title, linkUrl, name, issueDate, description, image }) => (
<a href={linkUrl} target="_blank" rel="noopener noreferrer" class="flex flex-col justify-start items-center p-2 md:p-4 rounded-md shadow-md backdrop-blur-sm bg-white/15 dark:bg-transparent border border-gray-200 dark:border-slate-600 hover:bg-white/30 hover:backdrop-blur-md dark:hover:backdrop-blur-md transition-all duration-300 ease-in-out hover:shadow-lg hover:translate-y-[-2px] w-[425px] mx-auto sm:mx-0">
<a
href={linkUrl}
target="_blank"
rel="noopener noreferrer"
class="flex flex-col justify-start items-center p-2 md:p-4 rounded-md shadow-md backdrop-blur-sm bg-white/15 dark:bg-transparent border border-gray-200 dark:border-slate-600 hover:bg-white/30 hover:backdrop-blur-md dark:hover:backdrop-blur-md transition-all duration-300 ease-in-out hover:shadow-lg hover:translate-y-[-2px] w-[425px] mx-auto sm:mx-0"
>
{title && <h2 class="text-lg font-medium leading-6 pb-4 text-center">{title}</h2>}
{image && (
<div class="h-[160px] w-[160px] border-slate-200 dark:border-slate-600 mx-auto">
@@ -42,10 +47,10 @@ const {
/>
</div>
)}
{/* Horizontal line directly under the image */}
<hr class="border-slate-200 dark:border-slate-600 my-4" />
{/* Text content takes up the remaining space */}
<div class="flex flex-col flex-grow items-center">
{name && <p class="text-lg font-semibold text-center">{name}</p>}
@@ -56,8 +61,7 @@ const {
))
}
</div>
{
callToAction && (
<div class="flex justify-center mx-auto w-fit mt-8 md:mt-12 font-medium">
@@ -68,12 +72,12 @@ const {
</WidgetWrapper>
<style>
@media (max-width: 640px) {
.grid {
justify-content: center;
@media (max-width: 640px) {
.grid {
justify-content: center;
}
.grid > a {
margin: 0 auto;
}
}
.grid > a {
margin: 0 auto;
}
}
</style>

30
src/components/widgets/WorkExperience.astro
View File

@@ -32,7 +32,7 @@ const {
} = Astro.props as Props;
// Transform the work experience items to the format expected by ModernTimeline
const timelineItems = items.map(item => {
const timelineItems = items.map((item) => {
// Extract year from date if available
let year: string | undefined = undefined;
if (item.date) {
@@ -43,7 +43,7 @@ const timelineItems = items.map(item => {
year = dateMatch[1];
}
}
return {
title: `<span class="${compact ? 'text-lg' : 'text-xl'}">${item.title}</span>${item.company ? `<span class="block ${compact ? 'text-sm' : 'text-sm'} font-normal text-gray-600 dark:text-gray-400">${item.company}</span>` : ''}`,
description: `<div class="transform-origin-top transition-transform duration-300">${item.description || ''}${item.description && (item.date || item.location) ? '<div class="mt-2"></div>' : ''}${item.date ? `<span class="block text-sm font-semibold text-gray-500 dark:text-gray-400">${item.date}</span>` : ''}${item.location ? `<span class="block text-sm text-gray-500 dark:text-gray-400">${item.location}</span>` : ''}</div>`,
@@ -56,15 +56,21 @@ const timelineItems = items.map(item => {
<WidgetWrapper id={id} isDark={isDark} bg={bg} classes={classes}>
<div class={`flex flex-col gap-${compact ? '8' : '12'} md:gap-${compact ? '12' : '16'}`}>
{title && (
<div class="flex flex-col gap-4 text-center">
{tagline && (
<p class="text-sm font-semibold uppercase tracking-wide text-primary dark:text-blue-200">{tagline}</p>
)}
{title && <h2 class={`${compact ? 'text-2xl md:text-3xl' : 'text-3xl md:text-4xl'} font-bold font-heading`}>{title}</h2>}
{subtitle && <p class={`${compact ? 'text-lg' : 'text-xl'} text-muted dark:text-slate-400`}>{subtitle}</p>}
</div>
)}
{
title && (
<div class="flex flex-col gap-4 text-center">
{tagline && (
<p class="text-sm font-semibold uppercase tracking-wide text-primary dark:text-blue-200">{tagline}</p>
)}
{title && (
<h2 class={`${compact ? 'text-2xl md:text-3xl' : 'text-3xl md:text-4xl'} font-bold font-heading`}>
{title}
</h2>
)}
{subtitle && <p class={`${compact ? 'text-lg' : 'text-xl'} text-muted dark:text-slate-400`}>{subtitle}</p>}
</div>
)
}
<ModernTimeline
items={timelineItems}
compact={compact}
@@ -79,4 +85,4 @@ const timelineItems = items.map(item => {
}}
/>
</div>
</WidgetWrapper>
</WidgetWrapper>

2
src/config.yaml
View File

@@ -9,7 +9,7 @@ metadata:
title:
default: 365DevNet
template: '%s — 365DevNet'
description: "The website 365DevNet serves as the personal portfolio of Richard Bergsma, an IT Systems and Automation Manager with over 15 years of experience. The site provides detailed information about his professional background, including his work experience, skills, and certifications. "
description: 'The website 365DevNet serves as the personal portfolio of Richard Bergsma, an IT Systems and Automation Manager with over 15 years of experience. The site provides detailed information about his professional background, including his work experience, skills, and certifications. '
robots:
index: true
follow: true

24
src/data/post/Custom_Connectors_in_Power_Automate.mdx
View File

@@ -1,11 +1,11 @@
---
title: "Custom Connectors in Power Automate – Extending Your Automation Capabilities"
excerpt: "Learn how to build custom connectors in Power Automate to integrate with any API and extend your automation capabilities. This comprehensive guide covers implementation steps, real-world use cases, and best practices for creating reliable connectors."
title: 'Custom Connectors in Power Automate – Extending Your Automation Capabilities'
excerpt: 'Learn how to build custom connectors in Power Automate to integrate with any API and extend your automation capabilities. This comprehensive guide covers implementation steps, real-world use cases, and best practices for creating reliable connectors.'
publishDate: 2025-02-26T02:30:00Z
author: "Richard Bergsma"
author: 'Richard Bergsma'
category: Automation
image: https://res.cloudinary.com/dmgi9movl/image/upload/v1708908828/PowerAutomate_CustomConnectors.png
tags: ["Power Automate", "Custom Connectors", "API Integration", "Microsoft Power Platform", "Low-Code Development"]
tags: ['Power Automate', 'Custom Connectors', 'API Integration', 'Microsoft Power Platform', 'Low-Code Development']
---
# 🚀 Custom Connectors in Power Automate – Extending Your Automation Capabilities
@@ -97,6 +97,7 @@ Select and configure the appropriate authentication type:
- **Windows authentication** – For internal corporate resources
For OAuth 2.0, you'll need to provide:
- Client ID and secret
- Authorization and token URLs
- Scope information
@@ -109,6 +110,7 @@ Operations represent the API endpoints your connector will expose:
1. Click **New action** to add an endpoint
2. Configure:
- **Summary** – Short description of what the operation does
- **Description** – Detailed explanation
- **Operation ID** – Unique identifier (no spaces)
@@ -129,6 +131,7 @@ For each operation, define:
- **Body parameters** – Data sent in the request body
For each parameter, specify:
- Name and description
- Whether it's required
- Data type and format
@@ -205,6 +208,7 @@ A manufacturing company needed to connect their modern Power Apps solution with
![Legacy System Integration](https://via.placeholder.com/800x400?text=Legacy+System+Integration)
**Results:**
- Avoided costly system replacement
- Enabled mobile inventory management
- Reduced manual data entry by 85%
@@ -216,6 +220,7 @@ A healthcare provider needed to integrate with a specialized medical records sys
**Solution:** They developed a custom connector that implemented the required authentication and data transformation, while ensuring HIPAA compliance.
**Results:**
- Automated patient record updates
- Reduced administrative workload
- Improved data accuracy and compliance
@@ -229,6 +234,7 @@ A financial services firm with a microservices architecture needed to orchestrat
![Microservices Architecture](https://via.placeholder.com/800x400?text=Microservices+Architecture)
**Results:**
- Simplified complex cross-service workflows
- Enabled business users to create automations
- Reduced development time for new integrations
@@ -359,6 +365,7 @@ Even with careful planning, you may encounter issues when implementing custom co
**Problem:** Connector fails to authenticate with the API.
**Solutions:**
- Verify credentials and client IDs/secrets
- Check for expired tokens or certificates
- Ensure redirect URLs are correctly configured
@@ -369,6 +376,7 @@ Even with careful planning, you may encounter issues when implementing custom co
**Problem:** API rejects requests due to schema validation failures.
**Solutions:**
- Compare your request schema with the API documentation
- Use the API's test endpoints to validate request formats
- Check for required fields that might be missing
@@ -381,6 +389,7 @@ Even with careful planning, you may encounter issues when implementing custom co
**Problem:** Connector operations are slow or time out.
**Solutions:**
- Implement pagination for large data sets
- Add appropriate timeouts in your connector definition
- Consider caching strategies for frequently accessed data
@@ -391,6 +400,7 @@ Even with careful planning, you may encounter issues when implementing custom co
**Problem:** Connector works in development but fails in production.
**Solutions:**
- Check environment-specific configurations
- Verify network connectivity and firewall rules
- Ensure service accounts have appropriate permissions
@@ -425,7 +435,7 @@ Whether you're connecting to legacy applications, specialized industry solutions
✅ **Extend your integration capabilities.**
✅ **Simplify complex API interactions.**
✅ **Create reusable components across the Power Platform.**
✅ **Empower citizen developers with secure, managed API access.**
✅ **Empower citizen developers with secure, managed API access.**
---
@@ -434,8 +444,8 @@ Whether you're connecting to legacy applications, specialized industry solutions
📌 **[Microsoft's Official Documentation on Custom Connectors](https://docs.microsoft.com/en-us/connectors/custom-connectors/)**
📌 **[Power Automate Community](https://powerusers.microsoft.com/t5/Power-Automate-Community/ct-p/MPACommunity)**
📌 **[OpenAPI Specification](https://swagger.io/specification/)**
📌 **[Power CAT Custom Connector DevKit](https://github.com/microsoft/PowerCAT.PowerShell.CustomConnector)**
📌 **[Power CAT Custom Connector DevKit](https://github.com/microsoft/PowerCAT.PowerShell.CustomConnector)**
---
Have you implemented custom connectors in your organization? I'd love to hear about your experiences and use cases! 🚀
Have you implemented custom connectors in your organization? I'd love to hear about your experiences and use cases! 🚀

20
src/data/post/Enterprise_App_Protection.mdx
View File

@@ -1,21 +1,21 @@
---
title: "Enterprise App Protection – Your First Line of Defense Against Phishing"
excerpt: "Protect your organization from phishing attacks impersonating Microsoft 365, DocuSign, Salesforce, and more. Enterprise App Protection automatically scans and warns about malicious links."
title: 'Enterprise App Protection – Your First Line of Defense Against Phishing'
excerpt: 'Protect your organization from phishing attacks impersonating Microsoft 365, DocuSign, Salesforce, and more. Enterprise App Protection automatically scans and warns about malicious links.'
publishDate: 2025-02-16T02:00:00Z
author: "Richard Bergsma"
author: 'Richard Bergsma'
category: Security
image: https://raw.githubusercontent.com/rrpbergsma/EnterpriseAppProtection/main/EnterpriseAppProtection.png
tags: ["Security", "Phishing", "Microsoft 365", "Browser Extensions", "Cybersecurity"]
tags: ['Security', 'Phishing', 'Microsoft 365', 'Browser Extensions', 'Cybersecurity']
---
# 🚀 Enterprise App Protection – Your First Line of Defense Against Phishing
## 🔍 Why This Extension Matters
**Phishing attacks** are one of the biggest cybersecurity threats in modern enterprises. Attackers frequently **spoof trusted brands** like **Microsoft 365, DocuSign, and Salesforce** to trick employees into entering credentials on fake websites.
With **Enterprise App Protection**, you get **real-time phishing detection** to help prevent accidental clicks on **fraudulent links** in:
- **Emails**
- **Microsoft Teams chats**
- **SharePoint documents**
@@ -66,9 +66,11 @@ Unlike many security extensions, **Enterprise App Protection prioritizes user pr
## 📥 How to Install
### **🔹 From the Chrome Web Store (Coming Soon)**
Once published, the extension will be available directly from the Chrome Web Store.
### **🔹 Manually Install (Developer Mode)**
1️⃣ **Download the latest version** from the [GitHub repository](https://github.com/rrpbergsma/EnterpriseAppProtection).
2️⃣ Open **`chrome://extensions/`** in Chrome or Edge.
3️⃣ Enable **Developer Mode** (top-right corner).
@@ -81,7 +83,7 @@ Once published, the extension will be available directly from the Chrome Web Sto
🔹 **Multi-browser support** – Firefox & Safari compatibility.
🔹 **Advanced AI-based phishing detection** – More intelligent scanning for phishing patterns.
🔹 **Expanded enterprise app coverage** – Supporting even more cloud-based applications.
🔹 **Expanded enterprise app coverage** – Supporting even more cloud-based applications.
If you have feature requests or want to contribute, check out our **GitHub repository**: 👉 **[View the Source Code on GitHub](https://github.com/rrpbergsma/EnterpriseAppProtection)**
@@ -93,15 +95,15 @@ Enterprise App Protection is your **first line of defense against phishing attac
✅ **Protect your accounts.**
✅ **Stay secure when using enterprise apps.**
✅ **Avoid falling victim to sophisticated phishing attacks.**
✅ **Avoid falling victim to sophisticated phishing attacks.**
---
## 🔗 Get Started Now
📌 **[Download the Extension](#)** (Coming Soon)
📌 **[View on GitHub](https://github.com/rrpbergsma/EnterpriseAppProtection)**
📌 **[View on GitHub](https://github.com/rrpbergsma/EnterpriseAppProtection)**
---
Would love to hear your feedback! Let me know what you think. 🚀
Would love to hear your feedback! Let me know what you think. 🚀

6
src/data/post/Nexthink_Empowering_Organizations_with_Proactive_IT_Management.mdx
View File

@@ -68,6 +68,7 @@ Organizations face increasing challenges in managing complex IT environments, es
One of Nexthink’s standout features is **Remote Actions**—a powerful tool that enables IT teams to automate diagnostics and remediation tasks across devices without user intervention.
### Key Capabilities of Remote Actions:
- **Automated Troubleshooting:** Run scripts to check system performance, clean caches, reset configurations, or diagnose network issues.
- **Bulk Execution:** Apply fixes to hundreds or thousands of devices simultaneously.
- **Silent Operations:** Perform actions without disrupting the end user’s workflow.
@@ -90,13 +91,16 @@ Nexthink Flow allows IT teams to create **multi-step, conditional workflows** th
![Nexthink Flow](https://via.placeholder.com/800x400?text=Nexthink+Flow)
### Key Features of Nexthink Flow:
- **Visual Workflow Builder:** Design automation flows using a drag-and-drop interface, making it easy to create complex logic without coding.
- **Conditional Logic:** Set conditions based on device status, user behavior, or system performance to trigger different actions automatically.
- **Cross-Platform Integration:** Integrate with external ITSM tools, cloud platforms, or internal APIs to orchestrate end-to-end processes.
- **Real-Time Feedback:** Monitor the success or failure of each step in the workflow for quick diagnostics and optimization.
### Example Use Case:
Imagine an employee reports a problem with their VPN connection:
1. **Trigger:** The issue is detected automatically via performance monitoring or reported through a Nexthink campaign.
2. **Diagnostics:** Flow initiates a series of Remote Actions to diagnose the issue—checking network settings, verifying credentials, and testing connectivity.
3. **Remediation:** If an issue is found, Flow applies the appropriate fix automatically. If not resolved, it escalates the issue by creating a ServiceNow ticket with all diagnostic data attached.
@@ -114,4 +118,4 @@ For organizations looking to enhance productivity, reduce IT costs, and improve
---
If you're interested in learning more about Nexthink or exploring how it can transform your IT operations, feel free to reach out or request a demo from [Nexthink’s official website](https://www.nexthink.com) rel="noopener noreferrer".
If you're interested in learning more about Nexthink or exploring how it can transform your IT operations, feel free to reach out or request a demo from [Nexthink’s official website](https://www.nexthink.com) rel="noopener noreferrer".

2
src/email-templates/README.md
View File

@@ -69,4 +69,4 @@ To test the email system:
1. Configure the `.env` file with your SMTP settings
2. Submit the contact form on the website
3. Check the logs for email sending attempts
4. In production mode, check your inbox for the actual emails
4. In production mode, check your inbox for the actual emails

6
src/email-templates/admin-notification.ts
View File

@@ -13,7 +13,7 @@ export function getAdminNotificationSubject(): string {
export function getAdminNotificationHtml(props: AdminNotificationProps): string {
const { name, email, message, submittedAt, ipAddress, userAgent } = props;
return `
<!DOCTYPE html>
<html>
@@ -92,7 +92,7 @@ export function getAdminNotificationHtml(props: AdminNotificationProps): string
export function getAdminNotificationText(props: AdminNotificationProps): string {
const { name, email, message, submittedAt, ipAddress, userAgent } = props;
return `
New Contact Form Submission
@@ -108,4 +108,4 @@ User Agent: ${userAgent || 'Not available'}
This is an automated email from your website contact form.
`;
}
}

10
src/email-templates/user-confirmation.ts
View File

@@ -17,9 +17,9 @@ export function getUserConfirmationHtml(props: UserConfirmationProps): string {
message,
submittedAt,
websiteName = process.env.WEBSITE_NAME || '365devnet.eu',
contactEmail = process.env.ADMIN_EMAIL || 'richard@bergsma.it'
contactEmail = process.env.ADMIN_EMAIL || 'richard@bergsma.it',
} = props;
return `
<!DOCTYPE html>
<html>
@@ -97,9 +97,9 @@ export function getUserConfirmationText(props: UserConfirmationProps): string {
message,
submittedAt,
websiteName = process.env.WEBSITE_NAME || '365devnet.eu',
contactEmail = process.env.ADMIN_EMAIL || 'richard@bergsma.it'
contactEmail = process.env.ADMIN_EMAIL || 'richard@bergsma.it',
} = props;
return `
Thank you for contacting ${websiteName}
@@ -117,4 +117,4 @@ The ${websiteName} Team
If you did not submit this contact form, please disregard this email or contact us at ${contactEmail}.
`;
}
}

686
src/i18n/translations.ts
View File

File diff suppressed because it is too large Load Diff

30
src/layouts/Layout.astro
View File

@@ -34,25 +34,31 @@ const { language, textDirection } = I18N;
<html lang={language} dir={textDirection} class="2xl:text-[20px]">
<head>
<CommonMeta />
<link rel="alternate" hreflang="en" href="https://www.365devnet.eu/en/" />
<link rel="alternate" hreflang="nl" href="https://www.365devnet.eu/nl/" />
<link rel="alternate" hreflang="de" href="https://www.365devnet.eu/de/" />
<link rel="alternate" hreflang="fr" href="https://www.365devnet.eu/fr/" />
<Favicons />
<CustomStyles />
<ApplyColorMode />
<Metadata {...metadata} />
<SiteVerification />
<Analytics />
<!-- Structured Data for SEO -->
<StructuredData data={{
"@context": "https://schema.org",
"@type": "WebSite",
"name": "365DevNet",
"url": Astro.url.origin,
"potentialAction": {
"@type": "SearchAction",
"target": `${Astro.url.origin}/search?q={search_term_string}`,
"query-input": "required name=search_term_string"
}
}} />
<StructuredData
data={{
'@context': 'https://schema.org',
'@type': 'WebSite',
name: '365DevNet',
url: Astro.url.origin,
potentialAction: {
'@type': 'SearchAction',
target: `${Astro.url.origin}/search?q={search_term_string}`,
'query-input': 'required name=search_term_string',
},
}}
/>
<!-- Comment the line below to disable View Transitions -->
<ClientRouter fallback="swap" />

26
src/navigation.ts
View File

@@ -3,14 +3,14 @@ import { getTranslation } from './i18n/translations';
export const getHeaderData = (lang = 'en') => {
const t = getTranslation(lang);
// For hash links on the homepage, we need special handling
const homeHashLink = (hash) => {
// Create an absolute path to the homepage with the language prefix
// and include the hash in the permalink generation
return getPermalink('/' + hash, 'page', lang);
};
return {
links: [
{
@@ -27,21 +27,29 @@ export const getHeaderData = (lang = 'en') => {
links: [
{ text: t.navigation.about, href: getPermalink('/aboutme', 'page', lang), isHashLink: false },
{ text: t.navigation.resume, href: getPermalink('/aboutme', 'page', lang) + '#resume', isHashLink: true },
{ text: t.navigation.certifications, href: getPermalink('/aboutme', 'page', lang) + '#certifications', isHashLink: true },
{
text: t.navigation.certifications,
href: getPermalink('/aboutme', 'page', lang) + '#certifications',
isHashLink: true,
},
{ text: t.navigation.skills, href: getPermalink('/aboutme', 'page', lang) + '#skills', isHashLink: true },
{ text: t.navigation.education, href: getPermalink('/aboutme', 'page', lang) + '#education', isHashLink: true },
]
{
text: t.navigation.education,
href: getPermalink('/aboutme', 'page', lang) + '#education',
isHashLink: true,
},
],
},
]
],
};
};
// For backward compatibility - but don't use this directly, always use getHeaderData(lang) to ensure translations
export const headerData = (lang = 'en') => getHeaderData(lang);
// For backward compatibility - but don't use this directly, always use getHeaderData(lang) to ensure translations
export const headerData = (lang = 'en') => getHeaderData(lang);
export const getFooterData = (lang = 'en') => {
const t = getTranslation(lang);
return {
secondaryLinks: [
{ text: t.footer.terms, href: getPermalink('/terms', 'page', lang) },

76
src/pages/[lang]/aboutme.astro
View File

@@ -8,12 +8,12 @@ import CompactSteps from '~/components/widgets/CompactSteps.astro';
import WorkExperience from '~/components/widgets/WorkExperience.astro';
import CompactCertifications from '~/components/widgets/CompactCertifications.astro';
import CompactSkills from '~/components/widgets/CompactSkills.astro';
import HomePageImage from '~/assets/images/richardbergsma.png'
import HomePageImage from '~/assets/images/richardbergsma.png';
import { getTranslation, supportedLanguages } from '~/i18n/translations';
export async function getStaticPaths() {
return supportedLanguages.map(lang => ({
return supportedLanguages.map((lang) => ({
params: { lang },
}));
}
@@ -26,39 +26,37 @@ if (!supportedLanguages.includes(lang)) {
const t = getTranslation(lang);
const metadata = {
title: 'About Me - ' + t.metadata.title,
title: `About Me - Richard Bergsma - IT Systems and Automation Manager - ${t.metadata.title}`,
description: t.hero.subtitle + ' - IT professional with experience in systems and automation, working at COFRA Holding in Amsterdam.',
};
---
<Layout metadata={metadata}>
<Fragment slot="announcement"></Fragment>
<!-- Person Structured Data for SEO -->
<StructuredData slot="structured-data" data={{
"@context": "https://schema.org",
"@type": "Person",
"name": "Richard Bergsma",
"jobTitle": "IT Systems and Automation Manager",
"description": t.hero.subtitle,
"image": Astro.url.origin + "/images/richardbergsma.png",
"url": Astro.url.origin,
"sameAs": [
"https://www.linkedin.com/in/rrpbergsma",
"https://github.com/rrpbergsma"
],
"knowsAbout": t.skills.items.map(skill => skill.title),
"worksFor": {
"@type": "Organization",
"name": "COFRA Holding C.V.",
"location": "Amsterdam"
}
}} />
<StructuredData
slot="structured-data"
data={{
'@context': 'https://schema.org',
'@type': 'Person',
name: 'Richard Bergsma',
jobTitle: 'IT Systems and Automation Manager',
description: t.hero.subtitle,
image: Astro.url.origin + '/images/richardbergsma.png',
url: Astro.url.origin,
sameAs: ['https://www.linkedin.com/in/rrpbergsma', 'https://github.com/rrpbergsma'],
knowsAbout: t.skills.items.map((skill) => skill.title),
worksFor: {
'@type': 'Organization',
name: 'COFRA Holding C.V.',
location: 'Amsterdam',
},
}}
/>
<!-- Hero Widget -->
<Hero
id="hero"
isDark={false}
>
<Hero id="hero" isDark={false}>
<Fragment slot="subtitle">
<strong class="text-3xl md:text-4xl">{t.hero.greeting}</strong><br /><br />{t.hero.subtitle}
</Fragment>
@@ -77,10 +75,14 @@ const metadata = {
>
<Fragment slot="content">
<h2 class="text-3xl font-bold tracking-tight sm:text-4xl mb-2">{t.about.title}</h2>
{t.about.content.map((paragraph) => (
<p>{paragraph}</p>
<br />
))}
{
t.about.content.map((paragraph) => (
<>
<p>{paragraph}</p>
<br />
</>
))
}
</Fragment>
<Fragment slot="bg">
@@ -93,7 +95,7 @@ const metadata = {
id="resume"
title={t.resume.title}
compact={true}
items={t.resume.experience.map(exp => ({
items={t.resume.experience.map((exp) => ({
title: exp.title,
company: exp.company,
date: exp.period,
@@ -113,7 +115,7 @@ const metadata = {
issueDate: cert.issueDate,
description: cert.description,
linkUrl: cert.linkUrl,
image: cert.image
image: cert.image,
}))}
/>
@@ -123,7 +125,7 @@ const metadata = {
title={t.skills.title}
subtitle={t.skills.subtitle}
defaultIcon="tabler:point-filled"
items={t.skills.items.map(item => ({
items={t.skills.items.map((item) => ({
title: item.title,
description: item.description,
}))}
@@ -133,9 +135,9 @@ const metadata = {
<CompactSteps
id="education"
title={t.education.title}
items={t.education.items.map(item => ({
items={t.education.items.map((item) => ({
title: item.title,
icon: 'tabler:school'
icon: 'tabler:school',
}))}
/>
</Layout>
</Layout>

133
src/pages/[lang]/index.astro
View File

@@ -11,7 +11,7 @@ import { getTranslation, supportedLanguages } from '~/i18n/translations';
import OurCommitmentImage from '~/assets/images/OurCommitment.webp';
export async function getStaticPaths() {
return supportedLanguages.map(lang => ({
return supportedLanguages.map((lang) => ({
params: { lang },
}));
}
@@ -52,72 +52,75 @@ const metadata = {
<!-- Features Widget -->
<Features
id="services"
tagline={t.homepage?.services?.tagline || "Services"}
title={t.homepage?.services?.title || "How I Can Help Your Organization"}
subtitle={t.homepage?.services?.subtitle || "I offer a range of specialized IT services to help businesses optimize their operations and digital infrastructure."}
items={(t.homepage?.services?.items || [
{
title: 'Workflow Automation',
description:
'Streamline your business processes with Power Automate solutions that reduce manual effort and increase operational efficiency.',
icon: 'tabler:settings-automation',
},
{
title: 'Intelligent Chatbots',
description:
'Develop smart chatbots in Copilot Studio that enhance user interactions through natural language processing and automated responses.',
icon: 'tabler:message-chatbot',
},
{
title: 'API Integrations',
description:
'Create seamless connections between your applications and services with custom API integrations for efficient data exchange.',
icon: 'tabler:api',
},
{
title: 'Microsoft 365 Management',
description:
'Optimize your Microsoft 365 environment with expert administration, security configurations, and service optimization.',
icon: 'tabler:brand-office',
},
{
title: 'SharePoint Solutions',
description:
'Set up, manage, and optimize SharePoint Online and on-premise deployments for effective document management and collaboration.',
icon: 'tabler:share',
},
{
title: 'IT Infrastructure Oversight',
description:
'Manage global IT infrastructures, including servers, networks, and end-user devices to ensure reliable operations.',
icon: 'tabler:server',
},
]).map(item => ({...item, icon: item.icon || 'tabler:check'}))}
tagline={t.homepage?.services?.tagline || 'Services'}
title={t.homepage?.services?.title || 'How I Can Help Your Organization'}
subtitle={t.homepage?.services?.subtitle ||
'I offer a range of specialized IT services to help businesses optimize their operations and digital infrastructure.'}
items={(
t.homepage?.services?.items || [
{
title: 'Workflow Automation',
description:
'Streamline your business processes with Power Automate solutions that reduce manual effort and increase operational efficiency.',
icon: 'tabler:settings-automation',
},
{
title: 'Intelligent Chatbots',
description:
'Develop smart chatbots in Copilot Studio that enhance user interactions through natural language processing and automated responses.',
icon: 'tabler:message-chatbot',
},
{
title: 'API Integrations',
description:
'Create seamless connections between your applications and services with custom API integrations for efficient data exchange.',
icon: 'tabler:api',
},
{
title: 'Microsoft 365 Management',
description:
'Optimize your Microsoft 365 environment with expert administration, security configurations, and service optimization.',
icon: 'tabler:brand-office',
},
{
title: 'SharePoint Solutions',
description:
'Set up, manage, and optimize SharePoint Online and on-premise deployments for effective document management and collaboration.',
icon: 'tabler:share',
},
{
title: 'IT Infrastructure Oversight',
description:
'Manage global IT infrastructures, including servers, networks, and end-user devices to ensure reliable operations.',
icon: 'tabler:server',
},
]
).map((item) => ({ ...item, icon: item.icon || 'tabler:check' }))}
/>
<!-- Content Widget -->
<Content
isReversed
tagline={t.homepage?.approach?.tagline || "About My Approach"}
title={t.homepage?.approach?.title || "Our Commitment"}
tagline={t.homepage?.approach?.tagline || 'About My Approach'}
title={t.homepage?.approach?.title || 'Our Commitment'}
items={[]}
image={{
src: OurCommitmentImage,
alt: 'IT Excellence and Innovation'
alt: 'IT Excellence and Innovation',
}}
>
<Fragment slot="content">
<div class="text-lg dark:text-slate-400">
{(t.homepage?.approach?.missionContent || [
'We are committed to driving IT excellence through strategic cloud optimization, process automation, and enterprise-grade technical support. We leverage cutting-edge technology to address complex business challenges and deliver measurable value.',
'With deep expertise in Microsoft technologies and automation, we empower organizations to transform their digital capabilities and achieve their business objectives. We design solutions that enhance user experience and maximize productivity, ensuring technology empowers your business.',
'We stay ahead of the curve by researching and implementing emerging technologies, providing scalable solutions that adapt to your evolving needs. Our approach aligns technical solutions with your core business objectives, delivering measurable ROI and a competitive advantage.',
'Our mission is to leverage technology to solve real business challenges and create value through innovation. With over 15 years of IT experience, we bring a wealth of knowledge in Microsoft technologies, automation tools, and system integration to help organizations transform their digital capabilities and achieve their strategic goals.'
]).map((paragraph, index, array) => (
<p class={index === array.length - 1 ? '' : 'mb-4'}>
{paragraph}
</p>
))}
{
(
t.homepage?.approach?.missionContent || [
'We are committed to driving IT excellence through strategic cloud optimization, process automation, and enterprise-grade technical support. We leverage cutting-edge technology to address complex business challenges and deliver measurable value.',
'With deep expertise in Microsoft technologies and automation, we empower organizations to transform their digital capabilities and achieve their business objectives. We design solutions that enhance user experience and maximize productivity, ensuring technology empowers your business.',
'We stay ahead of the curve by researching and implementing emerging technologies, providing scalable solutions that adapt to your evolving needs. Our approach aligns technical solutions with your core business objectives, delivering measurable ROI and a competitive advantage.',
'Our mission is to leverage technology to solve real business challenges and create value through innovation. With over 15 years of IT experience, we bring a wealth of knowledge in Microsoft technologies, automation tools, and system integration to help organizations transform their digital capabilities and achieve their strategic goals.',
]
).map((paragraph, index, array) => <p class={index === array.length - 1 ? '' : 'mb-4'}>{paragraph}</p>)
}
</div>
</Fragment>
</Content>
@@ -164,15 +167,19 @@ const metadata = {
>
<Fragment slot="title">{t.homepage?.callToAction?.title || 'Ready to optimize your IT systems?'}</Fragment>
<Fragment slot="subtitle">
{t.homepage?.callToAction?.subtitle || 'Let\'s discuss how I can help your organization streamline processes, enhance collaboration, and drive digital transformation.'}
{
t.homepage?.callToAction?.subtitle ||
"Let's discuss how I can help your organization streamline processes, enhance collaboration, and drive digital transformation."
}
</Fragment>
</CallToAction>
<!-- Contact Widget -->
<Contact
id="contact"
title={t.homepage?.contact?.title || "Get in Touch"}
subtitle={t.homepage?.contact?.subtitle || "Have a project in mind or questions about my services? Reach out and let's start a conversation."}
title={t.homepage?.contact?.title || 'Get in Touch'}
subtitle={t.homepage?.contact?.subtitle ||
"Have a project in mind or questions about my services? Reach out and let's start a conversation."}
inputs={[
{
type: 'text',
@@ -193,11 +200,11 @@ const metadata = {
rows: 8,
}}
disclaimer={{
label: t.homepage?.contact?.disclaimer ||
label:
t.homepage?.contact?.disclaimer ||
'By submitting this form, you agree to our privacy policy and allow us to use your information to contact you about our services.',
}}
description={t.homepage?.contact?.description || "I'll respond to your message as soon as possible. You can also connect with me on LinkedIn or GitHub."}
description={t.homepage?.contact?.description ||
"I'll respond to your message as soon as possible. You can also connect with me on LinkedIn or GitHub."}
/>
</Layout>
</Layout>

171
src/pages/[lang]/privacy.astro
View File

@@ -7,7 +7,7 @@ import Hero from '~/components/widgets/Hero.astro';
import { getTranslation, supportedLanguages } from '~/i18n/translations';
export async function getStaticPaths() {
return supportedLanguages.map(lang => ({
return supportedLanguages.map((lang) => ({
params: { lang },
}));
}
@@ -41,31 +41,28 @@ const tocItems = [
<Layout metadata={metadata}>
<Fragment slot="announcement"></Fragment>
<!-- Legal Document Structured Data for SEO -->
<StructuredData slot="structured-data" data={{
"@context": "https://schema.org",
"@type": "WebPage",
"name": "Privacy Policy",
"description": "Privacy Policy outlining our data collection practices, cookie usage, and your rights under GDPR.",
"url": Astro.url.origin + "/" + lang + "/privacy",
"mainEntity": {
"@type": "Article",
"headline": "Privacy Policy",
"datePublished": "2025-03-06",
"dateModified": "2025-03-06"
}
}} />
<StructuredData
slot="structured-data"
data={{
'@context': 'https://schema.org',
'@type': 'WebPage',
name: 'Privacy Policy',
description: 'Privacy Policy outlining our data collection practices, cookie usage, and your rights under GDPR.',
url: Astro.url.origin + '/' + lang + '/privacy',
mainEntity: {
'@type': 'Article',
headline: 'Privacy Policy',
datePublished: '2025-03-06',
dateModified: '2025-03-06',
},
}}
/>
<!-- Hero Widget -->
<Hero
id="hero"
title={t.footer.privacyPolicy}
isDark={false}
>
<Fragment slot="subtitle">
Last updated: March 6, 2025 (Added cookie consent banner)
</Fragment>
<Hero id="hero" title={t.footer.privacyPolicy} isDark={false}>
<Fragment slot="subtitle"> Last updated: March 6, 2025 (Added cookie consent banner) </Fragment>
</Hero>
<!-- Content Widget -->
@@ -74,37 +71,48 @@ const tocItems = [
<div class="bg-gray-50 dark:bg-slate-800 p-5 rounded-lg mb-10">
<h2 class="text-xl font-bold mb-3">Table of Contents</h2>
<ul class="space-y-2">
{tocItems.map(item => (
<li>
<a href={`#${item.id}`} class="text-blue-600 dark:text-blue-400 hover:underline">
{item.title}
</a>
</li>
))}
{
tocItems.map((item) => (
<li>
<a href={`#${item.id}`} class="text-blue-600 dark:text-blue-400 hover:underline">
{item.title}
</a>
</li>
))
}
</ul>
</div>
<!-- Privacy Policy Content -->
<div class="prose prose-lg max-w-4xl dark:prose-invert dark:prose-headings:text-slate-300 prose-md prose-headings:font-heading prose-headings:leading-tighter prose-headings:tracking-tighter prose-headings:font-bold prose-a:text-blue-600 dark:prose-a:text-blue-400 prose-img:rounded-md prose-img:shadow-lg backdrop-blur-sm bg-white/15 dark:bg-slate-900/30 p-6 rounded-lg border border-gray-200 dark:border-slate-800">
<div
class="prose prose-lg max-w-4xl dark:prose-invert dark:prose-headings:text-slate-300 prose-md prose-headings:font-heading prose-headings:leading-tighter prose-headings:tracking-tighter prose-headings:font-bold prose-a:text-blue-600 dark:prose-a:text-blue-400 prose-img:rounded-md prose-img:shadow-lg backdrop-blur-sm bg-white/15 dark:bg-slate-900/30 p-6 rounded-lg border border-gray-200 dark:border-slate-800"
>
<h2 id="introduction" class="text-2xl font-bold mt-8 mb-4">1. Introduction</h2>
<p>
This Privacy Policy explains how we handle information when you visit our website. We are committed to protecting your privacy and complying with applicable data protection laws, including the General Data Protection Regulation (GDPR).
This Privacy Policy explains how we handle information when you visit our website. We are committed to
protecting your privacy and complying with applicable data protection laws, including the General Data
Protection Regulation (GDPR).
</p>
<p>
We value transparency and want you to understand what information we collect, why we collect it, and how we use it. This policy applies to all visitors to our website.
We value transparency and want you to understand what information we collect, why we collect it, and how we use
it. This policy applies to all visitors to our website.
</p>
<h2 id="data-collection" class="text-2xl font-bold mt-8 mb-4">2. Data Collection Policy</h2>
<p>
<strong>We do not collect or store any personal user data.</strong> Our website is designed to provide information without requiring you to submit any personal information.
<strong>We do not collect or store any personal user data.</strong> Our website is designed to provide information
without requiring you to submit any personal information.
</p>
<p>
The only data stored is your preferences for language and theme settings, which are stored locally on your device using browser technologies (cookies and LocalStorage) and are never transmitted to our servers. More details about this are provided in the sections below.
</p>
<p>
We do not:
The only data stored is your preferences for language and theme settings, which are stored locally on your
device using browser technologies (cookies and LocalStorage) and are never transmitted to our servers. More
details about this are provided in the sections below.
</p>
<p>We do not:</p>
<ul>
<li>Collect your name, email address, or other contact information unless you voluntarily provide it through our contact form</li>
<li>
Collect your name, email address, or other contact information unless you voluntarily provide it through our
contact form
</li>
<li>Track your browsing behavior</li>
<li>Use analytics services that collect personal data</li>
<li>Use advertising or marketing tracking technologies</li>
@@ -112,15 +120,16 @@ const tocItems = [
<li>Store your preferences on our servers</li>
</ul>
<p>
If you choose to contact us using our contact form, the information you provide (such as your name and email address) will only be used to respond to your inquiry and will not be stored longer than necessary for that purpose.
If you choose to contact us using our contact form, the information you provide (such as your name and email
address) will only be used to respond to your inquiry and will not be stored longer than necessary for that
purpose.
</p>
<h2 id="cookie-usage" class="text-2xl font-bold mt-8 mb-4">3. Cookie & Storage Usage</h2>
<p>
<strong>Our website uses cookies strictly for essential functionality.</strong> These cookies are necessary for the proper functioning of our website and do not collect any personal information.
</p>
<p>
Details about the cookies we use:
<strong>Our website uses cookies strictly for essential functionality.</strong> These cookies are necessary for the
proper functioning of our website and do not collect any personal information.
</p>
<p>Details about the cookies we use:</p>
<ul>
<li>
<strong>Name:</strong> preferredLanguage
@@ -142,20 +151,23 @@ const tocItems = [
</li>
</ul>
<p>
In addition to cookies, we also use LocalStorage to store certain preferences. Details about this are provided in the next section.
In addition to cookies, we also use LocalStorage to store certain preferences. Details about this are provided
in the next section.
</p>
<p>
We do not use any tracking, analytics, or third-party cookies. No personal information is collected through our cookies or LocalStorage.
We do not use any tracking, analytics, or third-party cookies. No personal information is collected through our
cookies or LocalStorage.
</p>
<h2 id="localstorage" class="text-2xl font-bold mt-8 mb-4">4. LocalStorage Usage</h2>
<p>
<strong>Our website uses LocalStorage to enhance your experience by remembering your preferences and consent choices.</strong>
</p>
<p>
Details about our LocalStorage usage:
<strong
>Our website uses LocalStorage to enhance your experience by remembering your preferences and consent choices.</strong
>
</p>
<p>Details about our LocalStorage usage:</p>
<ul>
<li><strong>Data stored:</strong>
<li>
<strong>Data stored:</strong>
<ul>
<li>Theme preference (light/dark mode)</li>
<li>Cookie consent acceptance status</li>
@@ -166,14 +178,18 @@ const tocItems = [
<li><strong>Duration:</strong> Persists until you clear your browser's LocalStorage</li>
</ul>
<p>
LocalStorage is a technology that allows websites to store data directly in your browser. Unlike cookies, LocalStorage data is not sent with every request to the server, which makes it more efficient for storing user preferences that only need to be accessed by your browser.
LocalStorage is a technology that allows websites to store data directly in your browser. Unlike cookies,
LocalStorage data is not sent with every request to the server, which makes it more efficient for storing user
preferences that only need to be accessed by your browser.
</p>
<p>
No personal information is collected or stored in LocalStorage. The data is used solely to enhance your browsing experience by maintaining your preferred settings.
No personal information is collected or stored in LocalStorage. The data is used solely to enhance your browsing
experience by maintaining your preferred settings.
</p>
<h2 id="clear-preferences" class="text-2xl font-bold mt-8 mb-4">5. How to Clear Your Preferences</h2>
<p>
If you wish to reset your language or theme settings, you can clear your browser's cookies and LocalStorage data. Here's how to do it in common browsers:
If you wish to reset your language or theme settings, you can clear your browser's cookies and LocalStorage
data. Here's how to do it in common browsers:
</p>
<p>
<strong>Chrome:</strong>
@@ -208,44 +224,59 @@ const tocItems = [
<li>Find our website and click "Remove" or "Remove All"</li>
</ol>
<p>
After clearing your browser data, your language will reset to the default (English) and your theme will reset to the system default.
After clearing your browser data, your language will reset to the default (English) and your theme will reset to
the system default.
</p>
<h2 id="user-rights" class="text-2xl font-bold mt-8 mb-4">6. Your Rights (GDPR Compliance)</h2>
<p>
Under the General Data Protection Regulation (GDPR), you have various rights regarding your personal data. However, since we do not collect or store personal data (except for the language preference cookie which does not contain personal information), most of these rights are not applicable in practice.
</p>
<p>
Nevertheless, you have the right to:
Under the General Data Protection Regulation (GDPR), you have various rights regarding your personal data.
However, since we do not collect or store personal data (except for the language preference cookie which does
not contain personal information), most of these rights are not applicable in practice.
</p>
<p>Nevertheless, you have the right to:</p>
<ul>
<li><strong>Delete your cookie and LocalStorage data:</strong> You can delete the language preference cookie and theme preference LocalStorage data at any time through your browser settings (see section 5 for instructions)</li>
<li><strong>Be informed:</strong> This privacy policy provides transparent information about our data practices</li>
<li>
<strong>Delete your cookie and LocalStorage data:</strong> You can delete the language preference cookie and theme
preference LocalStorage data at any time through your browser settings (see section 5 for instructions)
</li>
<li>
<strong>Be informed:</strong> This privacy policy provides transparent information about our data practices
</li>
<li><strong>Object:</strong> You can choose to disable cookies and LocalStorage in your browser settings</li>
</ul>
<p>
If you have any questions about your rights or wish to exercise any of them, please contact us using the information provided at the end of this policy.
If you have any questions about your rights or wish to exercise any of them, please contact us using the
information provided at the end of this policy.
</p>
<h2 id="data-security" class="text-2xl font-bold mt-8 mb-4">7. Data Security</h2>
<p>
We take appropriate technical and organizational measures to ensure the security of any information transmitted to us. However, please be aware that no method of transmission over the internet or method of electronic storage is 100% secure.
We take appropriate technical and organizational measures to ensure the security of any information transmitted
to us. However, please be aware that no method of transmission over the internet or method of electronic storage
is 100% secure.
</p>
<p>
Our website uses HTTPS encryption to ensure that any communication between your browser and our website is secure.
Our website uses HTTPS encryption to ensure that any communication between your browser and our website is
secure.
</p>
<h2 id="third-party" class="text-2xl font-bold mt-8 mb-4">8. Third-Party Websites</h2>
<p>
Our website may contain links to other websites that are not operated by us. If you click on a third-party link, you will be directed to that third party's site. We strongly advise you to review the Privacy Policy of every site you visit.
Our website may contain links to other websites that are not operated by us. If you click on a third-party link,
you will be directed to that third party's site. We strongly advise you to review the Privacy Policy of every
site you visit.
</p>
<p>
We have no control over and assume no responsibility for the content, privacy policies, or practices of any third-party sites or services.
We have no control over and assume no responsibility for the content, privacy policies, or practices of any
third-party sites or services.
</p>
<h2 id="changes" class="text-2xl font-bold mt-8 mb-4">9. Changes to Privacy Policy</h2>
<p>
We may update our Privacy Policy from time to time. We will notify you of any changes by posting the new Privacy Policy on this page and updating the "Last updated" date at the top of this page.
We may update our Privacy Policy from time to time. We will notify you of any changes by posting the new Privacy
Policy on this page and updating the "Last updated" date at the top of this page.
</p>
<p>
You are advised to review this Privacy Policy periodically for any changes. Changes to this Privacy Policy are effective when they are posted on this page.
</p>
You are advised to review this Privacy Policy periodically for any changes. Changes to this Privacy Policy are
effective when they are posted on this page.
</p>
</div>
</div>
</Layout>
</Layout>

120
src/pages/[lang]/terms.astro
View File

@@ -7,7 +7,7 @@ import Hero from '~/components/widgets/Hero.astro';
import { getTranslation, supportedLanguages } from '~/i18n/translations';
export async function getStaticPaths() {
return supportedLanguages.map(lang => ({
return supportedLanguages.map((lang) => ({
params: { lang },
}));
}
@@ -39,31 +39,29 @@ const tocItems = [
<Layout metadata={metadata}>
<Fragment slot="announcement"></Fragment>
<!-- Legal Document Structured Data for SEO -->
<StructuredData slot="structured-data" data={{
"@context": "https://schema.org",
"@type": "WebPage",
"name": "Terms and Conditions",
"description": "Terms and Conditions for our website, outlining user rights, responsibilities, and legal information.",
"url": Astro.url.origin + "/" + lang + "/terms",
"mainEntity": {
"@type": "Article",
"headline": "Terms and Conditions",
"datePublished": "2025-03-06",
"dateModified": "2025-03-06"
}
}} />
<StructuredData
slot="structured-data"
data={{
'@context': 'https://schema.org',
'@type': 'WebPage',
name: 'Terms and Conditions',
description:
'Terms and Conditions for our website, outlining user rights, responsibilities, and legal information.',
url: Astro.url.origin + '/' + lang + '/terms',
mainEntity: {
'@type': 'Article',
headline: 'Terms and Conditions',
datePublished: '2025-03-06',
dateModified: '2025-03-06',
},
}}
/>
<!-- Hero Widget -->
<Hero
id="hero"
title={t.footer.terms}
isDark={false}
>
<Fragment slot="subtitle">
Last updated: March 6, 2025
</Fragment>
<Hero id="hero" title={t.footer.terms} isDark={false}>
<Fragment slot="subtitle"> Last updated: March 6, 2025 </Fragment>
</Hero>
<!-- Content Widget -->
@@ -72,75 +70,103 @@ const tocItems = [
<div class="bg-gray-50 dark:bg-slate-800 p-5 rounded-lg mb-10">
<h2 class="text-xl font-bold mb-3">Table of Contents</h2>
<ul class="space-y-2">
{tocItems.map(item => (
<li>
<a href={`#${item.id}`} class="text-blue-600 dark:text-blue-400 hover:underline">
{item.title}
</a>
</li>
))}
{
tocItems.map((item) => (
<li>
<a href={`#${item.id}`} class="text-blue-600 dark:text-blue-400 hover:underline">
{item.title}
</a>
</li>
))
}
</ul>
</div>
<!-- Terms Content -->
<div class="prose prose-lg max-w-4xl dark:prose-invert dark:prose-headings:text-slate-300 prose-md prose-headings:font-heading prose-headings:leading-tighter prose-headings:tracking-tighter prose-headings:font-bold prose-a:text-blue-600 dark:prose-a:text-blue-400 prose-img:rounded-md prose-img:shadow-lg backdrop-blur-sm bg-white/15 dark:bg-slate-900/30 p-6 rounded-lg border border-gray-200 dark:border-slate-800">
<div
class="prose prose-lg max-w-4xl dark:prose-invert dark:prose-headings:text-slate-300 prose-md prose-headings:font-heading prose-headings:leading-tighter prose-headings:tracking-tighter prose-headings:font-bold prose-a:text-blue-600 dark:prose-a:text-blue-400 prose-img:rounded-md prose-img:shadow-lg backdrop-blur-sm bg-white/15 dark:bg-slate-900/30 p-6 rounded-lg border border-gray-200 dark:border-slate-800"
>
<p>
Please read these terms and conditions carefully before using our website. By accessing or using our website, you agree to be bound by these terms and conditions.
Please read these terms and conditions carefully before using our website. By accessing or using our website,
you agree to be bound by these terms and conditions.
</p>
<h2 id="scope" class="text-2xl font-bold mt-8 mb-4">1. Scope of Services</h2>
<p>
Our website provides information about our professional services, expertise, and industry insights. The content on this website is for general informational purposes only and does not constitute professional advice. We may update, modify, or remove content at any time without notice.
Our website provides information about our professional services, expertise, and industry insights. The content
on this website is for general informational purposes only and does not constitute professional advice. We may
update, modify, or remove content at any time without notice.
</p>
<h2 id="user-rights" class="text-2xl font-bold mt-8 mb-4">2. User Rights & Responsibilities</h2>
<p>
When using our website, you agree to:
</p>
<p>When using our website, you agree to:</p>
<ul>
<li>Use the website in accordance with these terms and conditions and all applicable laws and regulations</li>
<li>Not use the website in any way that could damage, disable, overburden, or impair our services</li>
<li>Not attempt to gain unauthorized access to any part of the website or any system or network connected to the website</li>
<li>
Not attempt to gain unauthorized access to any part of the website or any system or network connected to the
website
</li>
<li>Not use any automated means to access or collect data from the website</li>
<li>Not use the website to transmit any harmful code or material</li>
</ul>
<h2 id="intellectual-property" class="text-2xl font-bold mt-8 mb-4">3. Intellectual Property</h2>
<p>
All content on this website, including but not limited to text, graphics, logos, images, audio clips, digital downloads, and data compilations, is the property of the website owner or its content suppliers and is protected by Dutch and international copyright laws.
All content on this website, including but not limited to text, graphics, logos, images, audio clips, digital
downloads, and data compilations, is the property of the website owner or its content suppliers and is protected
by Dutch and international copyright laws.
</p>
<p>
You may view, download, and print content from this website for your personal, non-commercial use, provided that you do not modify the content and that you retain all copyright and other proprietary notices.
You may view, download, and print content from this website for your personal, non-commercial use, provided that
you do not modify the content and that you retain all copyright and other proprietary notices.
</p>
<h2 id="liability" class="text-2xl font-bold mt-8 mb-4">4. Limitation of Liability</h2>
<p>
To the fullest extent permitted by applicable law, we exclude all representations, warranties, and conditions relating to our website and the use of this website. We will not be liable for any direct, indirect, or consequential loss or damage arising under these terms and conditions or in connection with our website, whether arising in tort, contract, or otherwise, including, without limitation, any loss of profit, contracts, business, goodwill, data, income, revenue, or anticipated savings.
To the fullest extent permitted by applicable law, we exclude all representations, warranties, and conditions
relating to our website and the use of this website. We will not be liable for any direct, indirect, or
consequential loss or damage arising under these terms and conditions or in connection with our website, whether
arising in tort, contract, or otherwise, including, without limitation, any loss of profit, contracts, business,
goodwill, data, income, revenue, or anticipated savings.
</p>
<p>
This does not exclude or limit our liability for death or personal injury resulting from our negligence, nor our liability for fraudulent misrepresentation or misrepresentation as to a fundamental matter, nor any other liability which cannot be excluded or limited under applicable law.
This does not exclude or limit our liability for death or personal injury resulting from our negligence, nor our
liability for fraudulent misrepresentation or misrepresentation as to a fundamental matter, nor any other
liability which cannot be excluded or limited under applicable law.
</p>
<h2 id="governing-law" class="text-2xl font-bold mt-8 mb-4">5. Governing Law</h2>
<p>
These terms and conditions are governed by and construed in accordance with the laws of the Netherlands. Any disputes relating to these terms and conditions shall be subject to the exclusive jurisdiction of the courts of the Netherlands.
These terms and conditions are governed by and construed in accordance with the laws of the Netherlands. Any
disputes relating to these terms and conditions shall be subject to the exclusive jurisdiction of the courts of
the Netherlands.
</p>
<p>
If you are a consumer, you will benefit from any mandatory provisions of the law of the country in which you are resident. Nothing in these terms and conditions affects your rights as a consumer to rely on such mandatory provisions of local law.
If you are a consumer, you will benefit from any mandatory provisions of the law of the country in which you are
resident. Nothing in these terms and conditions affects your rights as a consumer to rely on such mandatory
provisions of local law.
</p>
<h2 id="cookies" class="text-2xl font-bold mt-8 mb-4">6. Cookie Usage</h2>
<p>
Our website uses only one cookie, which is used exclusively for storing your selected language preference. This cookie is essential for the proper functioning of the language selection feature on our website. We do not use any tracking, analytics, or third-party cookies.
Our website uses only one cookie, which is used exclusively for storing your selected language preference. This
cookie is essential for the proper functioning of the language selection feature on our website. We do not use
any tracking, analytics, or third-party cookies.
</p>
<p>
The language preference cookie stores only your selected language choice and does not collect any personal information. This cookie is stored on your device for a period of 365 days, after which it will expire unless you visit our website again.
The language preference cookie stores only your selected language choice and does not collect any personal
information. This cookie is stored on your device for a period of 365 days, after which it will expire unless
you visit our website again.
</p>
<h2 id="changes" class="text-2xl font-bold mt-8 mb-4">7. Changes to Terms</h2>
<p>
We may revise these terms and conditions at any time by amending this page. You are expected to check this page from time to time to take notice of any changes we make, as they are legally binding on you. Some of the provisions contained in these terms and conditions may also be superseded by provisions or notices published elsewhere on our website.
We may revise these terms and conditions at any time by amending this page. You are expected to check this page
from time to time to take notice of any changes we make, as they are legally binding on you. Some of the
provisions contained in these terms and conditions may also be superseded by provisions or notices published
elsewhere on our website.
</p>
</div>
</div>
</Layout>
</Layout>

17
src/pages/aboutme.astro
View File

@@ -4,24 +4,25 @@ import { supportedLanguages } from '~/i18n/translations';
// Check for language preference in cookies (set by client-side JS)
const cookies = Astro.request.headers.get('cookie') || '';
const cookieLanguage = cookies.split(';')
.map(cookie => cookie.trim())
.find(cookie => cookie.startsWith('preferredLanguage='))
const cookieLanguage = cookies
.split(';')
.map((cookie) => cookie.trim())
.find((cookie) => cookie.startsWith('preferredLanguage='))
?.split('=')[1];
// Get the user's preferred language from the browser if no cookie
const acceptLanguage = Astro.request.headers.get('accept-language') || '';
// Define the type for supported languages
type SupportedLanguage = typeof supportedLanguages[number];
type SupportedLanguage = (typeof supportedLanguages)[number];
// Use cookie language if available, otherwise detect from browser
const preferredLanguage =
(cookieLanguage && supportedLanguages.includes(cookieLanguage as SupportedLanguage))
cookieLanguage && supportedLanguages.includes(cookieLanguage as SupportedLanguage)
? cookieLanguage
: acceptLanguage
.split(',')
.map(lang => lang.split(';')[0].trim().substring(0, 2))
.find(lang => supportedLanguages.includes(lang as SupportedLanguage)) || 'en';
.map((lang) => lang.split(';')[0].trim().substring(0, 2))
.find((lang) => supportedLanguages.includes(lang as SupportedLanguage)) || 'en';
// Get the hash fragment if present
const url = new URL(Astro.request.url);
@@ -29,4 +30,4 @@ const hash = url.hash;
// Redirect to the language-specific about me page
return Astro.redirect(`/${preferredLanguage}/aboutme${hash}`);
---
---

154
src/pages/api/contact.ts
View File

@@ -4,7 +4,7 @@ import {
validateCsrfToken,
checkRateLimit,
sendAdminNotification,
sendUserConfirmation
sendUserConfirmation,
} from '../../utils/email-handler';
// Enhanced email validation with more comprehensive regex
@@ -20,52 +20,67 @@ const isSpam = (content: string, name: string, email: string): boolean => {
const lowerContent = content.toLowerCase();
const lowerName = name.toLowerCase();
const lowerEmail = email.toLowerCase();
// Common spam keywords
const spamPatterns = [
'viagra', 'cialis', 'casino', 'lottery', 'prize', 'winner',
'free money', 'buy now', 'click here', 'earn money', 'make money',
'investment opportunity', 'bitcoin', 'cryptocurrency', 'forex',
'weight loss', 'diet pill', 'enlargement', 'cheap medication'
'viagra',
'cialis',
'casino',
'lottery',
'prize',
'winner',
'free money',
'buy now',
'click here',
'earn money',
'make money',
'investment opportunity',
'bitcoin',
'cryptocurrency',
'forex',
'weight loss',
'diet pill',
'enlargement',
'cheap medication',
];
// Check for spam keywords in content
if (spamPatterns.some(pattern => lowerContent.includes(pattern))) {
if (spamPatterns.some((pattern) => lowerContent.includes(pattern))) {
return true;
}
// Check for spam keywords in name or email
if (spamPatterns.some(pattern => lowerName.includes(pattern) || lowerEmail.includes(pattern))) {
if (spamPatterns.some((pattern) => lowerName.includes(pattern) || lowerEmail.includes(pattern))) {
return true;
}
// Check for excessive capitalization (shouting)
const uppercaseRatio = (content.match(/[A-Z]/g) || []).length / content.length;
if (uppercaseRatio > 0.5 && content.length > 20) {
return true;
}
// Check for excessive special characters
const specialChars = "!@#$%^&*()_+-=[]{}\\|;:'\",.<>/?";
const specialChars = '!@#$%^&*()_+-=[]{}\\|;:\'",.<>/?';
let specialCharCount = 0;
for (let i = 0; i < content.length; i++) {
if (specialChars.includes(content[i])) {
specialCharCount++;
}
}
const specialCharRatio = specialCharCount / content.length;
if (specialCharRatio > 0.3 && content.length > 20) {
return true;
}
// Check for excessive URLs - count http:// and https:// occurrences
const urlCount = content.split('http').length - 1;
if (urlCount > 2) {
return true;
}
return false;
};
@@ -73,34 +88,34 @@ const isSpam = (content: string, name: string, email: string): boolean => {
export const GET: APIRoute = async ({ request }) => {
const url = new URL(request.url);
const csrfRequested = url.searchParams.get('csrf') === 'true';
if (csrfRequested) {
// Generate and return a CSRF token
const csrfToken = generateCsrfToken();
return new Response(
JSON.stringify({
csrfToken
csrfToken,
}),
{
status: 200,
headers: {
'Content-Type': 'application/json'
}
'Content-Type': 'application/json',
},
}
);
}
// Default response for GET requests
return new Response(
JSON.stringify({
message: 'Contact API endpoint is working. Please use POST to submit the form.'
message: 'Contact API endpoint is working. Please use POST to submit the form.',
}),
{
status: 200,
headers: {
'Content-Type': 'application/json'
}
'Content-Type': 'application/json',
},
}
);
};
@@ -108,158 +123,163 @@ export const GET: APIRoute = async ({ request }) => {
export const POST: APIRoute = async ({ request, clientAddress }) => {
try {
console.log('Contact form submission received');
// Get client IP address for rate limiting
const ipAddress = clientAddress || '0.0.0.0';
console.log('Client IP:', ipAddress);
// Check rate limit
const rateLimitCheck = await checkRateLimit(ipAddress);
console.log('Rate limit check:', rateLimitCheck);
if (rateLimitCheck.limited) {
console.log('Rate limit exceeded');
return new Response(
JSON.stringify({
success: false,
errors: {
rateLimit: rateLimitCheck.message
}
rateLimit: rateLimitCheck.message,
},
}),
{
status: 429,
headers: {
'Content-Type': 'application/json',
'Retry-After': '3600'
}
'Retry-After': '3600',
},
}
);
}
// Get form data
const formData = await request.formData();
console.log('Form data received');
// Log all form data keys
console.log('Form data keys:', [...formData.keys()]);
const name = formData.get('name')?.toString() || '';
const email = formData.get('email')?.toString() || '';
const message = formData.get('message')?.toString() || '';
const disclaimer = formData.get('disclaimer')?.toString() === 'on';
const csrfToken = formData.get('csrf_token')?.toString() || '';
console.log('Form data values:', { name, email, messageLength: message.length, disclaimer, csrfToken: csrfToken ? 'present' : 'missing' });
console.log('Form data values:', {
name,
email,
messageLength: message.length,
disclaimer,
csrfToken: csrfToken ? 'present' : 'missing',
});
// Get user agent for logging and spam detection
const userAgent = request.headers.get('user-agent') || 'Unknown';
// Validate form data
const errors: Record<string, string> = {};
// Validate CSRF token
if (!validateCsrfToken(csrfToken)) {
errors.csrf = 'Invalid or expired security token. Please refresh the page and try again.';
}
if (!name) {
errors.name = 'Please enter your name';
} else if (name.length < 2) {
errors.name = 'Your name must be at least 2 characters long';
}
if (!email) {
errors.email = 'Please enter your email address';
} else if (!isValidEmail(email)) {
errors.email = 'Please enter a valid email address (e.g., name@example.com)';
}
if (!message) {
errors.message = 'Please enter your message';
} else if (message.length < 10) {
errors.message = 'Your message must be at least 10 characters long';
}
if (!disclaimer) {
errors.disclaimer = 'Please check the required consent box before submitting';
}
// Check for spam
if (isSpam(message, name, email)) {
errors.spam = 'Your message was flagged as potential spam. Please revise your message and try again.';
}
// If there are validation errors, return them
if (Object.keys(errors).length > 0) {
return new Response(
JSON.stringify({
success: false,
errors
errors,
}),
{
status: 400,
headers: {
'Content-Type': 'application/json'
}
'Content-Type': 'application/json',
},
}
);
}
// Send emails
console.log('Attempting to send admin notification email');
const adminEmailSent = await sendAdminNotification(name, email, message, ipAddress, userAgent);
console.log('Admin email sent result:', adminEmailSent);
console.log('Attempting to send user confirmation email');
const userEmailSent = await sendUserConfirmation(name, email, message);
console.log('User email sent result:', userEmailSent);
// Check if emails were sent successfully
if (!adminEmailSent || !userEmailSent) {
console.error('Failed to send one or more emails:', { adminEmailSent, userEmailSent });
return new Response(
JSON.stringify({
success: false,
message: 'There was an issue sending your message. Please try again later.'
message: 'There was an issue sending your message. Please try again later.',
}),
{
status: 500,
headers: {
'Content-Type': 'application/json'
}
'Content-Type': 'application/json',
},
}
);
}
// Return success response
return new Response(
JSON.stringify({
success: true,
message: 'Your message has been sent successfully. We will get back to you soon!'
message: 'Your message has been sent successfully. We will get back to you soon!',
}),
{
status: 200,
headers: {
'Content-Type': 'application/json'
}
'Content-Type': 'application/json',
},
}
);
} catch (error) {
console.error('Error processing contact form:', error);
return new Response(
JSON.stringify({
success: false,
message: 'An error occurred while processing your request. Please try again later.'
message: 'An error occurred while processing your request. Please try again later.',
}),
{
status: 500,
headers: {
'Content-Type': 'application/json'
}
'Content-Type': 'application/json',
},
}
);
}
};
};

28
src/pages/index.astro
View File

@@ -1,32 +1,14 @@
---
export const prerender = false;
import { supportedLanguages } from '~/i18n/translations';
// Check for language preference in cookies (set by client-side JS)
const cookies = Astro.request.headers.get('cookie') || '';
const cookieLanguage = cookies.split(';')
.map(cookie => cookie.trim())
.find(cookie => cookie.startsWith('preferredLanguage='))
?.split('=')[1];
// Get the user's preferred language from the browser if no cookie
const acceptLanguage = Astro.request.headers.get('accept-language') || '';
// Define the type for supported languages
type SupportedLanguage = typeof supportedLanguages[number];
// Use cookie language if available, otherwise detect from browser
const preferredLanguage =
(cookieLanguage && supportedLanguages.includes(cookieLanguage as SupportedLanguage))
? cookieLanguage
: acceptLanguage
.split(',')
.map(lang => lang.split(';')[0].trim().substring(0, 2))
.find(lang => supportedLanguages.includes(lang as SupportedLanguage)) || 'en';
import { detectPreferredLanguage } from '~/utils/language';
// Get the hash fragment if present
const url = new URL(Astro.request.url);
const hash = url.hash;
// Detect preferred language
const preferredLanguage = detectPreferredLanguage(Astro.request);
// Redirect to the language-specific homepage
return Astro.redirect(`/${preferredLanguage}/${hash}`);
---
---

12
src/test-email.ts
View File

@@ -3,11 +3,11 @@ import 'dotenv/config';
async function runEmailTest() {
console.log('Starting email configuration test...');
// Test the SMTP connection
const configTest = await testEmailConfiguration();
console.log(`Configuration test result: ${configTest ? 'SUCCESS' : 'FAILED'}`);
if (configTest) {
// Try sending a test email
console.log('Attempting to send a test email...');
@@ -18,14 +18,14 @@ async function runEmailTest() {
'127.0.0.1',
'Email Test Script'
);
console.log(`Test email result: ${emailResult ? 'SENT' : 'FAILED'}`);
}
console.log('Email test completed');
}
runEmailTest().catch(error => {
runEmailTest().catch((error) => {
console.error('Error running email test:', error);
process.exit(1);
});
});

127
src/utils/email-handler.ts
View File

@@ -1,8 +1,16 @@
import nodemailer from 'nodemailer';
import { RateLimiterMemory } from 'rate-limiter-flexible';
import { createHash } from 'crypto';
import { getAdminNotificationHtml, getAdminNotificationText, getAdminNotificationSubject } from '../email-templates/admin-notification';
import { getUserConfirmationHtml, getUserConfirmationText, getUserConfirmationSubject } from '../email-templates/user-confirmation';
import {
getAdminNotificationHtml,
getAdminNotificationText,
getAdminNotificationSubject,
} from '../email-templates/admin-notification';
import {
getUserConfirmationHtml,
getUserConfirmationText,
getUserConfirmationSubject,
} from '../email-templates/user-confirmation';
import 'dotenv/config';
// Environment variables
@@ -12,7 +20,7 @@ const {
SMTP_USER = '',
SMTP_PASS = '',
ADMIN_EMAIL = '',
WEBSITE_NAME = 'bergsma.it'
WEBSITE_NAME = 'bergsma.it',
} = process.env;
// Email configuration
@@ -26,11 +34,11 @@ let transporter: nodemailer.Transporter;
function initializeTransporter() {
if (isProduction && SMTP_HOST && SMTP_USER && SMTP_PASS) {
// Production: Use SMTP server
// ProtonMail specific configuration
// ProtonMail often requires using their Bridge application for SMTP
const isProtonMail = SMTP_HOST.includes('protonmail');
transporter = nodemailer.createTransport({
host: SMTP_HOST,
port: parseInt(SMTP_PORT, 10),
@@ -45,13 +53,13 @@ function initializeTransporter() {
// Do not fail on invalid certs
rejectUnauthorized: false,
// Specific ciphers for ProtonMail
ciphers: 'SSLv3'
}
})
ciphers: 'SSLv3',
},
}),
});
// Verify SMTP connection configuration
transporter.verify(function(error, _success) {
transporter.verify(function (error, _success) {
if (error) {
console.error('SMTP connection error:', error);
} else {
@@ -79,39 +87,37 @@ const csrfTokens = new Map<string, { token: string; expires: Date }>();
// Generate a CSRF token
export function generateCsrfToken(): string {
const token = createHash('sha256')
.update(Math.random().toString())
.digest('hex');
const token = createHash('sha256').update(Math.random().toString()).digest('hex');
// Token expires after 1 hour
const expires = new Date();
expires.setHours(expires.getHours() + 1);
csrfTokens.set(token, { token, expires });
// Clean up expired tokens
for (const [key, value] of csrfTokens.entries()) {
if (value.expires < new Date()) {
csrfTokens.delete(key);
}
}
return token;
}
// Validate a CSRF token
export function validateCsrfToken(token: string): boolean {
const storedToken = csrfTokens.get(token);
if (!storedToken) {
return false;
}
if (storedToken.expires < new Date()) {
csrfTokens.delete(token);
return false;
}
return true;
}
@@ -140,18 +146,13 @@ export async function checkRateLimit(ipAddress: string): Promise<{ limited: bool
}
// Log email sending attempts
export function logEmailAttempt(
success: boolean,
recipient: string,
subject: string,
error?: Error
): void {
export function logEmailAttempt(success: boolean, recipient: string, subject: string, error?: Error): void {
const timestamp = new Date().toISOString();
const status = success ? 'SUCCESS' : 'FAILURE';
const errorMessage = error ? `: ${error.message}` : '';
const logMessage = `[${timestamp}] [EMAIL ${status}] To: ${recipient}, Subject: ${subject}${errorMessage}`;
if (isProduction) {
// In production, you might want to log to a file or a logging service
console.log(logMessage);
@@ -162,23 +163,16 @@ export function logEmailAttempt(
}
// Send an email
export async function sendEmail(
to: string,
subject: string,
html: string,
text: string
): Promise<boolean> {
export async function sendEmail(to: string, subject: string, html: string, text: string): Promise<boolean> {
// Initialize transporter if not already done
if (!transporter) {
initializeTransporter();
}
try {
// Ensure from address matches SMTP_USER for ProtonMail
const fromAddress = isProduction ?
`"${WEBSITE_NAME}" <${SMTP_USER}>` :
`"${WEBSITE_NAME}" <${ADMIN_EMAIL}>`;
const fromAddress = isProduction ? `"${WEBSITE_NAME}" <${SMTP_USER}>` : `"${WEBSITE_NAME}" <${ADMIN_EMAIL}>`;
const mailOptions = {
from: fromAddress,
to,
@@ -186,24 +180,23 @@ export async function sendEmail(
html,
text,
};
await transporter.sendMail(mailOptions);
logEmailAttempt(true, to, subject);
return true;
} catch (error) {
logEmailAttempt(false, to, subject, error as Error);
// Enhanced error logging for SMTP issues
if (isProduction) {
console.error('Error sending email:', error);
// Log more detailed information for SMTP errors
if (error instanceof Error) {
console.error('Error name:', error.name);
console.error('Error message:', error.message);
// Log additional details for specific error types
if (error.name === 'Error' && error.message.includes('ECONNREFUSED')) {
console.error('SMTP Connection Refused: Check if the SMTP server is reachable and the port is correct');
@@ -214,7 +207,7 @@ export async function sendEmail(
}
}
}
return false;
}
}
@@ -232,22 +225,22 @@ export async function sendAdminNotification(
console.error('Cannot send admin notification: name is empty');
return false;
}
if (!email || email.trim() === '') {
console.error('Cannot send admin notification: email is empty');
return false;
}
if (!message || message.trim() === '') {
console.error('Cannot send admin notification: message is empty');
return false;
}
if (!ADMIN_EMAIL || ADMIN_EMAIL.trim() === '') {
console.error('Cannot send admin notification: ADMIN_EMAIL is not configured');
return false;
}
const submittedAt = new Date().toLocaleString('en-US', {
year: 'numeric',
month: 'long',
@@ -255,7 +248,7 @@ export async function sendAdminNotification(
hour: '2-digit',
minute: '2-digit',
});
const props = {
name,
email,
@@ -264,30 +257,26 @@ export async function sendAdminNotification(
ipAddress,
userAgent,
};
const subject = getAdminNotificationSubject();
const html = getAdminNotificationHtml(props);
const text = getAdminNotificationText(props);
// Add a backup email address to ensure delivery
const recipients = ADMIN_EMAIL;
// Uncomment and modify the line below to add a backup email address
// const recipients = `${ADMIN_EMAIL}, your-backup-email@example.com`;
return sendEmail(recipients, subject, html, text);
}
// Send user confirmation email
export async function sendUserConfirmation(
name: string,
email: string,
message: string
): Promise<boolean> {
export async function sendUserConfirmation(name: string, email: string, message: string): Promise<boolean> {
if (!email || email.trim() === '') {
console.error('Cannot send user confirmation: email is empty');
return false;
}
const submittedAt = new Date().toLocaleString('en-US', {
year: 'numeric',
month: 'long',
@@ -295,7 +284,7 @@ export async function sendUserConfirmation(
hour: '2-digit',
minute: '2-digit',
});
const props = {
name,
email,
@@ -304,11 +293,11 @@ export async function sendUserConfirmation(
websiteName: WEBSITE_NAME,
contactEmail: ADMIN_EMAIL,
};
const subject = getUserConfirmationSubject(WEBSITE_NAME);
const html = getUserConfirmationHtml(props);
const text = getUserConfirmationText(props);
return sendEmail(email, subject, html, text);
}
@@ -325,16 +314,16 @@ export async function testEmailConfiguration(): Promise<boolean> {
if (!isProduction) {
return true;
}
try {
// Initialize transporter if not already done
if (!transporter) {
initializeTransporter();
}
// Verify connection to SMTP server
const connectionResult = await new Promise<boolean>((resolve) => {
transporter.verify(function(error, _success) {
transporter.verify(function (error, _success) {
if (error) {
resolve(false);
} else {
@@ -342,11 +331,11 @@ export async function testEmailConfiguration(): Promise<boolean> {
}
});
});
if (!connectionResult) {
return false;
}
return true;
} catch {
return false;
@@ -356,4 +345,4 @@ export async function testEmailConfiguration(): Promise<boolean> {
// Run a test of the email configuration
if (isProduction) {
testEmailConfiguration();
}
}

2
src/utils/images-optimization.ts
View File

@@ -199,7 +199,7 @@ const getBreakpoints = ({
if (layout === 'constrained') {
// Use imageSizes when width is smaller than the smallest deviceSize
const sizesToUse = width < config.deviceSizes[0] ? config.imageSizes : config.deviceSizes;
return [
// Always include the image at 1x and 2x the specified width
width,

28
src/utils/language.ts Normal file
View File

@@ -0,0 +1,28 @@
import { supportedLanguages } from '~/i18n/translations';
// Define the type for supported languages
type SupportedLanguage = (typeof supportedLanguages)[number];
export function detectPreferredLanguage(request: Request): SupportedLanguage {
// Check for language preference in cookies (set by client-side JS)
const cookies = request.headers.get('cookie') || '';
const cookieLanguage = cookies
.split(';')
.map((cookie) => cookie.trim())
.find((cookie) => cookie.startsWith('preferredLanguage='))
?.split('=')[1];
// Get the user's preferred language from the browser if no cookie
const acceptLanguage = request.headers.get('accept-language') || '';
// Use cookie language if available, otherwise detect from browser
const preferredLanguage =
cookieLanguage && supportedLanguages.includes(cookieLanguage as SupportedLanguage)
? (cookieLanguage as SupportedLanguage)
: acceptLanguage
.split(',')
.map((lang) => lang.split(';')[0].trim().substring(0, 2))
.find((lang) => supportedLanguages.includes(lang as SupportedLanguage)) || 'en';
return preferredLanguage as SupportedLanguage;
}

6
src/utils/permalinks.ts
View File

@@ -57,7 +57,7 @@ export const getPermalink = (slug = '', type = 'page', lang = ''): string => {
) {
return slug;
}
// Extract hash fragment if present
let hashFragment = '';
if (slug.includes('#')) {
@@ -121,12 +121,12 @@ const definitivePermalink = (permalink: string, lang = ''): string => {
if (permalink.startsWith('#')) {
return permalink;
}
// Don't add language prefix to external links
if (permalink.startsWith('http://') || permalink.startsWith('https://') || permalink.startsWith('//')) {
return permalink;
}
if (lang && ['en', 'nl', 'de', 'fr'].includes(lang)) {
return createPath(BASE_PATHNAME, lang, permalink);
}