Updated contact component button types, added href attributes to header links, improved project image alt text, refactored scroll event listeners in JavaScript, and refined SCSS styles for borders and text decoration.

src/_includes/components/contact.njk

@@ -20,13 +20,12 @@
         </a>
     </li>
     <li>
-        <button class="btn" id="show-button" onclick="copyText()">find me on NOSTR</button>
+        <button class="btn" id="show-button" type="button" onclick="copyText()">find me on NOSTR</button>
         <div id="input-container" style="display: none;">
             <textarea
-                type="text"
                 id="input-text"
                 onclick="selectText()">npub1skj3cm05l26sjg8w8lxa5z4k6kueh0mccykp6zchf2wacu7mslfsney3cq</textarea>
-                <button class="btn" onclick="copyToClipboard()">
+                <button class="btn" type="button" onclick="copyToClipboard()">
                     <svg
                         xmlns="http://www.w3.org/2000/svg"
                         class="icon icon-tabler icon-tabler-copy"

src/_includes/components/header.njk

@@ -11,13 +11,16 @@
     </h2>
     <ul class="menu">
         <li>
-            <a id="button-freelance-work" >Freelance Work {% include "components/corner-right-down.svg" %}</a>
+            <a id="button-freelance-work" href="#freelance-work">Freelance Work {% include "components/corner-right-down.svg" %}</a>
         </li>
         <li>
-            <a id="button-personal-projects">Personal Projects {% include "components/corner-right-down.svg" %}</a>
+            <a id="button-personal-projects" href="#personal-projects">Personal Projects {% include "components/corner-right-down.svg" %}</a>
         </li>
         <li>
-            <a id="button-personal-projects" href="https://registry.jsonresume.org/spencerflagg" target="_blank">Resume | CV {% include "components/external-link.svg" %}</a>
+            <a id="button-portfolio" href="https://portfolio.spencerflagg.com" target="_blank" rel="noopener noreferrer">Portfolio {% include "components/external-link.svg" %}</a>
+        </li>
+        <li>
+            <a id="button-resume" href="https://registry.jsonresume.org/spencerflagg" target="_blank" rel="noopener noreferrer">Resume | CV {% include "components/external-link.svg" %}</a>
         </li>
     </ul>
 </header>

src/_includes/components/project.njk

@@ -1,5 +1,5 @@
 <li class="project" id="{{ project.slug }}">
-    <a class="project__image-wrapper" href="{{ project.link }}"><img class="project__image" src="./assets/images/{{ project.slug }}.png" alt=""></a>
+    <a class="project__image-wrapper" href="{{ project.link }}"><img class="project__image" src="./assets/images/{{ project.slug }}.png" alt="{{ project.company }} — {{ project.project }}"></a>
     <div class="project__content">
         <label>company</label>
         <div class="content__field"><strong>{{ project.company }}</strong></div>

src/assets/js/landing.js

@@ -65,6 +65,7 @@ headers.forEach(function (section) {
 
 const contact = document.querySelector(".contact");
 
+if (contact) {
   gsap.to(contact, {
     //height: "initial",
     //'min-height': "initial",
@@ -79,55 +80,33 @@ gsap.to(contact, {
       toggleActions: 'play none none reverse', // what happens when the element goes off screen
     },
   });
-
+}
-// gsap.to("#scroll-to-top", {
-//   scrollTrigger: {
-//     trigger: contact,
-//     start: "top top",
-//     pin: true,
-//     pinSpacing: false,
-//     endTrigger: 'body', // the element that the scrolling should stop at
-//     end: 'bottom', // where the scrolling should stop
-//     toggleActions: 'play none none reverse', // what happens when the element goes off screen
-//   },
-// });
 
 
 /* SCROLL BUTTONS */
 
-document.querySelector("#button-freelance-work").addEventListener("click", e => {
+const btnFreelance = document.querySelector("#button-freelance-work");
-  // scroll to the spot where .box-c is in the center.
+if (btnFreelance) {
-  // parameters: element, smooth, position
+  btnFreelance.addEventListener("click", e => {
+    e.preventDefault();
     smoother.scrollTo("#freelance-work", true, "center center");
-  // or you could animate the scrollTop:
-  // gsap.to(smoother, {
-  // 	scrollTop: smoother.offset(".box-c", "center center"),
-  // 	duration: 1
-  // });
   });
+}
 
-document.querySelector("#button-personal-projects").addEventListener("click", e => {
+const btnPersonal = document.querySelector("#button-personal-projects");
-  // scroll to the spot where .box-c is in the center.
+if (btnPersonal) {
-  // parameters: element, smooth, position
+  btnPersonal.addEventListener("click", e => {
+    e.preventDefault();
     smoother.scrollTo("#personal-projects", true, "center center");
-  
-  // or you could animate the scrollTop:
-  // gsap.to(smoother, {
-  // 	scrollTop: smoother.offset(".box-c", "center center"),
-  // 	duration: 1
-  // });
   });
+}
 
-document.querySelector("#back-to-top").addEventListener("click", e => {
+const btnTop = document.querySelector("#back-to-top");
-  // scroll to the spot where .box-c is in the center.
+if (btnTop) {
-  // parameters: element, smooth, position
+  btnTop.addEventListener("click", e => {
+    e.preventDefault();
     smoother.scrollTo("h1", true, "center center");
-  
-  // or you could animate the scrollTop:
-  // gsap.to(smoother, {
-  // 	scrollTop: smoother.offset(".box-c", "center center"),
-  // 	duration: 1
-  // });
   });
+}
 
 //ScrollTrigger.defaults({ scroller: smoother }); // this screws up click events

src/assets/styles/main.scss

@@ -136,7 +136,7 @@ header {
   align-self: flex-start;
 
   li{
-    border-inline-start: .5rem var(--c-text-light);
+    border-inline-start: .5rem solid var(--c-text-light);
     padding-inline-start: .2rem;
 
     a{
@@ -169,7 +169,7 @@ header {
   a{
     color: var(--c-text);
     text-decoration: underline;
-    text-decoration-line: dotted;
+    text-decoration-style: dotted;
     text-decoration-color: #6130002f;
     text-decoration-thickness: 0.05em;
     //text-decoration-style: dotted;