karlm/portfolio
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Enhance Section and Card components with new styling; add polka background pattern and update glass effect for improved visual appeal.

Browse source
This commit is contained in:
Mike Karl 2025-10-28 17:11:21 +01:00
parent 47b07d99c1
commit 32ba396695
3 changed files with 20 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/components/card.tsx
View file

@ -14,7 +14,7 @@ export default function Card({
const variantClasses = { const variantClasses = {
default: "bg-gradient-to-br bg-gradient-to-br from-stone-800 via-stone-900 to-stone-800 border border-stone-700", default: "bg-gradient-to-br bg-gradient-to-br from-stone-800 via-stone-900 to-stone-800 border border-stone-700",
glass: "bg-gradient-to-br bg-gradient-to-br from-white/5 via-white/10 to-white/5 border border-white/10 backdrop-blur-md", glass: "bg-gradient-to-br bg-gradient-to-br from-white/5 via-white/10 to-white/5 border border-white/10 backdrop-blur-sm",
outlined: "bg-transparent border-2 border-stone-700/50" outlined: "bg-transparent border-2 border-stone-700/50"
}; };

6
app/components/section.tsx
View file

@ -19,17 +19,13 @@ export default function Section({
const variantClasses = { const variantClasses = {
default: "bg-stone-900", default: "bg-stone-900",
hero: "bg-gradient-to-br from-stone-950 via-stone-900 to-stone-950", hero: "polka lg:pt-40",
minimal: "bg-transparent" minimal: "bg-transparent"
}; };
return ( return (
<section <section
className={`${baseClasses} ${variantClasses[variant]} ${className}`} className={`${baseClasses} ${variantClasses[variant]} ${className}`}
style={{
transform: 'translateZ(0)',
willChange: 'transform'
}}
> >
<div className="container mx-auto px-4 sm:px-6 lg:px-8"> <div className="container mx-auto px-4 sm:px-6 lg:px-8">
{(title || subtitle) && ( {(title || subtitle) && (

18
app/globals.css
View file

@ -13,3 +13,21 @@ body {
min-height: 100vh; min-height: 100vh;
font-family: "Space Grotesk", sans-serif; font-family: "Space Grotesk", sans-serif;
} }
.polka{
background-image: radial-gradient(#0c0a09 20%, #292524 22%);
background-size: 80px 80px;
animation-name: background_keyframes;
animation-duration: 8s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes background_keyframes {
0%{
background-position: 0px 0px;
}
100%{
background-position: 160px 80px;
}
}