From 0f5bba66a8699e6fe0a2af328d6ec84dc2242fae Mon Sep 17 00:00:00 2001
From: Damjan Savic <info@damjan-savic.com>
Date: Sun, 25 Jan 2026 06:29:41 +0100
Subject: [PATCH] auto-claude: subtask-1-1 - Move iconMap outside component and
 memoize event h

- Import useCallback from 'react'
- Add memoized handleHoverStart and handleHoverEnd handlers
- Update event handlers to use memoized versions
- iconMap already at module level outside component

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 src/components/sections/Skills.tsx | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/sections/Skills.tsx b/src/components/sections/Skills.tsx
index c7a0f23..61adc14 100644
--- a/src/components/sections/Skills.tsx
+++ b/src/components/sections/Skills.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { useTranslations } from 'next-intl';
 import { motion, AnimatePresence } from 'framer-motion';
 import { Database, Server, Code2, Bot, Workflow, FileCode2 } from 'lucide-react';
@@ -28,6 +28,14 @@ const Skills = () => {
   const [selectedSkill, setSelectedSkill] = useState<string | null>(null);
   const [skills, setSkills] = useState<Skill[]>([]);
 
+  const handleHoverStart = useCallback((skillName: string) => {
+    setSelectedSkill(skillName);
+  }, []);
+
+  const handleHoverEnd = useCallback(() => {
+    setSelectedSkill(null);
+  }, []);
+
   useEffect(() => {
     try {
       const translatedSkills = t.raw('skills') as Skill[];
@@ -108,8 +116,8 @@ const Skills = () => {
                     }`}
                     whileHover={{ scale: 1.05 }}
                     whileTap={{ scale: 0.98 }}
-                    onHoverStart={() => setSelectedSkill(skill.name)}
-                    onHoverEnd={() => setSelectedSkill(null)}
+                    onHoverStart={() => handleHoverStart(skill.name)}
+                    onHoverEnd={handleHoverEnd}
                     role="button"
                   >
                     <motion.div