From c3eb57446551b838150ee1a9b3a895679d9edcac Mon Sep 17 00:00:00 2001
From: Spencer Flagg <work@spencerflagg.com>
Date: Mon, 9 Mar 2026 16:53:50 +0100
Subject: [PATCH] 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 |  5 +-
 src/_includes/components/header.njk  |  9 ++-
 src/_includes/components/project.njk |  2 +-
 src/assets/js/landing.js             | 95 +++++++++++-----------------
 src/assets/styles/main.scss          |  4 +-
 5 files changed, 48 insertions(+), 67 deletions(-)

diff --git a/src/_includes/components/contact.njk b/src/_includes/components/contact.njk
index 69ae759..07e2851 100644
--- a/src/_includes/components/contact.njk
+++ b/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"
diff --git a/src/_includes/components/header.njk b/src/_includes/components/header.njk
index 1f30255..b819183 100644
--- a/src/_includes/components/header.njk
+++ b/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>
\ No newline at end of file
diff --git a/src/_includes/components/project.njk b/src/_includes/components/project.njk
index 8744c56..f21adba 100644
--- a/src/_includes/components/project.njk
+++ b/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>
diff --git a/src/assets/js/landing.js b/src/assets/js/landing.js
index 654a630..dd4bc45 100644
--- a/src/assets/js/landing.js
+++ b/src/assets/js/landing.js
@@ -65,69 +65,48 @@ headers.forEach(function (section) {
 
 const contact = document.querySelector(".contact");
 
-gsap.to(contact, {
-  //height: "initial",
-  //'min-height': "initial",
-  //padding: "1rem",
-  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
-  },
-});
-
-// 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
-//   },
-// });
+if (contact) {
+  gsap.to(contact, {
+    //height: "initial",
+    //'min-height': "initial",
+    //padding: "1rem",
+    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 => {
-  // scroll to the spot where .box-c is in the center.
-  // parameters: element, smooth, position
-  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
-  // });
-});
+const btnFreelance = document.querySelector("#button-freelance-work");
+if (btnFreelance) {
+  btnFreelance.addEventListener("click", e => {
+    e.preventDefault();
+    smoother.scrollTo("#freelance-work", true, "center center");
+  });
+}
 
-document.querySelector("#button-personal-projects").addEventListener("click", e => {
-  // scroll to the spot where .box-c is in the center.
-  // parameters: element, smooth, position
-  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
-  // });
-});
+const btnPersonal = document.querySelector("#button-personal-projects");
+if (btnPersonal) {
+  btnPersonal.addEventListener("click", e => {
+    e.preventDefault();
+    smoother.scrollTo("#personal-projects", true, "center center");
+  });
+}
 
-document.querySelector("#back-to-top").addEventListener("click", e => {
-  // scroll to the spot where .box-c is in the center.
-  // parameters: element, smooth, position
-  smoother.scrollTo("h1", true, "center center");
-  
-  // or you could animate the scrollTop:
-  // gsap.to(smoother, {
-  // 	scrollTop: smoother.offset(".box-c", "center center"),
-  // 	duration: 1
-  // });
-});
+const btnTop = document.querySelector("#back-to-top");
+if (btnTop) {
+  btnTop.addEventListener("click", e => {
+    e.preventDefault();
+    smoother.scrollTo("h1", true, "center center");
+  });
+}
 
 //ScrollTrigger.defaults({ scroller: smoother }); // this screws up click events
\ No newline at end of file
diff --git a/src/assets/styles/main.scss b/src/assets/styles/main.scss
index 0623a88..50ff4ae 100644
--- a/src/assets/styles/main.scss
+++ b/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;