bvandevliet/Vandevliet.AerialShots.Website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Adding dedicated contact page (WIP).

Browse source
This commit is contained in:
Bob Vandevliet 2025-07-07 13:09:23 +02:00 • committed by Bob Vandevliet
parent 2709054415
commit 94bd9aab61
5 changed files with 40 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

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>

5
public/includes/footer.html
View file

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

2
public/includes/nav.html
View file

@ -18,7 +18,7 @@
<a class="nav-link" href="/#over-mij">Over mij</a> <a class="nav-link" href="/#over-mij">Over mij</a>
</li> </li>
<li class="nav-item"> <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>
<li class="nav-item socials"> <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> <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>

2
public/index.html
View file

@ -190,7 +190,7 @@
<h3>Klaar om jouw verhaal te vertellen?</h3> <h3>Klaar om jouw verhaal te vertellen?</h3>
<p> <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. 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> </p>
</div> </div>
</div> </div>

23
src/js/scripts.js
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', () => window.addEventListener('pageshow', () =>
{ {
/** /**
@ -45,8 +24,6 @@ window.addEventListener('pageshow', () =>
refreshScrollLinkedPositioningEffect(); refreshScrollLinkedPositioningEffect();
window.addEventListener('scroll', refreshScrollLinkedPositioningEffect); window.addEventListener('scroll', refreshScrollLinkedPositioningEffect);
highlightSectionFromHash();
}); });
document.addEventListener('DOMContentLoaded', () => document.addEventListener('DOMContentLoaded', () =>