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

35
src/_includes/base.liquid
View file

@ -10,30 +10,27 @@
<link rel="stylesheet" href="/styles/index.css"> <link rel="stylesheet" href="/styles/index.css">
<script src="/static/floater.js"></script> <script src="/static/floater.js" defer></script>
</head> </head>
<body> <body>
<div> <div class="background">
<div class="background"> <div class="fixtures">
<div class="fixtures"> <img class="fixture-photo floater" src="/static/fixture.png" alt="Ayrton Diablo S">
<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">
</div>
</div> </div>
<div class="front-page"> <div class="beams">
<div class="title-card"> <img class="fixture-beam floater" src="/static/beam.png" alt="Beam of Ayrton Diablo S">
<h1>Koen de Ruiter</h1> </div>
<h2>Hobby Developer</h2> </div>
<h2>Lighting Designer</h2> <div class="front-page">
<div class="title-card">
<h1>Koen de Ruiter</h1>
<h2>Hobby Developer</h2>
<h2>Lighting Designer</h2>
<div class="title-card__links"> <div class="title-card__links">
<a class="title-card__link" href="https://github.com/KoenDR06" target="_blank"><img class="title-card__image" src="/static/github.svg" alt="GitHub"></a> <a class="title-card__link" href="https://github.com/KoenDR06" target="_blank"><img class="title-card__image" src="/static/github.svg" alt="GitHub"></a>
<a class="title-card__link" href="https://www.linkedin.com/in/koen-de-ruiter-20a9a2343/" target="_blank"><img class="title-card__image" src="/static/linkedin.svg" alt="LinkedIn"></a> <a class="title-card__link" href="https://www.linkedin.com/in/koen-de-ruiter-20a9a2343/" target="_blank"><img class="title-card__image" src="/static/linkedin.svg" alt="LinkedIn"></a>
</div>
</div> </div>
</div> </div>
</div> </div>

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(){ window.addEventListener("scroll", function(){
const floaters = document.querySelectorAll(".floater"); const floaters = document.querySelectorAll(".floater");
const yPos = 0 - window.scrollY;
const yPos = window.scrollY / window.innerHeight;
for (const floater of floaters) { 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; font-family: "JetBrains Mono", serif;
background-color: vars.$bg-color; background-color: vars.$bg-color;
color: vars.$primary; color: vars.$primary;
} overflow-x: hidden;
.flip {
transform: scaleX(-1);
} }
main { main {
margin-left: vars.$fixture-width; margin-left: vars.$side-margin;
margin-right: vars.$fixture-width; margin-right: vars.$side-margin;
} }
@include meta.load-css("title-card"); @include meta.load-css("title-card");
@include meta.load-css("projects"); @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 { .project__photo {
width: 500px; width: 500px;
height: auto;
border-radius: 25px; border-radius: 25px;
padding: 10px; padding: 10px;
} }

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

@ -10,7 +10,7 @@
position: relative; position: relative;
animation: flyIn ease 2s; animation: flyIn ease-out vars.$load-speed;
} }
.title-card { .title-card {
@ -65,23 +65,24 @@
width: 100vw; width: 100vw;
height: 100vh; 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; position: absolute;
width: vars.$fixture-width; width: 100vw;
}
.fixtures > img.flip {
right: 0;
} }
@keyframes flyIn { @keyframes flyIn {
0% { 0% {
opacity: 0; opacity: 0;
top: 50px; top: vars.$load-size;
} }
100% { 100% {

5
src/styles/vars.scss
View file

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