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

Merge branch 'development'
All checks were successful
Build and Deploy / Build and Deploy (push) Successful in 32s
Details

Browse source
This commit is contained in:
Bob Vandevliet 2025-07-03 15:32:39 +02:00
commit ec9845569a
6 changed files with 74 additions and 122 deletions
Download patch file Download diff file Expand all files Collapse all files

2
public/includes/footer.html
View file

@ -5,7 +5,7 @@
<div class="col-6 col-lg-3">
<div class="card h-100">
<div class="card-body">
<h2 class="section fs-4 card-title" id="section-contact">Contact</h2>
<h2 class="section fs-4 card-title" id="contact">Contact</h2>
<h3 class="ff-header">Bob Vandevliet</h3>
<p>Gecertificeerd FPV-dronepiloot</p>
<h4 class="fs-5">Email</h4>

68
public/includes/head.html
View file

@ -1,29 +1,12 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-HBS1M2FW9B"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('set', 'anonymize_ip', true);
gtag('set', 'allow_ad_personalization_signals', false);
gtag('set', 'allow_google_signals', false);
gtag('config', 'G-HBS1M2FW9B', {
anonymize_ip: true,
allow_ad_personalization_signals: false,
allow_google_signals: false,
});
</script>
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><!--# echo var="title" default="Title" --></title>
<meta http-equiv="Content-Security-Policy" content="
<meta http-equiv="Content-Security-Policy" content="
default-src 'self';
script-src 'self' 'unsafe-inline' https://*.fontawesome.com https://cdn.jsdelivr.net;
script-src 'self' 'unsafe-inline' https://www.googletagmanager.com https://cdn.jsdelivr.net https://*.fontawesome.com;
style-src 'self' 'unsafe-inline' https://*.fontawesome.com;
font-src 'self' https://*.fontawesome.com;
connect-src 'self' https://*.fontawesome.com;
@ -31,23 +14,26 @@
img-src 'self' data:;
">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
<link rel="icon" href="/assets/static/favicon.ico" type="image/x-icon">
<link rel="icon" href="/assets/static/favicon.png" type="image/png">
<link rel="stylesheet" href="/assets/css/styles.min.css">
<link rel="icon" href="/assets/static/favicon.ico" type="image/x-icon">
<link rel="icon" href="/assets/static/favicon.png" type="image/png">
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-HBS1M2FW9B"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('set', 'anonymize_ip', true);
gtag('set', 'allow_ad_personalization_signals', false);
gtag('set', 'allow_google_signals', false);
gtag('config', 'G-HBS1M2FW9B', {
anonymize_ip: true,
allow_ad_personalization_signals: false,
allow_google_signals: false,
});
</script>
<link rel="stylesheet" href="/assets/css/styles.min.css">
<script src="https://kit.fontawesome.com/7e7cf109ad.js" crossorigin="anonymous" defer></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/js/bootstrap.min.js" crossorigin="anonymous" defer></script>
<script src="/assets/js/scripts.min.js" async></script>
<meta name="description" content="FPV dronevideo's voor bedrijven, vastgoed, recreatie, sport en evenementen.">
<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:title" content="Vandevliet Aerial Shots">
<meta property="og:image" content="assets/static/logo-aerialshots-v1-w.png">
</head>
<script src="https://kit.fontawesome.com/7e7cf109ad.js" crossorigin="anonymous" defer></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/js/bootstrap.min.js" crossorigin="anonymous" defer></script>
<script src="/assets/js/scripts.min.js" async></script>

11
public/includes/nav.html
View file

@ -9,19 +9,16 @@
<div id="navbarNav" class="collapse navbar-collapse">
<ul class="navbar-nav text-center">
<li class="nav-item">
<a class="nav-link" href="/#section-services">Diensten</a>
<a class="nav-link" href="/#diensten">Diensten</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/#section-pricing">Prijzen</a>
<a class="nav-link" href="/#prijzen">Prijzen</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/#section-fpv">Over FPV</a>
<a class="nav-link" href="/#over-mij">Over mij</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/#section-about">Over mij</a>
</li>
<li class="nav-item">
<a class="btn btn-primary" href="/#section-contact">Contact</a>
<a class="btn btn-primary" href="/#contact">Contact</a>
</li>
</ul>
</div>

96
public/index.html
View file

@ -1,8 +1,19 @@
<!DOCTYPE html>
<html lang="nl" data-bs-theme="dark">
<!--# set var="title" value="Vandevliet Aerial Shots" -->
<!--# include file="/includes/head.html" -->
<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 class="home">
<header>
@ -11,9 +22,9 @@
<div class="hero position-relative overflow-hidden">
<div class="hero-body position-absolute bottom-0" style="z-index: 1;">
<h1 class="h5">
FPV dronevideo's voor bedrijven, vastgoed, recreatie, sport en evenementen.
FPV dronevideo's voor bedrijven, vastgoed, recreatie, sport en evenementen
</h1>
<p><a class="btn btn-primary" href="#section-services">Ontdek meer <i class="fa-solid fa-arrow-down"></i></a></p>
<p><a class="btn btn-primary" href="#diensten">Ontdek meer <i class="fa-solid fa-arrow-down"></i></a></p>
</div>
<video class="cover parallax" preload="auto" playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
<source src="/assets/static/showreel.mp4" type="video/mp4">
@ -24,7 +35,12 @@
<main>
<section class="container-xxl text-center">
<h2 id="section-services">FPV drone opnames laten maken</h2>
<h2 id="diensten">FPV drone opnames laten maken</h2>
<div class="row">
<p>
FPV staat voor <b>First Person View</b> en levert cinematische dronebeelden op. FPV drones worden op maat gemaakt en zijn daardoor flexibel in te zetten. Ze kunnen binnen en buiten filmen, van het navigeren door fabrieken, kantoren en festivaltenten tot het achtervolgen van auto's en motorcrossers. FPV beelden vertellen een compleet verhaal in één vlucht. Vaak worden deze vluchten vastgelegd met een GoPro of vergelijkbare actiecamera. Het resultaat is <b>vloeiend, filmisch en dynamisch</b> en overtreft traditionele drone-videografie.
</p>
</div>
<div class="row">
<div class="col-sm-6 col-lg">
<div class="card h-100">
@ -35,7 +51,7 @@
<br>Bedrijfsvideo
</h3>
<p class="card-text">
Maak een blijvende indruk op jouw potentiële klanten met een vloeiende indoor drone tour van jouw bedrijf.
Laat productieprocessen, kantoren of werkplaatsen van binnenuit zien met een vloeiende indoor drone tour door jouw bedrijf.
</p>
</div>
</div>
@ -49,7 +65,7 @@
<br>Vastgoed
</h3>
<p class="card-text">
Met unieke dronebeelden van jouw pand en de omgeving geef je jouw potentiële kopers of huurders een goed beeld van de locatie en de mogelijkheden.
Een virtuele rondleiding door jouw pand en de omgeving geeft jouw potentiële kopers of huurders een goed beeld van de locatie en de mogelijkheden.
</p>
</div>
</div>
@ -91,7 +107,7 @@
<br>Evenementen (binnenkort mogelijk)
</h3>
<p class="card-text">
Leg de grootsheid en energie van elk evenement vast. Denk aan aftermovie's van optredens, concerten en festivals tot bruiloften, privé- en bedrijfsfeesten.
Leg de grootsheid, sfeer en energie van elk evenement vast. Denk aan aftermovie's, festivals en bruiloften, tot privé- en bedrijfsfeesten.
</p>
</div>
</div>
@ -100,7 +116,7 @@
</section>
<section class="container-xxl">
<h2 id="section-pricing" class="text-center">Prijzen en tarieven</h2>
<h2 id="prijzen" class="text-center">Prijzen en tarieven</h2>
<p class="text-center">Alle prijzen zijn exclusief btw, reis-, en verblijfskosten.</p>
<div class="row justify-content-center">
@ -233,65 +249,7 @@
</section>
<section class="container-xxl">
<h2 class="text-center" id="section-fpv">Wat is FPV?</h2>
<div class="row justify-content-center">
<div class="col-lg-3">
<p>
FPV staat voor <b>First Person View</b> en zorgt voor een unieke, dynamische en meeslepende vliegervaring. De piloot kijkt via een videobril door de ogen van de drone (FPV) en bestuurt deze volledig handmatig. Zo kan een FPV drone spectaculaire acrobatische bewegingen maken, zoals flips, rolls en zelfs ondersteboven vliegen. Dit maakt nauwkeurige manoeuvres mogelijk die met traditionele drones niet mogelijk zijn, zelfs door smalle doorgangen of binnenruimtes.
</p>
</div>
<div class="col-lg-6 mt-0">
<div id="carouselMyDrones" class="carousel slide">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="img-fluid" src="/assets/static/20250524_152645.png" alt="Afbeelding van mijn 7-inch FPV drone met GoPro actiecamera.">
<div class="carousel-caption">
<!-- <h3>First slide label</h3> -->
<p>Mijn 7-inch FPV drone met GoPro actiecamera,<br>ideaal voor outdoor vliegen en lange afstanden.</p>
</div>
</div>
<div class="carousel-item">
<img class="img-fluid" src="/assets/static/20240815_184226.png" alt="Afbeelding van mijn 3.5-inch cinewhoop met Caddx Walnut camera.">
<div class="carousel-caption">
<!-- <h3>Second slide label</h3> -->
<p>Mijn 3.5-inch cinewhoop met Caddx Walnut camera,<br>ideaal voor indoor vliegen en dichtbij personen.</p>
</div>
</div>
</div>
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselMyDrones" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselMyDrones" data-bs-slide-to="1" aria-label="Slide 2"></button>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselMyDrones" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselMyDrones" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-lg-8">
<h3 class="text-center">Waarom FPV?</h3>
<p>
FPV drones worden op maat gemaakt en zijn daardoor flexibel in te zetten. Ze kunnen binnen en buiten filmen, van het navigeren door fabrieken, kantoren en festivaltenten tot het achtervolgen van auto's en motorcrossers. FPV beelden vertellen een compleet verhaal in één vlucht. Vaak worden deze vluchten vastgelegd met een GoPro of vergelijkbare actiecamera. Het resultaat is <b>vloeiend, filmisch en dynamisch</b> en overtreft traditionele drone-videografie. Perfect voor:
</p>
<ul>
<li><b>Bedrijfsvideo’s met impact</b> - laat productieprocessen, kantoren of werkplaatsen van binnenuit zien.</li>
<li><b>Vastgoedpresentaties</b> - creëer virtuele rondleidingen die indruk maken.</li>
<li><b>Sport</b> - volg bewegingen van dichtbij met ongekende dynamiek.</li>
<li><b>Evenementen, festivals en aftermovies</b> - breng de sfeer en energie opnieuw tot leven.</li>
<li><b>Bruiloften en bijzondere gelegenheden</b> - leg unieke momenten vast op spectaculaire wijze.</li>
</ul>
</div>
</div>
</section>
<section class="container-xxl">
<div id="section-about"></div>
<div id="over-mij"></div>
<div class="card h-100 bg-light text-dark">
<h2 class="card-title mt-4 text-center">Over mij</h2>
<div class="row g-0">
@ -331,7 +289,7 @@
<h3>Werkgebied & beschikbaarheid</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.
<br><b>Klaar om jouw verhaal te vertellen? Neem gerust <a href="/#section-contact">contact</a> op voor een vrijblijvend gesprek.</b>
<br><b>Klaar om jouw verhaal te vertellen? Neem gerust <a href="/#contact">contact</a> op voor een vrijblijvend gesprek.</b>
</p>
</div>
</div>

15
public/privacy.html
View file

@ -1,8 +1,19 @@
<!DOCTYPE html>
<html lang="nl" data-bs-theme="dark">
<!--# set var="title" value="Privacyverklaring • Vandevliet Aerial Shots" -->
<!--# include file="/includes/head.html" -->
<head>
<!--# include file="/includes/head.html" -->
<title>Privacyverklaring • Vandevliet Aerial Shots</title>
<meta name="description" content="Privacyverklaring • Vandevliet Aerial Shots">
<meta property="og:title" content="Privacyverklaring • Vandevliet Aerial Shots">
<meta property="og:description" content="Privacyverklaring • Vandevliet Aerial Shots">
<meta property="og:type" content="website">
<meta property="og:locale" content="nl_NL">
<meta property="og:url" content="https://vandevliet-aerialshots.com/privacy">
<meta property="og:image" content="/assets/static/logo-aerialshots-v1-w.png">
</head>
<body>
<header>

4
src/js/scripts.js
View file

@ -2,7 +2,7 @@ const highlightSectionFromHash = () =>
{
const { hash } = window.location;
if (hash === '#section-contact')
if (hash === '#contact')
{
const section = document.getElementById(hash.substring(1))?.parentElement;// .closest('section');
@ -58,7 +58,7 @@ document.addEventListener('DOMContentLoaded', () =>
sections.forEach(section =>
{
const anchorTarget = section.querySelector('[id^="section-"]');
const anchorTarget = section.querySelector('[id]');
const anchorHeader = section.querySelector('h1,h2');
if (anchorTarget && anchorHeader)