Local images, html sections, styling and scripts reviewed.

public/assets/css/styles.css

@@ -1,18 +1,10 @@
-:target::before {
+nav {
-  content: "";
+  background-color: rgba(22, 23, 25, 0.4) !important;
-  display: block;
-  height: 4rem;
-  margin-top: -4rem;
-  visibility: hidden;
-}
-
-nav.bg-body {
-  background-color: rgba(var(--bs-body-bg-rgb), 0.7) !important;
   transition: background-color 0.5s;
 }
 
-body.is-scrolled nav.bg-body {
+body.is-scrolled nav {
-  background-color: rgba(var(--bs-body-bg-rgb), 1.0) !important;
+  background-color: rgba(22, 23, 25, 1.0) !important;
 }
 
 .navbar-collapse:not(.collapsing):not(.show) {
@@ -25,20 +17,33 @@ body.is-scrolled nav.bg-body {
   padding-left: var(--bs-navbar-nav-link-padding-x);
 }
 
-section.hero {
+.hero {
-  position: relative;
   height: 100vh;
-  overflow: hidden;
 }
 
-section.hero video {
+.row {
-  position: absolute;
+  --bs-gutter-y: var(--bs-gutter-x);
-  top: 0;
+}
-  left: 0;
+
-  width: 100%;
+.text-shadow {
-  height: 100%;
+  text-shadow:
-  object-fit: cover;
+    -1px -1px 1px rgba(0, 0, 0, 0.4),
-  z-index: -1;
+    -1px 0px 1px rgba(0, 0, 0, 0.4),
+    -1px 1px 1px rgba(0, 0, 0, 0.4),
+    0px -1px 1px rgba(0, 0, 0, 0.4),
+    0px 0px 1px rgba(0, 0, 0, 0.4),
+    0px 1px 1px rgba(0, 0, 0, 0.4),
+    1px -1px 1px rgba(0, 0, 0, 0.4),
+    1px 0px 1px rgba(0, 0, 0, 0.4),
+    1px 1px 1px rgba(0, 0, 0, 0.4);
+}
+
+:target::before {
+  content: "";
+  display: block;
+  height: 4rem;
+  margin-top: -4rem;
+  visibility: hidden;
 }
 
 .anchor-link {
@@ -56,19 +61,8 @@ h6:hover .anchor-link {
   opacity: 1;
 }
 
-.text-shadow {
+.cover,
-  text-shadow:
+.parallax,
-    -1px -1px 3px rgba(0, 0, 0, 0.3),
-    -1px 0px 3px rgba(0, 0, 0, 0.3),
-    -1px 1px 3px rgba(0, 0, 0, 0.3),
-    0px -1px 3px rgba(0, 0, 0, 0.3),
-    0px 0px 3px rgba(0, 0, 0, 0.3),
-    0px 1px 3px rgba(0, 0, 0, 0.3),
-    1px -1px 3px rgba(0, 0, 0, 0.3),
-    1px 0px 3px rgba(0, 0, 0, 0.3),
-    1px 1px 3px rgba(0, 0, 0, 0.3);
-}
-
 .card-img {
   position: absolute;
   top: 0;
@@ -78,6 +72,10 @@ h6:hover .anchor-link {
   object-fit: cover;
 }
 
+.parallax {
+  height: 100vh;
+}
+
 .card-img-overlay {
   position: unset;
   z-index: 1;

public/assets/js/navigation.js

@@ -1,7 +1,7 @@
 /**
- * @type {HTMLVideoElement}
+ * @type {NodeListOf<HTMLVideoElement>}
  */
-const heroVid = document.querySelector('.hero video');
+const parallaxElems = document.querySelectorAll('.parallax');
 
 /**
  * @type {NodeListOf<HTMLAnchorElement>}
@@ -20,13 +20,24 @@ window.addEventListener('scroll', () =>
   document.body.classList.toggle('is-scrolled', window.scrollY > 0);
 
   // Parallax effect.
-  heroVid.style.top = `${window.scrollY / 3}px`;
+  parallaxElems.forEach(parallaxElem =>
+  {
+    const parentElem = parallaxElem.parentElement;
+
+    const parentRect = parentElem.getBoundingClientRect();
+    const parentScroll = parentRect.top + (parentRect.height / 2);
+
+    const windowScroll = window.scrollY + (window.innerHeight / 2);
+
+    parallaxElem.style.top = `${(windowScroll - parentScroll) / 4}px`;
+  });
 
   // Highlight menu item when scrolled to section.
   let current = '';
   sections.forEach(section =>
   {
-    const sectionTop = section.offsetTop;
+    const rect = section.getBoundingClientRect();
+    const sectionTop = rect.top + window.scrollY;
 
     if (window.scrollY >= sectionTop - 70)
     {
@@ -45,14 +56,26 @@ window.addEventListener('scroll', () =>
   });
 });
 
-document.querySelectorAll('h1, h2').forEach(header =>
+sections.forEach(section =>
 {
-  if (header.id)
+  if (section.id)
   {
     const anchor = document.createElement('a');
     anchor.className = 'anchor-link';
-    anchor.href = `#${header.id}`;
+    anchor.href = `#${section.id}`;
     anchor.innerHTML = ' #&nbsp;';
-    header.appendChild(anchor);
+    section.appendChild(anchor);
   }
 });
+
+document.querySelectorAll('#navbarNav li.nav-item>a').forEach(anchor =>
+{
+  anchor.addEventListener('click', () =>
+  {
+    /**
+     * @type {HTMLButtonElement}
+     */
+    const navbarNav = document.querySelector('button.navbar-toggler[aria-expanded="true"]');
+    navbarNav?.click();
+  });
+});

public/includes/footer.html

@@ -1,4 +1,38 @@
-<footer class="text-center py-3">
+<footer class="pt-4 bg-secondary-subtle">
-  <!--# config timefmt="%Y" -->
+
-  <p>&copy; <!--# echo var="date_local" --> <!--# echo var="site" default="Website Title" --></p>
+  <section class="container-xxl">
+    <div class="row justify-content-center">
+      <div class="col-6 col-lg-3">
+        <div class="card h-100">
+          <div class="card-body">
+            <h2 class="card-title" id="section-contact">Contact</h4>
+              <h4>Bob Vandevliet</h4>
+              <p>Gecertificeerd FPV-dronepiloot voor open categorie A1, A2 en A3.</p>
+              <h5>Email</h5>
+              <p><a href="mailto:bob@vandevliet-fpv.nl">bob@vandevliet-fpv.nl</a></p>
+              <h5>Telefoon</h5>
+              <p><a href="tel:+31612345678">+31 6 12345678</a></p>
+              <h5>Regio</h5>
+              <p>Arnhem, Gelderland</p>
+              <h5>Socials</h5>
+              <p>
+                <a href="https://www.linkedin.com/in/bobvandevliet" target="_blank" rel="noopener noreferrer"><i class="fab fa-linkedin"></i></a>
+                <a href="https://www.instagram.com/bobvandevliet" target="_blank" rel="noopener noreferrer"><i class="fab fa-instagram"></i></a>
+                <a href="https://www.youtube.com/channel/UCb1J9Z9Z9Z9Z9Z9Z9Z9Z9Z9" target="_blank" rel="noopener noreferrer"><i class="fab fa-youtube"></i></a>
+              </p>
+          </div>
+        </div>
+      </div>
+      <div class="col-6 col-lg-3">
+        <div class="card bg-transparent h-100">
+          <img class="card-img" src="assets/static/20230909_150343.jpg" alt="...">
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <div class="text-center py-4">
+    <!--# config timefmt="%Y" -->
+    &copy; <!--# echo var="date_local" --> <!--# echo var="site" default="Website Title" -->
+  </div>
 </footer>

public/includes/nav.html

@@ -1,4 +1,4 @@
-<nav class="navbar navbar-expand-lg bg-body fixed-top">
+<nav class="navbar navbar-expand-lg fixed-top">
   <div class="container-xxl justify-content-center">
     <a class="navbar-brand" href="#"><!--# echo var="site" default="Website Title" --></a>
     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">

public/index.html

@@ -6,41 +6,41 @@
 <!--# set var="title" value="Vandevliet FPV" -->
 <!--# include file="includes/head.html" -->
 
-<body class="home hero">
+<body class="home">
   <header>
     <!--# include file="includes/nav.html" -->
 
-    <section class="hero">
+    <div class="hero position-relative overflow-hidden">
-      <video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
+      <video class="cover parallax" playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
         <source src="static/showreel.mp4" type="video/mp4">
       </video>
-    </section>
+    </div>
   </header>
 
   <main class="mt-4">
-    <div class="container-xxl">
 
+    <div class="container-xxl">
       <div class="row">
-        <div class="col-md">
+        <section class="col-md">
           <h2 class="section" id="section-fpv">Wat is FPV?</h2>
           <p>FPV, ofwel First Person View, biedt een unieke vliegervaring waarbij de piloot via een videobril live beelden ontvangt van een vaste camera op de drone. Hierdoor vliegt de piloot vanuit het perspectief van de drone, waardoor hij uiterst precies vluchtlijnen kan bepalen en door de kleinste openingen en doorgangen kan navigeren. Doordat FPV drones volledig handmatig worden bestuurd, kunnen ze complexe acrobatische manoeuvres zoals flips, rolls en zelfs ondersteboven vliegen uitvoeren. Wie kiest voor een FPV drone video, valt op door de indrukwekkende, unieke, cinematische en dynamische beelden die met een traditionele drone niet mogelijk zijn.</p>
           <p>FPV beelden bieden een geheel nieuwe ervaring en vertellen in één vlucht een compleet verhaal, waardoor ze ideaal zijn voor bedrijfsvideo's, sport, evenementen en bruiloften. Dankzij de veelzijdigheid van FPV drones kunnen zowel binnen als buiten verbluffende beelden worden vastgelegd, van het vliegen door kleine doorgangen en machines tot het volgen van auto's of andere voertuigen en het navigeren door festivaltenten en kantoorruimtes.</p>
-        </div>
+        </section>
-        <div class="col-md">
+        <section class="col-md">
           <h2 class="section" id="section-about">Over mij</h2>
           <p>Als kind wilde ik piloot worden van grote airline vliegtuigen. Ook droomde ik regelmatig dat ik zelf kon vliegen, zoals Superman. Ik experimenteerde ook veel met filmen en videobewerking. Echter, toen ik wat ouder was koos ik voor een carrière in de technische maakindustrie als ontwerper en engineer. Daarnaast ontwikkelde ik een hobby softwareontwikkeling. Die bleef zó sterk groeien dat ik op een gegeven moment besloot mijn carrière om te gooien en software engineer te worden.</p>
-          <p>Toen ineens drones op mijn radar verschenen, ontdekte ik al snel FPV en had ik er een fascinerende hobby bij. FPV-drones zijn zelfbouw producten, moeten worden geprogrammeerd en tenslotte kun je er mee vliegen alsof je het zelf bent. Het besef kwam dat hierin alles zit waar ik diep van binnen passie voor heb, vliegen, videografie, productontwikkeling en software engineering. Liever laat dan nooit volg ik mijn hart en grijp ik de kans om van mijn ware passies mijn beroep te maken.</p>
+          <p>Toen in 2022 ineens drones op mijn radar verschenen, ontdekte ik al snel FPV en had ik er een fascinerende hobby bij. FPV-drones zijn zelfbouw producten, moeten worden geprogrammeerd en tenslotte kun je er mee vliegen alsof je het zelf bent. Het besef kwam dat hierin alles zit waar ik diep van binnen passie voor heb, vliegen, videografie, productontwikkeling en software engineering. Liever laat dan nooit volg ik mijn hart en grijp ik de kans om van mijn ware passies mijn beroep te maken.</p>
-        </div>
+        </section>
       </div>
+    </div>
 
+    <section class="container-xxl">
       <h2 class="section" id="section-services">Diensten</h2>
       <p>
       <div class="row text-center">
-        <div class="col-lg">
+        <div class="col-sm-6 col-lg">
           <div class="card h-100">
-            <!-- <img src="https://pixabay.com/get/gd7128777282c6130d10cc4a36846b6a7e2ddc5097e97f39515cad627b13aec93756b570f5455b3f2608552932541f97d1b3412dea2d3970116834240881a0ed94862a67cd912d1259efcd0052a3e0a98_640.jpg" class="card-img" alt="..."> -->
+            <img class="card-img" src="assets/static/fittings-2784899_640.jpg" alt="...">
-            <!-- <img src="https://pixabay.com/get/g0183f0fc2f0fed51aba6333baa19c213d184bea5865597750397e14d675ca90a69357dc316fb0a19a6889d33943377b207960105291fab749922b6a4c68b84887972d95834f04dfd15a5067d5797837d_640.jpg" class="card-img" alt="..."> -->
-            <img src="https://pixabay.com/get/g48e3d28ff755610c6d1ea9ea5308799b48092bec26afa05445f53209384dcf28693e86f69ffb1800e6d7adbce1f612f33c391a2e11043a108e0589d8fdc0d7808d8ff5ee31eed247d616f6f759f90332_640.jpg" class="card-img" alt="...">
             <div class="card-img-overlay text-shadow">
               <h4 class="card-title">
                 <i class="fa-solid fa-industry"></i>
@@ -52,9 +52,9 @@
             </div>
           </div>
         </div>
-        <div class="col-lg">
+        <div class="col-sm-6 col-lg">
           <div class="card h-100">
-            <img src="https://pixabay.com/get/gab0674333de1b49ad97adf913009e60da1262415f619560a40ba95990c968ac8595fdcd74e38573f1d581e776c5e0e910ec7d830d7c54acae0e61681031611a3c4710d3736ceb5dbdcd6b89386d2ad39_640.jpg" class="card-img" alt="...">
+            <img class="card-img" src="assets/static/audience-1850119_640.jpg" alt="...">
             <div class="card-img-overlay text-shadow">
               <h4 class="card-title">
                 <i class="fa-solid fa-guitar"></i>
@@ -66,9 +66,9 @@
             </div>
           </div>
         </div>
-        <div class="col-lg">
+        <div class="col-sm-6 col-lg">
           <div class="card h-100">
-            <img src="https://pixabay.com/get/gd22f5a1fcb8a597f5184bb99cd5584e621c86cfe8ce29a292d163b26199bf7286cf2e4357edc895fb1d3d6b371e1cbecd2cd312eaf034bd02fa83c6fd52d20d1cfdef5274105c07940420ce8fc673bec_640.jpg" class="card-img" alt="...">
+            <img class="card-img" src="assets/static/motor-cross-1634206_640.jpg" alt="...">
             <div class="card-img-overlay text-shadow">
               <h4 class="card-title">
                 <i class="fa-solid fa-motorcycle"></i>
@@ -80,9 +80,9 @@
             </div>
           </div>
         </div>
-        <div class="col-lg">
+        <div class="col-sm-6 col-lg">
           <div class="card h-100">
-            <img src="https://pixabay.com/get/g19b9260ab8d1322c979f475e0f645393b8370adfe59106a4f8cd90d5f3eef296cb0413f53e5a04b2ff20ea86a8beb23bd8225aef847b2e5c35217c0ffaada45f6c6205c9c65be9f8bb5b05629bd6eafa_640.jpg" class="card-img" alt="...">
+            <img class="card-img" src="assets/static/love-6600904_640.jpg" alt="...">
             <div class="card-img-overlay text-shadow">
               <h4 class="card-title">
                 <i class="fa-solid fa-champagne-glasses"></i>
@@ -96,117 +96,54 @@
         </div>
       </div>
       </p>
+    </section>
 
-      <h2 class="section" id="section-wow">Werkwijze</h2>
+    <div class="position-relative overflow-hidden">
-      <p>
+      <section class="container-xxl text-shadow">
-      <div class="row text-center">
+        <h2 class="section" id="section-wow">Werkwijze</h2>
-        <div class="col-lg">
+        <p>
-          <div class="card h-100">
+        <div class="row text-center">
-            <div class="card-body">
+          <div class="col-sm-6 col-lg">
-              <h4 class="card-title">
+            <h4>
-                <i class="fa-solid fa-handshake-simple"></i>
+              <i class="fa-solid fa-handshake-simple"></i>
-                <br>Intake
+              <br>Intake
-              </h4>
+            </h4>
-              <p class="card-text">
+            <p>
-                Elk project begint met de juiste voorbereiding. Daarom plan ik graag een persoonlijk gesprek met je in, waarin we jouw doelen, wensen en visie, creatieve ideeën over de inhoud, toon en stijl uitgebreid kunnen bespreken. Wat wil je bereiken met de video? Wat is de boodschap die je wilt overbrengen? Wie is je doelgroep? Op basis van deze informatie maak ik een passend offertevoorstel dat aansluit bij jouw budget.
+              Elk project begint met de juiste voorbereiding. Daarom plan ik graag een persoonlijk gesprek met je in, waarin we jouw doelen, wensen en visie, creatieve ideeën over de inhoud, toon en stijl uitgebreid kunnen bespreken. Wat wil je bereiken met de video? Wat is de boodschap die je wilt overbrengen? Wie is je doelgroep? Op basis van deze informatie maak ik een passend offertevoorstel dat aansluit bij jouw budget.
-              </p>
+            </p>
-            </div>
+          </div>
+          <div class="col-sm-6 col-lg">
+            <h4>
+              <i class="fa-solid fa-plane"></i>
+              <br>Vluchtplan
+            </h4>
+            <p>
+              Wanneer de offerte akkoord is, start ik met de pre-productiefase. Hierin bereid ik alles voor om jouw video te kunnen realiseren. Ik stel een vluchtplan op en schrijf een script of draaiboek dat nauwkeurig is afgestemd op jouw specifieke wensen en visie, toon en stijl. Zo kan ik straks jouw boodschap optimaal in beeld brengen. Zijn er mensen die in beeld komen? Dan zorgen wij samen ervoor dat zij goed geïnstrueerd en voorbereid zijn en weten wat er van hen wordt verwacht.
+            </p>
+          </div>
+          <div class="col-sm-6 col-lg">
+            <h4>
+              <i class="fa-solid fa-video"></i>
+              <br>Opname
+            </h4>
+            <p>
+              Op de afgesproken datum en locatie ga ik aan de slag met het filmen van jouw video en zorg ik ervoor dat alle benodigde beelden worden vastgelegd. Tijdens de opnames houd ik rekening met jouw wensen en zorg ik ervoor dat we binnen de afgesproken tijd en budget blijven. Zijn er opnames buiten gepland? Dan kan het zijn dat de weersomstandigheden roet in het eten gooien. Indien mogelijk plannen we dan een nieuwe datum in om de opnames te voltooien.
+            </p>
+          </div>
+          <div class="col-sm-6 col-lg">
+            <h4>
+              <i class="fa-solid fa-wand-magic-sparkles"></i>
+              <br>Montage
+            </h4>
+            <p>
+              Wanneer de opnames zijn gemaakt, beoordelen en selecteren we samen de beste beelden. Ik breng jouw verhaal tot leven met behulp van beeld-, geluid- en kleurbewerking. Door het toevoegen van speciale effecten (SFX) verrijk ik de kijkervaring. Ik neem elk frame nauwkeurig onder handen om je bedrijf, merk, product of dienst optimaal te presenteren. Daarbij stem ik de visuele bewerking af op je doelgroep en zorg ik voor de juiste formaten voor diverse mediakanalen.
+            </p>
           </div>
         </div>
-        <div class="col-lg">
+        </p>
-          <div class="card h-100">
+      </section>
-            <div class="card-body">
-              <h4 class="card-title">
-                <i class="fa-solid fa-plane"></i>
-                <br>Vluchtplan
-              </h4>
-              <p class="card-text">
-                Wanneer de offerte akkoord is, start ik met de pre-productiefase. Hierin bereid ik alles voor om jouw video te kunnen realiseren. Ik stel een vluchtplan op en schrijf een script of draaiboek dat nauwkeurig is afgestemd op jouw specifieke wensen en visie, toon en stijl. Zo kan ik straks jouw boodschap optimaal in beeld brengen. Zijn er mensen die in beeld komen? Dan zorgen wij samen ervoor dat zij goed geïnstrueerd en voorbereid zijn en weten wat er van hen wordt verwacht.
-              </p>
-            </div>
-          </div>
-        </div>
-        <div class="col-lg">
-          <div class="card h-100">
-            <div class="card-body">
-              <h4 class="card-title">
-                <i class="fa-solid fa-video"></i>
-                <br>Opname
-              </h4>
-              <p class="card-text">
-                Op de afgesproken datum en locatie ga ik aan de slag met het filmen van jouw video en zorg ik ervoor dat alle benodigde beelden worden vastgelegd. Tijdens de opnames houd ik rekening met jouw wensen en zorg ik ervoor dat we binnen de afgesproken tijd en budget blijven. Zijn er opnames buiten gepland? Dan kan het zijn dat de weersomstandigheden roet in het eten gooien. Indien mogelijk plannen we dan een nieuwe datum in om de opnames te voltooien.
-              </p>
-            </div>
-          </div>
-        </div>
-        <div class="col-lg">
-          <div class="card h-100">
-            <div class="card-body">
-              <h4 class="card-title">
-                <i class="fa-solid fa-wand-magic-sparkles"></i>
-                <br>Montage
-              </h4>
-              <p class="card-text">
-                Wanneer de opnames zijn gemaakt, beoordelen en selecteren we samen de beste beelden. Ik breng jouw verhaal tot leven met behulp van beeld-, geluid- en kleurbewerking. Door het toevoegen van speciale effecten (SFX) verrijk ik de kijkervaring. Ik neem elk frame nauwkeurig onder handen om je bedrijf, merk, product of dienst optimaal te presenteren. Daarbij stem ik de visuele bewerking af op je doelgroep en zorg ik voor de juiste formaten voor diverse mediakanalen.
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
-      </p>
-
-      <h2 class="section" id="section-contact">Contact</h2>
-      <p>
-      <div class="row">
-        <div class="col-md"></div>
-        <div class="col-md">
-          <div class="card h-100">
-            <div class="card-body">
-              <h4 class="card-title">Bob Vandevliet</h4>
-              <p>Gecertificeerd FPV-dronepiloot voor open categorie A1, A2 en A3.</p>
-              <h5>Email</h5>
-              <p><a href="mailto:bob@vandevliet-fpv.nl">bob@vandevliet-fpv.nl</a></p>
-              <h5>Telefoon</h5>
-              <p><a href="tel:+31612345678">+31 6 12345678</a></p>
-              <h5>Regio</h5>
-              <p>Arnhem, Gelderland</p>
-              <h5>Socials</h5>
-              <p>
-                <a href="https://www.linkedin.com/in/bobvandevliet" target="_blank" rel="noopener noreferrer"><i class="fab fa-linkedin"></i></a>
-                <a href="https://www.instagram.com/bobvandevliet" target="_blank" rel="noopener noreferrer"><i class="fab fa-instagram"></i></a>
-                <a href="https://www.youtube.com/channel/UCb1J9Z9Z9Z9Z9Z9Z9Z9Z9Z9" target="_blank" rel="noopener noreferrer"><i class="fab fa-youtube"></i></a>
-              </p>
-            </div>
-          </div>
-        </div>
-        <div class="col-md">
-          <div class="card h-100">
-            <div class="card-body">
-            </div>
-          </div>
-        </div>
-        <div class="col-md"></div>
-      </div>
-      <!-- <div class="row justify-content-center">
-        <form>
-          <div class="mb-3">
-            <label for="input-name" class="form-label">Name</label>
-            <input type="text" class="form-control" id="input-name" required>
-          </div>
-          <div class="mb-3">
-            <label for="input-email" class="form-label">Email</label>
-            <input type="email" class="form-control" id="input-email" required>
-          </div>
-          <div class="mb-3">
-            <label for="input-message" class="form-label">Message</label>
-            <textarea class="form-control" id="input-message" rows="5" required></textarea>
-          </div>
-          <button type="submit" class="btn btn-primary">Submit</button>
-        </form>
-      </div> -->
-      </p>
-
     </div>
+
   </main>
 
   <!--# include file="includes/footer.html" -->