feat(skill): added hover effect

g-k-shuvo · Jun 12, 2024 · f34062c · f34062c
1 parent e441899
commit f34062c
Show file tree

Hide file tree

Showing 6 changed files with 111 additions and 10 deletions.
diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -5,7 +5,6 @@ export default function Document() {
     <Html lang='en'>
       <Head>
         <meta charSet='utf-8' />
-        <meta name='viewport' content='width=device-width, initial-scale=1' />
         <meta title="Golam Kibria's Personal Website" />
         <meta
           name='description'

diff --git a/src/components/Skill.tsx b/src/components/Skill.tsx
@@ -1,22 +1,52 @@
-"use client";
+import React, { useEffect, useRef } from "react";
 import { SkillProps } from "@/src/types/types";
-import React from "react";
 
 const Skill: React.FC<SkillProps> = ({ skillData }) => {
+  const skillsContainerRef = useRef(null);
+
+  useEffect(() => {
+    const handleMouseMove = (e: MouseEvent) => {
+      if (!skillsContainerRef.current) return;
+
+      const skills = (
+        skillsContainerRef.current as HTMLElement
+      ).querySelectorAll(".skill") as NodeListOf<HTMLElement>;
+      for (const skill of skills) {
+        const rect = skill.getBoundingClientRect(),
+          x = e.clientX - rect.left,
+          y = e.clientY - rect.top;
+
+        skill.style.setProperty("--mouse-x", `${x}px`);
+        skill.style.setProperty("--mouse-y", `${y}px`);
+      }
+    };
+
+    const container = skillsContainerRef.current as unknown as HTMLElement;
+    if (container) {
+      container.addEventListener("mousemove", handleMouseMove);
+    }
+
+    return () => {
+      container && container.removeEventListener("mousemove", handleMouseMove);
+    };
+  }, []);
+
   return (
     <div className='w-9/10 mx-auto lg:w-[1024px]' id='skills'>
       <h3 className='text-lg md:text-xl font-bold text-left mt-12'>
         Stuffs I Know
       </h3>
 
-      <div className='w-[90%] mx-auto text-center py-[60px] md:py-[90px] lg:py-[140px]'>
+      <div
+        ref={skillsContainerRef}
+        className='skills w-[90%] mx-auto text-center py-[60px] md:py-[90px] lg:py-[140px]'
+      >
         {skillData.map((skill, index) => (
-          <span
-            className='py-2 px-4 text-sm sm:py-3 sm:px-6 sm:text-base bg-secondaryColor inline-block m-2 cursor-pointer'
-            key={index}
-          >
-            {skill.name}
-          </span>
+          <div className='skill' key={index}>
+            <div className='skill-content text-sm  sm:text-base'>
+              {skill.name}
+            </div>
+          </div>
         ))}
       </div>
     </div>

diff --git a/styles/globals.css b/styles/globals.css
@@ -3,11 +3,13 @@
 @tailwind utilities;
 
 @import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap");
+@import url("./utils.css");
 
 :root {
   --background-color: #ffffff;
   --foreground-color: #000000;
   --secondary-color: #e1e1e1;
+  --foreground-color-rgb: 0, 0, 0;
   --text-fira-code: "Fira Code", monospace;
   --text-space-mono: "Space Mono", monospace;
 }
@@ -16,6 +18,7 @@
   --background-color: #000000;
   --foreground-color: #ffffff;
   --secondary-color: #1e1e1e;
+  --foreground-color-rgb: 255, 255, 255;
 }
 
 body {

diff --git a/styles/utils.css b/styles/utils.css
@@ -0,0 +1,67 @@
+.skills {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 10px;
+}
+
+.skill {
+  background-color: rgba(var(--foreground-color-rgb), 0.1);
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 200px;
+  height: 60px;
+  cursor: pointer;
+}
+
+.skills:hover > .skill::after {
+  opacity: 1;
+}
+
+.skill:hover::before {
+  opacity: 1;
+}
+
+.skill::before,
+.skill::after {
+  border-radius: inherit;
+  content: "";
+  height: 100%;
+  left: 0px;
+  opacity: 0;
+  position: absolute;
+  top: 0px;
+  transition: opacity 500ms;
+  width: 100%;
+}
+
+.skill::before {
+  background: radial-gradient(
+    500px circle at var(--mouse-x) var(--mouse-y),
+    rgba(var(--foreground-color-rgb), 0.06),
+    /* Adjusted for opacity */ transparent 50%
+  );
+  z-index: 3;
+}
+
+.skill::after {
+  background: radial-gradient(
+    250px circle at var(--mouse-x) var(--mouse-y),
+    rgba(var(--foreground-color-rgb), 0.4),
+    /* Adjusted for opacity */ transparent 50%
+  );
+  z-index: 1;
+}
+
+.skill > .skill-content {
+  background-color: var(--secondary-color);
+  inset: 1px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  position: absolute;
+  z-index: 2;
+}
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -10,6 +10,7 @@ const config: Config = {
     extend: {
       colors: {
         secondaryColor: "var(--secondary-color)",
+        foregroundColor: "var(--foreground-color)",
       },
       spacing: {
         "1/10": "10%",

diff --git a/tsconfig.json b/tsconfig.json
@@ -9,6 +9,7 @@
     "module": "esnext",
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
+    "downlevelIteration": true,
     "isolatedModules": true,
     "jsx": "preserve",
     "incremental": true,