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

Merge branch 'development'
All checks were successful
Build and Deploy / Build and Deploy (push) Successful in 31s
Details

Browse source
This commit is contained in:
Bob Vandevliet 2024-12-07 12:22:43 +01:00
commit 46714356cb
5 changed files with 532 additions and 356 deletions
Download patch file Download diff file Expand all files Collapse all files

12
package.json
View file

@ -17,16 +17,16 @@
"bootstrap": "^5.3.3"
},
"devDependencies": {
"@eslint/js": "^9.14.0",
"@eslint/js": "^9.16.0",
"autoprefixer": "^10.4.20",
"clean-css": "^5.3.3",
"eslint": "^9.14.0",
"globals": "^15.11.0",
"eslint": "^9.16.0",
"globals": "^15.13.0",
"html-minifier-terser": "^7.2.0",
"npm-run-all": "^4.1.5",
"postcss": "^8.4.47",
"postcss": "^8.4.49",
"postcss-cli": "^11.0.0",
"sass": "^1.80.6",
"terser": "^5.36.0"
"sass": "^1.82.0",
"terser": "^5.37.0"
}
}

771
pnpm-lock.yaml generated
View file

File diff suppressed because it is too large Load diff

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

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 14 KiB

36
public/index.html
View file

@ -9,13 +9,11 @@
<!--# include file="includes/nav.html" -->
<div class="hero position-relative overflow-hidden">
<div class="position-absolute top-50 start-50 translate-middle text-center text-white" style="z-index: 1;">
<h1 class="text-shadow"><img src="assets/static/logo-aerialshots-v1-s.png" alt="Vandevliet Aerial Shots logo" height="72"></h1>
<p class="fs-5 text-shadow">
FPV dronevideo's voor bedrijven, vastgoed, recreatie, sport en evenementen.<br>
Let op: deze website alsook de showreel is nog in ontwikkeling.
</p>
<p><a class="btn btn-primary" href="#section-services">Ontdek meer</a></p>
<div class="hero-body position-absolute bottom-0" style="z-index: 1;">
<h1 class="h5">
FPV dronevideo's voor bedrijven, vastgoed, recreatie, sport en evenementen.
</h1>
<p><a class="btn btn-primary" href="#section-services">Ontdek meer <i class="fa-solid fa-arrow-down"></i></a></p>
</div>
<video class="cover parallax" preload="auto" playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
<source src="assets/static/showreel-sketch.mp4" type="video/mp4">
@ -113,32 +111,32 @@
</p>
</div>
<div class="col-md mt-0">
<div id="carouselExampleCaptions" class="carousel slide">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
</div>
<div class="carousel-inner text-shadow">
<div id="carouselMyDrones" class="carousel slide">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block img-fluid" src="assets/static/DSC_4615.png" alt="Afbeelding van mijn 7-inch FPV drone met GoPro actiecamera.">
<div class="carousel-caption d-block">
<img class="img-fluid" src="assets/static/DSC_4615.png" alt="Afbeelding van mijn 7-inch FPV drone met GoPro actiecamera.">
<div class="carousel-caption">
<!-- <h3>First slide label</h3> -->
<p>Mijn 7-inch FPV drone met GoPro actiecamera,<br>ideaal voor outdoor vliegen en lange afstanden.</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="assets/static/20240815_184226.png" alt="Afbeelding van mijn 3.5-inch cinewhoop met Caddx Walnut camera.">
<div class="carousel-caption d-block">
<img class="img-fluid" src="assets/static/20240815_184226.png" alt="Afbeelding van mijn 3.5-inch cinewhoop met Caddx Walnut camera.">
<div class="carousel-caption">
<!-- <h3>Second slide label</h3> -->
<p>Mijn 3.5-inch cinewhoop met Caddx Walnut camera,<br>ideaal voor indoor vliegen en dichtbij personen.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselMyDrones" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselMyDrones" data-bs-slide-to="1" aria-label="Slide 2"></button>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselMyDrones" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
<button class="carousel-control-next" type="button" data-bs-target="#carouselMyDrones" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>

63
src/scss/styles.scss
View file

@ -190,7 +190,8 @@ h6:hover .anchor-link {
color: var(--bs-primary);
}
.navbar {
.navbar,
.hero-body {
background-image: none !important;
background-color: rgba(22, 23, 25, 0.6) !important;
transition: background-color 0.5s;
@ -204,11 +205,38 @@ body.is-scrolled .navbar {
max-width: fit-content;
}
.nav-item,
.nav-link {
.hero {
height: 100vh;
}
.hero-body {
width: 100%;
padding: 1rem;
@extend .h5;
@extend .text-center;
@extend .text-white;
font-family: 'Eras ITC',
var(--#{$prefix}font-sans-serif);
.btn {
@extend .text-white;
@extend .h5;
}
}
.nav-item {
.nav-link,
.btn {
@extend .text-white;
@extend .h5;
}
}
.btn {
.fa-regular,
.fa-solid {
color: inherit;
}
}
.navbar-nav .btn {
@ -218,10 +246,6 @@ body.is-scrolled .navbar {
padding-left: var(--bs-navbar-nav-link-padding-x);
}
.hero {
height: 100vh;
}
.row {
margin-top: unset;
--bs-gutter-y: var(--bs-gutter-x);
@ -276,6 +300,27 @@ img.grayscale-effect {
height: 100%;
}
.carousel-caption {
right: unset;
left: unset;
bottom: 0;
// @extend .text-shadow;
}
.carousel-indicators {
position: unset;
border-bottom-left-radius: var(--bs-border-radius);
border-bottom-right-radius: var(--bs-border-radius);
}
.carousel-caption,
.carousel-indicators {
width: 100%;
background-color: rgba(22, 23, 25, 0.6) !important;
@extend .m-0;
@extend .p-0;
}
.list-group-item {
background-color: inherit;
border: solid var(--bs-body-bg);