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

Optimizing text (B1) and many styling improvements.

Browse source
This commit is contained in:
Bob Vandevliet 2024-06-26 14:48:52 +02:00
parent 9150a22b5b
commit db64fc5f47
11 changed files with 189 additions and 110 deletions
Download patch file Download diff file Expand all files Collapse all files

8
.gitea/workflows/build-and-deploy.yml
View file

@ -10,19 +10,13 @@ on:
- 'master' - 'master'
- 'main' - 'main'
env:
NGINX_STATIC: ${{ vars.NGINX_STATIC }}
jobs: jobs:
build: build:
name: Build and Deploy name: Build and Deploy
runs-on: ubuntu-latest runs-on: ubuntu-latest
container: container:
options: --volume "${NGINX_STATIC}:/usr/share/nginx/static:rw" options: --volume "nginx_static:/usr/share/nginx/static:rw"
steps: steps:
-
name: Echo NGINX_STATIC
run: echo ${NGINX_STATIC}
- -
name: Checkout name: Checkout
uses: actions/checkout@v4 uses: actions/checkout@v4

2
.gitignore vendored
View file

@ -1,3 +1,5 @@
.work/
# Logs # Logs
logs logs
*.log *.log

BIN
public/assets/font/ERASDEMI.TTF Normal file
View file

Binary file not shown.

BIN
public/assets/font/ERASMD.TTF Normal file
View file

Binary file not shown.

BIN
public/assets/font/GOTHICB.TTF Normal file
View file

Binary file not shown.

BIN
public/assets/static/DSC_4615.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 384 KiB

BIN
public/assets/static/GX010078_1703521535190.MP4_snapshot_01.11.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 80 KiB

BIN
public/assets/static/sa-rapita-2483668_640.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 65 KiB

34
public/includes/footer.html
View file

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

104
public/index.html
View file

@ -1,9 +1,9 @@
<!DOCTYPE html> <!DOCTYPE html>
<!--# set var="site" value="Vandevliet FPV" --> <!--# set var="site" value="Vandevliet Aerial Shots" -->
<html lang="en" data-bs-theme="dark"> <html lang="en" data-bs-theme="dark">
<!--# set var="title" value="Vandevliet FPV" --> <!--# set var="title" value="Vandevliet Aerial Shots" -->
<!--# include file="includes/head.html" --> <!--# include file="includes/head.html" -->
<body class="home"> <body class="home">
@ -17,19 +17,16 @@
</div> </div>
</header> </header>
<main class="mt-4"> <main>
<section class="container-xxl"> <section class="container-xxl">
<h2 class="section" id="section-services">FPV drone opnames laten maken</h2> <h2 class="section text-center" id="section-services">FPV drone opnames laten maken</h2>
<p> <p></p>
Ben je op zoek naar een unieke manier om jouw bedrijf, merk, product of dienst in beeld te brengen? Of wil je een speciaal evenement, sportwedstrijd of bruiloft op een bijzondere manier vastleggen? Met mijn FPV drones opnames maak ik adembenemende luchtbeelden die een blijvende indruk achterlaten op jouw publiek. Ik bied een breed scala aan diensten aan, waaronder bedrijfsvideo's, evenementen, sport en bruiloften. Neem gerust contact met me op om de mogelijkheden te bespreken en een offerte op maat te ontvangen.
</p>
<p>
<div class="row text-center"> <div class="row text-center">
<div class="col-sm-6 col-lg"> <div class="col-sm-6 col-lg">
<div class="card h-100"> <div class="card h-100">
<img class="card-img" src="assets/static/fittings-2784899_640.jpg" alt="..."> <img class="card-img grayscale-effect" style="height: 10rem;" src="assets/static/fittings-2784899_640.jpg" alt="...">
<div class="card-img-overlay text-shadow"> <div class="card-body bg-light text-dark">
<h4 class="card-title"> <h4 class="card-title">
<i class="fa-solid fa-industry"></i> <i class="fa-solid fa-industry"></i>
<br>Bedrijfsvideo <br>Bedrijfsvideo
@ -42,8 +39,22 @@
</div> </div>
<div class="col-sm-6 col-lg"> <div class="col-sm-6 col-lg">
<div class="card h-100"> <div class="card h-100">
<img class="card-img" src="assets/static/audience-1850119_640.jpg" alt="..."> <img class="card-img grayscale-effect" style="height: 10rem;" src="assets/static/sa-rapita-2483668_640.jpg" alt="...">
<div class="card-img-overlay text-shadow"> <div class="card-body bg-light text-dark">
<h4 class="card-title">
<i class="fa-solid fa-industry"></i>
<br>Vastgoed
</h4>
<p class="card-text">
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 mogelijkheden.
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-lg">
<div class="card h-100">
<img class="card-img grayscale-effect" style="height: 10rem;" src="assets/static/audience-1850119_640.jpg" alt="...">
<div class="card-body bg-light text-dark">
<h4 class="card-title"> <h4 class="card-title">
<i class="fa-solid fa-guitar"></i> <i class="fa-solid fa-guitar"></i>
<br>Evenementen <br>Evenementen
@ -56,8 +67,8 @@
</div> </div>
<div class="col-sm-6 col-lg"> <div class="col-sm-6 col-lg">
<div class="card h-100"> <div class="card h-100">
<img class="card-img" src="assets/static/motor-cross-1634206_640.jpg" alt="..."> <img class="card-img grayscale-effect" style="height: 10rem;" src="assets/static/motor-cross-1634206_640.jpg" alt="...">
<div class="card-img-overlay text-shadow"> <div class="card-body bg-light text-dark">
<h4 class="card-title"> <h4 class="card-title">
<i class="fa-solid fa-motorcycle"></i> <i class="fa-solid fa-motorcycle"></i>
<br>Sport <br>Sport
@ -70,8 +81,8 @@
</div> </div>
<div class="col-sm-6 col-lg"> <div class="col-sm-6 col-lg">
<div class="card h-100"> <div class="card h-100">
<img class="card-img" src="assets/static/love-6600904_640.jpg" alt="..."> <img class="card-img grayscale-effect" style="height: 10rem;" src="assets/static/love-6600904_640.jpg" alt="...">
<div class="card-img-overlay text-shadow"> <div class="card-body bg-light text-dark">
<h4 class="card-title"> <h4 class="card-title">
<i class="fa-solid fa-champagne-glasses"></i> <i class="fa-solid fa-champagne-glasses"></i>
<br>Bruiloften <br>Bruiloften
@ -83,28 +94,52 @@
</div> </div>
</div> </div>
</div> </div>
</p>
</section> </section>
<div class="container-xxl"> <div>
<div class="row"> <section class="container-xxl">
<section class="col-md"> <h2 class="section text-center" id="section-fpv">Wat is FPV?</h2>
<h2 class="section" id="section-fpv">Wat is FPV?</h2> <div class="row">
<p>FPV, ofwel First Person View, biedt een unieke vliegervaring waarbij de piloot door een speciale videobril een real-time videofeed ontvangt van een op de drone gemonteerde vaste camera. Hierdoor vliegt de piloot vanuit het perspectief van de drone, waardoor hij uiterst precies vluchtlijnen kan bepalen en zeer nauwkeurig door de kleinste openingen en doorgangen kan navigeren. Doordat FPV drones volledig handmatig worden bestuurd, kunnen ze complexe acrobatische manoeuvres uitvoeren zoals flips, rolls en ondersteboven vliegen. De resulterende videobeelden zijn werkelijk adembenemend en bieden een unieke, filmische en dynamische visuele ervaring die traditionele drone-videografie overtreft.</p> <div class="col-md">
<p>FPV-beelden bieden een geheel nieuwe ervaring en vertellen een compleet verhaal in één enkele vlucht, waardoor ze perfect zijn voor bedrijfsvideo's, concerten, shows, optredens, sport- en huwelijksevenementen. Dankzij de flexibiliteit van FPV drones kunnen verbluffende video's zowel binnen als buiten worden opgenomen, van het vliegen door kleine doorgangen en machines tot het achtervolgen van auto's of andere voertuigen en het navigeren door festivaltenten en kantoorruimtes.</p> <p>
</section> FPV, of First Person View, biedt een unieke vliegervaring. Via een videobril ziet de piloot wat de drone ziet. Zo kan hij heel precies vliegen en door de kleinste openingen navigeren. FPV drones worden volledig handmatig bestuurd en kunnen daardoor acrobatische manoeuvres uitvoeren zoals flips, rolls en ondersteboven vliegen. De videobeelden zijn filmisch en dynamisch en overtreffen traditionele drone-videografie.
<section class="col-md"> </p>
<h2 class="section" id="section-about">Over mij</h2> <p>
<p>Als kind wilde ik piloot worden van grote luchtvaart vliegtuigen, een cockpit vond ik maar wat mooi. Maar ik droomde ook vaak dat ik zelf kon vliegen, zoals Superman. Ook experimenteerde ik veel met filmen, videobewerking en elektronisch muziek maken. Echter, toen ik wat ouder was, koos ik voor een carrière als industrieel product ontwerper binnen de technische maakindustrie. Daarnaast ontwikkelde ik een hobby in softwareontwikkeling. Die interesse bleef zo groeien dat ik op een gegeven moment besloot om van carrière te veranderen en professioneel software engineer te worden, maar wel binnen de technische branch.</p> FPV beelden vertellen een compleet verhaal in één vlucht. Ze zijn ideaal voor bedrijfsvideo's, vastgoed, concerten, festivals, (sport)evenementen en bruiloften. FPV drones zijn 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.
<p>Toen drones in 2022 plotseling mijn aandacht trokken, ontdekte ik al snel FPV en kwam ik in aanraking met een nieuwe fascinerende hobby. Het besef kwam dat hierin eigenlijk alles zit waar ik enthousiast van wordt: techniek, vliegen, videografie, productontwikkeling en software engineering. Daarom heb ik in 2024 een knoop doorgehakt om van mijn ware passies mijn beroep te maken door luchtvideografie als dienst aan te bieden.</p> </p>
</section> </div>
</div> <div class="col-md">
<img class="img-fluid" src="assets/static/DSC_4615.png" alt="...">
</div>
</div>
</section>
</div> </div>
<div class="position-relative overflow-hidden arrow-effect"> <div>
<section class="container-xxl text-shadow"> <section class="container-xxl">
<h2 class="section" id="section-wow">Werkwijze</h2> <div class="card h-100 position-relative overflow-hidden">
<p> <img class="card-img position-absolute" src="assets/static/GX010078_1703521535190.MP4_snapshot_01.11.jpg" alt="...">
<div class="card-img-overlay text-dark text-shadow" style="background: rgba(255, 255, 255, 0.6);">
<h2 class="section card-title text-center" id="section-about">Over mij</h2>
<div class="row">
<div class="col-md-6 offset-md-6">
<p>
Als kind wilde ik luchtvaartpiloot worden en droomde ik ervan te kunnen vliegen als Superman. Ik was ook altijd bezig met filmen, videobewerking en elektronische muziek maken. Deze hobby's gaven me veel plezier, maar ik koos uiteindelijk voor een carrière als industrieel productontwerper. Naast mijn werk ontwikkelde ik een passie voor softwareontwikkeling, wat later mijn beroep werd.
</p>
<p>
In 2022 ontdekte ik drones en FPV. Deze fascinerende hobby bracht al mijn interesses samen: techniek, vliegen, videografie, productontwikkeling en software engineering. In 2024 besloot ik van mijn ware passies mijn beroep te maken door luchtvideografie als dienst aan te bieden. Zo komen mijn vroegere hobby's en mijn carrière mooi samen.
</p>
</div>
</div>
</div>
</div>
</section>
</div>
<div>
<section class="container-xxl">
<h2 class="section text-center" id="section-wow">Werkwijze</h2>
<p></p>
<div class="row text-center"> <div class="row text-center">
<div class="col-sm-6 col-lg"> <div class="col-sm-6 col-lg">
<h4> <h4>
@ -143,7 +178,6 @@
</p> </p>
</div> </div>
</div> </div>
</p>
</section> </section>
</div> </div>

151
scss/styles.scss
View file

@ -65,33 +65,54 @@ $primary: $red; // Default: $blue
// Custom styles // Custom styles
// //
.navbar { @font-face {
background-image: none !important; font-family: 'Century Gothic';
background-color: rgba(22, 23, 25, 0.4) !important; src: url('../font/GOTHICB.TTF') format('truetype');
transition: background-color 0.5s;
} }
body.is-scrolled .navbar { @font-face {
background-color: rgba(22, 23, 25, 1.0) !important; font-family: 'Eras ITC';
src: url('../font/ERASMD.TTF') format('truetype');
} }
.navbar-collapse:not(.collapsing):not(.show) { :target::before {
max-width: fit-content; content: "";
display: block;
height: 6rem;
margin-top: -6rem;
visibility: hidden;
} }
.navbar-nav .btn { .anchor-link {
margin-left: var(--bs-navbar-nav-link-padding-x); text-decoration: none;
padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x); opacity: 0;
padding-right: var(--bs-navbar-nav-link-padding-x); transition: opacity 0.2s;
padding-left: var(--bs-navbar-nav-link-padding-x);
} }
.hero { .fa-regular,
height: 100vh; .fa-solid {
color: var(--bs-primary);
} }
.row { h1,
--bs-gutter-y: var(--bs-gutter-x); h2 {
font-family: 'Century Gothic', sans-serif;
}
h3,
h4,
h5,
h6 {
font-family: 'Eras ITC', sans-serif;
}
h1:hover .anchor-link,
h2:hover .anchor-link,
h3:hover .anchor-link,
h4:hover .anchor-link,
h5:hover .anchor-link,
h6:hover .anchor-link {
opacity: 1;
} }
.text-shadow { .text-shadow {
@ -107,64 +128,92 @@ body.is-scrolled .navbar {
1px 1px 1px rgba(0, 0, 0, 0.4); 1px 1px 1px rgba(0, 0, 0, 0.4);
} }
:target::before { .text-dark.text-shadow {
content: ""; text-shadow:
display: block; -1px -1px 1px rgba(255, 255, 255, 0.4),
height: 5rem; -1px 0px 1px rgba(255, 255, 255, 0.4),
margin-top: -5rem; -1px 1px 1px rgba(255, 255, 255, 0.4),
visibility: hidden; 0px -1px 1px rgba(255, 255, 255, 0.4),
0px 0px 1px rgba(255, 255, 255, 0.4),
0px 1px 1px rgba(255, 255, 255, 0.4),
1px -1px 1px rgba(255, 255, 255, 0.4),
1px 0px 1px rgba(255, 255, 255, 0.4),
1px 1px 1px rgba(255, 255, 255, 0.4);
} }
.anchor-link { .navbar {
text-decoration: none; background-image: none !important;
opacity: 0; background-color: rgba(22, 23, 25, 0.4) !important;
transition: opacity 0.2s; transition: background-color 0.5s;
} }
h1:hover .anchor-link, body.is-scrolled .navbar {
h2:hover .anchor-link, background-color: rgba(22, 23, 25, 1.0) !important;
h3:hover .anchor-link, }
h4:hover .anchor-link,
h5:hover .anchor-link, .navbar-collapse:not(.collapsing):not(.show) {
h6:hover .anchor-link { max-width: fit-content;
opacity: 1; }
.nav-item,
.nav-link {
font-family: 'Eras ITC', sans-serif;
color: var(--bs-body-color);
}
.navbar-nav .btn {
margin-left: var(--bs-navbar-nav-link-padding-x);
padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
padding-right: var(--bs-navbar-nav-link-padding-x);
padding-left: var(--bs-navbar-nav-link-padding-x);
}
.hero {
height: 100vh;
}
main {
@extend .mt-3;
}
main>* {
@extend .pt-5;
@extend .pb-3;
}
.row {
margin-top: unset;
--bs-gutter-y: var(--bs-gutter-x);
} }
.cover,
.parallax, .parallax,
.cover,
.card-img { .card-img {
position: absolute;
top: 0;
left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
border-radius: 0;
} }
.parallax { .parallax {
height: 100vh; height: 100vh;
} }
.card {
overflow: hidden;
}
.card-img-overlay { .card-img-overlay {
position: unset; position: unset;
z-index: 1; z-index: 1;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: rgba(0, 0, 0, 0.7);
transition: background-color 0.2s;
} }
.card:hover .card-img-overlay { img.grayscale-effect {
background-color: rgba(0, 0, 0, 0.4); transition: filter 0.2s;
} }
.arrow-effect { *:not(:hover) img.grayscale-effect {
--s: 100px; filter: grayscale(80%);
--c1: var(--bs-body-bg);
--c2: var(--bs-secondary-bg-subtle);
background:
conic-gradient(#0000 75%, var(--c1) 0) 0 calc(var(--s)/4),
conic-gradient(from 45deg, var(--c1) 25%, var(--c2) 0);
background-size: var(--s) var(--s);
} }