feat: add smooth scroll and hero parallax

This commit is contained in:
Aaron Wood 2026-04-11 18:32:00 -04:00
parent 9b183ef806
commit c11d6721f9
2 changed files with 25 additions and 1 deletions

24
site/main.js Normal file
View file

@ -0,0 +1,24 @@
// Smooth scroll for anchor links (CSS scroll-behavior covers most cases,
// this handles the ↓ scroll-hint click on browsers that need it)
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', e => {
const target = document.querySelector(anchor.getAttribute('href'));
if (target) {
e.preventDefault();
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
});
});
// Subtle parallax on hero background glow
const hero = document.querySelector('.hero');
if (hero) {
window.addEventListener('scroll', () => {
const scrolled = window.scrollY;
const heroHeight = hero.offsetHeight;
if (scrolled < heroHeight) {
// Move the pseudo-element glow upward slightly as user scrolls
hero.style.setProperty('--parallax-offset', `${scrolled * 0.3}px`);
}
}, { passive: true });
}

View file

@ -47,7 +47,7 @@ a { text-decoration: none; }
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(201,168,76,0.07) 0%, transparent 70%);
background: radial-gradient(ellipse 80% 60% at 50% calc(40% - var(--parallax-offset, 0px)), rgba(201,168,76,0.07) 0%, transparent 70%);
pointer-events: none;
}