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

Merge branch 'development'

Browse source
This commit is contained in:
Bob Vandevliet 2024-06-26 17:04:40 +02:00
commit 19977ba3cc
16 changed files with 207 additions and 116 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -14,6 +14,8 @@ jobs:
build: build:
name: Build and Deploy name: Build and Deploy
runs-on: ubuntu-latest runs-on: ubuntu-latest
container:
options: --volume "nginx_static:/usr/share/nginx/static:rw"
steps: steps:
- -
name: Checkout name: Checkout
@ -21,8 +23,6 @@ jobs:
- -
name: Setup pnpm name: Setup pnpm
uses: pnpm/action-setup@v4.0.0 uses: pnpm/action-setup@v4.0.0
# with:
# version: 9.2.0
- -
name: Install dependencies name: Install dependencies
run: pnpm install run: pnpm install
@ -31,4 +31,4 @@ jobs:
run: pnpm run build run: pnpm run build
- -
name: Copy files to public folder name: Copy files to public folder
run: rm -rdf ${{ vars.PUBLIC_DIR }}; mkdir -p ${{ vars.PUBLIC_DIR }}; cp -rf public/* ${{ vars.PUBLIC_DIR }} run: mkdir -p /usr/share/nginx/static/fpv; cp -rf public/* /usr/share/nginx/static/fpv

2
.gitignore vendored
View file

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

15
.volumes/nginx/conf/conf.d/default.conf
View file

@ -5,18 +5,21 @@ server {
#access_log /var/log/nginx/host.access.log main; #access_log /var/log/nginx/host.access.log main;
location / {
root /usr/share/nginx/public; root /usr/share/nginx/public;
location / {
index index.html; index index.html;
ssi on;
try_files $uri $uri/ $uri.html =404; try_files $uri $uri/ $uri.html =404;
ssi on;
}
location /includes/ {
try_files $uri $uri/ $uri.html =404;
ssi on;
add_header X-Robots-Tag "noindex, nofollow";
} }
error_page 404 /404.html; error_page 404 /404.html;
location = /404.html {
root /usr/share/nginx/public;
}
error_page 500 502 503 504 /50x.html; error_page 500 502 503 504 /50x.html;
location = /50x.html { location = /50x.html {
root /usr/share/nginx/html; root /usr/share/nginx/html;

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/logo-aerialshots-v1-w.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 7.6 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

BIN
public/assets/static/showreel-sketch.mp4 (Stored with Git LFS) Normal file
View file

Binary file not shown.

8
public/includes/footer.html
View file

@ -1,12 +1,12 @@
<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>
@ -24,7 +24,7 @@
</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>

2
public/includes/nav.html
View file

@ -1,7 +1,7 @@
<nav class="navbar navbar-expand-lg fixed-top"> <nav class="navbar navbar-expand-lg fixed-top">
<div class="container-xxl justify-content-center"> <div class="container-xxl justify-content-center">
<a class="navbar-brand" href="#"> <a class="navbar-brand" href="#">
<img src="static/logo-aerialshots-v1-w.png" alt="Logo" height="48"> <img src="assets/static/logo-aerialshots-v1-w.png" alt="Logo" height="48">
</a> </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"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>

100
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">
@ -12,24 +12,21 @@
<div class="hero position-relative overflow-hidden"> <div class="hero position-relative overflow-hidden">
<video class="cover parallax" 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"> <source src="assets/static/showreel-sketch.mp4" type="video/mp4">
</video> </video>
</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>
<section class="container-xxl">
<h2 class="section text-center" id="section-fpv">Wat is FPV?</h2>
<div class="row"> <div class="row">
<section class="col-md"> <div class="col-md">
<h2 class="section" id="section-fpv">Wat is FPV?</h2> <p>
<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> 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.
<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> <p>
<section class="col-md"> 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.
<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>
<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>
</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">
<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> <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>

BIN
public/static/logo-aerialshots-v1-w.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 7.5 KiB

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);
} }