Adding dedicated contact page (WIP).

This commit is contained in:
Bob Vandevliet 2025-07-07 13:09:23 +02:00 committed by Bob Vandevliet
parent 2f49d7ce86
commit bd84cc5c29
5 changed files with 40 additions and 28 deletions

36
public/contact.html Normal file
View file

@ -0,0 +1,36 @@
<!DOCTYPE html>
<html lang="nl" data-bs-theme="dark">
<head>
<!--# include file="/includes/head.html" -->
<title>Vandevliet Aerial Shots</title>
<meta name="description" content="FPV dronevideo's voor bedrijven, vastgoed, recreatie, sport en evenementen.">
<meta property="og:title" content="Vandevliet Aerial Shots">
<meta property="og:description" content="FPV dronevideo's voor bedrijven, vastgoed, recreatie, sport en evenementen.">
<meta property="og:type" content="website">
<meta property="og:locale" content="nl_NL">
<meta property="og:url" content="https://vandevliet-aerialshots.com">
<meta property="og:image" content="/assets/static/logo-aerialshots-v1-w.png">
</head>
<body>
<header>
<!--# include file="/includes/nav.html" -->
</header>
<main class="mt-5 text-center">
<section class="container-xxl mt-5 text-center">
<p class="lead">
Stuur mij gerust een mailtje voor een vrijblijvend gesprek :)
</p>
</section>
<!-- Nothing more here yet, contact form will be added later, contact info is in the footer -->
</main>
<!--# include file="/includes/footer.html" -->
</body>
</html>

View file

@ -5,14 +5,13 @@
<div class="col-6 col-lg-3">
<div class="card h-100">
<div class="card-body d-flex flex-column">
<h2 class="section fs-3 card-title" id="contact">Contact</h2>
<p class="fs-5 ff-header">Bob Vandevliet</p>
<h2 class="section fs-3 card-title">Bob Vandevliet</h2>
<p style="margin-top: 0 !important;">Gecertificeerd FPV-dronepiloot</p>
<p>
<a href="mailto:bob@vandevliet-aerialshots.com">bob@vandevliet-aerialshots.com</a>
<!-- <a href="tel:+31612345678">+31 6 12345678</a> -->
<br>Arnhem, Gelderland
</p>
<!-- <p><a class="btn btn-primary" href="/contact">Offerte aanvragen</a></p> -->
<p class="fs-5 ff-header">Vandevliet Aerial Shots</p>
<p style="margin-top: 0 !important;">
KvK: 94567255<br>

View file

@ -18,7 +18,7 @@
<a class="nav-link" href="/#over-mij">Over mij</a>
</li>
<li class="nav-item">
<a class="nav-link btn btn-primary" href="/#contact">Contact</a>
<a class="nav-link btn btn-primary" href="/contact">Contact</a>
</li>
<li class="nav-item socials">
<a class="nav-link" href="https://www.instagram.com/vandevliet.fpv" target="_blank" rel="noopener noreferrer" title="Vandevliet Aerial Shots on Instagram" aria-label="Vandevliet Aerial Shots on Instagram"><i class="fab fa-instagram"></i></a>

View file

@ -184,7 +184,7 @@
<h3>Klaar om jouw verhaal te vertellen?</h3>
<p>
Ik werk vanuit Arnhem, vooral in Gelderland en omgeving. Als ZZP'er naast mijn parttime baan als software engineer kan ik flexibel werken volgens jouw planning.
Neem gerust <a href="/#contact">contact</a> op voor een vrijblijvend gesprek.
Neem gerust <a href="/contact">contact</a> op voor een vrijblijvend gesprek.
</p>
</div>
</div>

View file

@ -1,24 +1,3 @@
const highlightSectionFromHash = () =>
{
const { hash } = window.location;
if (hash === '#contact')
{
const section = document.getElementById(hash.substring(1))?.parentElement;// .closest('section');
if (section)
{
setTimeout(() =>
{
section.classList.add('scrollto-highlight');
setTimeout(() => section.classList.remove('scrollto-highlight'), 1000);
}, 500);
}
}
};
window.addEventListener('hashchange', highlightSectionFromHash);
window.addEventListener('pageshow', () =>
{
/**
@ -45,8 +24,6 @@ window.addEventListener('pageshow', () =>
refreshScrollLinkedPositioningEffect();
window.addEventListener('scroll', refreshScrollLinkedPositioningEffect);
highlightSectionFromHash();
});
document.addEventListener('DOMContentLoaded', () =>