Optimizing text (B1) and many styling improvements.
This commit is contained in:
Bob Vandevliet
parent
9150a22b5b
commit
db64fc5f47
11 changed files with 189 additions and 110 deletions
|
|
@ -10,19 +10,13 @@ on:
|
|||
- 'master'
|
||||
- 'main'
|
||||
|
||||
env:
|
||||
NGINX_STATIC: ${{ vars.NGINX_STATIC }}
|
||||
|
||||
jobs:
|
||||
build:
|
||||
name: Build and Deploy
|
||||
runs-on: ubuntu-latest
|
||||
container:
|
||||
options: --volume "${NGINX_STATIC}:/usr/share/nginx/static:rw"
|
||||
options: --volume "nginx_static:/usr/share/nginx/static:rw"
|
||||
steps:
|
||||
-
|
||||
name: Echo NGINX_STATIC
|
||||
run: echo ${NGINX_STATIC}
|
||||
-
|
||||
name: Checkout
|
||||
uses: actions/checkout@v4
|
||||
|
|
|
|||
2
.gitignore
vendored
2
.gitignore
vendored
|
|
@ -1,3 +1,5 @@
|
|||
.work/
|
||||
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
|
|
|
|||
BIN
public/assets/font/ERASDEMI.TTF
Normal file
BIN
public/assets/font/ERASDEMI.TTF
Normal file
Binary file not shown.
BIN
public/assets/font/ERASMD.TTF
Normal file
BIN
public/assets/font/ERASMD.TTF
Normal file
Binary file not shown.
BIN
public/assets/font/GOTHICB.TTF
Normal file
BIN
public/assets/font/GOTHICB.TTF
Normal file
Binary file not shown.
BIN
public/assets/static/DSC_4615.png
Normal file
BIN
public/assets/static/DSC_4615.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 384 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 80 KiB |
BIN
public/assets/static/sa-rapita-2483668_640.jpg
Normal file
BIN
public/assets/static/sa-rapita-2483668_640.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 65 KiB |
|
|
@ -1,12 +1,12 @@
|
|||
<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="col-6 col-lg-3">
|
||||
<div class="card h-100">
|
||||
<div class="card-body">
|
||||
<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>
|
||||
<h5>Email</h5>
|
||||
<p><a href="mailto:bob@vandevliet-fpv.nl">bob@vandevliet-fpv.nl</a></p>
|
||||
|
|
@ -24,7 +24,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<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="...">
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -33,6 +33,6 @@
|
|||
|
||||
<div class="text-center py-4">
|
||||
<!--# config timefmt="%Y" -->
|
||||
© <!--# echo var="date_local" --> <!--# echo var="site" default="Website Title" -->
|
||||
<!--# echo var="site" default="Website Title" --> © <!--# echo var="date_local" -->
|
||||
</div>
|
||||
</footer>
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
<!DOCTYPE html>
|
||||
<!--# set var="site" value="Vandevliet FPV" -->
|
||||
<!--# set var="site" value="Vandevliet Aerial Shots" -->
|
||||
|
||||
<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" -->
|
||||
|
||||
<body class="home">
|
||||
|
|
@ -17,19 +17,16 @@
|
|||
</div>
|
||||
</header>
|
||||
|
||||
<main class="mt-4">
|
||||
<main>
|
||||
|
||||
<section class="container-xxl">
|
||||
<h2 class="section" id="section-services">FPV drone opnames laten maken</h2>
|
||||
<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>
|
||||
<h2 class="section text-center" id="section-services">FPV drone opnames laten maken</h2>
|
||||
<p></p>
|
||||
<div class="row text-center">
|
||||
<div class="col-sm-6 col-lg">
|
||||
<div class="card h-100">
|
||||
<img class="card-img" src="assets/static/fittings-2784899_640.jpg" alt="...">
|
||||
<div class="card-img-overlay text-shadow">
|
||||
<img class="card-img grayscale-effect" style="height: 10rem;" src="assets/static/fittings-2784899_640.jpg" alt="...">
|
||||
<div class="card-body bg-light text-dark">
|
||||
<h4 class="card-title">
|
||||
<i class="fa-solid fa-industry"></i>
|
||||
<br>Bedrijfsvideo
|
||||
|
|
@ -42,8 +39,22 @@
|
|||
</div>
|
||||
<div class="col-sm-6 col-lg">
|
||||
<div class="card h-100">
|
||||
<img class="card-img" src="assets/static/audience-1850119_640.jpg" alt="...">
|
||||
<div class="card-img-overlay text-shadow">
|
||||
<img class="card-img grayscale-effect" style="height: 10rem;" src="assets/static/sa-rapita-2483668_640.jpg" alt="...">
|
||||
<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">
|
||||
<i class="fa-solid fa-guitar"></i>
|
||||
<br>Evenementen
|
||||
|
|
@ -56,8 +67,8 @@
|
|||
</div>
|
||||
<div class="col-sm-6 col-lg">
|
||||
<div class="card h-100">
|
||||
<img class="card-img" src="assets/static/motor-cross-1634206_640.jpg" alt="...">
|
||||
<div class="card-img-overlay text-shadow">
|
||||
<img class="card-img grayscale-effect" style="height: 10rem;" src="assets/static/motor-cross-1634206_640.jpg" alt="...">
|
||||
<div class="card-body bg-light text-dark">
|
||||
<h4 class="card-title">
|
||||
<i class="fa-solid fa-motorcycle"></i>
|
||||
<br>Sport
|
||||
|
|
@ -70,8 +81,8 @@
|
|||
</div>
|
||||
<div class="col-sm-6 col-lg">
|
||||
<div class="card h-100">
|
||||
<img class="card-img" src="assets/static/love-6600904_640.jpg" alt="...">
|
||||
<div class="card-img-overlay text-shadow">
|
||||
<img class="card-img grayscale-effect" style="height: 10rem;" src="assets/static/love-6600904_640.jpg" alt="...">
|
||||
<div class="card-body bg-light text-dark">
|
||||
<h4 class="card-title">
|
||||
<i class="fa-solid fa-champagne-glasses"></i>
|
||||
<br>Bruiloften
|
||||
|
|
@ -83,28 +94,52 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</p>
|
||||
</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">
|
||||
<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 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>
|
||||
<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>
|
||||
</section>
|
||||
<section class="col-md">
|
||||
<h2 class="section" id="section-about">Over mij</h2>
|
||||
<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 class="col-md">
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
<div class="col-md">
|
||||
<img class="img-fluid" src="assets/static/DSC_4615.png" alt="...">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="position-relative overflow-hidden arrow-effect">
|
||||
<section class="container-xxl text-shadow">
|
||||
<h2 class="section" id="section-wow">Werkwijze</h2>
|
||||
<div>
|
||||
<section class="container-xxl">
|
||||
<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>
|
||||
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="col-sm-6 col-lg">
|
||||
<h4>
|
||||
|
|
@ -143,7 +178,6 @@
|
|||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
151
scss/styles.scss
151
scss/styles.scss
|
|
@ -65,33 +65,54 @@ $primary: $red; // Default: $blue
|
|||
// Custom styles
|
||||
//
|
||||
|
||||
.navbar {
|
||||
background-image: none !important;
|
||||
background-color: rgba(22, 23, 25, 0.4) !important;
|
||||
transition: background-color 0.5s;
|
||||
@font-face {
|
||||
font-family: 'Century Gothic';
|
||||
src: url('../font/GOTHICB.TTF') format('truetype');
|
||||
}
|
||||
|
||||
body.is-scrolled .navbar {
|
||||
background-color: rgba(22, 23, 25, 1.0) !important;
|
||||
@font-face {
|
||||
font-family: 'Eras ITC';
|
||||
src: url('../font/ERASMD.TTF') format('truetype');
|
||||
}
|
||||
|
||||
.navbar-collapse:not(.collapsing):not(.show) {
|
||||
max-width: fit-content;
|
||||
:target::before {
|
||||
content: "";
|
||||
display: block;
|
||||
height: 6rem;
|
||||
margin-top: -6rem;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.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);
|
||||
.anchor-link {
|
||||
text-decoration: none;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.hero {
|
||||
height: 100vh;
|
||||
.fa-regular,
|
||||
.fa-solid {
|
||||
color: var(--bs-primary);
|
||||
}
|
||||
|
||||
.row {
|
||||
--bs-gutter-y: var(--bs-gutter-x);
|
||||
h1,
|
||||
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 {
|
||||
|
|
@ -107,64 +128,92 @@ body.is-scrolled .navbar {
|
|||
1px 1px 1px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
:target::before {
|
||||
content: "";
|
||||
display: block;
|
||||
height: 5rem;
|
||||
margin-top: -5rem;
|
||||
visibility: hidden;
|
||||
.text-dark.text-shadow {
|
||||
text-shadow:
|
||||
-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),
|
||||
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 {
|
||||
text-decoration: none;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s;
|
||||
.navbar {
|
||||
background-image: none !important;
|
||||
background-color: rgba(22, 23, 25, 0.4) !important;
|
||||
transition: background-color 0.5s;
|
||||
}
|
||||
|
||||
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;
|
||||
body.is-scrolled .navbar {
|
||||
background-color: rgba(22, 23, 25, 1.0) !important;
|
||||
}
|
||||
|
||||
.navbar-collapse:not(.collapsing):not(.show) {
|
||||
max-width: fit-content;
|
||||
}
|
||||
|
||||
.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,
|
||||
.cover,
|
||||
.card-img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.parallax {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.card {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-img-overlay {
|
||||
position: unset;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.card:hover .card-img-overlay {
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
img.grayscale-effect {
|
||||
transition: filter 0.2s;
|
||||
}
|
||||
|
||||
.arrow-effect {
|
||||
--s: 100px;
|
||||
--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);
|
||||
*:not(:hover) img.grayscale-effect {
|
||||
filter: grayscale(80%);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue