From d1e11118da0ff8ee1c88c8875d9395e299dc388e Mon Sep 17 00:00:00 2001
From: Sebastian Beltran <bjohansebas@gmail.com>
Date: Mon, 18 Aug 2025 16:18:46 -0500
Subject: [PATCH 01/13] update hamburger component to use button element

Signed-off-by: Sebastian Beltran <bjohansebas@gmail.com>
---
 src/components/Hamburger.astro | 4 ++--
 src/styles/global.css          | 2 ++
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/Hamburger.astro b/src/components/Hamburger.astro
index 7093515..6cec202 100644
--- a/src/components/Hamburger.astro
+++ b/src/components/Hamburger.astro
@@ -1,8 +1,8 @@
 ---
 ---
 
-<div class="hamburger">
+<button class="hamburger">
   <span class="line"></span>
   <span class="line"></span>
   <span class="line"></span>
-</div>
+</button>
diff --git a/src/styles/global.css b/src/styles/global.css
index 0768104..a1e71aa 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -23,6 +23,8 @@ h1 {
 /* nav styles */
 
 .hamburger {
+  background: transparent;
+  border: none;
   padding-right: 20px;
   cursor: pointer;
 }

From cf50bfa81f578f2e61e66c684f7945663dcb2e5d Mon Sep 17 00:00:00 2001
From: Sebastian Beltran <bjohansebas@gmail.com>
Date: Tue, 19 Aug 2025 12:52:01 -0500
Subject: [PATCH 02/13] improve accesibilidad of menu

Signed-off-by: Sebastian Beltran <bjohansebas@gmail.com>
---
 src/components/Hamburger.astro  |  2 +-
 src/components/Header.astro     |  2 +-
 src/components/Navigation.astro |  4 ++--
 src/scripts/menu.js             |  7 +++++--
 src/styles/global.css           | 11 ++++++++---
 5 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/components/Hamburger.astro b/src/components/Hamburger.astro
index 6cec202..3ecedb6 100644
--- a/src/components/Hamburger.astro
+++ b/src/components/Hamburger.astro
@@ -1,7 +1,7 @@
 ---
 ---
 
-<button class="hamburger">
+<button aria-expanded="false" aria-controls="main-menu" class="hamburger">
   <span class="line"></span>
   <span class="line"></span>
   <span class="line"></span>
diff --git a/src/components/Header.astro b/src/components/Header.astro
index 1da8286..be99fe3 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -5,7 +5,7 @@ import ThemeIcon from "./ThemeIcon.astro";
 ---
 
 <header>
-  <nav>
+  <nav role="navigation" aria-label="Main menu">
     <Hamburger />
     <ThemeIcon />
     <Navigation />
diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro
index 308e5d1..d3635de 100644
--- a/src/components/Navigation.astro
+++ b/src/components/Navigation.astro
@@ -1,8 +1,8 @@
 ---
 ---
-<div class="nav-links">
+<ul id="main-menu" class="nav-links">
   <a href="/">Home</a>
   <a href="/about/">About</a>
   <a href="/blog/">Blog</a>
   <a href="/tags/">Tags</a>
-</div>
+</ul>
diff --git a/src/scripts/menu.js b/src/scripts/menu.js
index 3e950bd..268fd35 100644
--- a/src/scripts/menu.js
+++ b/src/scripts/menu.js
@@ -1,3 +1,6 @@
-document.querySelector('.hamburger').addEventListener('click', () => {
-  document.querySelector('.nav-links').classList.toggle('expanded');
+const hamburger = document.querySelector('.hamburger')
+
+hamburger.addEventListener('click', () => {
+  const isExpanded = hamburger.getAttribute('aria-expanded') === 'true';
+  hamburger.setAttribute('aria-expanded', !isExpanded);
 });
diff --git a/src/styles/global.css b/src/styles/global.css
index a1e71aa..145e109 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -41,7 +41,7 @@ h1 {
   width: 100%;
   top: 5rem;
   left: 48px;
-  background-color: #ff9776;
+  background-color: transparent;
   display: none;
   margin: 0;
 }
@@ -61,7 +61,7 @@ h1 {
   background-color: #ff9776;
 }
 
-.expanded {
+.hamburger[aria-expanded="true"] ~ .nav-links {
   display: unset;
 }
 
@@ -89,6 +89,11 @@ html.dark {
   color: #fff;
 }
 
+.dark .nav-links a:hover,
+.dark .nav-links a:focus {
+  color: #000;
+}
+
 .dark .nav-links a {
   color: #fff;
-}
\ No newline at end of file
+}

From ee485c271b534831c90317db16b38cf3ecaeb75a Mon Sep 17 00:00:00 2001
From: Sebastian Beltran <bjohansebas@gmail.com>
Date: Wed, 20 Aug 2025 16:34:16 -0500
Subject: [PATCH 03/13] apply suggestions

Signed-off-by: Sebastian Beltran <bjohansebas@gmail.com>
---
 src/components/Header.astro     | 2 +-
 src/components/Navigation.astro | 4 ++--
 src/styles/global.css           | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Header.astro b/src/components/Header.astro
index be99fe3..5b7d4ea 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -5,7 +5,7 @@ import ThemeIcon from "./ThemeIcon.astro";
 ---
 
 <header>
-  <nav role="navigation" aria-label="Main menu">
+  <nav aria-label="Main menu">
     <Hamburger />
     <ThemeIcon />
     <Navigation />
diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro
index d3635de..bf97dd4 100644
--- a/src/components/Navigation.astro
+++ b/src/components/Navigation.astro
@@ -1,8 +1,8 @@
 ---
 ---
-<ul id="main-menu" class="nav-links">
+<div id="main-menu" class="nav-links">
   <a href="/">Home</a>
   <a href="/about/">About</a>
   <a href="/blog/">Blog</a>
   <a href="/tags/">Tags</a>
-</ul>
+</div>
diff --git a/src/styles/global.css b/src/styles/global.css
index 145e109..509b773 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -24,6 +24,7 @@ h1 {
 
 .hamburger {
   background: transparent;
+  display: block;
   border: none;
   padding-right: 20px;
   cursor: pointer;
@@ -41,7 +42,6 @@ h1 {
   width: 100%;
   top: 5rem;
   left: 48px;
-  background-color: transparent;
   display: none;
   margin: 0;
 }

From 6346f4c51e4f7e114b851aeccc745c94b14b66c1 Mon Sep 17 00:00:00 2001
From: Sebastian Beltran <bjohansebas@gmail.com>
Date: Thu, 21 Aug 2025 10:48:35 -0500
Subject: [PATCH 04/13] apply suggestions

Signed-off-by: Sebastian Beltran <bjohansebas@gmail.com>
---
 src/components/Hamburger.astro |  8 --------
 src/components/Header.astro    | 14 +++++++++++---
 src/components/Menu.astro      |  6 ++++++
 src/scripts/menu.js            |  2 +-
 src/styles/global.css          | 30 +++++++++++++++---------------
 5 files changed, 33 insertions(+), 27 deletions(-)
 delete mode 100644 src/components/Hamburger.astro
 create mode 100644 src/components/Menu.astro

diff --git a/src/components/Hamburger.astro b/src/components/Hamburger.astro
deleted file mode 100644
index 3ecedb6..0000000
--- a/src/components/Hamburger.astro
+++ /dev/null
@@ -1,8 +0,0 @@
----
----
-
-<button aria-expanded="false" aria-controls="main-menu" class="hamburger">
-  <span class="line"></span>
-  <span class="line"></span>
-  <span class="line"></span>
-</button>
diff --git a/src/components/Header.astro b/src/components/Header.astro
index 5b7d4ea..1a4b946 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -1,13 +1,21 @@
 ---
-import Hamburger from "./Hamburger.astro";
+import Menu from "./Menu.astro";
 import Navigation from "./Navigation.astro";
 import ThemeIcon from "./ThemeIcon.astro";
 ---
 
 <header>
   <nav aria-label="Main menu">
-    <Hamburger />
-    <ThemeIcon />
+    <div>
+      <Menu />
+      <ThemeIcon />
+    </div>
     <Navigation />
   </nav>
 </header>
+
+<style>
+  div {
+    display: flex;
+  }
+</style>
\ No newline at end of file
diff --git a/src/components/Menu.astro b/src/components/Menu.astro
new file mode 100644
index 0000000..f601af2
--- /dev/null
+++ b/src/components/Menu.astro
@@ -0,0 +1,6 @@
+---
+---
+
+<button aria-expanded="false" aria-controls="main-menu" class="menu">
+  Menu
+</button>
diff --git a/src/scripts/menu.js b/src/scripts/menu.js
index 268fd35..bafb83d 100644
--- a/src/scripts/menu.js
+++ b/src/scripts/menu.js
@@ -1,4 +1,4 @@
-const hamburger = document.querySelector('.hamburger')
+const hamburger = document.querySelector('.menu')
 
 hamburger.addEventListener('click', () => {
   const isExpanded = hamburger.getAttribute('aria-expanded') === 'true';
diff --git a/src/styles/global.css b/src/styles/global.css
index 509b773..e1440cb 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -22,21 +22,15 @@ h1 {
 
 /* nav styles */
 
-.hamburger {
-  background: transparent;
-  display: block;
+.menu {
+  background-color: #0d0950;
   border: none;
-  padding-right: 20px;
-  cursor: pointer;
+  color: #fff;
+  font-size: 1.2rem;
+  font-weight: bold;
+  padding: 5px 10px;
 }
 
-.hamburger .line {
-  display: block;
-  width: 40px;
-  height: 5px;
-  margin-bottom: 10px;
-  background-color: #ff9776;
-}
 
 .nav-links {
   width: 100%;
@@ -54,6 +48,7 @@ h1 {
   font-size: 1.2rem;
   font-weight: bold;
   text-transform: uppercase;
+  color: #0d0950;
 }
 
 .nav-links a:hover,
@@ -61,7 +56,7 @@ h1 {
   background-color: #ff9776;
 }
 
-.hamburger[aria-expanded="true"] ~ .nav-links {
+:has(.menu[aria-expanded="true"]) .nav-links {
   display: unset;
 }
 
@@ -79,7 +74,7 @@ h1 {
     padding: 15px 20px;
   }
 
-  .hamburger {
+  .menu {
     display: none;
   }
 }
@@ -89,9 +84,14 @@ html.dark {
   color: #fff;
 }
 
+.dark .menu {
+  background-color: #fff;
+  color: #000;
+}
+
 .dark .nav-links a:hover,
 .dark .nav-links a:focus {
-  color: #000;
+  color: #0d0950;
 }
 
 .dark .nav-links a {

From fef95703cfd083aac86aceee588174619f040c62 Mon Sep 17 00:00:00 2001
From: Sebastian Beltran <bjohansebas@gmail.com>
Date: Thu, 21 Aug 2025 11:04:25 -0500
Subject: [PATCH 05/13] rename hambuguer variable and remove some unused lines

Signed-off-by: Sebastian Beltran <bjohansebas@gmail.com>
---
 src/scripts/menu.js   | 8 ++++----
 src/styles/global.css | 2 --
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/scripts/menu.js b/src/scripts/menu.js
index bafb83d..c895b64 100644
--- a/src/scripts/menu.js
+++ b/src/scripts/menu.js
@@ -1,6 +1,6 @@
-const hamburger = document.querySelector('.menu')
+const menu = document.querySelector('.menu')
 
-hamburger.addEventListener('click', () => {
-  const isExpanded = hamburger.getAttribute('aria-expanded') === 'true';
-  hamburger.setAttribute('aria-expanded', !isExpanded);
+menu.addEventListener('click', () => {
+  const isExpanded = menu.getAttribute('aria-expanded') === 'true';
+  menu.setAttribute('aria-expanded', !isExpanded);
 });
diff --git a/src/styles/global.css b/src/styles/global.css
index e1440cb..354f8eb 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -34,8 +34,6 @@ h1 {
 
 .nav-links {
   width: 100%;
-  top: 5rem;
-  left: 48px;
   display: none;
   margin: 0;
 }

From ad95b970dc35ca0f7ee3ba30a90fa3131641961f Mon Sep 17 00:00:00 2001
From: Sebastian Beltran <bjohansebas@gmail.com>
Date: Thu, 21 Aug 2025 11:10:55 -0500
Subject: [PATCH 06/13] fix link colors in dark mode

Signed-off-by: Sebastian Beltran <bjohansebas@gmail.com>
---
 src/styles/global.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/global.css b/src/styles/global.css
index 354f8eb..94c5150 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -92,6 +92,6 @@ html.dark {
   color: #0d0950;
 }
 
-.dark .nav-links a {
+.dark a {
   color: #fff;
 }

From d27559788906ccfa663b1db7275dd5891b08d3f7 Mon Sep 17 00:00:00 2001
From: Sebastian Beltran <bjohansebas@gmail.com>
Date: Thu, 21 Aug 2025 11:49:16 -0500
Subject: [PATCH 07/13] improve links in dark mode

Signed-off-by: Sebastian Beltran <bjohansebas@gmail.com>
---
 src/styles/global.css | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/styles/global.css b/src/styles/global.css
index 94c5150..7ab5ecc 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -92,6 +92,10 @@ html.dark {
   color: #0d0950;
 }
 
-.dark a {
+.dark .nav-links a {
   color: #fff;
 }
+
+.dark a {
+  color: #ff9776;
+}
\ No newline at end of file

From 0ed17f0e4d5833ecafd001a138f5f640180805f4 Mon Sep 17 00:00:00 2001
From: Sebastian Beltran <bjohansebas@gmail.com>
Date: Sat, 23 Aug 2025 10:20:41 -0500
Subject: [PATCH 08/13] add aria attributes to theme toggle button for
 accessibility

Signed-off-by: Sebastian Beltran <bjohansebas@gmail.com>
---
 src/components/ThemeIcon.astro | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ThemeIcon.astro b/src/components/ThemeIcon.astro
index 61c4fd5..f62c1b0 100644
--- a/src/components/ThemeIcon.astro
+++ b/src/components/ThemeIcon.astro
@@ -2,7 +2,7 @@
 
 ---
 
-<button id="themeToggle">
+<button id="themeToggle" aria-hidden="true" aria-label="Toggle theme">
   <svg width="30px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
     <path
       class="sun"

From 2d152a5034d9acade4e431ecc6879b48b47a73e1 Mon Sep 17 00:00:00 2001
From: Sebastian Beltran <bjohansebas@gmail.com>
Date: Sat, 23 Aug 2025 21:49:26 -0500
Subject: [PATCH 09/13] fix accessibility by moving aria-hidden attribute to
 the SVG element

Signed-off-by: Sebastian Beltran <bjohansebas@gmail.com>
---
 src/components/ThemeIcon.astro | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/ThemeIcon.astro b/src/components/ThemeIcon.astro
index f62c1b0..827caaf 100644
--- a/src/components/ThemeIcon.astro
+++ b/src/components/ThemeIcon.astro
@@ -2,8 +2,8 @@
 
 ---
 
-<button id="themeToggle" aria-hidden="true" aria-label="Toggle theme">
-  <svg width="30px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+<button id="themeToggle" aria-label="Toggle theme">
+  <svg aria-hidden="true" width="30px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
     <path
       class="sun"
       fill-rule="evenodd"

From b4e78ea099b2a10c4c2e8ce8abb4c440ec63dda6 Mon Sep 17 00:00:00 2001
From: Sarah Rainsberger <5098874+sarah11918@users.noreply.github.com>
Date: Thu, 28 Aug 2025 09:48:28 -0300
Subject: [PATCH 10/13] change skills colour on about page

---
 src/pages/about.astro | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/pages/about.astro b/src/pages/about.astro
index 6019c86..a814b3e 100644
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -15,7 +15,7 @@ const identity = {
 
 const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Writing Docs"];
 
-const skillColor = "navy";
+const skillColor = "Crimson";
 const fontWeight = "bold";
 const textCase = "uppercase";
 ---
@@ -73,3 +73,4 @@ const textCase = "uppercase";
     {skills.map((skill) => <li class="skill">{skill}</li>)}
   </ul>
 </BaseLayout>
+

From b6d2ffefd5a5ae9fe112632f37636d2c073947eb Mon Sep 17 00:00:00 2001
From: Sarah Rainsberger <5098874+sarah11918@users.noreply.github.com>
Date: Thu, 28 Aug 2025 09:49:04 -0300
Subject: [PATCH 11/13] skillcolor on about page lower case

---
 src/pages/about.astro | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/pages/about.astro b/src/pages/about.astro
index a814b3e..ec7948e 100644
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -15,7 +15,7 @@ const identity = {
 
 const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Writing Docs"];
 
-const skillColor = "Crimson";
+const skillColor = "crimson";
 const fontWeight = "bold";
 const textCase = "uppercase";
 ---
@@ -74,3 +74,4 @@ const textCase = "uppercase";
   </ul>
 </BaseLayout>
 
+

From 012f85cb4c92710b714e1e5046c3077469c754c0 Mon Sep 17 00:00:00 2001
From: Sarah Rainsberger <5098874+sarah11918@users.noreply.github.com>
Date: Thu, 28 Aug 2025 10:40:21 -0300
Subject: [PATCH 12/13] remove blank lines

---
 src/pages/about.astro | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/pages/about.astro b/src/pages/about.astro
index ec7948e..1bb9763 100644
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -73,5 +73,3 @@ const textCase = "uppercase";
     {skills.map((skill) => <li class="skill">{skill}</li>)}
   </ul>
 </BaseLayout>
-
-

From 476dd2abcf8542a83e97ebc9edcb739ace25d3d0 Mon Sep 17 00:00:00 2001
From: Sebastian Beltran <bjohansebas@gmail.com>
Date: Sat, 30 Aug 2025 08:26:38 -0500
Subject: [PATCH 13/13] apply suggestions

Signed-off-by: Sebastian Beltran <bjohansebas@gmail.com>
---
 src/components/Header.astro | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/Header.astro b/src/components/Header.astro
index 1a4b946..d6e1524 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -5,10 +5,10 @@ import ThemeIcon from "./ThemeIcon.astro";
 ---
 
 <header>
-  <nav aria-label="Main menu">
+  <nav>
     <div>
-      <Menu />
       <ThemeIcon />
+      <Menu />
     </div>
     <Navigation />
   </nav>
@@ -17,5 +17,6 @@ import ThemeIcon from "./ThemeIcon.astro";
 <style>
   div {
     display: flex;
+    justify-content: space-between;
   }
 </style>
\ No newline at end of file