diff --git a/public/includes/footer.html b/public/includes/footer.html index 263ec81..0bceefe 100644 --- a/public/includes/footer.html +++ b/public/includes/footer.html @@ -5,16 +5,16 @@
-
Contact
+

Contact

Bob Vandevliet

Gecertificeerd FPV-dronepiloot voor open categorie A1 en A3 (binnenkort ook A2).

-
Email
+

Email

bob@vandevliet-aerialshots.com

- -
Regio
+

Regio

Arnhem, Gelderland

- +

diff --git a/public/includes/head.html b/public/includes/head.html index a54191f..70a3ae5 100644 --- a/public/includes/head.html +++ b/public/includes/head.html @@ -6,12 +6,24 @@ <!--# echo var="title" default="Title" --> + + - + - + + + \ No newline at end of file diff --git a/public/index.html b/public/index.html index f8f6ed2..3a5f12b 100644 --- a/public/index.html +++ b/public/index.html @@ -11,7 +11,7 @@

Vandevliet Aerial Shots logo

-

+

FPV dronevideo's voor bedrijven, vastgoed en (sport)evenementen.
Let op: deze website alsook de showreel is nog in ontwikkeling.

@@ -33,10 +33,10 @@
Abstracte close-up afbeelding van een machine.
-

+


Bedrijfsvideo (binnenkort mogelijk) -

+

Laat jouw bedrijf opvallen met unieke dronebeelden, zowel binnen als buiten. Ik leg de bijzondere kenmerken van jouw locatie vast en breng interacties met jouw team in beeld.

@@ -47,10 +47,10 @@
Afbeelding van een moderne woning.
-

+


Vastgoed (binnenkort mogelijk) -

+

Met een vloeiende fly-through door jouw pand en van de omgeving, geef je jouw potentiële kopers of huurders een goed beeld van de locatie en de mogelijkheden.

@@ -61,10 +61,10 @@
Afbeelding van publiek bij een podium.
-

+


Evenementen (binnenkort mogelijk) -

+

Leg de grootsheid en energie van elk evenement vast. Of het nu een optreden, concert, festival of bedrijfsfeest is, FPV drone opnames laten een blijvende indruk achter.

@@ -75,10 +75,10 @@
Afbeelding van motorcrossers.
-

+


Sport (binnenkort mogelijk) -

+

Een FPV drone is ideaal voor het maken van spectaculaire actiebeelden tijdens sportevenementen. Op hoge snelheden houd ik de drone slechts centimeters van de actie verwijderd.

@@ -89,10 +89,10 @@
Afbeelding van een huwelijkspaar.
-

+


Bruiloften -

+

Maak van jullie bruiloft een onvergetelijke dag. Ik leg de mooiste momenten vast vanuit de lucht. Een unieke en romantische herinnering om voor altijd te koesteren.

@@ -154,37 +154,37 @@

-

+


Intake -

+

Elk project begint met een goede voorbereiding. Daarom plan ik graag een persoonlijk gesprek met je in. We bespreken jouw doelen, wensen en visie, creatieve ideeën over de inhoud, en de gewenste toon en stijl. Wat wil je bereiken met de dronevideo? Wat is de boodschap die je wilt overbrengen? Wie is je doelgroep? Op basis van deze informatie maak ik een passende offerte binnen jouw budget.

-

+


Vluchtplan -

+

Zodra de offerte akkoord is, start ik met de preproductiefase. Ik maak een vluchtplan en schrijf een script of draaiboek. Zo zorg ik ervoor dat jouw boodschap optimaal in beeld komt. Komen er ook mensen in beeld? Dan zorgen we er samen voor dat zij goed geïnstrueerd en voorbereid zijn, en weten wat er van hen verwacht wordt.

-

+


Opname -

+

Op de afgesproken datum en locatie begin ik met het opnemen van jouw dronevideo. Tijdens het filmen houd ik rekening met jouw wensen en zorg ik ervoor dat we binnen de afgesproken tijd en budget blijven. Zijn er drone opnames buiten gepland en werkt het weer niet mee? Dan plannen we gewoon een nieuwe datum om de drone opnames te voltooien.

-

+


Montage -

+

Zodra de drone opnames zijn gemaakt, kiezen we samen de beste beelden uit. Daarna breng ik jouw verhaal zorgvuldig tot leven met beeld-, geluids- en kleurbewerking, zodat jouw bedrijf, merk, product of dienst zo goed mogelijk gepresenteerd wordt. Ik zorg ervoor dat de visuele montage aansluit bij je doelgroep en lever jouw dronevideo in de juiste formaten voor de gewenste mediakanalen.

diff --git a/src/js/scripts.js b/src/js/scripts.js index 1820472..e123656 100644 --- a/src/js/scripts.js +++ b/src/js/scripts.js @@ -1,53 +1,56 @@ -/** - * @type {NodeListOf} - */ -const parallaxElems = document.querySelectorAll('.parallax'); - -// Handle scroll events. -window.addEventListener('scroll', () => +document.addEventListener('DOMContentLoaded', () => { + /** + * @type {NodeListOf} + */ + const parallaxElems = document.querySelectorAll('.parallax'); + + // Handle scroll events. + window.addEventListener('scroll', () => + { // Add class to body when scrolled. - document.body.classList.toggle('is-scrolled', window.scrollY > 0); + document.body.classList.toggle('is-scrolled', window.scrollY > 0); - // Parallax effect. - parallaxElems.forEach(parallaxElem => - { - const parentElem = parallaxElem.parentElement; + // Parallax effect. + parallaxElems.forEach(parallaxElem => + { + const parentElem = parallaxElem.parentElement; - const parentRect = parentElem.getBoundingClientRect(); - const parentScroll = parentRect.top + (parentRect.height / 2); + const parentRect = parentElem.getBoundingClientRect(); + const parentScroll = parentRect.top + (parentRect.height / 2); - const windowScroll = window.scrollY + (window.innerHeight / 2); + const windowScroll = window.scrollY + (window.innerHeight / 2); - parallaxElem.style.top = `${(windowScroll - parentScroll) / 4}px`; + parallaxElem.style.top = `${(windowScroll - parentScroll) / 4}px`; + }); }); -}); -/** - * @type {NodeListOf} - */ -const sections = document.querySelectorAll('.section'); + /** + * @type {NodeListOf} + */ + const sections = document.querySelectorAll('.section'); -sections.forEach(section => -{ - if (section.id) + sections.forEach(section => { - const anchor = document.createElement('a'); - anchor.className = 'anchor-link'; - anchor.href = `#${section.id}`; - anchor.innerHTML = ' # '; - section.appendChild(anchor); - } -}); + if (section.id) + { + const anchor = document.createElement('a'); + anchor.className = 'anchor-link'; + anchor.href = `#${section.id}`; + anchor.innerHTML = ' # '; + section.appendChild(anchor); + } + }); -document.querySelectorAll('#navbarNav li.nav-item>a').forEach(anchor => -{ - anchor.addEventListener('click', () => + document.querySelectorAll('#navbarNav li.nav-item>a').forEach(anchor => { - /** - * @type {HTMLButtonElement} - */ - const navbarNav = document.querySelector('button.navbar-toggler[aria-expanded="true"]'); - navbarNav?.click(); + anchor.addEventListener('click', () => + { + /** + * @type {HTMLButtonElement} + */ + const navbarNav = document.querySelector('button.navbar-toggler[aria-expanded="true"]'); + navbarNav?.click(); + }); }); }); \ No newline at end of file diff --git a/src/scss/styles.scss b/src/scss/styles.scss index a6b4313..49eb1a0 100644 --- a/src/scss/styles.scss +++ b/src/scss/styles.scss @@ -3,7 +3,7 @@ // $enable-shadows: true; // Include functions first (so you can manipulate colors, SVGs, calc, etc) -@import "../node_modules/bootstrap/scss/functions"; +@import "../../node_modules/bootstrap/scss/functions"; // scss-docs-start color-variables $red: #cc2929; // Default: #dc3545 @@ -12,54 +12,54 @@ $red: #cc2929; // Default: #dc3545 $primary: $red; // Default: $blue // Include remainder of required Bootstrap stylesheets -@import "../node_modules/bootstrap/scss/variables"; -@import "../node_modules/bootstrap/scss/variables-dark"; +@import "../../node_modules/bootstrap/scss/variables"; +@import "../../node_modules/bootstrap/scss/variables-dark"; // Include any default map overrides here // Include remainder of required parts -@import "../node_modules/bootstrap/scss/maps"; -@import "../node_modules/bootstrap/scss/mixins"; -@import "../node_modules/bootstrap/scss/root"; +@import "../../node_modules/bootstrap/scss/maps"; +@import "../../node_modules/bootstrap/scss/mixins"; +@import "../../node_modules/bootstrap/scss/root"; // Include any other parts as needed -@import "../node_modules/bootstrap/scss/reboot"; -@import "../node_modules/bootstrap/scss/type"; -@import "../node_modules/bootstrap/scss/containers"; -@import "../node_modules/bootstrap/scss/grid"; -@import "../node_modules/bootstrap/scss/images"; -@import "../node_modules/bootstrap/scss/nav"; -@import "../node_modules/bootstrap/scss/navbar"; // Requires nav -@import "../node_modules/bootstrap/scss/buttons"; -@import "../node_modules/bootstrap/scss/button-group"; -@import "../node_modules/bootstrap/scss/card"; -@import "../node_modules/bootstrap/scss/tables"; -@import "../node_modules/bootstrap/scss/forms"; -@import "../node_modules/bootstrap/scss/transitions"; -// @import "../node_modules/bootstrap/scss/accordion"; -// @import "../node_modules/bootstrap/scss/alert"; -// @import "../node_modules/bootstrap/scss/badge"; -// @import "../node_modules/bootstrap/scss/breadcrumb"; -// @import "../node_modules/bootstrap/scss/carousel"; -// @import "../node_modules/bootstrap/scss/close"; -// @import "../node_modules/bootstrap/scss/dropdown"; -// @import "../node_modules/bootstrap/scss/list-group"; -// @import "../node_modules/bootstrap/scss/modal"; // Requires transitions -// @import "../node_modules/bootstrap/scss/offcanvas"; // Requires transitions -// @import "../node_modules/bootstrap/scss/pagination"; -// @import "../node_modules/bootstrap/scss/placeholders"; -// @import "../node_modules/bootstrap/scss/popover"; -// @import "../node_modules/bootstrap/scss/progress"; -// @import "../node_modules/bootstrap/scss/spinners"; -// @import "../node_modules/bootstrap/scss/toasts"; -// @import "../node_modules/bootstrap/scss/tooltip"; +@import "../../node_modules/bootstrap/scss/reboot"; +@import "../../node_modules/bootstrap/scss/type"; +@import "../../node_modules/bootstrap/scss/containers"; +@import "../../node_modules/bootstrap/scss/grid"; +@import "../../node_modules/bootstrap/scss/nav"; +@import "../../node_modules/bootstrap/scss/navbar"; // Requires nav +@import "../../node_modules/bootstrap/scss/buttons"; +@import "../../node_modules/bootstrap/scss/card"; +@import "../../node_modules/bootstrap/scss/images"; +@import "../../node_modules/bootstrap/scss/transitions"; +// @import "../../node_modules/bootstrap/scss/accordion"; +// @import "../../node_modules/bootstrap/scss/alert"; +// @import "../../node_modules/bootstrap/scss/badge"; +// @import "../../node_modules/bootstrap/scss/breadcrumb"; +// @import "../../node_modules/bootstrap/scss/button-group"; +// @import "../../node_modules/bootstrap/scss/carousel"; +// @import "../../node_modules/bootstrap/scss/close"; +// @import "../../node_modules/bootstrap/scss/dropdown"; +// @import "../../node_modules/bootstrap/scss/forms"; +// @import "../../node_modules/bootstrap/scss/list-group"; +// @import "../../node_modules/bootstrap/scss/modal"; // Requires transitions +// @import "../../node_modules/bootstrap/scss/offcanvas"; // Requires transitions +// @import "../../node_modules/bootstrap/scss/pagination"; +// @import "../../node_modules/bootstrap/scss/placeholders"; +// @import "../../node_modules/bootstrap/scss/popover"; +// @import "../../node_modules/bootstrap/scss/progress"; +// @import "../../node_modules/bootstrap/scss/spinners"; +// @import "../../node_modules/bootstrap/scss/tables"; +// @import "../../node_modules/bootstrap/scss/toasts"; +// @import "../../node_modules/bootstrap/scss/tooltip"; // Helpers -@import "../node_modules/bootstrap/scss/helpers"; +@import "../../node_modules/bootstrap/scss/helpers"; // Utilities -@import "../node_modules/bootstrap/scss/utilities"; -@import "../node_modules/bootstrap/scss/utilities/api"; +@import "../../node_modules/bootstrap/scss/utilities"; +@import "../../node_modules/bootstrap/scss/utilities/api"; // // Custom styles @@ -143,7 +143,7 @@ h6:hover .anchor-link { .navbar { background-image: none !important; - background-color: rgba(22, 23, 25, 0.4) !important; + background-color: rgba(22, 23, 25, 0.6) !important; transition: background-color 0.5s; } @@ -157,8 +157,8 @@ body.is-scrolled .navbar { .nav-item, .nav-link { + @extend .text-white; font-family: 'Eras ITC', sans-serif; - color: var(--bs-body-color); } .navbar-nav .btn {