From 0beb20635fda082b88f3ee606ed245b63cdffdc8 Mon Sep 17 00:00:00 2001
From: Mike Karl <karl.mike2002@gmail.com>
Date: Tue, 28 Oct 2025 15:23:18 +0100
Subject: [PATCH] Refactor Card component to use 'hoverable' prop instead of
 'hover'; simplify class handling in Badge, Button, and Card components for
 cleaner code; update Home page cards for consistency and improved styling.

---
 app/components/badge.tsx  |  4 +---
 app/components/button.tsx |  6 +-----
 app/components/card.tsx   | 32 ++++++++------------------------
 app/page.tsx              | 25 +++++++++----------------
 4 files changed, 19 insertions(+), 48 deletions(-)

diff --git a/app/components/badge.tsx b/app/components/badge.tsx
index 8666769..3b241c0 100644
--- a/app/components/badge.tsx
+++ b/app/components/badge.tsx
@@ -4,14 +4,12 @@ interface BadgeProps {
     children: ReactNode;
     variant?: 'gray' | 'green' | 'yellow' | 'red' | 'blue' | 'glass';
     border?: boolean;
-    className?: string;
 }
 
 export default function Badge({
     children,
     variant = 'gray',
     border = false,
-    className = ''
 }: BadgeProps) {
     const baseClasses = "rounded-full px-2 py-0.5 text-sm";
 
@@ -26,7 +24,7 @@ export default function Badge({
 
     return (
         <span
-            className={` ${border?"border":""} ${baseClasses} ${variantClasses[variant]} ${className}`}
+            className={` ${border?"border":""} ${baseClasses} ${variantClasses[variant]}`}
         >
             {children}
         </span>
diff --git a/app/components/button.tsx b/app/components/button.tsx
index 4e166bd..a1f0cf2 100644
--- a/app/components/button.tsx
+++ b/app/components/button.tsx
@@ -4,15 +4,12 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     children: ReactNode;
     variant?: 'primary' | 'secondary' | 'ghost' | 'outline' | 'glass';
     size?: 'sm' | 'md' | 'lg';
-    className?: string;
 }
 
 export default function Button({
     children,
     variant = 'primary',
     size = 'md',
-    className = '',
-    ...props
 }: ButtonProps) {
     const baseClasses = "cursor-pointer font-medium rounded-lg transition-all duration-300 ease-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900 disabled:opacity-50 disabled:cursor-not-allowed";
 
@@ -32,8 +29,7 @@ export default function Button({
 
     return (
         <button
-            className={`${baseClasses} ${sizeClasses[size]} ${variantClasses[variant]} ${className}`}
-            {...props}
+            className={`${baseClasses} ${sizeClasses[size]} ${variantClasses[variant]}`}
         >
             {children}
         </button>
diff --git a/app/components/card.tsx b/app/components/card.tsx
index 8b3a060..d2bb0e4 100644
--- a/app/components/card.tsx
+++ b/app/components/card.tsx
@@ -2,18 +2,13 @@ import { ReactNode } from 'react';
 
 interface CardProps {
     children: ReactNode;
-    className?: string;
     variant?: 'default' | 'glass' | 'outlined';
-    hover?: boolean;
-    style?: React.CSSProperties;
+    hoverable?: boolean;
 }
 
 export default function Card({
     children,
-    className = '',
     variant = 'default',
-    hover = false,
-    style
 }: CardProps) {
     const baseClasses = "relative overflow-hidden rounded-xl transition-all duration-300 ease-out";
 
@@ -23,17 +18,9 @@ export default function Card({
         outlined: "bg-transparent border-2 border-gray-700/50"
     };
 
-    const hoverClasses = hover
-        ? "hover:scale-[1.02] hover:shadow-2xl hover:shadow-blue-500/10 hover:border-blue-500/30"
-        : "";
-
     return (
         <div
-            className={`${baseClasses} ${variantClasses[variant]} ${hoverClasses} ${className}`}
-            style={{
-                willChange: 'transform',
-                ...style
-            }}
+            className={`${baseClasses} ${variantClasses[variant]}`}
         >
             {children}
         </div>
@@ -42,12 +29,11 @@ export default function Card({
 
 interface CardHeaderProps {
     children: ReactNode;
-    className?: string;
 }
 
-export function CardHeader({ children, className = '' }: CardHeaderProps) {
+export function CardHeader({ children }: CardHeaderProps) {
     return (
-        <div className={`p-6 pb-0 ${className}`}>
+        <div className={`p-6 pb-0`}>
             {children}
         </div>
     );
@@ -55,12 +41,11 @@ export function CardHeader({ children, className = '' }: CardHeaderProps) {
 
 interface CardContentProps {
     children: ReactNode;
-    className?: string;
 }
 
-export function CardContent({ children, className = '' }: CardContentProps) {
+export function CardContent({ children }: CardContentProps) {
     return (
-        <div className={`p-6 pb-4 ${className}`}>
+        <div className={`p-6 pb-4`}>
             {children}
         </div>
     );
@@ -68,12 +53,11 @@ export function CardContent({ children, className = '' }: CardContentProps) {
 
 interface CardFooterProps {
     children: ReactNode;
-    className?: string;
 }
 
-export function CardFooter({ children, className = '' }: CardFooterProps) {
+export function CardFooter({ children }: CardFooterProps) {
     return (
-        <div className={`p-6 pt-8 ${className}`}>
+        <div className={`p-6 pt-8`}>
             {children}
         </div>
     );
diff --git a/app/page.tsx b/app/page.tsx
index 5186a0e..b95bee9 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -8,47 +8,42 @@ export default function Home() {
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
           <Card
             variant="glass"
-            className="float"
-            hover
+            hoverable
           >
             <CardHeader>
               <h3 className="text-xl font-semibold text-white mb-2">Über mich</h3>
             </CardHeader>
             <CardContent>
               <p className="text-gray-300">
-              Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut ex, labore deleniti fuga repellendus maiores rerum, voluptates dicta accusamus nihil quibusdam dolorum dolor illo et corrupti doloremque velit itaque repudiandae!
-                </p>
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut ex, labore deleniti fuga repellendus maiores rerum, voluptates dicta accusamus nihil quibusdam dolorum dolor illo et corrupti doloremque velit itaque repudiandae!
+              </p>
             </CardContent>
           </Card>
 
           <Card
             variant="default"
-            className="float"
-            hover
-            style={{ animationDelay: '1s' }}
+            hoverable
           >
             <CardHeader>
               <h3 className="text-xl font-semibold text-white mb-2">Aktuelle Beschäftigung</h3>
             </CardHeader>
             <CardContent>
               <p className="text-gray-300">
-              Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere similique iusto beatae minima ea. Explicabo voluptatem itaque unde sequi, aperiam, dicta nulla nobis maiores, debitis aliquam corrupti quam earum dolor!
-            </p></CardContent>
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere similique iusto beatae minima ea. Explicabo voluptatem itaque unde sequi, aperiam, dicta nulla nobis maiores, debitis aliquam corrupti quam earum dolor!
+              </p></CardContent>
           </Card>
 
           <Card
             variant="outlined"
-            className="float"
-            hover
-            style={{ animationDelay: '2s' }}
+            hoverable
           >
             <CardHeader>
               <h3 className="text-xl font-semibold text-white mb-2">Erfahrung</h3>
             </CardHeader>
             <CardContent>
               <p className="text-gray-300">
-              Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi distinctio neque natus quibusdam? Corrupti reprehenderit nisi repellendus facere, reiciendis, rerum, error iusto doloribus asperiores sapiente alias repellat autem? Earum, possimus?
-            </p></CardContent>
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi distinctio neque natus quibusdam? Corrupti reprehenderit nisi repellendus facere, reiciendis, rerum, error iusto doloribus asperiores sapiente alias repellat autem? Earum, possimus?
+              </p></CardContent>
           </Card>
         </div>
       </Section>
@@ -150,7 +145,6 @@ export default function Home() {
         <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
           <Card
             variant="glass"
-            className="hover:neon-glow"
           >
             <CardHeader>
               <h3 className="text-lg font-semibold text-white">Raytracing in a Weekend</h3>
@@ -173,7 +167,6 @@ export default function Home() {
 
           <Card
             variant="glass"
-            className="hover:neon-glow"
           >
             <CardHeader>
               <h3 className="text-lg font-semibold text-white">6502 Emulator</h3>