diff --git a/.gitea/workflows/build-and-deploy.yml b/.gitea/workflows/build-and-deploy.yml index 5c956b7..b4a4421 100644 --- a/.gitea/workflows/build-and-deploy.yml +++ b/.gitea/workflows/build-and-deploy.yml @@ -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 diff --git a/.gitignore b/.gitignore index 136583f..8070b7a 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,5 @@ +.work/ + # Logs logs *.log diff --git a/public/assets/font/ERASDEMI.TTF b/public/assets/font/ERASDEMI.TTF new file mode 100644 index 0000000..4e6bfd1 Binary files /dev/null and b/public/assets/font/ERASDEMI.TTF differ diff --git a/public/assets/font/ERASMD.TTF b/public/assets/font/ERASMD.TTF new file mode 100644 index 0000000..bfb1b66 Binary files /dev/null and b/public/assets/font/ERASMD.TTF differ diff --git a/public/assets/font/GOTHICB.TTF b/public/assets/font/GOTHICB.TTF new file mode 100644 index 0000000..d3577b9 Binary files /dev/null and b/public/assets/font/GOTHICB.TTF differ diff --git a/public/assets/static/DSC_4615.png b/public/assets/static/DSC_4615.png new file mode 100644 index 0000000..9a67798 Binary files /dev/null and b/public/assets/static/DSC_4615.png differ diff --git a/public/assets/static/GX010078_1703521535190.MP4_snapshot_01.11.jpg b/public/assets/static/GX010078_1703521535190.MP4_snapshot_01.11.jpg new file mode 100644 index 0000000..b3c7a39 Binary files /dev/null and b/public/assets/static/GX010078_1703521535190.MP4_snapshot_01.11.jpg differ diff --git a/public/assets/static/sa-rapita-2483668_640.jpg b/public/assets/static/sa-rapita-2483668_640.jpg new file mode 100644 index 0000000..9842b73 Binary files /dev/null and b/public/assets/static/sa-rapita-2483668_640.jpg differ diff --git a/public/includes/footer.html b/public/includes/footer.html index b861ead..672a1f9 100644 --- a/public/includes/footer.html +++ b/public/includes/footer.html @@ -1,30 +1,30 @@ \ No newline at end of file diff --git a/public/index.html b/public/index.html index e844f24..dac5c00 100644 --- a/public/index.html +++ b/public/index.html @@ -1,9 +1,9 @@ - + - + @@ -17,19 +17,16 @@ -
+
-

FPV drone opnames laten maken

-

- 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. -

-

+

FPV drone opnames laten maken

+

- ... -
+ ... +


Bedrijfsvideo @@ -42,8 +39,22 @@

- ... -
+ ... +
+

+ +
Vastgoed +

+

+ 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. +

+
+
+
+
+
+ ... +


Evenementen @@ -56,8 +67,8 @@

- ... -
+ ... +


Sport @@ -70,8 +81,8 @@

- ... -
+ ... +


Bruiloften @@ -83,28 +94,52 @@

-

-
-
-
-

Wat is FPV?

-

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.

-

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.

-
-
-

Over mij

-

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.

-

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.

-
-
+
+
+

Wat is FPV?

+
+
+

+ 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. +

+

+ 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. +

+
+
+ ... +
+
+
-
-
-

Werkwijze

-

+

+
+
+ ... +
+

Over mij

+
+
+

+ 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. +

+

+ 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. +

+
+
+
+
+
+
+ +
+
+

Werkwijze

+

@@ -143,7 +178,6 @@

-

diff --git a/scss/styles.scss b/scss/styles.scss index 5afcdcd..a737b57 100644 --- a/scss/styles.scss +++ b/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%); } \ No newline at end of file