From ba482b5e7a1dc1f7ed3453a51f9de894ceab81bf Mon Sep 17 00:00:00 2001
From: joachimhummel <47454583-joachimhummel@users.noreply.replit.com>
Date: Fri, 15 May 2026 15:42:39 +0000
Subject: [PATCH] Improve UI interactivity and remove unused code

Refactor Competencies component to use inline styles for icon colors on hover, remove unused useEffect import from Navbar, and remove deprecated color fields from Projects data.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 6f3329ae-2dcc-46cc-bf2e-f58b7a5fa805
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: b8777d1d-dc61-483e-b8ec-2f66ace1694b
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/e678fe28-87ab-4437-945b-7a15e872a292/6f3329ae-2dcc-46cc-bf2e-f58b7a5fa805/IiY74sQ
Replit-Helium-Checkpoint-Created: true
---
 artifacts/joachim-portfolio/src/components/competencies.tsx | 6 ++----
 artifacts/joachim-portfolio/src/components/navbar.tsx       | 2 +-
 artifacts/joachim-portfolio/src/components/projects.tsx     | 5 -----
 3 files changed, 3 insertions(+), 10 deletions(-)

diff --git a/artifacts/joachim-portfolio/src/components/competencies.tsx b/artifacts/joachim-portfolio/src/components/competencies.tsx
index 98b90f7..f2138a5 100644
--- a/artifacts/joachim-portfolio/src/components/competencies.tsx
+++ b/artifacts/joachim-portfolio/src/components/competencies.tsx
@@ -94,10 +94,8 @@ export function Competencies() {
           {techIcons.map(({ Icon, label, color }) => (
             <div key={label} className="flex flex-col items-center gap-1.5 group" title={label}>
               <Icon
-                className="w-8 h-8 text-muted-foreground/40 group-hover:text-current transition-all duration-200"
-                style={{ "--tw-text-opacity": 1 } as React.CSSProperties}
-                onMouseEnter={(e) => { (e.currentTarget as SVGElement).style.color = color; }}
-                onMouseLeave={(e) => { (e.currentTarget as SVGElement).style.color = ""; }}
+                className="w-8 h-8 opacity-30 group-hover:opacity-100 transition-all duration-200"
+                style={{ color }}
               />
               <span className="text-xs text-muted-foreground/60 group-hover:text-muted-foreground transition-colors">{label}</span>
             </div>
diff --git a/artifacts/joachim-portfolio/src/components/navbar.tsx b/artifacts/joachim-portfolio/src/components/navbar.tsx
index 9fc74f9..f64465b 100644
--- a/artifacts/joachim-portfolio/src/components/navbar.tsx
+++ b/artifacts/joachim-portfolio/src/components/navbar.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState } from "react";
 import { motion, useScroll, useMotionValueEvent } from "framer-motion";
 import { Menu, X } from "lucide-react";
 
diff --git a/artifacts/joachim-portfolio/src/components/projects.tsx b/artifacts/joachim-portfolio/src/components/projects.tsx
index 78b67d9..3a1c27b 100644
--- a/artifacts/joachim-portfolio/src/components/projects.tsx
+++ b/artifacts/joachim-portfolio/src/components/projects.tsx
@@ -4,7 +4,6 @@ import { ArrowUpRight, Lock, Mail, Zap, Database, BarChart2, Server } from "luci
 const projects = [
   {
     icon: Lock,
-    color: "from-blue-500 to-indigo-600",
     iconBg: "bg-blue-100 text-blue-600",
     title: "SafeDocs Portal",
     desc: "Sichere Upload-Plattform mit AES-256-GCM-Verschlüsselung, JWT-Auth, Passwort-Reset per E-Mail, Rate Limiting und Docker-Deployment.",
@@ -14,7 +13,6 @@ const projects = [
   },
   {
     icon: Mail,
-    color: "from-violet-500 to-purple-600",
     iconBg: "bg-violet-100 text-violet-600",
     title: "zensend.email",
     desc: "Newsletter & E-Mail-Marketing SaaS mit Double-Opt-In, DSGVO-Konformität, SPF/DKIM/DMARC, Zahlungsmodellen und Onboarding-Prozessen.",
@@ -24,7 +22,6 @@ const projects = [
   },
   {
     icon: Zap,
-    color: "from-amber-500 to-orange-500",
     iconBg: "bg-amber-100 text-amber-600",
     title: "KI-Automation mit n8n",
     desc: "Automatisierte Bildgenerierung, Lead-Prozesse, KI-gestützte Bildprüfung und API/Webhook-Workflows für echte Geschäftsprozesse.",
@@ -33,7 +30,6 @@ const projects = [
   },
   {
     icon: Database,
-    color: "from-emerald-500 to-teal-500",
     iconBg: "bg-emerald-100 text-emerald-600",
     title: "Eigene KI- & RAG-Systeme",
     desc: "PDF-Verarbeitung, Vektorisierung eigener Dokumente, Pinecone-Integration und eigene Wissensdatenbanken für KI-gestützte Recherche.",
@@ -42,7 +38,6 @@ const projects = [
   },
   {
     icon: BarChart2,
-    color: "from-orange-500 to-red-500",
     iconBg: "bg-orange-100 text-orange-600",
     title: "On-Premise Monitoring",
     desc: "Vollständige Monitoring-Stacks mit Grafana, Prometheus, Loki und Alloy auf Docker-Basis — transparent, nachvollziehbar, betreibbar.",