diff --git a/src/_includes/base.liquid b/src/_includes/base.liquid index ab626b3..995d54f 100644 --- a/src/_includes/base.liquid +++ b/src/_includes/base.liquid @@ -10,30 +10,27 @@ - + -
-
-
- Ayrton Diablo S - Ayrton Diablo S -
-
- -
+
+
+ Ayrton Diablo S
-
-
-

Koen de Ruiter

-

Hobby Developer

-

Lighting Designer

+
+ Beam of Ayrton Diablo S +
+
+
+
+

Koen de Ruiter

+

Hobby Developer

+

Lighting Designer

-
- GitHub - LinkedIn -
+
+ GitHub + LinkedIn
diff --git a/src/static/beam.png b/src/static/beam.png new file mode 100644 index 0000000..6c76ca3 Binary files /dev/null and b/src/static/beam.png differ diff --git a/src/static/fixture.png b/src/static/fixture.png index 4453d1c..8d82551 100644 Binary files a/src/static/fixture.png and b/src/static/fixture.png differ diff --git a/src/static/floater.js b/src/static/floater.js index 0254cda..baa232a 100644 --- a/src/static/floater.js +++ b/src/static/floater.js @@ -1,7 +1,16 @@ +function clamp(value, min, max) { return Math.max( min, Math.min(value, max) ); } + +const body = document.querySelector('body'); +const beams = document.querySelector(".beams"); + window.addEventListener("scroll", function(){ const floaters = document.querySelectorAll(".floater"); - const yPos = 0 - window.scrollY; + + const yPos = window.scrollY / window.innerHeight; for (const floater of floaters) { - floater.style.top = -yPos/20 + "%"; + floater.style.top = yPos*50 + "%"; } + + beams.style.opacity = 1-2*yPos; + beams.style.display = 1-2*yPos < 0 ? 'none' : 'block' }); \ No newline at end of file diff --git a/src/styles/index.scss b/src/styles/index.scss index 0664350..bcde641 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -6,16 +6,29 @@ body { font-family: "JetBrains Mono", serif; background-color: vars.$bg-color; color: vars.$primary; -} - -.flip { - transform: scaleX(-1); + overflow-x: hidden; } main { - margin-left: vars.$fixture-width; - margin-right: vars.$fixture-width; + margin-left: vars.$side-margin; + margin-right: vars.$side-margin; } @include meta.load-css("title-card"); @include meta.load-css("projects"); + +@media (max-width: 1500px) { + main { + margin-left: 10px; + margin-right: 10px; + } + + .project { + justify-content: left !important; + flex-direction: row !important; + } + + .project__photo { + margin: 0 50px 0 0 !important; + } +} \ No newline at end of file diff --git a/src/styles/projects.scss b/src/styles/projects.scss index 220cfc1..51ddd30 100644 --- a/src/styles/projects.scss +++ b/src/styles/projects.scss @@ -44,6 +44,7 @@ a { .project__photo { width: 500px; + height: auto; border-radius: 25px; padding: 10px; } diff --git a/src/styles/title-card.scss b/src/styles/title-card.scss index 2b01480..95b3a4a 100644 --- a/src/styles/title-card.scss +++ b/src/styles/title-card.scss @@ -10,7 +10,7 @@ position: relative; - animation: flyIn ease 2s; + animation: flyIn ease-out vars.$load-speed; } .title-card { @@ -65,23 +65,24 @@ width: 100vw; height: 100vh; - animation: flyIn ease 2s; + animation: flyIn ease-out vars.$load-speed; } -.fixtures > img { +.beams > img { + opacity: 0.4; +} + +.fixtures > img, +.beams > img { position: absolute; - width: vars.$fixture-width; -} - -.fixtures > img.flip { - right: 0; + width: 100vw; } @keyframes flyIn { 0% { opacity: 0; - top: 50px; + top: vars.$load-size; } 100% { diff --git a/src/styles/vars.scss b/src/styles/vars.scss index 63502b7..f95f4cb 100644 --- a/src/styles/vars.scss +++ b/src/styles/vars.scss @@ -3,4 +3,7 @@ $primary: #80a0c0; $secondary: #4f6175; $accent-1: #b48ead; -$fixture-width: 15vw; +$side-margin: 15vw; + +$load-speed: 1.2s; +$load-size: 5vh; \ No newline at end of file