Fixing social media icon pop up and component overlapping in mobile view. (#1443)

* fixing an social media icons popup on scroll to avoid overlapping of components in mobile view & style

* updated contribution.md for fix done

Author: Khushalsarode

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

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>

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');
+    }
+  });

styles/styles.css

@@ -1272,13 +1272,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 {
@@ -1297,6 +1299,9 @@ body.dark-mode .side-icons a {
     height: auto;
     padding: 30px 0;
     gap: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
   }
 
   .icons {
@@ -1309,7 +1314,7 @@ body.dark-mode .side-icons a {
   }
 
   .footer-description {
-    max-width: 600;
+    max-width: 600px;    /* added missing px */
     text-align: center;
     margin: 0 auto;
   }
@@ -1695,4 +1700,147 @@ body.dark-mode a {
 body.dark-mode a:hover {
   color: #ccc;
   /* Slightly lighter on hover */
-}
+}
+
+/* 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;
+}