feat(footer): replace icon with "made", add typing hover sound, update org link

CONTRIBUTORS.md

@@ -852,5 +852,18 @@
   </a>
 </td>
 <!-- End of column-3 -->
+<!-- Start of column-4 -->
+<td align="center">
+  <a href="https://github.com/Blessy27-CSBS">
+    <img
+      src="https://avatars.githubusercontent.com/Blessy27-CSBS?s=400&v=4"
+      width="100px"
+      alt="Blessy27-CSBS"
+    />
+    <br />
+    <sub>Blessy27-CSBS</sub>
+  </a>
+</td>
+<!-- End of column-4 -->
   </tr>
 </table>

package.json

@@ -45,6 +45,7 @@
     ]
   },
   "devDependencies": {
-    "sass": "^1.68.0"
+    "sass": "^1.68.0",
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11"
   }
 }

src/Components/Footer/Footer.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import heartBeat from "./heart-beat.wav";
 import typingSound from "./typing-sound.wav";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -8,46 +8,87 @@ import styles from "./Footer.module.css";
 
 const Footer = () => {
   const [isMobile, setIsMobile] = useState(window.innerWidth < 640);
-  const heartAudio = new Audio(heartBeat);
-  const typingAudio = new Audio(typingSound);
+  const heartAudioRef = useRef(null);
+  const typingAudioRef = useRef(null);
+
   useEffect(() => {
+    // create audio objects once
+    heartAudioRef.current = new Audio(heartBeat);
+    typingAudioRef.current = new Audio(typingSound);
+    // make typing audio loop while hovered/focused and set comfortable volume
+    typingAudioRef.current.loop = true;
+    typingAudioRef.current.volume = 0.5;
+
     function handleSize() {
       setIsMobile(window.innerWidth < 640);
     }
     window.addEventListener("resize", handleSize);
 
     return () => {
       window.removeEventListener("resize", handleSize);
+      // cleanup audio
+      if (heartAudioRef.current) {
+        heartAudioRef.current.pause();
+        heartAudioRef.current = null;
+      }
+      if (typingAudioRef.current) {
+        typingAudioRef.current.pause();
+        typingAudioRef.current = null;
+      }
     };
   }, []);
 
   const playHeartbeat = () => {
-    heartAudio.play();
+    try {
+      if (heartAudioRef.current) {
+        heartAudioRef.current.currentTime = 0;
+        heartAudioRef.current.volume = 0.9;
+        void heartAudioRef.current.play();
+      }
+    } catch (e) {
+      // ignore play errors
+    }
   };
   const stopHeartbeat = () => {
-    if (heartAudio) {
-      heartAudio.pause();
-    }
+    try {
+      if (heartAudioRef.current) {
+        heartAudioRef.current.pause();
+        heartAudioRef.current.currentTime = 0;
+      }
+    } catch (e) {}
   };
+
   const playTypingSound = () => {
-    typingAudio.play();
+    try {
+      if (typingAudioRef.current) {
+        typingAudioRef.current.currentTime = 0;
+        void typingAudioRef.current.play();
+      }
+    } catch (e) {}
   };
   const stopTypingSound = () => {
-    if (typingAudio) {
-      typingAudio.pause();
-    }
+    try {
+      if (typingAudioRef.current) {
+        typingAudioRef.current.pause();
+        typingAudioRef.current.currentTime = 0;
+      }
+    } catch (e) {}
   };
+
   return (
     <footer className={styles["footer"]}>
       <p className={styles["footer-message"]}>
         <span
+          className={styles.codeIcon}
+          role="img"
+          aria-label="Made"
+          tabIndex={0}
           onMouseEnter={playTypingSound}
           onMouseLeave={stopTypingSound}
+          onFocus={playTypingSound}
+          onBlur={stopTypingSound}
         >
-          <FontAwesomeIcon
-            icon={faCode}
-            style={{ color: "#feea3a" }}
-          />
+          Made
         </span>{" "}
         with{" "}
         <span
@@ -56,6 +97,9 @@ const Footer = () => {
           aria-label="heart"
           onMouseEnter={playHeartbeat}
           onMouseLeave={stopHeartbeat}
+          onFocus={playHeartbeat}
+          onBlur={stopHeartbeat}
+          tabIndex={0}
         >
           💙
         </span>{" "}
@@ -64,8 +108,10 @@ const Footer = () => {
         <a
           className={styles["footer-message-link"]}
           href="https://github.com/BeforeIDieCode"
+          target="_blank"
+          rel="noopener noreferrer"
         >
-          Before I Die Community
+          Before I Die (GitHub org)
         </a>
       </p>
     </footer>

src/Components/Footer/Footer.module.css

@@ -17,6 +17,26 @@
     color: #fff
 }
 
+.codeIcon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: #feea3a; /* code icon color */
+  font-size: 18px;
+  font-weight: 600;
+  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
+  letter-spacing: 0.5px;
+  padding: 2px 6px;
+  border-radius: 4px;
+  cursor: pointer;
+  outline: none;
+}
+
+.codeIcon:focus {
+  box-shadow: 0 0 0 3px rgba(254, 234, 58, 0.25);
+  border-radius: 4px;
+}
+
 .emoji {
   display: inline-block;
   font-size: 24px;
@@ -44,3 +64,7 @@
 .emoji:hover {
   animation: heartbeat 1.5s infinite; /* Apply the heartbeat animation on hover */
 }
+
+.codeIcon:hover {
+  transform: translateY(-2px);
+}

src/Jsons/Contributors.json

@@ -629,4 +629,14 @@
     "GitHub": "https://github.com/Luwa-Tech",
     "text": "I want to contribute massively to my nation. For my friends, family, and future generations. I want to acheive my dreams."
   }
+  ,
+  {
+    "id": "Blessy27-CSBS",
+    "image": "img/bid_image/Blessy27_CSBS.jpg",
+    "avatar": "img/avatar/Blessy27_CSBS.jpg",
+    "name": "Blessy27-CSBS",
+    "location": "",
+    "GitHub": "https://github.com/Blessy27-CSBS",
+    "text": "Contributing my work and growing as an open source developer."
+  }
 ]