feat: add traditional nav for current and past projects

Author: samharp

_includes/footer.njk

@@ -78,7 +78,7 @@
             <a class="text-link" href="https://www.buymeacoffee.com/samharp" target="_blank">Buy Me A Coffee</a>
           </div>
 
-          <a id="back-to-top-link" class="text-link show-with-jsx" href="#top">Back to top</a>
+          {# <a id="back-to-top-link" class="text-link show-with-jsx" href="#top">Back to top</a> #}
         </div>
       </div>
     </section>

_includes/header.njk

@@ -0,0 +1,16 @@
+<header>
+  <nav class="" data-au="flex-container justify-right">
+    <div class="nav-item-container">
+      <a class="nav-item" href="#top">Jump to Top</a>
+    </div>
+    <div class="nav-item-container">
+      <a class="nav-item" href="#projects">Past Projects</a>
+    </div>
+    <div class="nav-item-container">
+      <a class="nav-item" href="/now">Current Projects</a>
+    </div>
+    <div class="nav-item-container">
+      <a class="nav-item" href="#contact">Contact &amp; More</a>
+    </div>
+  </nav>
+</header>

_includes/layouts/base.njk

@@ -31,6 +31,7 @@
   <link href="/css/general-styles.css" rel="stylesheet" type="text/css" />
 	<link href="/css/hero-styles.css" rel="stylesheet" type="text/css" />
 	<link href="/css/section-styles.css" rel="stylesheet" type="text/css" />
+	<link href="/css/header-styles.css" rel="stylesheet" type="text/css" />
 	<link href="/css/footer-styles.css" rel="stylesheet" type="text/css" />
   {# page styles #}
   {% if stylesheets %}
@@ -96,8 +97,6 @@
 
   <a name="top"></a>
 
-  {# <header>
-  </header> #}
   {{ content | safe }}
 
   {% include "footer.njk" %}

css/general-styles.css

@@ -78,7 +78,7 @@ body{
 }
 
 /*shared native element attributes*/
-h1, h2, h3, h4{
+h1, h2, h3, h4, button{
 	font-family: 'Poppins', sans-serif;
 }
 /*big intro text*/

css/header-styles.css

@@ -1,5 +1,34 @@
 header{
-  max-width: 1200px;
+  position:fixed;
+  z-index:10;
+  top:0;
+  left:0;
+  right:0;
+  background-color:var(--site-background-color);
+  /* only works if opacity is added through the bg color */
+  /* backdrop-filter: blur(10px) opacity(50%); */
+  box-shadow:0px 8px 22px -8px rgba(0,0,0,0.4);
+}
+header nav{
+  padding:25px;
+  max-width:1200px;
   margin:0 auto;
-  padding: 40px;
+  font-size:14px;
+  gap:25px;
+}
+
+/* mobile nav */
+@media (max-width: 500px) {
+  header nav{
+    flex-wrap: wrap;
+    gap:20px;
+  }
+}
+
+header .nav-item-container{
+  transform:scale(1);
+  transition: transform .15s;
+}
+.nav-item-container:hover{
+  transform:scale(1.05);
 }

css/hero-styles.css

@@ -52,7 +52,7 @@ h1.p-name{
 
 /*responsive*/
 @media only screen and (max-width: 865px){
-  #hero-section .picture-container{
+  #hero .picture-container{
     display:none!important;
     background-color:red;
   }

css/now-styles.css

@@ -1,4 +1,4 @@
-#now-section{
+#now{
   padding-bottom:60px;
 }
 

css/section-styles.css

@@ -61,13 +61,13 @@ section:nth-child(odd) .item-images-container{
     order:2;
     padding:0;
   }
-  #photography-section .item-description-container{
+  #photography .item-description-container{
     order:1!important;
   }
 }
 
 
-/*filter portfolio section*/
+/*filter projects*/
 @media only screen and (max-width:650px){
   #filter-links-container{
     flex-wrap:wrap;
@@ -97,64 +97,64 @@ div.show-photo + section[data-filter~="photography"]{
 .about-pics-container{
   position:relative;
 }
-#more-about-me-section .picture-container img{
+#more-about-me .picture-container img{
   /* oslo image */
   width:250px;
 }
 
 /*pixel planet*/
-#pixel-planet-today-section img{
+#pixel-planet-today img{
   width:275px;
 }
 
-#wasted-space-section img{
+#wasted-space img{
   width:275px;
 }
 
 /* ncbvi */
-#ncbvi-section img{
+#ncbvi img{
   width:275px;
 }
 
 /*undergrad research*/
-#undergraduate-research-section img{
+#undergraduate-research img{
   width:420px;
 }
 
 /*eva*/
-#eva-section img{
+#eva img{
   width:420px;
 }
 
 /*bcm*/
-#bcm-section img{
+#bcm img{
   width:350px;
 }
 
 /*glitch section*/
-#glitch-section img{
+#glitch img{
   width:400px;
 }
 
 /*startup week section*/
-#startup-week-section img{
+#startup-week img{
   width:400px;
 }
 
 
 /*******************/
 /*photography section*/
-#photography-section .mosaic-gallery{
+#photography .mosaic-gallery{
   margin:40px 0;
 }
-#photography-section .mosaic-gallery img{
+#photography .mosaic-gallery img{
   max-height:250px;
   max-width:100%;
   /* margin:0 auto 40px auto; */
   margin-bottom:40px;
 }
 @media only screen and (max-width:1160px){
-  #photography-section .mosaic-gallery img{
+  #photography .mosaic-gallery img{
     margin:0 auto 40px auto;
   }
 }
@@ -209,7 +209,7 @@ div.show-photo + section[data-filter~="photography"]{
 }
 
 /*photography items*/
-#photography-section .slideshow .photo-gallery-thumb{
+#photography .slideshow .photo-gallery-thumb{
   /* max-height:250px; */
   /* margin-bottom:40px; */
   display:none;

index.njk

@@ -5,7 +5,9 @@ layout: layouts/base.njk
 scripts: /js/build-projects-scripts.js
 ---
 
-<section id="hero-section" class="h-card" data-au="flex-container align-center">
+{% include "header.njk" %}
+
+<section id="hero" class="h-card" data-au="flex-container align-center">
   <div class="hide other-h-card-data">
     <img class="u-photo" src="./img/self-pixel-portrait-summer-outfit-covid-centered.png">
     <a href="{{ site.url }}" class="u-url u-uid">{{ site.url }}</a>
@@ -44,14 +46,11 @@ scripts: /js/build-projects-scripts.js
     </div>
   </div>
 </section>
-<section id="more-about-me-section" data-au="flex-container align-center">
+<section id="more-about-me" data-au="flex-container align-center">
   <div class="item-description-container" data-au="flex-width">
     <h3>A little more about me&hellip;</h3>
     <p>I'm an imaginative and motivated designer with 7 years of professional experience in Web, Graphic, and UI/UX Design. I started coding in Batch at 12 years old, and quickly found my passion for computer and web-based design. Each of my projects have helped me learn and grow as a designer, as well as help set myself apart. I strive to not just show the world my creative ideas, but to change the world with them.</p>
     <p>Professionally, I'm the Founder &amp; CEO of <a class="text-link" target="_blank" href="https://www.terrabyte.eco">Terrabyte</a> and the President of <a class="text-link" targer="_blank" href="https://www.goldenharpmedia.com">Golden Harp Media</a>.</p>
-    {# <p>
-      Keep scrolling to see some of my <a class="text-link" href="#portfolio-filter-section">past projects</a> &mdash; or, read about what I'm up to <a class="text-link" href="/now">now</a>.
-    </p> #}
   </div>
   <div class="picture-container item-images-container" data-au="flex-width flex-container all-center">
     <div class="about-pics-container">
@@ -61,8 +60,7 @@ scripts: /js/build-projects-scripts.js
   </div>
 </section>
 
-  <a name="portfolio-filter"></a>
-	<section id="portfolio-filter-section" class="show-with-js" data-au="flex-container flex-vertical">
+	<section id="projects-filter" class="show-with-js" data-au="flex-container flex-vertical">
 		<div data-au="flex-container flex-width flex-vertical">
 			<div data-au="set-width">
 				<h4 class="middle-ish-header">
@@ -71,7 +69,7 @@ scripts: /js/build-projects-scripts.js
           </span>
 				</h4>
 			</div>
-      <!-- <div class="filter-row flex-container align-center">
+      <div class="filter-row flex-container align-center">
         <span>Category</span>
         <div data-au="flex-container flex-width">
           <div class="filter-button set-width">
@@ -81,7 +79,7 @@ scripts: /js/build-projects-scripts.js
       </div>
       <div class="set-width filter-row">
         <p>Focus</p>
-      </div> -->
+      </div>
 			<div id="filter-links-container" data-au="flex-width all-center flex-container text-center">
 				<div class="icon-link-container" data-au="flex-width text-center">
 					<a class="filter-portfolio-link icon-link" data-filter-button data-filter="graphic-design">
@@ -144,7 +142,7 @@ scripts: /js/build-projects-scripts.js
 		</div>
 	</section>
 
-	<a name="portfolio"></a>
+	<a name="projects"></a>
   <template id="section-template">
     <section data-project-section id="" data-au="flex-container align-center" data-filter="">
       <div class="item-images-container" data-au="flex-width flex-container all-center">
@@ -173,7 +171,7 @@ scripts: /js/build-projects-scripts.js
     </div>
 
 
-		<section id="photography-section" data-au="flex-container flex-vertical justify-center" data-filter="photography">
+		<section id="photography" data-au="flex-container flex-vertical justify-center" data-filter="photography">
 			<div class="item-description-container">
 				<h4>
 					<span class="highlighter-container">
@@ -217,7 +215,7 @@ scripts: /js/build-projects-scripts.js
 	</main>
 
 	{# <a name="contact"></a> #}
-	{# <section id="contact-section" data-au="flex-container flex-vertical">
+	{# <section id="contact" data-au="flex-container flex-vertical">
 		<div data-au="flex-container flex-width flex-vertical">
 			<div data-au="set-width">
 				<h2 class="middle-ish-header">

js/build-projects-scripts.js

@@ -131,7 +131,7 @@ window.addEventListener("load", function(){
       createdSection = document.importNode(itemTemplateElem, true);
 
       // set ID
-      createdSection.id = projectsArray[x].projectID + "-section";
+      createdSection.id = projectsArray[x].projectID;
 
       // set innerHTML of title
       createdSection.querySelector("[data-project-title]").innerHTML = projectsArray[x].projectTitle;