New Images and Rubber Ducky Mahem!!!

Updated images.

Added some fun stuff on the MyWork section. A div shadows the rubber ducky in the background image. Hovering over it makes a quack sound and launches emoji ducks in the air. Clicking it takes users to the site rubberduckdebugging.com.

Author: deanlongstaff

package-lock.json

@@ -18,6 +18,7 @@
     "react-icons": "^4.12.0",
     "react-microsoft-clarity": "^1.2.0",
     "react-parallax-tilt": "^1.7.179",
+    "react-rewards": "^2.0.4",
     "react-router-dom": "^6.21.1",
     "react-scripts": "^5.0.1",
     "react-scroll": "^1.9.0",

package.json

@@ -22,25 +22,25 @@ const hobbies = [
     image: skiing,
     title: "Skiing",
     description:
-      "Skiing: An Infrequent but Thrilling Adventure - When the rare opportunity arises, I hit the slopes with friends, immersing myself in the exhilarating world of skiing. It's more than just a hobby; it's a cherished passion that awakens with every snowy trail and heart-pounding descent. These moments, though few, are always cherished and unforgettable.",
+      "An Infrequent but Thrilling Adventure - When the rare opportunity arises, I hit the slopes with friends, immersing myself in the exhilarating world of skiing. It's more than just a hobby; it's a cherished passion that awakens with every snowy trail and heart-pounding descent. These moments, though few, are always cherished and unforgettable.",
   },
   {
     image: programming,
     title: "Programming",
     description:
-      "Programming: A Creative Outlet - I'm a programmer, and I love it. I'm always on the lookout for new projects and challenges, and I'm constantly learning new skills and languages. It's a creative outlet that allows me to explore new ideas and concepts, and it's a hobby that I'll never get tired of.",
+      "A Creative Outlet - I'm a programmer, and I love it. I'm always on the lookout for new projects and challenges, and I'm constantly learning new skills and languages. It's a creative outlet that allows me to explore new ideas and concepts, and it's a hobby that I'll never get tired of.",
   },
   {
     image: diy,
     title: "DIY",
     description:
-      "DIY: The Art of Creation - I'm a DIYer at heart. I love building things with my hands, and I'm always on the lookout for new projects. Whether it's a new piece of furniture, a new gadget, or building a beautiful deck and pergola as shown above. I'm always looking for a new challenge and new ways to improve my skills.",
+      "The Art of Creation - I'm a DIYer at heart. I love building things with my hands, and I'm always on the lookout for new projects. Whether it's a new piece of furniture, a new gadget, or building a beautiful deck and pergola as shown above. I'm always looking for a new challenge and new ways to improve my skills.",
   },
   {
     image: rex,
     title: "Rex",
     description:
-      "Rex, My Labrador Sidekick: Our hobbies include endless games of fetch that test both our agility and patience, daily walks that are as much about exploration as exercise, and the occasional beach escapade where the sand and waves add to our adventurous spirit. Together, we embrace the simple joys of play and the outdoors.",
+      "My Labrador Sidekick - Our hobbies include endless games of fetch that test both our agility and patience, daily walks that are as much about exploration as exercise, and the occasional beach escapade where the sand and waves add to our adventurous spirit. Together, we embrace the simple joys of play and the outdoors.",
   },
 ];
 //------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

src/assets/images/diy.jpeg

@@ -6,17 +6,18 @@
 //------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 // ----- Import the required modules
 
+import { useEffect, useRef } from "react";
 import { Container, Row, Col } from "react-bootstrap";
 import GitHubCalendar from "react-github-calendar";
-
+import { useReward } from "react-rewards";
 //------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
-// -- Import Icons/Images
+// -- Import Icons/Images/Sounds
 
 import { SiTypescript, SiJavascript, SiPython, SiReact, SiPowershell, SiAzurefunctions, SiMicrosoftazure, SiGithub, SiElectron, SiRedis, SiMicrosoftsqlserver } from "react-icons/si";
 import { FaNodeJs } from "react-icons/fa";
 import { DiGit } from "react-icons/di";
 import mojLogo from "../../assets/images/moj.jpeg";
-
+import quackSound from "../../assets/sounds/quack.mp3";
 //------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 // -- Define the skills to display
 
@@ -65,9 +66,82 @@ function GitHubSection() {
 //------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 // ----- Define the MyWork component
 
-function index() {
+function MyWork() {
+  const duckRef = useRef<HTMLDivElement>(null);
+  const sectionRef = useRef<HTMLElement>(null);
+
+  // Duck confetti reward
+  const duckConfettiConfig = {
+    emoji: ["🦆", "🐤", "🐥"],
+    elementCount: 60,
+    spread: 150,
+    zIndex: 9999,
+    lifetime: 300,
+    position: "absolute",
+  };
+
+  // Make 🦆 the dominant emoji
+  for (let i = 0; i < 25; i++) {
+    duckConfettiConfig.emoji.push("🦆");
+  }
+  const { reward: duckConfetti, isAnimating: ducksInFlight } = useReward("duckConfetti", "emoji", duckConfettiConfig);
+
+  const handleDuckMouseOver = () => {
+    if (!ducksInFlight) {
+      duckConfetti(); // Launch the ducks!
+    }
+    const audio = new Audio(quackSound);
+    audio.play().catch((error) => {
+      console.warn("Duck can't quack:", error);
+    });
+  };
+  const handleDuckClick = () => {
+    window.open("https://rubberduckdebugging.com", "_blank");
+  };
+
+  // Some overkill code to position a div overlay ontop of the rubber ducky in the background image
+  useEffect(() => {
+    const duckOriginalPosition = { x: 3114, y: 2180 }; // Coordinates of the duck in the original image
+    const backgroundOriginalSize = { width: 4032, height: 3024 }; // Size of the original image
+
+    // Calculate the position of the overlay and update it
+    const positionOverlay = () => {
+      if (!sectionRef.current || !duckRef.current) return;
+
+      const containerRect = sectionRef.current.getBoundingClientRect();
+      const containerAspectRatio = containerRect.width / containerRect.height;
+      const imageAspectRatio = backgroundOriginalSize.width / backgroundOriginalSize.height;
+
+      let scaleFactor;
+      let offsetX = 0;
+      let offsetY = 0;
+
+      if (containerAspectRatio > imageAspectRatio) {
+        scaleFactor = containerRect.width / backgroundOriginalSize.width;
+        offsetY = (containerRect.height - backgroundOriginalSize.height * scaleFactor) / 2;
+      } else {
+        scaleFactor = containerRect.height / backgroundOriginalSize.height;
+        offsetX = (containerRect.width - backgroundOriginalSize.width * scaleFactor) / 2;
+      }
+
+      const newX = duckOriginalPosition.x * scaleFactor + offsetX;
+      const newY = duckOriginalPosition.y * scaleFactor + offsetY;
+
+      duckRef.current.style.left = `${newX}px`;
+      duckRef.current.style.top = `${newY}px`;
+    };
+
+    window.addEventListener("resize", positionOverlay);
+    positionOverlay(); // Initial call
+
+    return () => {
+      window.removeEventListener("resize", positionOverlay);
+    };
+  }, []);
+
   return (
-    <section id="mywork" className="mywork-section">
+    <section id="mywork" className="mywork-section" ref={sectionRef}>
+      <div id="duckConfetti" className="interactive-duck" ref={duckRef} onMouseOver={handleDuckMouseOver} onClick={handleDuckClick}></div>
       <Container className="mywork-description">
         <h1 className="main-heading">
           My <strong className="primary-color">Work</strong>
@@ -98,4 +172,4 @@ function index() {
   );
 }
 
-export default index;
+export default MyWork;

src/assets/images/office.jpeg

@@ -1 +1,5 @@
 /// <reference types="react-scripts" />
+declare module "*.mp3" {
+  const src: string;
+  export default src;
+}

src/assets/images/rex.jpeg

@@ -13,6 +13,14 @@
   background-position: center center;
   background-repeat: no-repeat;
   background-size: cover;
+  overflow: hidden;
+}
+
+.interactive-duck {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  cursor: pointer;
 }
 
 .mywork-description {
@@ -109,4 +117,8 @@
   .mywork-mojlogo {
     margin-bottom: 10%;
   }
+
+  .interactive-duck {
+    visibility: hidden; /* Hide duck element on tablets/phones */
+  }
 }