Merge branch 'feature/contact-page' into development

Title and description variables.
Different bg color for contact component in main vs footer.
2025-12-18 20:05:11 +01:00 · 2025-12-18 20:01:52 +01:00 · 2025-12-18 20:01:44 +01:00 · 2025-12-18 20:01:43 +01:00 · 2025-12-18 20:01:43 +01:00 · 2025-12-18 20:01:35 +01:00
11 changed files with 113 additions and 78 deletions
--- a/public/contact.html
+++ b/public/contact.html
@ -2,7 +2,7 @@
 <html lang="nl" data-bs-theme="dark">

 <head>
-  <!--# include file="/includes/head.html" -->
+  <!--# include file='/includes/partials/head-content.html' -->

  <title>Vandevliet Aerial Shots</title>
  <meta name="description" content="FPV dronevideo's voor bedrijven, vastgoed, recreatie, sport en evenementen.">
@ -15,22 +15,23 @@
  <meta property="og:image" content="/assets/static/logo-aerialshots-v1-w.png">
 </head>

-<body>
+<body class="d-flex flex-column min-vh-100">
  <header>
-    <!--# include file="/includes/nav.html" -->
+    <!--# include file='/includes/components/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>
+  <main>
+    <section class="container-xxl pb-0">
+      <h1 id="contact" class="text-center">Contact</h1>
+      <!--# include file='/includes/components/contact-row.html' -->
    </section>

    <!-- Nothing more here yet, contact form will be added later, contact info is in the footer -->
  </main>

-  <!--# include file="/includes/footer.html" -->
+  <footer class="bg-secondary-subtle">
+    <!--# include file='/includes/partials/footer-bottom.html' -->
+  </footer>
 </body>

 </html>
--- a/public/includes/components/contact-row.html
+++ b/public/includes/components/contact-row.html
@ -0,0 +1,38 @@
+<div class="row justify-content-center">
+  <p class="lead text-center">
+    Stuur mij gerust een mailtje voor een offerte of vrijblijvend gesprek! 🙂
+    <br>🡇
+  </p>
+  <div class="col-6 col-lg-3">
+    <div class="card h-100 bg-secondary-subtle">
+      <div class="card-body d-flex flex-column">
+        <h2 class="section fs-3 card-title">Bob Vandevliet</h2>
+        <p style="margin-top: 0 !important;">Gecertificeerd FPV-dronepiloot</p>
+        <p>
+          <a href="mailto:bob@vandevliet-aerialshots.com">bob@vandevliet-aerialshots.com</a>
+          <br>Arnhem, Gelderland
+        </p>
+        <!-- <p><a class='btn btn-primary' href='/contact'>Offerte aanvragen</a></p> -->
+        <p class="fs-5 ff-header">Vandevliet Aerial Shots</p>
+        <p style="margin-top: 0 !important;">
+          KvK: 94567255<br>
+          Btw: NL005095319B19
+        </p>
+        <p>
+          <a href="/assets/static/Vandevliet AS - Algemene Voorwaarden - 250530.pdf" target="_blank">Algemene Voorwaarden</a>
+        </p>
+        <!-- <h4 class='fs-5'>Socials</h4> -->
+        <p class="socials fs-2" style="margin-top: auto !important; padding-top: 1rem !important;">
+          <a 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 href="https://www.youtube.com/@vandevliet-fpv" target="_blank" rel="noopener noreferrer" title="Vandevliet Aerial Shots on YouTube" aria-label="Vandevliet Aerial Shots on YouTube"><i class="fab fa-youtube"></i></a>
+          <a href="https://www.linkedin.com/company/vdv-as" target="_blank" rel="noopener noreferrer" title="Vandevliet Aerial Shots on LinkedIn" aria-label="Vandevliet Aerial Shots on LinkedIn"><i class="fab fa-linkedin"></i></a>
+        </p>
+      </div>
+    </div>
+  </div>
+  <div class="col-6 col-lg-3">
+    <div class="card h-100 bg-transparent">
+      <img class="card-img" src="/assets/static/20230909_150343.jpg" alt="Portrait foto van mijzelf.">
+    </div>
+  </div>
+</div>
--- a/public/includes/components/nav.html
+++ b/public/includes/components/nav.html
--- a/public/includes/footer.html
+++ b/public/includes/footer.html
@ -1,46 +0,0 @@
-<footer class="bg-secondary-subtle pt-3">
-
-  <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 d-flex flex-column">
-            <h2 class="section fs-3 card-title">Bob Vandevliet</h2>
-            <p style="margin-top: 0 !important;">Gecertificeerd FPV-dronepiloot</p>
-            <p>
-              <a href="mailto:bob@vandevliet-aerialshots.com">bob@vandevliet-aerialshots.com</a>
-              <br>Arnhem, Gelderland
-            </p>
-            <!-- <p><a class="btn btn-primary" href="/contact">Offerte aanvragen</a></p> -->
-            <p class="fs-5 ff-header">Vandevliet Aerial Shots</p>
-            <p style="margin-top: 0 !important;">
-              KvK: 94567255<br>
-              Btw: NL005095319B19
-            </p>
-            <p>
-              <a href="/assets/static/Vandevliet AS - Algemene Voorwaarden - 250530.pdf" target="_blank">Algemene Voorwaarden</a>
-            </p>
-            <!-- <h4 class="fs-5">Socials</h4> -->
-            <p class="socials fs-2" style="margin-top: auto !important; padding-top: 1rem !important;">
-              <a 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 href="https://www.youtube.com/@vandevliet-fpv" target="_blank" rel="noopener noreferrer" title="Vandevliet Aerial Shots on YouTube" aria-label="Vandevliet Aerial Shots on YouTube"><i class="fab fa-youtube"></i></a>
-              <a href="https://www.linkedin.com/company/vdv-as" target="_blank" rel="noopener noreferrer" title="Vandevliet Aerial Shots on LinkedIn" aria-label="Vandevliet Aerial Shots on LinkedIn"><i class="fab fa-linkedin"></i></a>
-            </p>
-          </div>
-        </div>
-      </div>
-      <div class="col-6 col-lg-3">
-        <div class="card h-100 bg-transparent">
-          <img class="card-img" src="/assets/static/20230909_150343.jpg" alt="Portrait foto van mijzelf.">
-        </div>
-      </div>
-    </div>
-  </section>
-
-  <div class="text-center py-4">
-    <p>
-      Vandevliet Aerial Shots &copy; <!--# config timefmt="%Y" --><!--# echo var="date_local" -->
-      &bull; <a href="/privacy#">Privacyverklaring</a>
-    </p>
-  </div>
-</footer>
--- a/public/includes/partials/footer-bottom.html
+++ b/public/includes/partials/footer-bottom.html
@ -0,0 +1,6 @@
+<div class="text-center py-4">
+  <p>
+    Vandevliet Aerial Shots &copy; <!--# config timefmt='%Y' --><!--# echo var='date_local' -->
+    &bull; <a href="/privacy#">Privacyverklaring</a>
+  </p>
+</div>
--- a/public/includes/partials/head-content.html
+++ b/public/includes/partials/head-content.html
@ -11,14 +11,19 @@
      https://cdn.jsdelivr.net
      https://*.fontawesome.com;
    media-src 'self'
-      https://www.youtube.com https://youtu.be
+      https://www.youtube.com
+      https://youtu.be
      https://www.linkedin.com;
    frame-src 'self'
-      https://www.youtube.com/embed/ https://youtu.be/embed/
+      https://www.youtube.com/embed/
+      https://youtu.be/embed/
      https://www.linkedin.com/embed/;
-    style-src 'self' 'unsafe-inline' https://*.fontawesome.com;
-    font-src 'self' https://*.fontawesome.com;
-    connect-src 'self' 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:;
    ">
--- a/public/includes/pricing/cat-open.html
+++ b/public/includes/pricing/cat-open.html
@ -2,7 +2,7 @@
  <div class="card-body">
    <h3 class="card-title">Open categorie</h3>
    <p class="card-text fs-4 ff-header">vanaf €350,-</p>
-    <p class="card-text">Geschikt voor indoor en vluchten in ongecontroleerd luchtruim met een laag risico:</p>
+    <p class="card-text">Geschikt voor indoor drone tours en vluchten in ongecontroleerd luchtruim met een laag risico:</p>
    <ul>
      <li>Bedrijfsvideo</li>
      <li>Vastgoed</li>
--- a/public/index.html
+++ b/public/index.html
@ -1,27 +1,30 @@
+<!--# set var='title' value='Vandevliet Aerial Shots' -->
+<!--# set var='description' value='FPV dronevideo\'s voor bedrijven, vastgoed, recreatie, sport en evenementen' -->
+
 <!DOCTYPE html>
 <html lang="nl" data-bs-theme="dark">

 <head>
-  <!--# include file="/includes/head.html" -->
+  <!--# include file='/includes/partials/head-content.html' -->

-  <title>Vandevliet Aerial Shots</title>
-  <meta name="description" content="FPV dronevideo's voor bedrijven, vastgoed, recreatie, sport en evenementen.">
+  <title><!--# echo var='title' --></title>
+  <meta name="description" content="<!--# echo var='description' -->">

-  <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:title" content="<!--# echo var='title' -->">
+  <meta property="og:description" content="<!--# echo var='description' -->">
  <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>
+<body class="d-flex flex-column min-vh-100">
  <header>
-    <!--# include file="/includes/nav.html" -->
+    <!--# include file='/includes/components/nav.html' -->

    <div class="hero position-relative overflow-hidden" style="height: 100vh;">
      <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</h1>
+        <h1 class="lead"><!--# echo var='description' --></h1>
        <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">
@ -128,15 +131,15 @@
      </div>
      <div class="row justify-content-center">
        <div class="col-sm-6 col-lg-4">
-          <!--# include file="/includes/pricing/cat-open.html" -->
+          <!--# include file='/includes/pricing/cat-open.html' -->
        </div>
        <div class="col-sm-6 col-lg-4">
-          <!--# include file="/includes/pricing/cat-specific.html" -->
+          <!--# include file='/includes/pricing/cat-specific.html' -->
        </div>
      </div>
      <div class="row justify-content-center">
        <div class="col-lg-8">
-          <!--# include file="/includes/pricing/post-edit.html" -->
+          <!--# include file='/includes/pricing/post-edit.html' -->
        </div>
      </div>
    </section>
@ -190,7 +193,13 @@
    </section>
  </main>

-  <!--# include file="/includes/footer.html" -->
+  <footer class="bg-secondary-subtle">
+    <section class="container-xxl">
+      <!--# include file='/includes/components/contact-row.html' -->
+    </section>
+
+    <!--# include file='/includes/partials/footer-bottom.html' -->
+  </footer>
 </body>

 </html>
--- a/public/privacy.html
+++ b/public/privacy.html
@ -2,7 +2,7 @@
 <html lang="nl" data-bs-theme="dark">

 <head>
-  <!--# include file="/includes/head.html" -->
+  <!--# include file='/includes/partials/head-content.html' -->

  <title>Privacyverklaring • Vandevliet Aerial Shots</title>
  <meta name="description" content="Privacyverklaring • Vandevliet Aerial Shots">
@ -15,9 +15,9 @@
  <meta property="og:image" content="/assets/static/logo-aerialshots-v1-w.png">
 </head>

-<body>
+<body class="d-flex flex-column min-vh-100">
  <header>
-    <!--# include file="/includes/nav.html" -->
+    <!--# include file='/includes/components/nav.html' -->
  </header>

  <main>
@ -56,7 +56,7 @@

  </main>

-  <!--# include file="/includes/footer.html" -->
+  <!--# include file='/includes/footer.html' -->
 </body>

 </html>
--- a/src/js/scripts.js
+++ b/src/js/scripts.js
@ -28,15 +28,28 @@ window.addEventListener('pageshow', () =>

 document.addEventListener('DOMContentLoaded', () =>
 {
+  /**
+   * @type {HTMLDivElement}
+   */
+  const navBar = document.getElementById('navbarNav');
+  /**
+   * @type {NodeListOf<HTMLAnchorElement>}
+   */
+  const navLinks = navBar.querySelectorAll('a.nav-link');
  /**
   * @type {NodeListOf<HTMLElement>}
   */
  const sectionsWithId = document.querySelectorAll('section[id]');

+  // Update nav links and add anchor links to section headers.
  sectionsWithId.forEach(anchorTarget =>
  {
+    /**
+     * @type {HTMLHeadingElement|null}
+     */
    const anchorHeader = anchorTarget.querySelector('h1,h2');

+    // Add anchor link to section header.
    if (anchorHeader)
    {
      const anchorLink = document.createElement('a');
@ -48,7 +61,7 @@ document.addEventListener('DOMContentLoaded', () =>
  });

  // Collapse the navbar in mobile view after clicking a link.
-  document.querySelectorAll('#navbarNav li.nav-item>a').forEach(navLink =>
+  navLinks.forEach(navLink =>
  {
    navLink.addEventListener('click', () =>
    {
--- a/src/scss/styles.scss
+++ b/src/scss/styles.scss
@ -91,6 +91,7 @@ var(--#{$prefix}font-sans-serif);
 main {
  @extend .pt-3;
  @extend .pb-4;
+  @extend .flex-grow-1;
 }

 section,
@ -99,6 +100,10 @@ main>* {
  @extend .pb-3;
 }

+header {
+  min-height: 4.5rem;
+}
+
 ::selection {
  @extend .text-dark;
  background-color: $red-200;
@ -313,6 +318,10 @@ img.grayscale-effect {
  overflow: hidden;
 }

+footer .card {
+  background-color: var(--bs-card-bg) !important;
+}
+
 .card-img-overlay {
  position: unset;
  z-index: 1;
Author	SHA1	Message	Date
Bob Vandevliet	b6414d67c1	Merge branch 'feature/contact-page' into development	2025-12-18 20:05:11 +01:00
Bob Vandevliet	72b3e436f4	Title and description variables.	2025-12-18 20:01:52 +01:00
Bob Vandevliet	cdb2302408	Different bg color for contact component in main vs footer.	2025-12-18 20:01:44 +01:00
Bob Vandevliet	d148dd8c4a	Alignment fix on contact page.	2025-12-18 20:01:43 +01:00
Bob Vandevliet	8a2835a13e	Consistent linking, less confusing, partial revert of 0e82abef.	2025-12-18 20:01:43 +01:00
Bob Vandevliet	f35da10e0e	Wrapping up contact footer and page.	2025-12-18 20:01:35 +01:00
Bob Vandevliet	66b162f9db	Stick footer to bottom of window.	2025-12-18 20:01:26 +01:00
Bob Vandevliet	c23bed009f	Re-organized templates/partials and hierarchy.	2025-12-18 20:00:40 +01:00
Bob Vandevliet	ff363f50e9	Fix for dynamic nav links based on available sections on current page.	2025-12-18 20:00:28 +01:00
Bob Vandevliet	32b9b0e152	Minor tweaks.	2025-12-18 20:00:27 +01:00