diff --git a/app/globals.css b/app/globals.css index 8d6baea..a99bb2d 100644 --- a/app/globals.css +++ b/app/globals.css @@ -9,15 +9,15 @@ @layer base { body { - @apply bg-primary text-white antialiased; + @apply bg-primary-dark text-white antialiased; } } @layer components { .scroll-reveal { opacity: 0; - transform: translateY(30px); - transition: opacity 0.6s ease-out, transform 0.6s ease-out; + transform: translateY(40px); + transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); } .scroll-reveal.visible { @@ -28,41 +28,82 @@ .stagger-1 { transition-delay: 0.1s; } .stagger-2 { transition-delay: 0.2s; } .stagger-3 { transition-delay: 0.3s; } + + .glass-card { + @apply bg-card/60 backdrop-blur-sm border border-primary/30 rounded-2xl; + box-shadow: + 0 8px 32px rgba(0, 136, 255, 0.1), + 0 2px 8px rgba(0, 0, 0, 0.2), + inset 0 1px 0 rgba(255, 255, 255, 0.05); + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); + } + + .glass-card:hover { + @apply border-primary/60; + box-shadow: + 0 12px 48px rgba(0, 136, 255, 0.2), + 0 4px 16px rgba(0, 0, 0, 0.3), + inset 0 1px 0 rgba(255, 255, 255, 0.08); + transform: translateY(-4px); + } + + .subtle-gradient { + background: linear-gradient(135deg, rgba(0, 136, 255, 0.05) 0%, rgba(102, 0, 255, 0.03) 50%, rgba(0, 221, 255, 0.05) 100%); + } } @layer utilities { .text-muted { color: #8899bb; } + + .text-balance { + text-wrap: balance; + } } /* Glitch animation keyframes */ @keyframes glitch-anim-1 { - 0%, 100% { clip-path: inset(40% 0 61% 0); transform: translate(-2px, 2px); } - 20% { clip-path: inset(92% 0 1% 0); transform: translate(2px, -2px); } - 40% { clip-path: inset(43% 0 1% 0); transform: translate(-1px, 1px); } - 60% { clip-path: inset(25% 0 58% 0); transform: translate(1px, -1px); } - 80% { clip-path: inset(54% 0 7% 0); transform: translate(0px, 0px); } + 0%, 100% { clip-path: inset(40% 0 61% 0); transform: translate(-3px, 3px); } + 15% { clip-path: inset(92% 0 1% 0); transform: translate(3px, -3px); } + 30% { clip-path: inset(40% 0 40% 0); transform: translate(-2px, 2px); } + 45% { clip-path: inset(20% 0 60% 0); transform: translate(2px, -2px); } + 60% { clip-path: inset(60% 0 20% 0); transform: translate(-1px, 1px); } + 75% { clip-path: inset(10% 0 80% 0); transform: translate(1px, -1px); } + 90% { clip-path: inset(80% 0 10% 0); transform: translate(0, 0); } } @keyframes glitch-anim-2 { - 0%, 100% { clip-path: inset(65% 0 36% 0); transform: translate(2px, -2px); } - 20% { clip-path: inset(79% 0 14% 0); transform: translate(-2px, 2px); } - 40% { clip-path: inset(51% 0 68% 0); transform: translate(1px, -1px); } - 60% { clip-path: inset(87% 0 13% 0); transform: translate(-1px, 1px); } - 80% { clip-path: inset(32% 0 67% 0); transform: translate(0px, 0px); } + 0%, 100% { clip-path: inset(65% 0 36% 0); transform: translate(3px, -3px); } + 15% { clip-path: inset(10% 0 80% 0); transform: translate(-3px, 3px); } + 30% { clip-path: inset(60% 0 20% 0); transform: translate(2px, -2px); } + 45% { clip-path: inset(25% 0 55% 0); transform: translate(-2px, 2px); } + 60% { clip-path: inset(75% 0 15% 0); transform: translate(1px, -1px); } + 75% { clip-path: inset(35% 0 65% 0); transform: translate(-1px, 1px); } + 90% { clip-path: inset(50% 0 30% 0); transform: translate(0, 0); } } /* Pulse glow animation */ @keyframes pulse-glow { - 0%, 100% { box-shadow: 0 0 5px rgba(0, 136, 255, 0.5); } - 50% { box-shadow: 0 0 15px rgba(0, 136, 255, 0.8); } + 0%, 100% { box-shadow: 0 0 8px rgba(0, 136, 255, 0.4), 0 0 16px rgba(0, 136, 255, 0.2); } + 50% { box-shadow: 0 0 12px rgba(0, 136, 255, 0.7), 0 0 24px rgba(0, 136, 255, 0.4); } +} + +/* Bounce slow animation */ +@keyframes bonce-slow { + 0%, 100% { transform: translateY(0); } + 50% { transform: translateY(-10px); } +} + +.animate-bonce-slow { + animation: bonce-slow 2s ease-in-out infinite; } /* Glitch base class */ .glitch { position: relative; color: white; + line-height: 1.1; } .glitch::before, @@ -73,6 +114,7 @@ left: 0; width: 100%; height: 100%; + pointer-events: none; } .glitch::before { @@ -83,6 +125,7 @@ animation-timing-function: linear; animation-direction: alternate-reverse; z-index: -1; + mix-blend-mode: screen; } .glitch::after { @@ -93,6 +136,7 @@ animation-timing-function: linear; animation-direction: alternate-reverse; z-index: -2; + mix-blend-mode: screen; } /* Reduced motion */ @@ -100,6 +144,7 @@ .glitch::before, .glitch::after { animation: none; + opacity: 0.7; } .scroll-reveal { @@ -111,4 +156,8 @@ .animate-pulse-glow { animation: none; } + + * { + scroll-behavior: auto !important; + } } diff --git a/app/page.tsx b/app/page.tsx index 19aedbb..04b0123 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -5,6 +5,7 @@ import Hero from '@/components/Hero' import About from '@/components/About' import Contact from '@/components/Contact' +import Footer from '@/components/Footer' export default function Home() { useEffect(() => { @@ -37,9 +38,7 @@ -
-

© {new Date().getFullYear()} GeekBrain.io. All rights reserved.

-
+