Add back sticky navbar

coalest · Sep 12, 2024 · 5dfdf49 · 5dfdf49
1 parent b32742f
commit 5dfdf49
Show file tree

Hide file tree

Showing 8 changed files with 160 additions and 83 deletions.
diff --git a/.eleventy.js b/.eleventy.js
@@ -1,4 +1,5 @@
 module.exports = function(eleventyConfig) {
+  eleventyConfig.addPassthroughCopy("bundle.js");
   eleventyConfig.addPassthroughCopy("styles.css");
   eleventyConfig.addPassthroughCopy("cory_streiff_resume.pdf");
   eleventyConfig.addPassthroughCopy({ "img/favicon": "/" });

diff --git a/_site/.eleventy.js b/_site/.eleventy.js
@@ -2,6 +2,7 @@ module.exports = function(eleventyConfig) {
   eleventyConfig.addPassthroughCopy("bundle.js");
   eleventyConfig.addPassthroughCopy("styles.css");
   eleventyConfig.addPassthroughCopy("cory_streiff_resume.pdf");
+  eleventyConfig.addPassthroughCopy({ "img/favicon": "/" });
 
   eleventyConfig.addWatchTarget("styles.css");
 };
diff --git a/_site/bundle.js b/_site/bundle.js
@@ -1,14 +1,12 @@
-let sections, navLi;
+const sections = document.querySelectorAll("main > div");
+const navLi = document.querySelectorAll("nav ul li");
 
 window.addEventListener("scroll", () => {
-  sections = document.querySelectorAll("main > div");
-  navLi = document.querySelectorAll("nav ul li");
-
   let current = "";
   sections.forEach((section) => {
     const sectionTop = section.offsetTop;
     const sectionHeight = section.clientHeight;
-    if (pageYOffset >= sectionTop - sectionHeight / 3) {
+    if (pageYOffset >= sectionTop - 200 - Math.sqrt(sectionHeight)) {
       current = section.getAttribute("id");
     }
   });

diff --git a/_site/index.html b/_site/index.html
@@ -2,24 +2,15 @@
 <html lang="en">
     <head>
         <title>Cory Streiff | Software Developer</title>
-        <link
-            rel="preload"
-            href="https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@300..700&display=swap"
-            as="style"
-            onload="this.onload=null;this.rel='stylesheet'"
-        />
-        <noscript>
-            <link
-                href="https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@300..700&display=swap"
-                rel="stylesheet"
-                type="text/css"
-            />
-        </noscript>
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@300..700&display=block" rel="stylesheet">
         <link rel="stylesheet" href="/styles.css">
         <link rel="icon" sizes="any" type="image/svg+xml" href="/src/favicon/favicon.svg">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <meta name="description" content="Personal website of Cory Streiff (coalest)"
+        <meta name="description" content="Personal website of Cory Streiff (coalest)">
         <meta charset="UTF-8">
+        <script src="/bundle.js" defer></script>
     </head>
 
     <body>
@@ -36,8 +27,15 @@ <h1>Hello!</h1>
                     </p>
                 </div>
             </div>
-            <h2 id="background"><a href="#background">Background</a></h2>
-            <div class="background">
+            <nav>
+                <ul>
+                    <li class="background"><a href="#background">Background</a></li>
+                    <li class="skills"><a href="#skills">Skills</a></li>
+                    <li class="experience"><a href="#experience">Experience</a></li>
+                </ul>
+            </nav>
+            <h2><a href="#background">Background</a></h2>
+            <div id="background" class="background">
                 <p>
                     I graduated from Georgia Institute of Technology with a degree in Material Science & Engineering. I worked in that field for six years, first at an <a href="https://www.vercomaterialsllc.com/" target="_blank">R&D startup making ceramic body armor</a> and then at a <a href="https://www.materialconnexion.com/" target="_blank">materials consultancy in New York</a>, working with designers and engineers at Fortune 500 companies.
                 </p>
@@ -48,8 +46,8 @@ <h2 id="background"><a href="#background">Background</a></h2>
                     Most recently, I've been working at a <a href="https://ragnarson.com" target="_blank">software house</a>, where I helped build a Learning Management System (LMS) from the ground up using Ruby on Rails, Grape, and Postgres.</p>
                 </p>
             </div>
-            <h2 id="skills"><a href="#skills">Skills</a></h2>
-            <div class="skills">
+            <h2><a href="#skills">Skills</a></h2>
+            <div id="skills" class="skills">
                 <div>
                     <h3>Languages</h3>
                     <ul>
@@ -93,8 +91,8 @@ <h3>Infra</h3>
                     </ul>
                 </div>
             </div>
-            <h2 id="experience"><a href="#experience">Experience</a></h2>
-            <div class="experience">
+            <h2><a href="#experience">Experience</a></h2>
+            <div id="experience" class="experience">
                 <section> 
                     <div>
                         <p class="job-duration">Jun 2022 - Present</p>

diff --git a/_site/styles.css b/_site/styles.css
@@ -22,9 +22,7 @@ p, h1, h2, h3, h4, h5, h6 {
 #root, #__next {
   isolation: isolate;
 }
-/* CSS Reset End */
-
-:root {
+/* CSS Reset End */ :root {
   --primary: rgba(0, 135, 104, 1);
   --accent: rgba(0, 135, 104, 0.1);
   --text-color-secondary: rgba(117, 117, 117, 1);
@@ -35,6 +33,7 @@ p, h1, h2, h3, h4, h5, h6 {
 html {
   font-size: 16px;
   scroll-behavior: smooth;
+  scroll-padding-top: 10rem;
 }
 
 body {
@@ -46,6 +45,28 @@ main {
   max-width: fit-content;
 }
 
+nav {
+  display: none;
+}
+
+nav a {
+  text-decoration: none;
+}
+
+nav ul li.active, nav ul li a:hover {
+  color: var(--primary);
+}
+
+nav ul li.active::before {
+  content: "•";
+  position: absolute;
+  left: -1rem;
+}
+
+nav ul li:not(:last-child) {
+  margin-bottom: 10px;
+}
+
 a {
   color: inherit;
   text-decoration: solid underline var(--primary) 2px;
@@ -122,7 +143,16 @@ img.portrait {
 h2 {
   color: var(--primary);
   font-weight: 600;
-  font-size: 18px;
+  font-size: 1.125rem;
+  text-transform: uppercase;
+  letter-spacing: 2px;
+  padding: 10px 10px 10px 0;
+}
+
+nav ul li {
+  color: var(--text-color);
+  font-weight: 600;
+  font-size: 1.125rem;
   text-transform: uppercase;
   letter-spacing: 2px;
   padding: 10px 10px 10px 0;
@@ -308,17 +338,21 @@ a:hover .svg {
     height: 335px;
     padding: 40px 0;
   }
+
+  h2 {
+    padding-bottom: 1.5rem;
+  }
 }
 
 @media (width >= 960px) {
   main {
     max-width: 1184px;
     display: grid;
     grid-template-areas:
-      "intro intro"
-      "header-background background"
-      "header-skills     skills"
-      "header-experience experience";
+      "intro intro intro"
+      "navbar . background"
+      "navbar . skills"
+      "navbar . experience";
     grid-template-rows: repeat(4, auto);
     grid-template-columns: 1fr minmax(min-content, 3fr);
     gap: 200px 10%;
@@ -340,19 +374,15 @@ a:hover .svg {
   }
 
   h2 {
-    text-align: right;
-  }
-
-  h2#background {
-    grid-area: header-background;
-  }
-
-  h2#skills {
-    grid-area: header-skills;
+    display: none;
   }
 
-  h2#experience {
-    grid-area: header-experience;
+  nav {
+    grid-area: navbar;
+    position: sticky;
+    align-self: start;
+    top: 10rem;
+    display: initial;
   }
 
   .intro {

diff --git a/bundle.js b/bundle.js
@@ -0,0 +1,21 @@
+const sections = document.querySelectorAll("main > div");
+const navLi = document.querySelectorAll("nav ul li");
+
+window.addEventListener("scroll", () => {
+  let current = "";
+  sections.forEach((section) => {
+    const sectionTop = section.offsetTop;
+    const sectionHeight = section.clientHeight;
+    if (pageYOffset >= sectionTop - 200 - Math.sqrt(sectionHeight)) {
+      current = section.getAttribute("id");
+    }
+  });
+
+  navLi.forEach((li) => {
+    li.classList.remove("active");
+    if (li.classList.contains(current)) {
+      li.classList.add("active");
+    }
+  });
+});
+
diff --git a/index.html b/index.html
@@ -2,24 +2,15 @@
 <html lang="en">
     <head>
         <title>Cory Streiff | Software Developer</title>
-        <link
-            rel="preload"
-            href="https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@300..700&display=swap"
-            as="style"
-            onload="this.onload=null;this.rel='stylesheet'"
-        />
-        <noscript>
-            <link
-                href="https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@300..700&display=swap"
-                rel="stylesheet"
-                type="text/css"
-            />
-        </noscript>
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@300..700&display=block" rel="stylesheet">
         <link rel="stylesheet" href="/styles.css">
         <link rel="icon" sizes="any" type="image/svg+xml" href="/src/favicon/favicon.svg">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <meta name="description" content="Personal website of Cory Streiff (coalest)"
+        <meta name="description" content="Personal website of Cory Streiff (coalest)">
         <meta charset="UTF-8">
+        <script src="/bundle.js" defer></script>
     </head>
 
     <body>
@@ -36,8 +27,15 @@ <h1>Hello!</h1>
                     </p>
                 </div>
             </div>
-            <h2 id="background"><a href="#background">Background</a></h2>
-            <div class="background">
+            <nav>
+                <ul>
+                    <li class="background"><a href="#background">Background</a></li>
+                    <li class="skills"><a href="#skills">Skills</a></li>
+                    <li class="experience"><a href="#experience">Experience</a></li>
+                </ul>
+            </nav>
+            <h2><a href="#background">Background</a></h2>
+            <div id="background" class="background">
                 <p>
                     I graduated from Georgia Institute of Technology with a degree in Material Science & Engineering. I worked in that field for six years, first at an <a href="https://www.vercomaterialsllc.com/" target="_blank">R&D startup making ceramic body armor</a> and then at a <a href="https://www.materialconnexion.com/" target="_blank">materials consultancy in New York</a>, working with designers and engineers at Fortune 500 companies.
                 </p>
@@ -48,8 +46,8 @@ <h2 id="background"><a href="#background">Background</a></h2>
                     Most recently, I've been working at a <a href="https://ragnarson.com" target="_blank">software house</a>, where I helped build a Learning Management System (LMS) from the ground up using Ruby on Rails, Grape, and Postgres.</p>
                 </p>
             </div>
-            <h2 id="skills"><a href="#skills">Skills</a></h2>
-            <div class="skills">
+            <h2><a href="#skills">Skills</a></h2>
+            <div id="skills" class="skills">
                 <div>
                     <h3>Languages</h3>
                     <ul>
@@ -93,8 +91,8 @@ <h3>Infra</h3>
                     </ul>
                 </div>
             </div>
-            <h2 id="experience"><a href="#experience">Experience</a></h2>
-            <div class="experience">
+            <h2><a href="#experience">Experience</a></h2>
+            <div id="experience" class="experience">
                 <section> 
                     <div>
                         <p class="job-duration">Jun 2022 - Present</p>