Show neon logo when hovering over neon link

kosserin · Feb 5, 2025 · e419841 · e419841
1 parent 8dd23cb
commit e419841
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 10 deletions.
diff --git a/src/assets/neon-logo.svg b/src/assets/neon-logo.svg
diff --git a/src/components/About/About.jsx b/src/components/About/About.jsx
@@ -1,7 +1,8 @@
-import React from "react";
+import React, { useState } from "react";
 import SectionTitle from "../SectionTitle/SectionTitle";
 import { TECHNOLOGIES } from "../../constants/technologies";
 import styled from "styled-components";
+import neonLogo from "../../assets/neon-logo.svg";
 
 const StyledSection = styled.section`
   padding-top: var(--spacing-7);
@@ -17,6 +18,20 @@ const StyledSection = styled.section`
     color: var(--light);
     line-height: 1.8;
   }
+
+  .relative {
+    position: relative;
+  }
+
+  .neon-cursor {
+    cursor: none;
+  }
+
+  .neon-logo {
+    position: fixed;
+    width: 36px;
+    height: 36px;
+  }
 `;
 
 const Technologies = styled.div`
@@ -38,6 +53,13 @@ const Technologies = styled.div`
 `;
 
 const About = () => {
+  const [cursorPos, setCursorPos] = useState({ x: 0, y: 0 });
+  const [isHovering, setIsHovering] = useState(false);
+
+  const handleMouseMove = (e) => {
+    setCursorPos({ x: e.clientX, y: e.clientY });
+  };
+
   return (
     <StyledSection id="about">
       <SectionTitle name={"About"} />
@@ -50,14 +72,32 @@ const About = () => {
 
       <p className="style-body">
         Currently, I'm an Angular Developer at{" "}
-        <a
-          href="https://www.neon-free.ch/en/"
-          target="_blank"
-          rel="noreferrer"
-          className="style-body__link color-white"
-        >
-          Neon
-        </a>
+        <span className="relative">
+          <a
+            href="https://www.neon-free.ch/en/"
+            target="_blank"
+            rel="noreferrer"
+            className="style-body__link color-white relative neon-cursor"
+            onMouseEnter={() => setIsHovering(true)}
+            onMouseLeave={() => setIsHovering(false)}
+            onMouseMove={handleMouseMove}
+          >
+            Neon
+          </a>
+
+          {isHovering && (
+            <img
+              src={neonLogo}
+              alt="Neon logo"
+              className="neon-logo"
+              style={{
+                top: cursorPos.y + 24,
+                left: cursorPos.x,
+                transform: "translate(-50%, -50%)",
+              }}
+            />
+          )}
+        </span>
         , a Swiss fintech startup, where I work on a hybrid application serving
         over 200,000 users. With a professional background in Angular and Ionic
         development I became proficient in crafting high-end scalable,

diff --git a/src/theme/globalStyles.js b/src/theme/globalStyles.js
@@ -8,6 +8,7 @@ const GlobalStyle = createGlobalStyle`
   --purple-bg: #150B21;
   --chip-bg: #3d2b53;
   --chip-txt: #B988F4;
+  --neon-red: #FA285A;
 
   // spacings
   --base: 8px;
@@ -95,7 +96,7 @@ body {
 
     &:hover {
         transition: 250ms ease-in;
-        color: var(--chip-txt);
+        color: var(--neon-red);
     }
 }