fix footer and add scroll animation

Seth Bernstein · Seth Bernstein · commit ed94a914a691 · 2025-04-10T16:04:15.000-04:00
diff --git a/index.html b/index.html
@@ -14,7 +14,7 @@
 <body>
     <nav class="navbar">
         <div class="nav-content">
-            <a href="#">Home</a>
+            <a href="#home">Home</a>
             <a href="#about">About</a>
             <a href="#research">Research</a>
             <a href="#publications">Publications</a>
@@ -25,7 +25,7 @@
 
     <div class="wrapper">
 
-        <header class="site-header">
+        <header class="site-header" id="home">
             <div class="intro">
                 <img src="assets/headshot.png" alt="Seth Bernstein" class="profile-pic" />
                 <div class="intro-text">
@@ -50,7 +50,7 @@ <h1>Seth Bernstein</h1>
         </header>
 
         <main>
-            <section id="about">
+            <section id="about" class="fade-in">
                 <h2>About</h2>
                 <p>
                     I’m interested in making computing education more accessible and personally meaningful through
@@ -72,7 +72,7 @@ <h2>About</h2>
                 </p>
             </section>
 
-            <section id="research">
+            <section id="research" class="fade-in">
                 <h2>Research</h2>
                 <p>
                     My research focuses on using LLMs to personalize learning in computing education. I study how
@@ -93,7 +93,7 @@ <h2>Research</h2>
 
 
 
-            <section id="publications">
+            <section id="publications" class="fade-in">
                 <h2>Publications</h2>
                 <div class="sort-buttons">
                     Sort by:
@@ -187,10 +187,7 @@ <h2>Publications</h2>
                 </div>
             </section>
 
-
-
-
-            <section id="service">
+            <section id="service" class="fade-in">
                 <h2>Service</h2>
                 <p>
                     Most of my service work has been rooted in the Temple HCI Lab, where I took on a leadership role
diff --git a/script.js b/script.js
@@ -40,3 +40,42 @@ function updateSortLabels() {
         titleBtn.textContent += currentSort.asc ? ` ${upArrow}` : ` ${downArrow}`;
     }
 }
+
+document.addEventListener('DOMContentLoaded', () => {
+    const faders = document.querySelectorAll('.fade-in');
+
+    const observer = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                entry.target.classList.add('visible');
+                observer.unobserve(entry.target);
+            }
+        });
+    }, {
+        threshold: 0.1
+    });
+
+    faders.forEach(el => observer.observe(el));
+});
+
+const navLinks = document.querySelectorAll(".navbar a[href^='#']");
+const sectionObserver = new IntersectionObserver(
+    (entries) => {
+        entries.forEach((entry) => {
+            const id = entry.target.getAttribute("id");
+            const link = document.querySelector(`.navbar a[href="#${id}"]`);
+            if (entry.isIntersecting) {
+                navLinks.forEach((lnk) => lnk.classList.remove("active"));
+                if (link) link.classList.add("active");
+            }
+        });
+    },
+    {
+        rootMargin: "-50% 0px -49% 0px", // center bias
+        threshold: 0,
+    }
+);
+
+document.querySelectorAll("section").forEach((section) => {
+    sectionObserver.observe(section);
+});
diff --git a/style.css b/style.css
@@ -112,39 +112,53 @@ h2 {
 .navbar {
     position: sticky;
     top: 0;
-    background-color: #fdfdfd;
-    border-bottom: 1px solid #ddd;
     z-index: 1000;
-    padding: 10px 20px
+    background-color: rgba(255, 255, 255, 0.9);
+    backdrop-filter: blur(6px);
+    border-bottom: 1px solid #ddd;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
 }
 
 .nav-content {
     display: flex;
-    gap: 20px;
     justify-content: center;
+    gap: 24px;
     flex-wrap: wrap;
-    font-size: 14px
+    padding: 10px 20px;
+    font-size: 15px;
 }
 
 .navbar a {
     color: #004080;
+    font-weight: 500;
     text-decoration: none;
-    font-weight: 500
+    position: relative;
+    padding: 4px 2px;
+    transition: color 0.2s ease;
 }
 
-.navbar a:hover {
-    text-decoration: underline
+.navbar a::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: 2px;
+    width: 0;
+    background-color: #004080;
+    transition: width 0.2s ease;
 }
 
-.site-footer {
-    text-align: center;
-    font-size: 13px;
-    color: #666;
-    margin-top: 60px;
-    padding-top: 30px;
-    border-top: 1px solid #ddd
+.navbar a:hover::after,
+.navbar a.active::after {
+    width: 100%;
 }
 
+.navbar a:hover,
+.navbar a.active {
+    color: #002f66;
+}
+
+
 html {
     scroll-behavior: smooth
 }
@@ -196,4 +210,32 @@ body {
 
 .navbar a:active {
     transform: scale(0.97);
+}
+
+.fade-in {
+    opacity: 0;
+    transform: translateY(20px);
+    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
+}
+
+.fade-in.visible {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+.site-footer {
+    text-align: center;
+    font-size: 13px;
+    color: #666;
+    margin-top: 60px;
+    padding-top: 30px;
+    border-top: 1px solid #ddd
+}
+
+a {
+    color: #666;
+}
+
+header.site-header {
+    scroll-margin-top: 80px;
 }
