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

Small refactor of content and using Dutch section IDs.

Browse source
This commit is contained in:
Bob Vandevliet 2025-07-03 15:16:20 +02:00
parent bdda58834c
commit bf4d2036db
4 changed files with 28 additions and 38 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="col-6 col-lg-3">
<div class="card h-100"> <div class="card h-100">
<div class="card-body"> <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> <h3 class="ff-header">Bob Vandevliet</h3>
<p>Gecertificeerd FPV-dronepiloot</p> <p>Gecertificeerd FPV-dronepiloot</p>
<h4 class="fs-5">Email</h4> <h4 class="fs-5">Email</h4>

10
public/includes/nav.html
View file

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

50
public/index.html
View file

@ -22,9 +22,9 @@
<div class="hero position-relative overflow-hidden"> <div class="hero position-relative overflow-hidden">
<div class="hero-body position-absolute bottom-0" style="z-index: 1;"> <div class="hero-body position-absolute bottom-0" style="z-index: 1;">
<h1 class="h5"> <h1 class="h5">
FPV dronevideo's voor bedrijven, vastgoed, recreatie, sport en evenementen. FPV dronevideo's voor bedrijven, vastgoed, recreatie, sport en evenementen
</h1> </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> </div>
<video class="cover parallax" preload="auto" playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop"> <video class="cover parallax" preload="auto" playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
<source src="/assets/static/showreel.mp4" type="video/mp4"> <source src="/assets/static/showreel.mp4" type="video/mp4">
@ -35,7 +35,12 @@
<main> <main>
<section class="container-xxl text-center"> <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="row">
<div class="col-sm-6 col-lg"> <div class="col-sm-6 col-lg">
<div class="card h-100"> <div class="card h-100">
@ -46,7 +51,7 @@
<br>Bedrijfsvideo <br>Bedrijfsvideo
</h3> </h3>
<p class="card-text"> <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> </p>
</div> </div>
</div> </div>
@ -60,7 +65,7 @@
<br>Vastgoed <br>Vastgoed
</h3> </h3>
<p class="card-text"> <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> </p>
</div> </div>
</div> </div>
@ -102,7 +107,7 @@
<br>Evenementen (binnenkort mogelijk) <br>Evenementen (binnenkort mogelijk)
</h3> </h3>
<p class="card-text"> <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> </p>
</div> </div>
</div> </div>
@ -111,7 +116,7 @@
</section> </section>
<section class="container-xxl"> <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> <p class="text-center">Alle prijzen zijn exclusief btw, reis-, en verblijfskosten.</p>
<div class="row justify-content-center"> <div class="row justify-content-center">
@ -244,7 +249,7 @@
</section> </section>
<section class="container-xxl"> <section class="container-xxl">
<h2 class="text-center" id="section-fpv">Wat is FPV?</h2> <h2 class="text-center" id="over-fpv">Wat is FPV?</h2>
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-lg-3"> <div class="col-lg-3">
<p> <p>
@ -252,7 +257,7 @@
</p> </p>
</div> </div>
<div class="col-lg-6 mt-0"> <div class="col-lg-6 mt-0">
<div id="carouselMyDrones" class="carousel slide"> <div id="carousel-drones" class="carousel slide">
<div class="carousel-inner"> <div class="carousel-inner">
<div class="carousel-item active"> <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."> <img class="img-fluid" src="/assets/static/20250524_152645.png" alt="Afbeelding van mijn 7-inch FPV drone met GoPro actiecamera.">
@ -270,39 +275,24 @@
</div> </div>
</div> </div>
<div class="carousel-indicators"> <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="#carousel-drones" 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> <button type="button" data-bs-target="#carousel-drones" data-bs-slide-to="1" aria-label="Slide 2"></button>
</div> </div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselMyDrones" data-bs-slide="prev"> <button class="carousel-control-prev" type="button" data-bs-target="#carousel-drones" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span> <span class="visually-hidden">Previous</span>
</button> </button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselMyDrones" data-bs-slide="next"> <button class="carousel-control-next" type="button" data-bs-target="#carousel-drones" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span> <span class="visually-hidden">Next</span>
</button> </button>
</div> </div>
</div> </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>
<section class="container-xxl"> <section class="container-xxl">
<div id="section-about"></div> <div id="over-mij"></div>
<div class="card h-100 bg-light text-dark"> <div class="card h-100 bg-light text-dark">
<h2 class="card-title mt-4 text-center">Over mij</h2> <h2 class="card-title mt-4 text-center">Over mij</h2>
<div class="row g-0"> <div class="row g-0">
@ -342,7 +332,7 @@
<h3>Werkgebied & beschikbaarheid</h3> <h3>Werkgebied & beschikbaarheid</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.
<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> </p>
</div> </div>
</div> </div>

4
src/js/scripts.js
View file

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