diff --git a/index.html b/index.html index 625f445..c48b406 100644 --- a/index.html +++ b/index.html @@ -20,11 +20,12 @@
-
+

YouHaveTrouble

@@ -213,6 +214,9 @@
+
+ +
diff --git a/index.js b/index.js index 6282b45..4659fd3 100644 --- a/index.js +++ b/index.js @@ -1,41 +1,36 @@ -const navLinks = { - hero: document.querySelector('a[href="#hero"]'), - projects: document.querySelector('a[href="#projects"]'), -} +const sections = document.querySelectorAll('main section'); +const navLinks = document.querySelectorAll('[data-link]'); -const sections = { - hero: document.querySelector('#hero'), - projects: document.querySelector('#projects'), -} +const options = { + root: null, + rootMargin: '-20% 0px -20% 0px', + threshold: 0.2 +}; -changeSection(window.location.hash ? window.location.hash : '#hero') +const observer = new IntersectionObserver((entries, observer) => { + entries.forEach(entry => { + entries.forEach(entry => { + if (entry.isIntersecting) { + const sectionId = entry.target.id; + setActiveLink(sectionId); + } + }); + }); +}, options); -for (const link of Object.values(navLinks)) { - link.addEventListener('click', (e) => { - const target = e.target.getAttribute('href'); - if (!target.startsWith('#')) return; - changeSection(target) +sections.forEach(section => { + observer.observe(section); +}); + +function setActiveLink(sectionId) { + navLinks.forEach(link => { + link.classList.remove('active'); + if (link.getAttribute('data-link') === sectionId) { + link.classList.add('active'); } - ) + }); } -function changeSection(sectionName) { - for (const link of Object.values(navLinks)) { - link.classList.remove('active'); - } - for (const link of Object.values(sections)) { - link.classList.remove('active'); - } - - if (!sectionName.startsWith('#')) { - sectionName = '#' + sectionName; - } - - const targetElement = document.querySelector(sectionName); - if (!targetElement) return; - targetElement.classList.add('active'); - navLinks[targetElement.id].classList.add('active'); -} /** Shuffle data-info elements */ function shuffleArray(array) { diff --git a/main.css b/main.css index bb6da1e..b359479 100644 --- a/main.css +++ b/main.css @@ -6,6 +6,7 @@ --text-color: #cccccc; --text-color-highlight: #ffffff; scroll-behavior: smooth; + overscroll-behavior-y: contain; } html { @@ -27,7 +28,7 @@ body { background-color: rgba(0, 0, 0, 0.65); background-attachment: fixed; background-position: center; - overflow-y: hidden; + overflow-y: auto; } .text-center { @@ -92,8 +93,8 @@ main { padding: 0; margin-left: 2rem; width: 100%; - scroll-snap-type: block; - scroll-snap-align: start; + overscroll-behavior-y: contain; + scroll-snap-type: y proximity; } section { @@ -102,13 +103,15 @@ section { width: 100%; height: 100vh; overflow-y: auto; + overscroll-behavior: contain; + scroll-snap-align: start; } article { width: 100%; } -#hero { +#about { display: flex; flex-direction: column; justify-content: center; @@ -120,20 +123,18 @@ article { flex-direction: column; justify-content: start; align-items: center; - background-color: rgba(0,0,0, 0.9); + background-color: rgba(0,0,0, 0.85); background-blend-mode: darken; padding-top: 2rem; padding-bottom: 2rem; background-image: url("/img/bg-projects.jpg"); - transition: background-color 4s; background-position: center; background-attachment: fixed; - overflow-y: auto; - overflow-y: overlay; + height: auto; } #projects.active { - background-color: rgba(0,0,0, 0.85); + } #projects .links { @@ -155,6 +156,11 @@ article { cursor: pointer; } +#projects .links a button:hover { + background-color: rgba(255,255,255, 0.15); + transition: background-color 0.2s; +} + #projects .links a button img { width: 100%; height: 100%; @@ -187,7 +193,7 @@ article { border-color: var(--text-color-highlight); } -#hero article { +#about article { display: flex; flex-direction: column; justify-content: center; @@ -195,7 +201,7 @@ article { gap: 1.5rem; } -#hero h1 { +#about h1 { color: var(--text-color-highlight); } @@ -208,6 +214,8 @@ article { #projects .project-scroller { height: 100%; max-width: 100vw; + scroll-snap-type: y mandatory; + scroll-snap-align: start; } #projects .project-scroller article {