feat: Implement initial cinematic portfolio UI with animated components and page structure.
This commit is contained in:
Evandro Fonseca Junior committed
1 parent
9d779390e5
commit
2ede7e98f9
18 files changed
+2107
-147
No files matched your search
+212
@@ -480,4 +480,216 @@ textarea {
|
||||
}
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════
|
||||
CINEMATIC STYLES - Awwwards Level
|
||||
═══════════════════════════════════════════ */
|
||||
|
||||
/* Cinematic text gradient - hero heading */
|
||||
.cinematic-text-gradient {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
#ffffff 0%,
|
||||
#ffffff 25%,
|
||||
#ccff00 50%,
|
||||
#ffffff 75%,
|
||||
#a7a7a7 100%
|
||||
);
|
||||
background-size: 300% 300%;
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
animation: textGradientShift 8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes textGradientShift {
|
||||
0%,
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Glassmorphism cards */
|
||||
.cinematic-glass {
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
background: rgba(10, 10, 10, 0.4);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
.cinematic-glass:hover {
|
||||
border-color: rgba(204, 255, 0, 0.15);
|
||||
background: rgba(10, 10, 10, 0.5);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3),
|
||||
inset 0 0 0 1px rgba(204, 255, 0, 0.05);
|
||||
}
|
||||
|
||||
/* Primary CTA - cinematic glow button */
|
||||
.cinematic-cta-primary {
|
||||
position: relative;
|
||||
background: var(--slash);
|
||||
overflow: hidden;
|
||||
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
.cinematic-cta-primary::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent 0%,
|
||||
rgba(255, 255, 255, 0.4) 50%,
|
||||
transparent 100%
|
||||
);
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
.cinematic-cta-primary:hover {
|
||||
background: #ffffff;
|
||||
box-shadow:
|
||||
0 0 30px rgba(204, 255, 0, 0.4),
|
||||
0 0 60px rgba(204, 255, 0, 0.15);
|
||||
}
|
||||
|
||||
.cinematic-cta-primary:hover::before {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
/* Secondary CTA */
|
||||
.cinematic-cta-secondary {
|
||||
position: relative;
|
||||
border: 1px solid rgba(244, 242, 237, 0.2);
|
||||
background: rgba(10, 10, 10, 0.4);
|
||||
backdrop-filter: blur(10px);
|
||||
overflow: hidden;
|
||||
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
.cinematic-cta-secondary::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: -1px;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
transparent 30%,
|
||||
rgba(204, 255, 0, 0.3) 50%,
|
||||
transparent 70%
|
||||
);
|
||||
background-size: 200% 200%;
|
||||
opacity: 0;
|
||||
transition: opacity 0.4s;
|
||||
}
|
||||
|
||||
.cinematic-cta-secondary:hover {
|
||||
border-color: var(--slash);
|
||||
color: var(--slash);
|
||||
box-shadow: 0 0 20px rgba(204, 255, 0, 0.1);
|
||||
}
|
||||
|
||||
.cinematic-cta-secondary:hover::before {
|
||||
opacity: 1;
|
||||
animation: borderGlow 2s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes borderGlow {
|
||||
0% {
|
||||
background-position: 0% 0%;
|
||||
}
|
||||
100% {
|
||||
background-position: 200% 200%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Social links */
|
||||
.cinematic-social-link {
|
||||
border: 1px solid rgba(244, 242, 237, 0.12);
|
||||
background: rgba(10, 10, 10, 0.3);
|
||||
color: rgba(244, 242, 237, 0.86);
|
||||
backdrop-filter: blur(8px);
|
||||
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
.cinematic-social-link:hover {
|
||||
border-color: var(--slash);
|
||||
background: rgba(204, 255, 0, 0.08);
|
||||
color: var(--slash);
|
||||
box-shadow: 0 0 20px rgba(204, 255, 0, 0.15);
|
||||
}
|
||||
|
||||
/* Aside card */
|
||||
.cinematic-aside-card {
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(10, 10, 10, 0.6) 0%,
|
||||
rgba(10, 10, 10, 0.3) 100%
|
||||
);
|
||||
backdrop-filter: blur(24px);
|
||||
-webkit-backdrop-filter: blur(24px);
|
||||
transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
.cinematic-aside-card:hover {
|
||||
border-color: rgba(204, 255, 0, 0.12);
|
||||
box-shadow:
|
||||
0 20px 60px rgba(0, 0, 0, 0.4),
|
||||
0 0 1px rgba(204, 255, 0, 0.2);
|
||||
}
|
||||
|
||||
/* Section divider animations */
|
||||
@keyframes shimmerDivider {
|
||||
0% {
|
||||
transform: translateX(-100%);
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.8;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulseDot {
|
||||
0%,
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 0.3;
|
||||
}
|
||||
50% {
|
||||
transform: scale(2);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Cinematic card hover effect */
|
||||
.ds-card {
|
||||
transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
.ds-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 20px 40px rgba(10, 10, 10, 0.12);
|
||||
}
|
||||
|
||||
.ds-section-dark .ds-card:hover {
|
||||
box-shadow:
|
||||
0 20px 40px rgba(0, 0, 0, 0.4),
|
||||
0 0 1px rgba(204, 255, 0, 0.1);
|
||||
}
|
||||
|
||||
/* Smooth scroll overrides for cinematic feel */
|
||||
html {
|
||||
scroll-behavior: auto;
|
||||
}
|
||||
|
||||
/* Cinematic section reveal transforms */
|
||||
.cinematic-reveal {
|
||||
will-change: transform, opacity;
|
||||
}
|
||||
Reference in new issue
Block a user