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

Compare commits

base: bvandevliet:c137cf79ab5d4bb224e8d6f24e17f444fde091f3
Branches Tags
bvandevliet:master
bvandevliet:feature/contact-form
bvandevliet:feature/services
bvandevliet:development
..
compare: bvandevliet:90571d5720db27b564122d9a5022c6949533b05d
Branches Tags
bvandevliet:master
bvandevliet:feature/contact-form
bvandevliet:feature/services
bvandevliet:development

No commits in common. "c137cf79ab5d4bb224e8d6f24e17f444fde091f3" and "90571d5720db27b564122d9a5022c6949533b05d" have entirely different histories.
c137cf79ab ... 90571d5720

6 changed files with 122 additions and 74 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="contact">Contact</h2>
<h2 class="section fs-4 card-title" id="section-contact">Contact</h2>
<h3 class="ff-header">Bob Vandevliet</h3>
<p>Gecertificeerd FPV-dronepiloot</p>
<h4 class="fs-5">Email</h4>

66
public/includes/head.html
View file

@ -1,26 +1,8 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
<meta http-equiv="Content-Security-Policy" content="
default-src 'self';
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;
object-src 'none';
img-src 'self' data:;
">
<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">
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-HBS1M2FW9B"></script>
<script>
<!-- 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());
@ -32,8 +14,40 @@
allow_ad_personalization_signals: false,
allow_google_signals: false,
});
</script>
</script>
<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 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="
default-src 'self';
script-src 'self' 'unsafe-inline' https://*.fontawesome.com https://cdn.jsdelivr.net;
style-src 'self' 'unsafe-inline' https://*.fontawesome.com;
font-src 'self' https://*.fontawesome.com;
connect-src 'self' https://*.fontawesome.com;
object-src 'none';
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">
<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>

11
public/includes/nav.html
View file

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

96
public/index.html
View file

@ -1,19 +1,8 @@
<!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>
<!--# set var="title" value="Vandevliet Aerial Shots" -->
<!--# include file="/includes/head.html" -->
<body class="home">
<header>
@ -22,9 +11,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="#diensten">Ontdek meer <i class="fa-solid fa-arrow-down"></i></a></p>
<p><a class="btn btn-primary" href="#section-services">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">
@ -35,12 +24,7 @@
<main>
<section class="container-xxl text-center">
<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>
<h2 id="section-services">FPV drone opnames laten maken</h2>
<div class="row">
<div class="col-sm-6 col-lg">
<div class="card h-100">
@ -51,7 +35,7 @@
<br>Bedrijfsvideo
</h3>
<p class="card-text">
Laat productieprocessen, kantoren of werkplaatsen van binnenuit zien met een vloeiende indoor drone tour door jouw bedrijf.
Maak een blijvende indruk op jouw potentiële klanten met een vloeiende indoor drone tour van jouw bedrijf.
</p>
</div>
</div>
@ -65,7 +49,7 @@
<br>Vastgoed
</h3>
<p class="card-text">
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.
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.
</p>
</div>
</div>
@ -107,7 +91,7 @@
<br>Evenementen (binnenkort mogelijk)
</h3>
<p class="card-text">
Leg de grootsheid, sfeer en energie van elk evenement vast. Denk aan aftermovie's, festivals en bruiloften, tot privé- en bedrijfsfeesten.
Leg de grootsheid en energie van elk evenement vast. Denk aan aftermovie's van optredens, concerten en festivals tot bruiloften, privé- en bedrijfsfeesten.
</p>
</div>
</div>
@ -116,7 +100,7 @@
</section>
<section class="container-xxl">
<h2 id="prijzen" class="text-center">Prijzen en tarieven</h2>
<h2 id="section-pricing" 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">
@ -249,7 +233,65 @@
</section>
<section class="container-xxl">
<div id="over-mij"></div>
<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 class="card h-100 bg-light text-dark">
<h2 class="card-title mt-4 text-center">Over mij</h2>
<div class="row g-0">
@ -289,7 +331,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="/#contact">contact</a> op voor een vrijblijvend gesprek.</b>
<br><b>Klaar om jouw verhaal te vertellen? Neem gerust <a href="/#section-contact">contact</a> op voor een vrijblijvend gesprek.</b>
</p>
</div>
</div>

15
public/privacy.html
View file

@ -1,19 +1,8 @@
<!DOCTYPE html>
<html lang="nl" data-bs-theme="dark">
<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>
<!--# set var="title" value="Privacyverklaring • Vandevliet Aerial Shots" -->
<!--# include file="/includes/head.html" -->
<body>
<header>

4
src/js/scripts.js
View file

@ -2,7 +2,7 @@ const highlightSectionFromHash = () =>
{
const { hash } = window.location;
if (hash === '#contact')
if (hash === '#section-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]');
const anchorTarget = section.querySelector('[id^="section-"]');
const anchorHeader = section.querySelector('h1,h2');
if (anchorTarget && anchorHeader)