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

---
 src/components/about/Skills.tsx | 22 ++++++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/components/about/Skills.tsx b/src/components/about/Skills.tsx
index 6d5154d..db703a4 100644
--- a/src/components/about/Skills.tsx
+++ b/src/components/about/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 } from 'framer-motion';
 import { Database, Server, Store, Code2, Box } from 'lucide-react';
@@ -15,6 +15,7 @@ interface SkillGroup {
   items: SkillItem[];
 }
 
+// Move iconMap outside component for better performance
 const iconMap: Record<string, React.ReactNode> = {
   'Python': <Code2 className="w-8 h-8" />,
   'Server': <Server className="w-8 h-8" />,
@@ -32,6 +33,19 @@ const Skills = () => {
   const [selectedSkill, setSelectedSkill] = useState<string | null>(null);
   const [allSkills, setAllSkills] = useState<SkillItem[]>([]);
 
+  // Memoized event handlers
+  const handleHoverStart = useCallback((skillName: string) => {
+    setSelectedSkill(skillName);
+  }, []);
+
+  const handleHoverEnd = useCallback(() => {
+    setSelectedSkill(null);
+  }, []);
+
+  const handleClick = useCallback((skillName: string) => {
+    setSelectedSkill(prev => prev === skillName ? null : skillName);
+  }, []);
+
   useEffect(() => {
     try {
       const skillGroups = t.raw('skillGroups') as SkillGroup[];
@@ -58,8 +72,8 @@ const Skills = () => {
             className="space-y-2"
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
-            onHoverStart={() => setSelectedSkill(skill.name)}
-            onHoverEnd={() => setSelectedSkill(null)}
+            onHoverStart={() => handleHoverStart(skill.name)}
+            onHoverEnd={handleHoverEnd}
           >
             <div className="flex justify-between items-center">
               <div className="flex flex-col">
@@ -106,7 +120,7 @@ const Skills = () => {
               selectedSkill === skill.name ? 'ring-2 ring-zinc-500' : ''
             }`}
             whileHover={{ scale: 1.05 }}
-            onClick={() => setSelectedSkill(skill.name === selectedSkill ? null : skill.name)}
+            onClick={() => handleClick(skill.name)}
             role="button"
             aria-pressed={selectedSkill === skill.name}
           >