From 97061f2353c19bd132a4f05ca1a6c5a7e82099df Mon Sep 17 00:00:00 2001
From: Mike Karl <karl.mike2002@gmail.com>
Date: Thu, 23 Oct 2025 21:52:16 +0200
Subject: [PATCH] Refactor Card component to simplify props and enhance
 styling; update Home page cards to use new variants for improved consistency;
 remove deprecated scrollbar styles from global CSS.

---
 app/components/button.tsx |  2 +-
 app/components/card.tsx   | 40 ++++++---------------------------------
 app/globals.css           | 18 ------------------
 app/page.tsx              | 11 +++++++----
 4 files changed, 14 insertions(+), 57 deletions(-)

diff --git a/app/components/button.tsx b/app/components/button.tsx
index dc9ecfa..4e166bd 100644
--- a/app/components/button.tsx
+++ b/app/components/button.tsx
@@ -14,7 +14,7 @@ export default function Button({
     className = '',
     ...props
 }: ButtonProps) {
-    const baseClasses = "inline-flex items-center justify-center 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";
+    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";
 
     const sizeClasses = {
         sm: "px-3 py-1.5 text-sm",
diff --git a/app/components/card.tsx b/app/components/card.tsx
index 2512965..8b3a060 100644
--- a/app/components/card.tsx
+++ b/app/components/card.tsx
@@ -3,31 +3,22 @@ import { ReactNode } from 'react';
 interface CardProps {
     children: ReactNode;
     className?: string;
-    variant?: 'default' | 'elevated' | 'glass' | 'outlined';
+    variant?: 'default' | 'glass' | 'outlined';
     hover?: boolean;
     style?: React.CSSProperties;
-    bgImageUrl?: string; // optional background image shown on right with a diagonal mask
-    bgOpacity?: number; // 0..1 opacity for the image
-    bgDim?: number; // 0..1 black overlay intensity over the image
-    bg?: string; // optional generic CSS background (e.g., linear-gradient)
 }
 
 export default function Card({
     children,
     className = '',
     variant = 'default',
-    hover = true,
-    style,
-    bgImageUrl,
-    bgOpacity = 0.15,
-    bgDim = 0.35,
-    bg
+    hover = false,
+    style
 }: CardProps) {
     const baseClasses = "relative overflow-hidden rounded-xl transition-all duration-300 ease-out";
 
     const variantClasses = {
         default: "bg-gray-900/50 border border-gray-800/50 backdrop-blur-sm",
-        elevated: "bg-gray-900/60 border border-gray-700/50 backdrop-blur-sm shadow-2xl",
         glass: "bg-white/5 border border-white/10 backdrop-blur-md",
         outlined: "bg-transparent border-2 border-gray-700/50"
     };
@@ -40,29 +31,10 @@ export default function Card({
         <div
             className={`${baseClasses} ${variantClasses[variant]} ${hoverClasses} ${className}`}
             style={{
-                transform: 'translateZ(0)',
                 willChange: 'transform',
                 ...style
             }}
         >
-            {(bg || bgImageUrl) && (
-                <>
-                    {/* Image layer clipped with diagonal mask, only right side visible */}
-                    <div
-                        aria-hidden
-                        className="pointer-events-none absolute inset-0"
-                        style={{
-                            ...(bg
-                                ? { background: bg }
-                                : { backgroundImage: `url(${bgImageUrl})`, backgroundSize: 'cover', backgroundPosition: 'center', opacity: bgOpacity, filter: `brightness(${bgDim})`,zIndex: -1 }
-                            ),
-                            opacity: bg ? 1 : bgOpacity,
-                            // Diagonal mask: from ~20% at bottom to ~55% at top to create a rising diagonal
-                            clipPath: 'polygon(55% 0, 100% 0, 100% 100%, 20% 100%)'
-                        }}
-                    />
-                </>
-            )}
             {children}
         </div>
     );
@@ -75,7 +47,7 @@ interface CardHeaderProps {
 
 export function CardHeader({ children, className = '' }: CardHeaderProps) {
     return (
-        <div className={`p-6 pb-4 ${className}`}>
+        <div className={`p-6 pb-0 ${className}`}>
             {children}
         </div>
     );
@@ -88,7 +60,7 @@ interface CardContentProps {
 
 export function CardContent({ children, className = '' }: CardContentProps) {
     return (
-        <div className={`p-6 pt-0 ${className}`}>
+        <div className={`p-6 pb-4 ${className}`}>
             {children}
         </div>
     );
@@ -101,7 +73,7 @@ interface CardFooterProps {
 
 export function CardFooter({ children, className = '' }: CardFooterProps) {
     return (
-        <div className={`p-6 pt-4 ${className}`}>
+        <div className={`p-6 pt-8 ${className}`}>
             {children}
         </div>
     );
diff --git a/app/globals.css b/app/globals.css
index 9d51cd7..2f520d8 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -49,24 +49,6 @@ body::before {
   z-index: -1;
 }
 
-/* Enhanced scrollbar */
-::-webkit-scrollbar {
-  width: 8px;
-}
-
-::-webkit-scrollbar-track {
-  background: #111111;
-}
-
-::-webkit-scrollbar-thumb {
-  background: #333333;
-  border-radius: 4px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: #555555;
-}
-
 /* 3D Effects */
 .glass-effect {
   backdrop-filter: blur(16px);
diff --git a/app/page.tsx b/app/page.tsx
index 017eb0a..5186a0e 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -9,6 +9,7 @@ export default function Home() {
           <Card
             variant="glass"
             className="float"
+            hover
           >
             <CardHeader>
               <h3 className="text-xl font-semibold text-white mb-2">Über mich</h3>
@@ -21,8 +22,9 @@ export default function Home() {
           </Card>
 
           <Card
-            variant="elevated"
+            variant="default"
             className="float"
+            hover
             style={{ animationDelay: '1s' }}
           >
             <CardHeader>
@@ -37,6 +39,7 @@ export default function Home() {
           <Card
             variant="outlined"
             className="float"
+            hover
             style={{ animationDelay: '2s' }}
           >
             <CardHeader>
@@ -86,7 +89,7 @@ export default function Home() {
       {/* Skills Section */}
       <Section variant="feature" title="Erfahrung" subtitle="Technisches Wissen und Skills">
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-          <Card variant="elevated">
+          <Card variant="outlined">
             <CardHeader>
               <h3 className="text-lg font-semibold text-white mb-3">Anwendungsentwicklung</h3>
             </CardHeader>
@@ -105,7 +108,7 @@ export default function Home() {
             </CardContent>
           </Card>
 
-          <Card variant="elevated">
+          <Card variant="outlined">
             <CardHeader>
               <h3 className="text-lg font-semibold text-white mb-3">Sytemintegration</h3>
             </CardHeader>
@@ -123,7 +126,7 @@ export default function Home() {
             </CardContent>
           </Card>
 
-          <Card variant="elevated">
+          <Card variant="outlined">
             <CardHeader>
               <h3 className="text-lg font-semibold text-white mb-3">Soft Skills</h3>
             </CardHeader>