Koen/portfolio
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added beam to fixture

Browse source
This commit is contained in:
KoenDR06 2025-04-17 22:36:58 +02:00
parent ecb319a41b
commit 918b0d49e8
8 changed files with 61 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

7
src/_includes/base.liquid
View file

@ -10,18 +10,16 @@
<link rel="stylesheet" href="/styles/index.css">
<script src="/static/floater.js"></script>
<script src="/static/floater.js" defer></script>
</head>
<body>
<div>
<div class="background">
<div class="fixtures">
<img class="fixture-photo floater" src="/static/fixture.png" alt="Ayrton Diablo S">
<img class="fixture-photo floater flip" src="/static/fixture.png" alt="Ayrton Diablo S">
</div>
<div class="beams">
<img class="fixture-beam floater" src="/static/beam.png" alt="Beam of Ayrton Diablo S">
</div>
</div>
<div class="front-page">
@ -36,7 +34,6 @@
</div>
</div>
</div>
</div>
<main>
{{ content }}

BIN
src/static/beam.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.3 MiB

BIN
src/static/fixture.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 368 KiB

After

Width:  |  Height:  |  Size: 200 KiB

Before After
Before After

13
src/static/floater.js
View file

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

25
src/styles/index.scss
View file

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

1
src/styles/projects.scss
View file

@ -44,6 +44,7 @@ a {
.project__photo {
width: 500px;
height: auto;
border-radius: 25px;
padding: 10px;
}

19
src/styles/title-card.scss
View file

@ -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% {

5
src/styles/vars.scss
View file

@ -3,4 +3,7 @@ $primary: #80a0c0;
$secondary: #4f6175;
$accent-1: #b48ead;
$fixture-width: 15vw;
$side-margin: 15vw;
$load-speed: 1.2s;
$load-size: 5vh;