From 7c40f64fbfd3c121ed48d9bec179d8cfd61b05cb Mon Sep 17 00:00:00 2001
From: Shamith <abhi.shamith506@gmail.com>
Date: Thu, 9 Apr 2026 11:24:37 +0530
Subject: [PATCH 1/3] Fix contact icon tap triggering parent box lock/unlock

Tapping a contact icon (e.g. GitHub, Instagram) was bubbling up
to the parent box click handler, causing the section to lock/unlock
and creating a visual glitch on mobile. Added a guard to skip the
lock logic when the click originates from a contact icon.
---
 index.html | 2 ++
 script.js  | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/index.html b/index.html
index a4da1ca..4f866a7 100644
--- a/index.html
+++ b/index.html
@@ -151,6 +151,8 @@ <h3>Contact</h3>
       });
 
       box.addEventListener("click", e => {
+        // Don't lock/unlock if a contact link was tapped
+        if (e.target.closest('.contact-icon')) return;
         e.stopPropagation();
         if (locked === box) {
           unlock();
diff --git a/script.js b/script.js
index eba0457..8276bc2 100644
--- a/script.js
+++ b/script.js
@@ -25,6 +25,8 @@ boxes.forEach(box => {
 ----------------------------- */
 boxes.forEach(box => {
   box.addEventListener("click", e => {
+    // Don't lock/unlock if a contact link was tapped
+    if (e.target.closest('.contact-icon')) return;
     e.stopPropagation();
 
     // If clicking the same box → unlock

From 36e86d92ace49b8ed5df0f63aeceb2c64f272ef4 Mon Sep 17 00:00:00 2001
From: Shamith <abhi.shamith506@gmail.com>
Date: Thu, 9 Apr 2026 11:24:49 +0530
Subject: [PATCH 2/3] Fix contact icon label contrast and mobile expand styles

Changed icon label color from white to dark red (--accent-red-deep)
for readable contrast against the sand background. White color and
text-shadow now only apply on hover when the colored background is
present. Replaced the expand-all-on-box-active behavior with an
individual .expanded class for touch devices, and removed the brief
:active pseudo-class that was barely visible on tap.
---
 style.css | 19 ++++++++-----------
 1 file changed, 8 insertions(+), 11 deletions(-)

diff --git a/style.css b/style.css
index 7b18851..475d485 100644
--- a/style.css
+++ b/style.css
@@ -574,13 +574,12 @@ body.loaded .right-bottom {
   opacity: 0;
   font-size: 1rem;
   font-weight: 600;
-  color: #fff;
+  color: var(--accent-red-deep);
   transition: all 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
   pointer-events: none;
   z-index: 1;
   font-family: 'Playfair Display', serif;
   letter-spacing: 0.5px;
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
 }
 
 /* Hover/Focus State */
@@ -614,6 +613,8 @@ body.loaded .right-bottom {
 .contact-icon:focus-visible span {
   opacity: 1;
   transform: translateX(4px);
+  color: #fff;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
 }
 
 /* Premium Glow Effect */
@@ -833,13 +834,6 @@ body.loaded .right-bottom {
     gap: 12px;
   }
 
-  .box.active .contact-icon {
-    width: 150px;
-  }
-
-  .box.active .contact-icon span {
-    opacity: 1;
-  }
 }
 
 /* =================================================
@@ -859,12 +853,15 @@ body.loaded .right-bottom {
     display: none;
   }
 
-  .contact-icon:active {
+  .contact-icon.expanded {
     width: 150px;
+    justify-content: flex-start;
+    padding-left: 18px;
   }
 
-  .contact-icon:active span {
+  .contact-icon.expanded span {
     opacity: 1;
+    color: var(--accent-red-deep);
   }
 }
 

From b0f6334231f1d85749c5db2ab27cdc8fcaac9b5a Mon Sep 17 00:00:00 2001
From: Shamith <abhi.shamith506@gmail.com>
Date: Thu, 9 Apr 2026 11:25:00 +0530
Subject: [PATCH 3/3] Add individual tap-to-expand for contact icons on touch
 devices

Replaces the expand-all-on-section-tap mobile behavior with a
per-icon tap interaction that matches desktop hover UX: first tap
expands the icon and reveals its label, second tap navigates to
the link. Tapping outside or on another icon collapses the previous.
---
 index.html | 21 +++++++++++++++++++++
 script.js  | 22 ++++++++++++++++++++++
 2 files changed, 43 insertions(+)

diff --git a/index.html b/index.html
index 4f866a7..b57559f 100644
--- a/index.html
+++ b/index.html
@@ -177,6 +177,27 @@ <h3>Contact</h3>
       locked = null;
     }
 
+    // Touch: first tap expands icon, second tap navigates
+    const isTouchDevice = matchMedia('(hover: none) and (pointer: coarse)').matches;
+    if (isTouchDevice) {
+      document.querySelectorAll('.contact-icon').forEach(icon => {
+        icon.addEventListener('click', e => {
+          if (!icon.classList.contains('expanded')) {
+            e.preventDefault();
+            document.querySelectorAll('.contact-icon.expanded').forEach(i => i.classList.remove('expanded'));
+            icon.classList.add('expanded');
+          }
+        });
+      });
+
+      // Tap outside collapses expanded icon
+      document.addEventListener('click', e => {
+        if (!e.target.closest('.contact-icon')) {
+          document.querySelectorAll('.contact-icon.expanded').forEach(i => i.classList.remove('expanded'));
+        }
+      });
+    }
+
     // Disable right click
     document.addEventListener("contextmenu", e => e.preventDefault());
 
diff --git a/script.js b/script.js
index 8276bc2..4a5f688 100644
--- a/script.js
+++ b/script.js
@@ -62,3 +62,25 @@ function unlock() {
   lockedBox = null;
 }
 
+/* -----------------------------
+   TOUCH: TAP-TO-EXPAND ICONS
+----------------------------- */
+const isTouchDevice = matchMedia('(hover: none) and (pointer: coarse)').matches;
+if (isTouchDevice) {
+  document.querySelectorAll('.contact-icon').forEach(icon => {
+    icon.addEventListener('click', e => {
+      if (!icon.classList.contains('expanded')) {
+        e.preventDefault();
+        document.querySelectorAll('.contact-icon.expanded').forEach(i => i.classList.remove('expanded'));
+        icon.classList.add('expanded');
+      }
+    });
+  });
+
+  document.addEventListener('click', e => {
+    if (!e.target.closest('.contact-icon')) {
+      document.querySelectorAll('.contact-icon.expanded').forEach(i => i.classList.remove('expanded'));
+    }
+  });
+}
+