From 50fa3ad757c0f1ef86f5009113b34022378f235b Mon Sep 17 00:00:00 2001
From: Khushalsarode <khushalsarode.in@gmail.com>
Date: Wed, 8 Oct 2025 20:57:26 +0530
Subject: [PATCH 1/2] fixing an social media icons popup on scroll to avoid
 overlapping of components in mobile view & style

---
 index.html               |  40 +++++++++-
 scripts/socialpopicon.js |  25 +++++++
 styles/styles.css        | 154 ++++++++++++++++++++++++++++++++++++++-
 3 files changed, 215 insertions(+), 4 deletions(-)
 create mode 100644 scripts/socialpopicon.js

diff --git a/index.html b/index.html
index bd337ffd..aafd9b1a 100644
--- a/index.html
+++ b/index.html
@@ -78,7 +78,7 @@
     </div>
   </div>
   </div>
-
+<!-- Side Social Icons - commented out for new popup design 
   <div class="side-icons">
     <div class="icon-content">
       <a href="https://github.com/sanjay-kv" target="_blank" aria-label="GitHub" data-social="github">
@@ -113,6 +113,8 @@
     </div>
   </div>
 
+  -->
+
 
 
 
@@ -310,6 +312,41 @@ <h5>We focus on quality content for the right people at the right time. What we
 
   </footer>
 
+
+<!-- Toggle Button for Social Icons -->
+<div id="socialToggleBtn" class="social-toggle">
+  <i class="fas fa-share-alt"></i>
+</div>
+
+<!-- Social Icons Popup -->
+<div id="socialPopup" class="social-popup">
+  <div class="icon-content">
+    <a href="https://github.com/sanjay-kv" target="_blank" aria-label="GitHub">
+      <i class="fab fa-github"></i>
+    </a>
+  </div>
+  <div class="icon-content">
+    <a href="https://stream.recodehive.com/github" target="_blank" aria-label="YouTube">
+      <i class="fab fa-youtube"></i>
+    </a>
+  </div>
+  <div class="icon-content">
+    <a href="https://twitter.com/sanjay_kv_" target="_blank" aria-label="Twitter">
+      <i class="fa-brands fa-x-twitter"></i>
+    </a>
+  </div>
+  <div class="icon-content">
+    <a href="https://www.linkedin.com/in/sanjay-k-v/" target="_blank" aria-label="LinkedIn">
+      <i class="fab fa-linkedin-in"></i>
+    </a>
+  </div>
+  <div class="icon-content">
+    <a href="https://www.facebook.com/sanjay.k.viswanathan/" target="_blank" aria-label="Facebook">
+      <i class="fab fa-facebook-f"></i>
+    </a>
+  </div>
+</div>
+
   <!-- Scroll to top -->
   <button id="scrollToTop" aria-label="Scroll to top">
     <svg viewBox="0 0 384 512" xmlns="http://www.w3.org/2000/svg" class="arrow-icon">
@@ -349,6 +386,7 @@ <h2>Join the Recode Hive Community</h2>
   <script src="scripts/hamburger.js"></script>
   <script src="scripts/revealelementsonscroll.js"></script>
   <script src="scripts/speechRecognition.js"></script>
+  <script src="scripts/socialpopicon.js"></script>
   <!-- Added script for new Twitter logo -->
   <script src="https://kit.fontawesome.com/856f4a44d7.js" crossorigin="anonymous"></script>
 </body>
diff --git a/scripts/socialpopicon.js b/scripts/socialpopicon.js
new file mode 100644
index 00000000..ec540ea1
--- /dev/null
+++ b/scripts/socialpopicon.js
@@ -0,0 +1,25 @@
+  const socialToggleBtn = document.getElementById('socialToggleBtn');
+  const socialPopup = document.getElementById('socialPopup');
+
+  // Show toggle button on scroll
+  window.addEventListener('scroll', () => {
+    if (window.scrollY > 200) {
+      document.body.classList.add('scrolled');
+    } else {
+      document.body.classList.remove('scrolled');
+      socialPopup.classList.remove('show');
+    }
+  });
+
+  // Toggle popup
+  socialToggleBtn.addEventListener('click', (e) => {
+    e.stopPropagation(); // prevent closing when clicking button
+    socialPopup.classList.toggle('show');
+  });
+
+  // Close popup if clicked outside
+  document.addEventListener('click', (e) => {
+    if (!socialPopup.contains(e.target) && !socialToggleBtn.contains(e.target)) {
+      socialPopup.classList.remove('show');
+    }
+  });
diff --git a/styles/styles.css b/styles/styles.css
index 2ef02a94..dab64ed9 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -1217,13 +1217,15 @@ body.theme-dark .center {
 body.dark-mode .side-icons a {
   color: white !important;
 }
-
 @media (max-width: 768px) {
   .side-icons {
     width: 50px;
     height: auto;
     padding: 10px 0;
     gap: 15px;
+    display: flex;          /* ensure flex layout */
+    flex-direction: column; /* stack icons vertically */
+    align-items: center;    /* center icons horizontally */
   }
 
   .icons {
@@ -1242,6 +1244,9 @@ body.dark-mode .side-icons a {
     height: auto;
     padding: 30px 0;
     gap: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
   }
 
   .icons {
@@ -1254,7 +1259,7 @@ body.dark-mode .side-icons a {
   }
 
   .footer-description {
-    max-width: 600;
+    max-width: 600px;    /* added missing px */
     text-align: center;
     margin: 0 auto;
   }
@@ -1640,4 +1645,147 @@ body.dark-mode a {
 body.dark-mode a:hover {
   color: #ccc;
   /* Slightly lighter on hover */
-}
\ No newline at end of file
+}
+
+/* POP UP SOCIAL MEDIA BUTTONS  */
+/* Social Toggle Button */
+.social-toggle {
+  position: fixed;
+  bottom: 80px; 
+  right: 20px;
+  height: 20px;
+  width: 20px;
+  background-color: #000000;
+  color: white;
+  padding: 12px;
+  border-radius: 50%;
+  cursor: pointer;
+  z-index: 9999;
+  display: none;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+}
+
+
+.social-toggle i {
+  font-size: 18px;
+}
+
+body.dark-mode .social-toggle {
+  background-color: #ffffff;
+  color: #000000;
+}
+
+
+/* Social Popup */
+.social-popup {
+  display: none;
+  position: fixed;
+  bottom: 140px;
+  right: 20px;
+  background: transparent;  
+  padding: 0;
+  border-radius: 12px;
+  box-shadow: none;
+  z-index: 9999;
+  flex-direction: column;    
+  gap: 10px;
+  align-items: flex-end;
+}
+
+.social-popup.show {
+  display: flex;
+}
+
+/* Icon container - circle */
+.social-popup .icon-content {
+  width: 42px;
+  height: 42px;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: transform 0.3s ease;
+  overflow: hidden; 
+}
+
+/* Icon styling */
+.social-popup .icon-content i {
+  font-size: 18px;
+  color: #fff;
+}
+
+/* Hover effect */
+.social-popup .icon-content:hover {
+  transform: scale(1.15);
+}
+
+/* Platform-specific colors */
+.social-popup .icon-content a[aria-label="GitHub"] {
+  background-color: #333;
+  border-radius: 50%;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.social-popup .icon-content a[aria-label="GitHub"]:hover {
+  background-color: #444;
+}
+
+.social-popup .icon-content a[aria-label="YouTube"] {
+  background-color: #FF0000;
+  border-radius: 50%;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.social-popup .icon-content a[aria-label="YouTube"]:hover {
+  background-color: #cc0000;
+}
+
+.social-popup .icon-content a[aria-label="Twitter"] {
+  background-color: #000000;
+  border-radius: 50%;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.social-popup .icon-content a[aria-label="Twitter"]:hover {
+  background-color: #1a1a1a;
+}
+
+.social-popup .icon-content a[aria-label="LinkedIn"] {
+  background-color: #0077B5;
+  border-radius: 50%;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.social-popup .icon-content a[aria-label="LinkedIn"]:hover {
+  background-color: #005f91;
+}
+
+.social-popup .icon-content a[aria-label="Facebook"] {
+  background-color: #1877F2;
+  border-radius: 50%;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.social-popup .icon-content a[aria-label="Facebook"]:hover {
+  background-color: #145dbf;
+}
+
+/* Show toggle only when scrolled */
+body.scrolled .social-toggle {
+  display: block;
+}

From 22ff3c5ee89927e0af60b367b26bf643944fb4d8 Mon Sep 17 00:00:00 2001
From: Khushalsarode <khushalsarode.in@gmail.com>
Date: Wed, 8 Oct 2025 21:51:56 +0530
Subject: [PATCH 2/2] updated contribution.md for fix done

---
 CONTRIBUTING.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 6cb3f49d..78c282a7 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -56,6 +56,7 @@ Awesome-github-profiles/
 │   ├── profileModal.js       # Profile modal functionality
 │   ├── retriveprofile.js     # Profile retrieval script
 │   ├── revealelementsonscroll.js # Reveal elements on scroll
+|   ├── socialpopicon.js        #Reveal social pop icons on scroll 
 │   └── speechRecognition.js   # Speech recognition functionality
 ├── styles/                   # CSS styles
 │   ├── blog.css              # Blog styles