From b23c0b48fbb860ccea1fadf16d28a51b57c65391 Mon Sep 17 00:00:00 2001
From: Mike Karl <karl.mike2002@gmail.com>
Date: Tue, 21 Oct 2025 10:22:00 +0200
Subject: [PATCH] Enhance Card component with new background image and styling
 options; update Home page to utilize these features for improved visual
 appeal across sections.

---
 app/components/card.tsx | 39 ++++++++++++++++++++++++--
 app/page.tsx            | 62 +++++++++++++++++++++++++++++++++++------
 2 files changed, 91 insertions(+), 10 deletions(-)

diff --git a/app/components/card.tsx b/app/components/card.tsx
index ab57a04..2fa425b 100644
--- a/app/components/card.tsx
+++ b/app/components/card.tsx
@@ -6,6 +6,10 @@ interface CardProps {
     variant?: 'default' | 'elevated' | '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({
@@ -13,9 +17,13 @@ export default function Card({
     className = '',
     variant = 'default',
     hover = true,
-    style
+    style,
+    bgImageUrl,
+    bgOpacity = 0.25,
+    bgDim = 0.35,
+    bg
 }: CardProps) {
-    const baseClasses = "rounded-xl transition-all duration-300 ease-out";
+    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",
@@ -37,6 +45,33 @@ export default function Card({
                 ...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 }
+                            ),
+                            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%)'
+                        }}
+                    />
+                    {/* Dimming overlay to preserve contrast over the image area only */}
+                    <div
+                        aria-hidden
+                        className="pointer-events-none absolute inset-0"
+                        style={{
+                            background: 'rgba(0,0,0,' + bgDim + ')',
+                            clipPath: 'polygon(55% 0, 100% 0, 100% 100%, 20% 100%)'
+                        }}
+                    />
+                </>
+            )}
             {children}
         </div>
     );
diff --git a/app/page.tsx b/app/page.tsx
index ad253d3..b1113f4 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -6,7 +6,12 @@ export default function Home() {
       {/* Hero Section */}
       <Section variant="hero" title="Mike Karl" subtitle="Fullstack Developer / Web Developer / System Developer">
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-          <Card variant="glass" className="float">
+          <Card
+            variant="glass"
+            className="float"
+            bg={"linear-gradient(135deg, transparent 0%, transparent 55%, rgba(59,130,246,0.15) 70%, rgba(147,51,234,0.18) 100%)"}
+            bgDim={0.25}
+          >
             <CardHeader>
               <h3 className="text-xl font-semibold text-white mb-2">About Me</h3>
             </CardHeader>
@@ -21,7 +26,14 @@ export default function Home() {
             </CardFooter>
           </Card>
 
-          <Card variant="elevated" className="float" style={{ animationDelay: '1s' }}>
+          <Card
+            variant="elevated"
+            className="float"
+            style={{ animationDelay: '1s' }}
+            bgImageUrl={"https://images.unsplash.com/photo-1518709268805-4e9042af2176?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80"}
+            bgOpacity={0.22}
+            bgDim={0.35}
+          >
             <CardHeader>
               <h3 className="text-xl font-semibold text-white mb-2">Current Focus</h3>
             </CardHeader>
@@ -38,7 +50,13 @@ export default function Home() {
             </CardContent>
           </Card>
 
-          <Card variant="outlined" className="float" style={{ animationDelay: '2s' }}>
+          <Card
+            variant="outlined"
+            className="float"
+            style={{ animationDelay: '2s' }}
+            bg={"linear-gradient(135deg, transparent 0%, transparent 60%, rgba(255,255,255,0.06) 80%, rgba(59,130,246,0.12) 100%)"}
+            bgDim={0.15}
+          >
             <CardHeader>
               <h3 className="text-xl font-semibold text-white mb-2">Quick Stats</h3>
             </CardHeader>
@@ -65,7 +83,12 @@ export default function Home() {
       {/* Education Section */}
       <Section title="Education" subtitle="My academic journey and professional development">
         <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-          <Card variant="default">
+          <Card
+            variant="default"
+            bgImageUrl={"https://images.unsplash.com/photo-1523050854058-8df90110c9f1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80"}
+            bgOpacity={0.18}
+            bgDim={0.4}
+          >
             <CardHeader>
               <h3 className="text-lg font-semibold text-white">Gymnasium Zwiesel</h3>
               <p className="text-gray-400 text-sm">High School Education</p>
@@ -77,7 +100,12 @@ export default function Home() {
             </CardContent>
           </Card>
 
-          <Card variant="default">
+          <Card
+            variant="default"
+            bgImageUrl={"https://images.unsplash.com/photo-1562774053-701939374585?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80"}
+            bgOpacity={0.2}
+            bgDim={0.35}
+          >
             <CardHeader>
               <h3 className="text-lg font-semibold text-white">University of Passau</h3>
               <p className="text-gray-400 text-sm">Higher Education</p>
@@ -154,7 +182,13 @@ export default function Home() {
       {/* Portfolio Section */}
       <Section title="Featured Projects" subtitle="Some of my notable work and contributions">
         <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-          <Card variant="glass" className="hover:neon-glow">
+          <Card
+            variant="glass"
+            className="hover:neon-glow"
+            bgImageUrl={"https://images.unsplash.com/photo-1635070041078-e363dbe005cb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80"}
+            bgOpacity={0.25}
+            bgDim={0.3}
+          >
             <CardHeader>
               <h3 className="text-lg font-semibold text-white">Raytracing in a Weekend</h3>
               <p className="text-gray-400 text-sm">Graphics Programming</p>
@@ -196,7 +230,13 @@ export default function Home() {
             </CardFooter>
           </Card>
 
-          <Card variant="glass" className="hover:neon-glow">
+          <Card
+            variant="glass"
+            className="hover:neon-glow"
+            bgImageUrl={"https://images.unsplash.com/photo-1518709268805-4e9042af2176?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80"}
+            bgOpacity={0.2}
+            bgDim={0.4}
+          >
             <CardHeader>
               <h3 className="text-lg font-semibold text-white">6502 Emulator</h3>
               <p className="text-gray-400 text-sm">System Programming</p>
@@ -217,7 +257,13 @@ export default function Home() {
             </CardFooter>
           </Card>
 
-          <Card variant="glass" className="hover:neon-glow">
+          <Card
+            variant="glass"
+            className="hover:neon-glow"
+            bgImageUrl={"https://images.unsplash.com/photo-1555066931-4365d14bab8c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80"}
+            bgOpacity={0.22}
+            bgDim={0.35}
+          >
             <CardHeader>
               <h3 className="text-lg font-semibold text-white">Brainfuck RS</h3>
               <p className="text-gray-400 text-sm">Language Implementation</p>