From 914980b453e5e115c84b22fcca403335e6fa9bc3 Mon Sep 17 00:00:00 2001
From: RBN-Apps <80348653+RBN-Apps@users.noreply.github.com>
Date: Fri, 11 Jul 2025 13:55:55 +0200
Subject: [PATCH] add hover effects to CV and email chip

---
 index.html                                    |  15 +-
 src/components/portfolio/cv.tsx               | 134 ++++++++++--------
 .../portfolio/github-integration.tsx          |  11 +-
 src/components/portfolio/personal-info.tsx    |  22 ++-
 src/components/portfolio/skills.tsx           |  10 +-
 src/components/ui/hover-effect.tsx            |  84 +++++++++++
 6 files changed, 205 insertions(+), 71 deletions(-)
 create mode 100644 src/components/ui/hover-effect.tsx

diff --git a/index.html b/index.html
index ceec2637..ece7c427 100644
--- a/index.html
+++ b/index.html
@@ -4,8 +4,19 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/assets/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="preload" href="/portfolio.json" as="fetch" type="application/json" crossorigin="anonymous" />
-    <link rel="preload" href="/assets/favicon.svg" as="image" crossorigin="anonymous" />
+    <link
+      rel="preload"
+      href="/portfolio.json"
+      as="fetch"
+      type="application/json"
+      crossorigin="anonymous"
+    />
+    <link
+      rel="preload"
+      href="/assets/favicon.svg"
+      as="image"
+      crossorigin="anonymous"
+    />
     <title>Developer Portfolio</title>
     <meta content="Developer Portfolio" property="og:title" />
     <meta
diff --git a/src/components/portfolio/cv.tsx b/src/components/portfolio/cv.tsx
index 379308e1..5951caf0 100644
--- a/src/components/portfolio/cv.tsx
+++ b/src/components/portfolio/cv.tsx
@@ -3,6 +3,11 @@ import { Chip } from "@heroui/chip";
 
 import { usePortfolioData } from "@/hooks/usePortfolioData";
 import { Education, Experience } from "@/types";
+import {
+  HoverEffect,
+  getHoverEffectClasses,
+  getTextHoverEffectClasses,
+} from "@/components/ui/hover-effect";
 
 interface CVProps {
   refreshTrigger?: number;
@@ -60,11 +65,13 @@ export function CV({ refreshTrigger }: CVProps) {
             {isLeft ? (
               <>
                 <div className="w-1/2 pr-8">
-                  <Card className="shadow-lg hover:shadow-xl transition-shadow duration-300">
+                  <Card className={`shadow-lg ${getHoverEffectClasses()}`}>
                     <CardBody className="p-6">
                       <div className="space-y-3">
                         <div className="flex flex-col gap-2">
-                          <h3 className="text-lg font-semibold text-foreground">
+                          <h3
+                            className={`text-lg font-semibold text-foreground ${getTextHoverEffectClasses()}`}
+                          >
                             {item.type === "experience"
                               ? item.position
                               : item.degree}
@@ -89,15 +96,16 @@ export function CV({ refreshTrigger }: CVProps) {
                             <div className="flex flex-wrap gap-1 mt-3">
                               {item.technologies.map(
                                 (tech: string, techIndex: number) => (
-                                  <Chip
-                                    key={techIndex}
-                                    className="text-xs"
-                                    color="secondary"
-                                    size="sm"
-                                    variant="bordered"
-                                  >
-                                    {tech}
-                                  </Chip>
+                                  <HoverEffect key={techIndex}>
+                                    <Chip
+                                      className="text-xs"
+                                      color="secondary"
+                                      size="sm"
+                                      variant="bordered"
+                                    >
+                                      {tech}
+                                    </Chip>
+                                  </HoverEffect>
                                 ),
                               )}
                             </div>
@@ -107,34 +115,40 @@ export function CV({ refreshTrigger }: CVProps) {
                   </Card>
                 </div>
                 <div className="w-1/2 pl-8 flex justify-start items-start pt-4">
-                  <Chip
-                    className="font-medium"
-                    color="primary"
-                    size="md"
-                    variant="flat"
-                  >
-                    {item.duration}
-                  </Chip>
+                  <HoverEffect inheritChildStyle>
+                    <Chip
+                      className="font-medium"
+                      color="primary"
+                      size="md"
+                      variant="flat"
+                    >
+                      {item.duration}
+                    </Chip>
+                  </HoverEffect>
                 </div>
               </>
             ) : (
               <>
                 <div className="w-1/2 pr-8 flex justify-end items-start pt-4">
-                  <Chip
-                    className="font-medium"
-                    color="primary"
-                    size="md"
-                    variant="flat"
-                  >
-                    {item.duration}
-                  </Chip>
+                  <HoverEffect inheritChildStyle>
+                    <Chip
+                      className="font-medium"
+                      color="primary"
+                      size="md"
+                      variant="flat"
+                    >
+                      {item.duration}
+                    </Chip>
+                  </HoverEffect>
                 </div>
                 <div className="w-1/2 pl-8">
-                  <Card className="shadow-lg hover:shadow-xl transition-shadow duration-300">
+                  <Card className={`shadow-lg ${getHoverEffectClasses()}`}>
                     <CardBody className="p-6">
                       <div className="space-y-3">
                         <div className="flex flex-col gap-2">
-                          <h3 className="text-lg font-semibold text-foreground">
+                          <h3
+                            className={`text-lg font-semibold text-foreground ${getTextHoverEffectClasses()}`}
+                          >
                             {item.type === "experience"
                               ? item.position
                               : item.degree}
@@ -159,15 +173,16 @@ export function CV({ refreshTrigger }: CVProps) {
                             <div className="flex flex-wrap gap-1 mt-3">
                               {item.technologies.map(
                                 (tech: string, techIndex: number) => (
-                                  <Chip
-                                    key={techIndex}
-                                    className="text-xs"
-                                    color="secondary"
-                                    size="sm"
-                                    variant="bordered"
-                                  >
-                                    {tech}
-                                  </Chip>
+                                  <HoverEffect key={techIndex}>
+                                    <Chip
+                                      className="text-xs"
+                                      color="secondary"
+                                      size="sm"
+                                      variant="bordered"
+                                    >
+                                      {tech}
+                                    </Chip>
+                                  </HoverEffect>
                                 ),
                               )}
                             </div>
@@ -193,21 +208,25 @@ export function CV({ refreshTrigger }: CVProps) {
           {/* Content */}
           <div className="flex-1">
             <div className="mb-3">
-              <Chip
-                className="font-medium mb-3"
-                color="primary"
-                size="sm"
-                variant="flat"
-              >
-                {item.duration}
-              </Chip>
+              <HoverEffect inheritChildStyle>
+                <Chip
+                  className="font-medium mb-3"
+                  color="primary"
+                  size="sm"
+                  variant="flat"
+                >
+                  {item.duration}
+                </Chip>
+              </HoverEffect>
             </div>
 
-            <Card className="shadow-lg">
+            <Card className={`shadow-lg ${getHoverEffectClasses()}`}>
               <CardBody className="p-4">
                 <div className="space-y-3">
                   <div className="flex flex-col gap-2">
-                    <h3 className="text-lg font-semibold text-foreground">
+                    <h3
+                      className={`text-lg font-semibold text-foreground ${getTextHoverEffectClasses()}`}
+                    >
                       {item.type === "experience" ? item.position : item.degree}
                     </h3>
                     <h4 className="text-md font-medium text-primary">
@@ -228,15 +247,16 @@ export function CV({ refreshTrigger }: CVProps) {
                       <div className="flex flex-wrap gap-1 mt-3">
                         {item.technologies.map(
                           (tech: string, techIndex: number) => (
-                            <Chip
-                              key={techIndex}
-                              className="text-xs"
-                              color="secondary"
-                              size="sm"
-                              variant="bordered"
-                            >
-                              {tech}
-                            </Chip>
+                            <HoverEffect key={techIndex}>
+                              <Chip
+                                className="text-xs"
+                                color="secondary"
+                                size="sm"
+                                variant="bordered"
+                              >
+                                {tech}
+                              </Chip>
+                            </HoverEffect>
                           ),
                         )}
                       </div>
diff --git a/src/components/portfolio/github-integration.tsx b/src/components/portfolio/github-integration.tsx
index 050ee69d..dea12c3b 100644
--- a/src/components/portfolio/github-integration.tsx
+++ b/src/components/portfolio/github-integration.tsx
@@ -14,6 +14,10 @@ import { Button } from "@heroui/button";
 import { GithubIcon } from "@/components/icons";
 import { usePortfolioData } from "@/hooks/usePortfolioData";
 import { getLanguageColor } from "@/lib/language-colors";
+import {
+  getHoverEffectClasses,
+  getTextHoverEffectClasses,
+} from "@/components/ui/hover-effect";
 
 const REPO_PER_PAGE = 4;
 
@@ -222,10 +226,9 @@ export function GithubIntegration({ refreshTrigger }: GithubIntegrationProps) {
               <Card
                 key={repo.id}
                 isExternal
-                isHoverable
                 isPressable
                 as={Link}
-                className="group transition-all duration-300 hover:scale-[1.02] hover:shadow-lg border border-default-200/50 hover:border-primary/30 repo-card-enter"
+                className={`${getHoverEffectClasses()} border border-default-200/50 repo-card-enter`}
                 href={repo.html_url}
                 style={{
                   animationDelay: `${index * 100}ms`,
@@ -234,7 +237,9 @@ export function GithubIntegration({ refreshTrigger }: GithubIntegrationProps) {
                 <CardBody className="p-4">
                   <div className="flex items-start justify-between mb-3">
                     <div className="flex-1">
-                      <h3 className="font-semibold text-lg text-foreground group-hover:text-primary transition-colors duration-200">
+                      <h3
+                        className={`font-semibold text-lg text-foreground ${getTextHoverEffectClasses()}`}
+                      >
                         {repo.name}
                       </h3>
                       <p className="text-sm text-default-700 mt-1 line-clamp-2">
diff --git a/src/components/portfolio/personal-info.tsx b/src/components/portfolio/personal-info.tsx
index 536e8b70..e9fc3674 100644
--- a/src/components/portfolio/personal-info.tsx
+++ b/src/components/portfolio/personal-info.tsx
@@ -7,6 +7,7 @@ import { Tooltip } from "@heroui/tooltip";
 
 import favicon from "../../../assets/favicon.svg";
 
+import { HoverEffect } from "@/components/ui/hover-effect";
 import {
   DiscordIcon,
   GithubIcon,
@@ -66,12 +67,20 @@ export function PersonalInfo({ refreshTrigger }: PersonalInfoProps) {
             <h1 className="text-2xl font-bold">{portfolioData.name}</h1>
             <p className="text-default-500">{portfolioData.title}</p>
             <div className="flex gap-2 mt-2">
-              <Chip color="primary" size="sm">
-                {portfolioData.location}
-              </Chip>
-              <Chip color="secondary" size="sm">
-                {portfolioData.email}
-              </Chip>
+              <HoverEffect inheritChildStyle>
+                <Chip color="primary" size="sm">
+                  {portfolioData.location}
+                </Chip>
+              </HoverEffect>
+              <HoverEffect
+                inheritChildStyle
+                href={`mailto:${portfolioData.email}`}
+                isClickable={true}
+              >
+                <Chip color="secondary" size="sm">
+                  {portfolioData.email}
+                </Chip>
+              </HoverEffect>
             </div>
           </div>
         </div>
@@ -80,7 +89,6 @@ export function PersonalInfo({ refreshTrigger }: PersonalInfoProps) {
             closeDelay={125}
             color="warning"
             content="This user is a contributor to the WA-DP GitHub project"
-            showArrow={true}
           >
             <Button
               className="text-xs font-bold text-yellow-600 dark:text-yellow-500"
diff --git a/src/components/portfolio/skills.tsx b/src/components/portfolio/skills.tsx
index f850c38b..0c204e1c 100644
--- a/src/components/portfolio/skills.tsx
+++ b/src/components/portfolio/skills.tsx
@@ -4,6 +4,10 @@ import { Chip } from "@heroui/chip";
 
 import { usePortfolioData } from "@/hooks/usePortfolioData";
 import { SkillsIcon } from "@/components/icons.tsx";
+import {
+  getHoverEffectClasses,
+  getTextHoverEffectClasses,
+} from "@/components/ui/hover-effect";
 
 interface SkillsProps {
   refreshTrigger?: number;
@@ -46,7 +50,7 @@ function SkillCard({ skill, index }: SkillCardProps) {
   return (
     <Card
       isHoverable
-      className="group transition-all duration-300 hover:scale-[1.02] hover:shadow-lg border border-default-200/50 hover:border-primary/30"
+      className={`${getHoverEffectClasses()} border border-default-200/50`}
     >
       <CardBody className="p-4">
         <div className="flex items-center justify-between mb-3">
@@ -57,7 +61,9 @@ function SkillCard({ skill, index }: SkillCardProps) {
                 backgroundColor: getSkillColor(index),
               }}
             />
-            <h3 className="font-semibold text-lg text-foreground group-hover:text-primary transition-colors duration-200">
+            <h3
+              className={`font-semibold text-lg text-foreground ${getTextHoverEffectClasses()}`}
+            >
               {skill.name}
             </h3>
           </div>
diff --git a/src/components/ui/hover-effect.tsx b/src/components/ui/hover-effect.tsx
new file mode 100644
index 00000000..03efd5cc
--- /dev/null
+++ b/src/components/ui/hover-effect.tsx
@@ -0,0 +1,84 @@
+import { ReactNode, forwardRef, HTMLAttributes } from "react";
+
+interface HoverEffectProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactNode;
+  href?: string;
+  onClick?: () => void;
+  isClickable?: boolean;
+  hoverScale?: number;
+  className?: string;
+  inheritChildStyle?: boolean;
+}
+
+export const HoverEffect = forwardRef<HTMLDivElement, HoverEffectProps>(
+  (
+    {
+      children,
+      href,
+      onClick,
+      isClickable = false,
+      hoverScale = 1.02,
+      className = "",
+      inheritChildStyle = false,
+      ...props
+    },
+    ref,
+  ) => {
+    const scaleClass =
+      hoverScale === 1.05 ? "hover:scale-105" : "hover:scale-[1.02]";
+    const hoverClasses = `group transition-all duration-300 ${scaleClass} hover:shadow-lg hover:border-primary/30 ${
+      isClickable || href || onClick ? "cursor-pointer" : ""
+    }`;
+
+    const handleClick = () => {
+      if (href) {
+        window.open(href, "_self");
+      } else if (onClick) {
+        onClick();
+      }
+    };
+
+    const handleKeyDown = (event: React.KeyboardEvent) => {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        handleClick();
+      }
+    };
+
+    const isInteractive = isClickable || href || onClick;
+
+    // For chips and other rounded elements, we need to inherit the border radius
+    const wrapperClasses = `${hoverClasses} ${className} ${inheritChildStyle ? "rounded-full" : ""}`;
+
+    return (
+      <div
+        ref={ref}
+        className={wrapperClasses}
+        role={isInteractive ? "button" : undefined}
+        tabIndex={isInteractive ? 0 : undefined}
+        onClick={isInteractive ? handleClick : undefined}
+        onKeyDown={isInteractive ? handleKeyDown : undefined}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  },
+);
+
+HoverEffect.displayName = "HoverEffect";
+
+// Utility function to get hover effect classes
+export const getHoverEffectClasses = (hoverScale: number = 1.02) => {
+  // Use predefined Tailwind scale classes to avoid CSS template literal issues
+  const scaleClass =
+    hoverScale === 1.05 ? "hover:scale-105" : "hover:scale-[1.02]";
+  return `group transition-all duration-300 ${scaleClass} hover:shadow-lg hover:border-primary/30`;
+};
+
+// Utility function to get text hover effect classes
+export const getTextHoverEffectClasses = (
+  hoverTextColor: string = "primary",
+) => {
+  return `group-hover:text-${hoverTextColor} transition-colors duration-200`;
+};