From 490a7d0b172683b787124654aec3cf4f65e909b1 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 31 Oct 2025 21:05:31 +0000
Subject: [PATCH 1/5] Initial plan


From 8f0be83cbdf6ed62147ada59dd6236fbe3804011 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 31 Oct 2025 21:09:08 +0000
Subject: [PATCH 2/5] Fix HTML validation errors and improve accessibility

Co-authored-by: rammcodes <34917255+rammcodes@users.noreply.github.com>
---
 index.html | 66 +++++++++++++++++++++++++-----------------------------
 1 file changed, 30 insertions(+), 36 deletions(-)

diff --git a/index.html b/index.html
index 8d9badc..b33709d 100644
--- a/index.html
+++ b/index.html
@@ -20,28 +20,28 @@
       <div class="main-header__logo-img-cont">
         <img
           src="https://d33wubrfki0l68.cloudfront.net/32c48e23e828c42a99a37db81e2a91d7c8eed4de/d134a/assets/png/ram-maheshwari.png"
-          alt="logo Image" class="main-header__logo-img" />
+          alt="John Anderson Profile" class="main-header__logo-img" />
       </div>
       <h4 class="main-header__logo-text">John Anderson</h4>
     </div>
-    <nav class="main-header__navigation">
+    <nav class="main-header__navigation" aria-label="Main navigation">
       <ul class="main-header__navigation-links">
         <li class="main-header__navigation-link"><a href="./index.html"> Home </a></li>
         <li class="main-header__navigation-link"><a href="./index.html#about"> About </a></li>
         <li class="main-header__navigation-link">
           <a href="./index.html#projects"> Projects </a>
         </li>
-        <li class="main-header__navigation-link"><a href="./index.html#contact" href=""> Contact </a></li>
+        <li class="main-header__navigation-link"><a href="./index.html#contact"> Contact </a></li>
       </ul>
     </nav>
-    <div class="main-header__sm-scr-nav-btn">
+    <button class="main-header__sm-scr-nav-btn" aria-label="Open mobile menu" aria-expanded="false">
       <div class="main-header__sm-scr-nav-btn-line"></div>
       <div class="main-header__sm-scr-nav-btn-line"></div>
-    </div>
-    <div class="main-header__sm-menu">
-      <div class="main-header__sm-menu-close">
-
-      </div>
+    </button>
+    <div class="main-header__sm-menu" role="dialog" aria-label="Mobile navigation menu">
+      <button class="main-header__sm-menu-close" aria-label="Close mobile menu">
+        ✕
+      </button>
       <ul class="main-header__sm-menu-links">
         <li>
           <a class="main-header__sm-menu-link main-header__sm-menu-link--1" name="home-hero">Home</a>
@@ -89,6 +89,7 @@ <h2 class="heading-secondary projects__heading-secondary">
         <span class="heading-secondary__sm"> About 🦄</span>
         <span class="heading-secondary__main">
           Here you will find more information about me, what I do, and list of my current skills in programming
+        </span>
       </h2>
       <div class="main-section__content">
         <div class="about__info">
@@ -134,13 +135,6 @@ <h3 class="heading-quaternary about__heading-quaternary">
               <li class="about__skill">git</li>
               <li class="about__skill">vscode</li>
               <li class="about__skill">linux</li>
-              <li class="about__skill">react</li>
-              <li class="about__skill">node</li>
-              <li class="about__skill">git</li>
-              <li class="about__skill">vscode</li>
-              <li class="about__skill">linux</li>
-              <li class="about__skill">javascript</li>
-              <li class="about__skill">react</li>
             </ul>
           </div>
         </div>
@@ -197,7 +191,7 @@ <h2 class="heading-secondary projects__heading-secondary">
             </div>
             <div class="projects__list-item-details">
               <div class="projects__list-item-img-cont">
-                <img src="./assets/mock.png" alt="Project Image" class="projects__list-item-img" />
+                <img src="./assets/mock.png" alt="Project screenshot" class="projects__list-item-img" />
               </div>
               <h3 class="heading-tertiary projects__list-item-heading-tertiary">
                 Project Name
@@ -227,7 +221,7 @@ <h3 class="heading-tertiary projects__list-item-heading-tertiary">
           <div class="projects__list-item projects__list-item--inv">
             <div class="projects__list-item-details">
               <div class="projects__list-item-img-cont">
-                <img src="./assets/mock.png" alt="Project Image" class="projects__list-item-img" />
+                <img src="./assets/mock.png" alt="Project screenshot" class="projects__list-item-img" />
               </div>
               <h3 class="heading-tertiary projects__list-item-heading-tertiary">
                 Project Name
@@ -267,7 +261,7 @@ <h3 class="heading-tertiary projects__list-item-heading-tertiary">
             </div>
             <div class="projects__list-item-details">
               <div class="projects__list-item-img-cont">
-                <img src="./assets/mock.png" alt="Project Image" class="projects__list-item-img" />
+                <img src="./assets/mock.png" alt="Project screenshot" class="projects__list-item-img" />
               </div>
               <h3 class="heading-tertiary projects__list-item-heading-tertiary">
                 Project Name
@@ -297,7 +291,7 @@ <h3 class="heading-tertiary projects__list-item-heading-tertiary">
           <div class="projects__list-item projects__list-item--inv">
             <div class="projects__list-item-details">
               <div class="projects__list-item-img-cont">
-                <img src="./assets/mock.png" alt="Project Image" class="projects__list-item-img" />
+                <img src="./assets/mock.png" alt="Project screenshot" class="projects__list-item-img" />
               </div>
               <h3 class="heading-tertiary projects__list-item-heading-tertiary">
                 Project Name
@@ -346,16 +340,16 @@ <h2 class="heading-secondary">
           <form class="contact__form">
             <div class="contact__form-field">
               <label for="name" class="contact__form-field-label">Name</label>
-              <input placeholder="Enter Your Name" type="text" class="contact__form-field-input" />
+              <input id="name" name="name" placeholder="Enter Your Name" type="text" class="contact__form-field-input" required />
             </div>
             <div class="contact__form-field">
-              <label for="name" class="contact__form-field-label">Email</label>
-              <input placeholder="Enter Your Email" type="text" class="contact__form-field-input" />
+              <label for="email" class="contact__form-field-label">Email</label>
+              <input id="email" name="email" placeholder="Enter Your Email" type="email" class="contact__form-field-input" required />
             </div>
             <div class="contact__form-field">
-              <label for="name" class="contact__form-field-label">Message</label>
-              <textarea placeholder="Enter Your Message" name="message" id="" cols="30" rows="10"
-                class="contact__form-field-input"></textarea>
+              <label for="message" class="contact__form-field-label">Message</label>
+              <textarea id="message" placeholder="Enter Your Message" name="message" cols="30" rows="10"
+                class="contact__form-field-input" required></textarea>
             </div>
             <button type="submit" class="contact__form-submit">Submit</button>
           </form>
@@ -383,24 +377,24 @@ <h2 class="heading-secondary">
         </ul>
         <div class="main-footer__mid-line"></div>
         <div class="main-footer__socials">
-          <a href="#" class="main-footer__social-link">
+          <a href="#" class="main-footer__social-link" aria-label="GitHub profile">
             <img
               src="https://d33wubrfki0l68.cloudfront.net/5557d5a11584d7201a38ee1a95200f57a4cc0f88/15085/assets/png/github-ico.png"
-              alt="" class="main-footer__social-link-icon" />
+              alt="GitHub" class="main-footer__social-link-icon" />
           </a>
-          <a href="#" class="main-footer__social-link">
-            <img src="./assets/icons8-instagram-48.png" alt="" class="main-footer__social-link-icon" />
+          <a href="#" class="main-footer__social-link" aria-label="Instagram profile">
+            <img src="./assets/icons8-instagram-48.png" alt="Instagram" class="main-footer__social-link-icon" />
           </a>
-          <a href="#" class="main-footer__social-link">
-            <img src="./assets/icons8-twitter-50.png" alt="" class="main-footer__social-link-icon" />
+          <a href="#" class="main-footer__social-link" aria-label="Twitter profile">
+            <img src="./assets/icons8-twitter-50.png" alt="Twitter" class="main-footer__social-link-icon" />
           </a>
-          <a href="#" class="main-footer__social-link">
+          <a href="#" class="main-footer__social-link" aria-label="LinkedIn profile">
             <img
               src="https://d33wubrfki0l68.cloudfront.net/7f29579dde49e02480372aa49f7189c5536b0118/34b92/assets/png/linkedin-ico.png"
-              alt="" class="main-footer__social-link-icon" />
+              alt="LinkedIn" class="main-footer__social-link-icon" />
           </a>
-          <a href="#" class="main-footer__social-link">
-            <img src="./assets/icons8-pinterest-64.png" alt="" class="main-footer__social-link-icon" />
+          <a href="#" class="main-footer__social-link" aria-label="Pinterest profile">
+            <img src="./assets/icons8-pinterest-64.png" alt="Pinterest" class="main-footer__social-link-icon" />
           </a>
         </div>
       </div>

From f640620f10da5f82ae3371e48eaa1ea2c2e66c20 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 31 Oct 2025 21:13:06 +0000
Subject: [PATCH 3/5] Refactor JavaScript: eliminate duplication, add JSDoc,
 improve code quality

Co-authored-by: rammcodes <34917255+rammcodes@users.noreply.github.com>
---
 script.js | 229 ++++++++++++++++++++++++++++--------------------------
 1 file changed, 117 insertions(+), 112 deletions(-)

diff --git a/script.js b/script.js
index 78470d8..1b8502d 100644
--- a/script.js
+++ b/script.js
@@ -1,141 +1,146 @@
-const smMenuBtn = document.querySelector('.main-header__sm-scr-nav-btn')
-const smMenu = document.querySelector('.main-header__sm-menu')
-const smMenuCloseBtn = document.querySelector('.main-header__sm-menu-close')
-
-const smMenuLinks = document.querySelectorAll('.main-header__sm-menu-link')
-const smMenuLink1 = document.querySelector('.main-header__sm-menu-link--1')
-const smMenuLink2 = document.querySelector('.main-header__sm-menu-link--2')
-const smMenuLink3 = document.querySelector('.main-header__sm-menu-link--3')
-const smMenuLink4 = document.querySelector('.main-header__sm-menu-link--4')
-
-smMenuBtn.addEventListener('click', () => {
-  smMenu.style.transitionDelay = '0s'
-  smMenu.classList.add('main-header__sm-menu--active')
-
-  smMenuLink1.style.transitionDelay = '.5s'
-  smMenuLink1.style.transform = 'translateY(0)'
-  smMenuLink1.style.opacity = '1'
-
-  smMenuLink2.style.transitionDelay = '.8s'
-  smMenuLink2.style.transform = 'translateY(0)'
-  smMenuLink2.style.opacity = '1'
-
-  smMenuLink3.style.transitionDelay = '1.1s'
-  smMenuLink3.style.transform = 'translateY(0)'
-  smMenuLink3.style.opacity = '1'
-
-  smMenuLink4.style.transitionDelay = '1.4s'
-  smMenuLink4.style.transform = 'translateY(0)'
-  smMenuLink4.style.opacity = '1'
-})
-
-smMenuLinks.forEach((ele) => {
-  ele.addEventListener('click', () => {
-    smMenuLink4.style.transitionDelay = '0s'
-    smMenuLink4.style.transform = 'translateY(50px)'
-    smMenuLink4.style.opacity = '0'
-
-    smMenuLink3.style.transitionDelay = '.3s'
-    smMenuLink3.style.transform = 'translateY(50px)'
-    smMenuLink3.style.opacity = '0'
-
-    smMenuLink2.style.transitionDelay = '.6s'
-    smMenuLink2.style.transform = 'translateY(50px)'
-    smMenuLink2.style.opacity = '0'
-
-    smMenuLink1.style.transitionDelay = '.9s'
-    smMenuLink1.style.transform = 'translateY(50px)'
-    smMenuLink1.style.opacity = '0'
-
-    smMenu.style.transitionDelay = '1.2s'
-    smMenu.classList.remove('main-header__sm-menu--active')
-
-    setTimeout(() => {
-      document.getElementById(ele.name).scrollIntoView()
-    }, 1300)
-  })
-})
+// Mobile menu elements
+const smMenuBtn = document.querySelector('.main-header__sm-scr-nav-btn');
+const smMenu = document.querySelector('.main-header__sm-menu');
+const smMenuCloseBtn = document.querySelector('.main-header__sm-menu-close');
+const smMenuLinks = document.querySelectorAll('.main-header__sm-menu-link');
+
+/**
+ * Animates menu links with staggered transitions
+ * @param {NodeListOf<Element>} links - Menu link elements
+ * @param {boolean} show - Whether to show (true) or hide (false) the links
+ */
+function animateMenuLinks(links, show) {
+  const delays = [0.5, 0.8, 1.1, 1.4];
+  const translateY = show ? '0' : '50px';
+  const opacity = show ? '1' : '0';
+  
+  links.forEach((link, index) => {
+    const delay = show ? delays[index] : delays[delays.length - 1 - index] - 0.5;
+    link.style.transitionDelay = `${delay}s`;
+    link.style.transform = `translateY(${translateY})`;
+    link.style.opacity = opacity;
+  });
+}
 
-smMenuCloseBtn.addEventListener('click', () => {
-  smMenuLink4.style.transitionDelay = '0s'
-  smMenuLink4.style.transform = 'translateY(50px)'
-  smMenuLink4.style.opacity = '0'
+/**
+ * Opens the mobile menu
+ */
+function openMobileMenu() {
+  if (!smMenu || !smMenuLinks) return;
+  
+  smMenu.style.transitionDelay = '0s';
+  smMenu.classList.add('main-header__sm-menu--active');
+  animateMenuLinks(smMenuLinks, true);
+  
+  // Update ARIA attribute
+  if (smMenuBtn) {
+    smMenuBtn.setAttribute('aria-expanded', 'true');
+  }
+}
 
-  smMenuLink3.style.transitionDelay = '.3s'
-  smMenuLink3.style.transform = 'translateY(50px)'
-  smMenuLink3.style.opacity = '0'
+/**
+ * Closes the mobile menu
+ * @param {Element|null} targetSection - Optional section to scroll to after closing
+ */
+function closeMobileMenu(targetSection = null) {
+  if (!smMenu || !smMenuLinks) return;
+  
+  animateMenuLinks(smMenuLinks, false);
+  smMenu.style.transitionDelay = '1.2s';
+  smMenu.classList.remove('main-header__sm-menu--active');
+  
+  // Update ARIA attribute
+  if (smMenuBtn) {
+    smMenuBtn.setAttribute('aria-expanded', 'false');
+  }
+  
+  if (targetSection) {
+    setTimeout(() => {
+      targetSection.scrollIntoView({ behavior: 'smooth' });
+    }, 1300);
+  }
+}
 
-  smMenuLink2.style.transitionDelay = '.6s'
-  smMenuLink2.style.transform = 'translateY(50px)'
-  smMenuLink2.style.opacity = '0'
+// Event listeners for mobile menu
+if (smMenuBtn) {
+  smMenuBtn.addEventListener('click', openMobileMenu);
+}
 
-  smMenuLink1.style.transitionDelay = '.9s'
-  smMenuLink1.style.transform = 'translateY(50px)'
-  smMenuLink1.style.opacity = '0'
+if (smMenuCloseBtn) {
+  smMenuCloseBtn.addEventListener('click', () => closeMobileMenu());
+}
 
-  smMenu.style.transitionDelay = '1.2s'
-  smMenu.classList.remove('main-header__sm-menu--active')
-})
+if (smMenuLinks) {
+  smMenuLinks.forEach((link) => {
+    link.addEventListener('click', () => {
+      const targetSection = document.getElementById(link.getAttribute('name'));
+      closeMobileMenu(targetSection);
+    });
+  });
+}
 
 
 
 
 
-// ---
-const themeColorSelector = document.querySelector('.themeClrSelector')
-const themeColorSelectorInput = document.querySelector(
-  '.themeClrSelector__input'
-)
+// Theme color selector elements
+const themeColorSelector = document.querySelector('.themeClrSelector');
+const themeColorSelectorInput = document.querySelector('.themeClrSelector__input');
 const root = document.documentElement;
 
-
-
-const hexToRgb = (hex) => {
-  let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
+/**
+ * Converts hex color to RGB object
+ * @param {string} hex - Hexadecimal color code
+ * @returns {Object|null} Object with r, g, b properties or null if invalid
+ */
+function hexToRgb(hex) {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
   return result
     ? {
         r: parseInt(result[1], 16),
         g: parseInt(result[2], 16),
         b: parseInt(result[3], 16),
       }
-    : null
+    : null;
 }
 
-const eventFire = (el, etype) => {
-  if (el.fireEvent) {
-    el.fireEvent('on' + etype)
-  } else {
-    let evObj = document.createEvent('Events')
-    evObj.initEvent(etype, true, false)
-    el.dispatchEvent(evObj)
+/**
+ * Triggers a click event on the color input when selector is clicked
+ */
+function triggerColorInput() {
+  if (themeColorSelectorInput) {
+    themeColorSelectorInput.click();
   }
 }
 
-themeColorSelector.addEventListener('click', () => {
-  eventFire(themeColorSelectorInput, 'input')
-})
-
-const setDynamicColor = (color) => {
-
-  const { r, g, b } = hexToRgb(`${color}`)
+/**
+ * Sets the dynamic theme color
+ * @param {string} color - Hexadecimal color code
+ */
+function setDynamicColor(color) {
+  const rgb = hexToRgb(color);
   
-  root.style.setProperty('--themeColor', `${r},${g},${b}`);
-  //localStorage.setItem('color', color)
+  if (rgb) {
+    root.style.setProperty('--themeColor', `${rgb.r},${rgb.g},${rgb.b}`);
+  }
 }
 
-themeColorSelectorInput.addEventListener('input', (e) => {
-  setDynamicColor(e.target.value)
-})
+// Event listeners for theme color selector
+if (themeColorSelector) {
+  themeColorSelector.addEventListener('click', triggerColorInput);
+}
 
-// if (localStorage.getItem('color')) {
-//   let userSelectedColor = localStorage.getItem('color')
-//   themeColorSelectorInput.value = userSelectedColor
-//   setDynamicColor(userSelectedColor)
-// }
+if (themeColorSelectorInput) {
+  themeColorSelectorInput.addEventListener('input', (e) => {
+    setDynamicColor(e.target.value);
+  });
+}
 
-// ---
-const headerLogoConatiner = document.querySelector('.main-header__logo-container')
+// Logo container navigation
+const headerLogoContainer = document.querySelector('.main-header__logo-container');
 
-headerLogoConatiner.addEventListener('click', () => {
-  location.href = 'index.html'
-})
+if (headerLogoContainer) {
+  headerLogoContainer.addEventListener('click', () => {
+    window.location.href = 'index.html';
+  });
+}

From 3d1567b51b9d86e2ffb92b07f204d80e1be954bc Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 31 Oct 2025 21:17:11 +0000
Subject: [PATCH 4/5] Fix CSS redundancy and add button reset styles for mobile
 menu

Co-authored-by: rammcodes <34917255+rammcodes@users.noreply.github.com>
---
 .gitignore | 25 +++++++++++++++++++++++++
 style.css  |  8 +++++++-
 2 files changed, 32 insertions(+), 1 deletion(-)
 create mode 100644 .gitignore

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..c873bb7
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,25 @@
+# Operating System Files
+.DS_Store
+Thumbs.db
+
+# Editor Files
+.vscode/
+.idea/
+*.swp
+*.swo
+*~
+
+# Temporary Files
+*.tmp
+*.temp
+.cache/
+
+# Logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Build outputs (if any build process is added later)
+dist/
+build/
diff --git a/style.css b/style.css
index 1161c29..a456a63 100644
--- a/style.css
+++ b/style.css
@@ -62,7 +62,6 @@ a {
   font-family: inherit;
   letter-spacing: 1px;
   font-weight: 700;
-  border: none;
   box-shadow: none;
   cursor: pointer;
   padding: 1.8rem 4rem;
@@ -242,6 +241,8 @@ a {
   padding: 1rem 1rem;
   display: none;
   cursor: pointer;
+  background: none;
+  border: none;
 }
 
 @media (max-width: 37.5em) {
@@ -278,6 +279,11 @@ a {
   right: 2.5rem;
   width: 3rem;
   height: 3rem;
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 2rem;
+  color: #000;
 }
 
 .main-header__sm-menu-close:before,

From bf592eb050299045f2a4127738cb2bc76cf079bc Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 31 Oct 2025 21:19:55 +0000
Subject: [PATCH 5/5] Improve function naming based on code review feedback

Co-authored-by: rammcodes <34917255+rammcodes@users.noreply.github.com>
---
 script.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/script.js b/script.js
index 1b8502d..871a9ef 100644
--- a/script.js
+++ b/script.js
@@ -105,9 +105,9 @@ function hexToRgb(hex) {
 }
 
 /**
- * Triggers a click event on the color input when selector is clicked
+ * Opens the color picker when the color selector is clicked
  */
-function triggerColorInput() {
+function openColorPicker() {
   if (themeColorSelectorInput) {
     themeColorSelectorInput.click();
   }
@@ -127,7 +127,7 @@ function setDynamicColor(color) {
 
 // Event listeners for theme color selector
 if (themeColorSelector) {
-  themeColorSelector.addEventListener('click', triggerColorInput);
+  themeColorSelector.addEventListener('click', openColorPicker);
 }
 
 if (themeColorSelectorInput) {