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.
This commit is contained in:
parent
8034209b9c
commit
97061f2353
4 changed files with 14 additions and 57 deletions
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
11
app/page.tsx
11
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>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue