mirror of
https://github.com/adam-benyekkou/my_portfolio.git
synced 2026-01-15 20:20:09 +00:00
Added optimization / patched memory leaks for several animation and Threejs component
This commit is contained in:
AdamBtech
@@ -1,551 +1,248 @@
|
||||
/* ===================== NEURAL PROFILE SECTION ANIMATIONS ===================== */
|
||||
/* ===================== NEURAL PROFILE ANIMATIONS ===================== */
|
||||
|
||||
/* Section Container Animation */
|
||||
/* Core keyframes - reused across components */
|
||||
@keyframes slideInLeft {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate3d(-30px, 0, 0);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideInRight {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate3d(30px, 0, 0);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, 30px, 0);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scaleIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
/* ===================== NEURAL SECTION ELEMENTS ===================== */
|
||||
|
||||
/* Section container - no animation */
|
||||
.neural-section {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
animation: neuralSectionMaterialize 1.2s ease-out 0.1s forwards;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@keyframes neuralSectionMaterialize {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
filter: blur(2px);
|
||||
}
|
||||
60% {
|
||||
opacity: 0.8;
|
||||
transform: translateY(-5px);
|
||||
filter: blur(0.5px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
filter: blur(0px);
|
||||
}
|
||||
}
|
||||
|
||||
/* Header Section Animation */
|
||||
/* Header - no animation */
|
||||
.neural-header {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
animation: neuralHeaderSlideDown 1s ease-out 0.3s forwards;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@keyframes neuralHeaderSlideDown {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
filter: blur(1px);
|
||||
}
|
||||
70% {
|
||||
opacity: 0.9;
|
||||
transform: translateY(3px);
|
||||
filter: blur(0.3px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
filter: blur(0px);
|
||||
}
|
||||
}
|
||||
|
||||
/* Divider Line Animation */
|
||||
/* Divider - static */
|
||||
.neural-divider {
|
||||
opacity: 0;
|
||||
transform: scaleX(0);
|
||||
transform-origin: left;
|
||||
animation: neuralDividerExpand 0.8s ease-out 0.8s forwards;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
@keyframes neuralDividerExpand {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scaleX(0);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.3;
|
||||
transform: scaleX(0.7);
|
||||
}
|
||||
100% {
|
||||
opacity: 0.5;
|
||||
transform: scaleX(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* Main Content Grid Animation */
|
||||
/* Main content grid */
|
||||
.neural-content-grid {
|
||||
opacity: 0;
|
||||
transform: translateY(40px);
|
||||
animation: neuralContentReveal 1.2s ease-out 0.5s forwards;
|
||||
opacity: 0;
|
||||
animation: slideInUp 0.8s ease-out 0.3s forwards;
|
||||
}
|
||||
|
||||
@keyframes neuralContentReveal {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(40px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Left Panel - Neural Profile Tree Animation */
|
||||
/* Left panel */
|
||||
.neural-left-panel {
|
||||
opacity: 0;
|
||||
transform: translateX(-40px) scale(0.95);
|
||||
animation: neuralLeftPanelSlideIn 1.2s ease-out 0.7s forwards;
|
||||
opacity: 0;
|
||||
animation: slideInLeft 0.8s ease-out 0.5s forwards;
|
||||
}
|
||||
|
||||
@keyframes neuralLeftPanelSlideIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(-40px) scale(0.95);
|
||||
border-color: transparent;
|
||||
background-color: rgba(41, 41, 37, 0);
|
||||
}
|
||||
40% {
|
||||
opacity: 0.6;
|
||||
transform: translateX(-10px) scale(0.98);
|
||||
border-color: var(--color-nier-border);
|
||||
}
|
||||
80% {
|
||||
opacity: 0.9;
|
||||
transform: translateX(2px) scale(1.01);
|
||||
background-color: var(--color-nier-bg);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateX(0) scale(1);
|
||||
border-color: var(--color-nier-border);
|
||||
background-color: var(--color-nier-bg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Neural Profile Tree Content */
|
||||
/* Tree content */
|
||||
.neural-tree-container {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
animation: neuralTreeContentFadeUp 0.8s ease-out 1.2s forwards;
|
||||
opacity: 0;
|
||||
animation: slideInUp 0.6s ease-out 0.8s forwards;
|
||||
}
|
||||
|
||||
@keyframes neuralTreeContentFadeUp {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Right Panel Container Animation */
|
||||
/* Right panel */
|
||||
.neural-right-panel {
|
||||
opacity: 0;
|
||||
transform: translateX(40px);
|
||||
animation: neuralRightPanelSlideIn 1s ease-out 0.9s forwards;
|
||||
opacity: 0;
|
||||
animation: slideInRight 0.8s ease-out 0.6s forwards;
|
||||
}
|
||||
|
||||
@keyframes neuralRightPanelSlideIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(40px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Video Display Panel Animation */
|
||||
/* Video panel */
|
||||
.neural-video-panel {
|
||||
opacity: 0;
|
||||
transform: scale(0.95) translateY(20px);
|
||||
animation: neuralVideoPanelMaterialize 1.2s ease-out 1.1s forwards;
|
||||
opacity: 0;
|
||||
animation: scaleIn 0.8s ease-out 0.7s forwards;
|
||||
}
|
||||
|
||||
@keyframes neuralVideoPanelMaterialize {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0.95) translateY(20px);
|
||||
border-color: transparent;
|
||||
background-color: rgba(41, 41, 37, 0);
|
||||
}
|
||||
30% {
|
||||
opacity: 0.4;
|
||||
transform: scale(0.98) translateY(10px);
|
||||
border-color: var(--color-nier-accent);
|
||||
}
|
||||
70% {
|
||||
opacity: 0.8;
|
||||
transform: scale(1.01) translateY(-2px);
|
||||
background-color: var(--color-nier-dark);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1) translateY(0);
|
||||
border-color: var(--color-nier-accent);
|
||||
background-color: var(--color-nier-dark);
|
||||
}
|
||||
}
|
||||
|
||||
/* Video Container Inner Animation */
|
||||
/* Video inner container */
|
||||
.neural-video-inner {
|
||||
opacity: 0;
|
||||
transform: scale(0.9);
|
||||
animation: neuralVideoInnerExpand 0.8s ease-out 1.5s forwards;
|
||||
opacity: 0;
|
||||
animation: scaleIn 0.6s ease-out 1.0s forwards;
|
||||
}
|
||||
|
||||
@keyframes neuralVideoInnerExpand {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0.9);
|
||||
border-color: transparent;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
60% {
|
||||
opacity: 0.7;
|
||||
transform: scale(1.02);
|
||||
border-color: rgba(255, 201, 102, 0.3);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
border-color: rgba(255, 201, 102, 0.5);
|
||||
background-color: rgba(41, 41, 37, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
/* Holo Video Component Animation */
|
||||
/* Holo video */
|
||||
.neural-holo-video {
|
||||
opacity: 0;
|
||||
animation: neuralHoloVideoFadeIn 1s ease-out 1.8s forwards;
|
||||
opacity: 0;
|
||||
animation: fadeIn 0.8s ease-out 1.2s forwards;
|
||||
}
|
||||
|
||||
@keyframes neuralHoloVideoFadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
filter: blur(2px) brightness(0.5);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.7;
|
||||
filter: blur(1px) brightness(0.8);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
filter: blur(0px) brightness(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* Status Panel Animation */
|
||||
/* Status panel */
|
||||
.neural-status-panel {
|
||||
opacity: 0;
|
||||
transform: translateY(30px) scale(0.95);
|
||||
animation: neuralStatusPanelRise 1s ease-out 1.3s forwards;
|
||||
opacity: 0;
|
||||
animation: slideInUp 0.8s ease-out 0.9s forwards;
|
||||
}
|
||||
|
||||
@keyframes neuralStatusPanelRise {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(30px) scale(0.95);
|
||||
border-color: transparent;
|
||||
background-color: rgba(41, 41, 37, 0);
|
||||
}
|
||||
40% {
|
||||
opacity: 0.6;
|
||||
transform: translateY(10px) scale(0.98);
|
||||
border-color: var(--color-nier-border);
|
||||
}
|
||||
80% {
|
||||
opacity: 0.9;
|
||||
transform: translateY(-2px) scale(1.01);
|
||||
background-color: var(--color-nier-mid);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
border-color: var(--color-nier-border);
|
||||
background-color: var(--color-nier-mid);
|
||||
}
|
||||
}
|
||||
|
||||
/* Status Grid Content Animation */
|
||||
/* Status grid */
|
||||
.neural-status-grid {
|
||||
opacity: 0;
|
||||
transform: translateY(15px);
|
||||
animation: neuralStatusGridFadeUp 0.6s ease-out 1.7s forwards;
|
||||
opacity: 0;
|
||||
animation: slideInUp 0.5s ease-out 1.2s forwards;
|
||||
}
|
||||
|
||||
@keyframes neuralStatusGridFadeUp {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(15px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Status Items Staggered Animation */
|
||||
/* Status items */
|
||||
.neural-status-item {
|
||||
opacity: 0;
|
||||
transform: translateX(-15px);
|
||||
animation: neuralStatusItemSlideIn 0.5s ease-out forwards;
|
||||
opacity: 0;
|
||||
animation: slideInLeft 0.4s ease-out forwards;
|
||||
}
|
||||
|
||||
.neural-status-item:nth-child(1) { animation-delay: 1.9s; }
|
||||
.neural-status-item:nth-child(2) { animation-delay: 2.1s; }
|
||||
.neural-status-item:nth-child(1) { animation-delay: 1.4s; }
|
||||
.neural-status-item:nth-child(2) { animation-delay: 1.5s; }
|
||||
|
||||
@keyframes neuralStatusItemSlideIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(-15px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Status Labels Animation */
|
||||
/* Status labels */
|
||||
.neural-status-label {
|
||||
opacity: 0;
|
||||
transform: translateY(-5px);
|
||||
animation: neuralStatusLabelFadeDown 0.4s ease-out forwards;
|
||||
opacity: 0;
|
||||
animation: fadeIn 0.3s ease-out forwards;
|
||||
}
|
||||
|
||||
.neural-status-item:nth-child(1) .neural-status-label { animation-delay: 2.0s; }
|
||||
.neural-status-item:nth-child(2) .neural-status-label { animation-delay: 2.2s; }
|
||||
.neural-status-item:nth-child(1) .neural-status-label { animation-delay: 1.5s; }
|
||||
.neural-status-item:nth-child(2) .neural-status-label { animation-delay: 1.6s; }
|
||||
|
||||
@keyframes neuralStatusLabelFadeDown {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
100% {
|
||||
opacity: 0.6;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Status Values Animation */
|
||||
/* Status values */
|
||||
.neural-status-value {
|
||||
opacity: 0;
|
||||
transform: scale(0.9);
|
||||
animation: neuralStatusValuePop 0.4s ease-out forwards;
|
||||
opacity: 0;
|
||||
animation: scaleIn 0.3s ease-out forwards;
|
||||
}
|
||||
|
||||
.neural-status-item:nth-child(1) .neural-status-value { animation-delay: 2.1s; }
|
||||
.neural-status-item:nth-child(2) .neural-status-value { animation-delay: 2.3s; }
|
||||
.neural-status-item:nth-child(1) .neural-status-value { animation-delay: 1.6s; }
|
||||
.neural-status-item:nth-child(2) .neural-status-value { animation-delay: 1.7s; }
|
||||
|
||||
@keyframes neuralStatusValuePop {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0.9);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.8;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* Pulse Animation for Status Indicator */
|
||||
/* Pulse dot */
|
||||
.neural-pulse-dot {
|
||||
opacity: 0;
|
||||
animation: neuralPulseDotAppear 0.6s ease-out forwards;
|
||||
opacity: 0;
|
||||
animation: scaleIn 0.4s ease-out forwards;
|
||||
}
|
||||
|
||||
.neural-status-item:nth-child(1) .neural-pulse-dot { animation-delay: 2.2s; }
|
||||
.neural-status-item:nth-child(1) .neural-pulse-dot { animation-delay: 1.7s; }
|
||||
|
||||
@keyframes neuralPulseDotAppear {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0.5);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.8;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
/* ===================== BACKGROUND ELEMENTS ===================== */
|
||||
|
||||
/* Background Checkered Pattern Enhancement */
|
||||
/* Checkered background - static */
|
||||
.neural-checkered-bg {
|
||||
position: relative;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.neural-checkered-bg::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
opacity: 0;
|
||||
background-image:
|
||||
linear-gradient(45deg, rgba(255, 201, 102, 0.01) 25%, transparent 25%),
|
||||
linear-gradient(-45deg, rgba(255, 201, 102, 0.01) 25%, transparent 25%),
|
||||
linear-gradient(45deg, transparent 75%, rgba(255, 201, 102, 0.01) 75%),
|
||||
linear-gradient(-45deg, transparent 75%, rgba(255, 201, 102, 0.01) 75%);
|
||||
background-size: 30px 30px;
|
||||
background-position: 0 0, 0 15px, 15px -15px, -15px 0px;
|
||||
animation: neuralBgPatternFadeIn 3s ease-out 0.2s forwards;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
opacity: 1;
|
||||
background-image:
|
||||
linear-gradient(45deg, rgba(255, 201, 102, 0.01) 25%, transparent 25%),
|
||||
linear-gradient(-45deg, rgba(255, 201, 102, 0.01) 25%, transparent 25%),
|
||||
linear-gradient(45deg, transparent 75%, rgba(255, 201, 102, 0.01) 75%),
|
||||
linear-gradient(-45deg, transparent 75%, rgba(255, 201, 102, 0.01) 75%);
|
||||
background-size: 30px 30px;
|
||||
background-position: 0 0, 0 15px, 15px -15px, -15px 0px;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
@keyframes neuralBgPatternFadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Scanning Line Effect for Neural Section */
|
||||
/* Scan line - hidden */
|
||||
.neural-scan-line {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg,
|
||||
transparent,
|
||||
rgba(255, 201, 102, 0.6),
|
||||
transparent
|
||||
);
|
||||
animation: neuralScanLine 4s ease-in-out 1s forwards;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@keyframes neuralScanLine {
|
||||
0% {
|
||||
left: -100%;
|
||||
opacity: 0;
|
||||
}
|
||||
20% {
|
||||
opacity: 1;
|
||||
}
|
||||
80% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
left: 100%;
|
||||
opacity: 0;
|
||||
}
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ===================== RESPONSIVE DESIGN ===================== */
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
/* Faster animations on tablets */
|
||||
.neural-section {
|
||||
animation-duration: 1s;
|
||||
}
|
||||
|
||||
.neural-left-panel,
|
||||
.neural-video-panel {
|
||||
animation-duration: 1s;
|
||||
}
|
||||
|
||||
.neural-right-panel {
|
||||
animation-duration: 0.8s;
|
||||
animation-delay: 0.7s;
|
||||
}
|
||||
.neural-content-grid,
|
||||
.neural-left-panel,
|
||||
.neural-video-panel,
|
||||
.neural-right-panel {
|
||||
animation-duration: 0.6s;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
/* Much faster animations on mobile */
|
||||
.neural-section {
|
||||
animation-duration: 0.8s;
|
||||
animation-delay: 0.05s;
|
||||
}
|
||||
.neural-content-grid { animation-delay: 0.2s; }
|
||||
.neural-left-panel { animation-delay: 0.3s; }
|
||||
.neural-right-panel { animation-delay: 0.4s; }
|
||||
.neural-video-panel { animation-delay: 0.5s; }
|
||||
.neural-status-panel { animation-delay: 0.6s; }
|
||||
|
||||
.neural-header {
|
||||
animation-duration: 0.6s;
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
.neural-status-item:nth-child(1) { animation-delay: 0.8s; }
|
||||
.neural-status-item:nth-child(2) { animation-delay: 0.9s; }
|
||||
|
||||
.neural-divider {
|
||||
animation-duration: 0.5s;
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
.neural-status-item:nth-child(1) .neural-status-label { animation-delay: 0.9s; }
|
||||
.neural-status-item:nth-child(2) .neural-status-label { animation-delay: 1.0s; }
|
||||
|
||||
.neural-content-grid {
|
||||
animation-duration: 0.8s;
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
.neural-status-item:nth-child(1) .neural-status-value { animation-delay: 1.0s; }
|
||||
.neural-status-item:nth-child(2) .neural-status-value { animation-delay: 1.1s; }
|
||||
|
||||
.neural-left-panel {
|
||||
animation-duration: 0.8s;
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
.neural-status-item:nth-child(1) .neural-pulse-dot { animation-delay: 1.1s; }
|
||||
|
||||
.neural-right-panel {
|
||||
animation-duration: 0.6s;
|
||||
animation-delay: 0.5s;
|
||||
}
|
||||
/* Faster animations on mobile */
|
||||
.neural-content-grid,
|
||||
.neural-left-panel,
|
||||
.neural-right-panel,
|
||||
.neural-video-panel,
|
||||
.neural-status-panel {
|
||||
animation-duration: 0.5s;
|
||||
}
|
||||
|
||||
.neural-video-panel {
|
||||
animation-duration: 0.8s;
|
||||
animation-delay: 0.6s;
|
||||
}
|
||||
.neural-tree-container,
|
||||
.neural-video-inner,
|
||||
.neural-holo-video,
|
||||
.neural-status-grid {
|
||||
animation-duration: 0.4s;
|
||||
}
|
||||
|
||||
.neural-status-panel {
|
||||
animation-duration: 0.6s;
|
||||
animation-delay: 0.7s;
|
||||
}
|
||||
|
||||
.neural-status-item:nth-child(1) { animation-delay: 0.9s; }
|
||||
.neural-status-item:nth-child(2) { animation-delay: 1.0s; }
|
||||
|
||||
.neural-status-item:nth-child(1) .neural-status-label { animation-delay: 1.0s; }
|
||||
.neural-status-item:nth-child(2) .neural-status-label { animation-delay: 1.1s; }
|
||||
|
||||
.neural-status-item:nth-child(1) .neural-status-value { animation-delay: 1.1s; }
|
||||
.neural-status-item:nth-child(2) .neural-status-value { animation-delay: 1.2s; }
|
||||
|
||||
.neural-status-item:nth-child(1) .neural-pulse-dot { animation-delay: 1.2s; }
|
||||
.neural-status-item,
|
||||
.neural-status-label,
|
||||
.neural-status-value,
|
||||
.neural-pulse-dot {
|
||||
animation-duration: 0.3s;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===================== ACCESSIBILITY ===================== */
|
||||
|
||||
/* Respect reduced motion preferences */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.neural-section,
|
||||
.neural-header,
|
||||
.neural-divider,
|
||||
.neural-content-grid,
|
||||
.neural-left-panel,
|
||||
.neural-tree-container,
|
||||
.neural-right-panel,
|
||||
.neural-video-panel,
|
||||
.neural-video-inner,
|
||||
.neural-holo-video,
|
||||
.neural-status-panel,
|
||||
.neural-status-grid,
|
||||
.neural-status-item,
|
||||
.neural-status-label,
|
||||
.neural-status-value,
|
||||
.neural-pulse-dot {
|
||||
animation: none !important;
|
||||
opacity: 1 !important;
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
.neural-checkered-bg::before,
|
||||
.neural-scan-line {
|
||||
display: none !important;
|
||||
}
|
||||
*[class*="neural-"] {
|
||||
animation: none !important;
|
||||
opacity: 1 !important;
|
||||
transform: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,20 @@
|
||||
/* NieR-style hover effects for tree nodes */
|
||||
/* ===================== OPTIMIZED TREE & CHIP SYSTEM ===================== */
|
||||
|
||||
/* Core keyframes */
|
||||
@keyframes textGlitch {
|
||||
0%, 100% { transform: translateX(0); clip-path: inset(0); }
|
||||
10% { transform: translateX(-2px); clip-path: inset(0 0 40% 0); }
|
||||
20% { transform: translateX(1px); clip-path: inset(40% 0 0 0); }
|
||||
30% { transform: translateX(-1px); clip-path: inset(20% 0 20% 0); }
|
||||
}
|
||||
|
||||
@keyframes scanLine {
|
||||
from { opacity: 0.5; left: -100%; }
|
||||
to { opacity: 0; left: 100%; }
|
||||
}
|
||||
|
||||
/* ===================== TREE NODES ===================== */
|
||||
|
||||
.tree-node-item {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
@@ -6,7 +22,6 @@
|
||||
border-bottom: 1px solid transparent;
|
||||
}
|
||||
|
||||
/* Underline effect */
|
||||
.tree-node-item::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
@@ -16,35 +31,11 @@
|
||||
height: 1px;
|
||||
background-color: var(--color-nier-text-dark);
|
||||
transition: width 0.3s ease;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
/* Text color change on hover */
|
||||
.tree-node-item:hover {
|
||||
color: var(--color-nier-text-dark);
|
||||
border-bottom-color: var(--color-nier-text-dark);
|
||||
}
|
||||
|
||||
/* Underline animation on hover */
|
||||
.tree-node-item:hover::before {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Glitch effect on hover - target the text span directly */
|
||||
.tree-node-item:hover span.text-nier-dark {
|
||||
animation: nier-text-glitch 0.6s ease;
|
||||
}
|
||||
|
||||
/* Alternative - target any span with text */
|
||||
.tree-node-item:hover span:last-of-type {
|
||||
animation: nier-text-glitch 0.6s ease;
|
||||
}
|
||||
|
||||
/* Scan line for tree nodes */
|
||||
.tree-node-item .scan-line {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
inset: 0 0 auto -100%;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: var(--color-nier-text-dark);
|
||||
@@ -53,16 +44,30 @@
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.tree-node-item:hover .scan-line {
|
||||
animation: nier-button-scan 0.3s ease forwards;
|
||||
/* Tree node hover effects */
|
||||
.tree-node-item:hover {
|
||||
color: var(--color-nier-text-dark);
|
||||
border-bottom-color: var(--color-nier-text-dark);
|
||||
}
|
||||
|
||||
.tree-node-item:hover::before {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tree-node-item:hover span:last-of-type {
|
||||
animation: textGlitch 0.6s ease;
|
||||
}
|
||||
|
||||
.tree-node-item:hover .scan-line {
|
||||
animation: scanLine 0.3s ease forwards;
|
||||
}
|
||||
|
||||
/* Active/click state for tree nodes */
|
||||
.tree-node-item:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
/* NieR-style Chip Container System - NO INTERACTIONS */
|
||||
/* ===================== CHIP SYSTEM ===================== */
|
||||
|
||||
.chip-container {
|
||||
position: relative;
|
||||
}
|
||||
@@ -70,33 +75,19 @@
|
||||
.chip-parent {
|
||||
position: relative;
|
||||
padding: 16px;
|
||||
border-radius: 0;
|
||||
border: 1px solid rgba(0, 0, 0, 0.15); /* Very thin border */
|
||||
box-shadow: none;
|
||||
border: 1px solid rgba(0, 0, 0, 0.15);
|
||||
overflow: hidden;
|
||||
transition: transform 0.2s ease; /* Allow parent scaling */
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
/* Parent Chip Colors - Complete NieR Earth Palette */
|
||||
.tools-parent {
|
||||
background: linear-gradient(135deg, #a67c63 0%, #8b6b52 100%);
|
||||
}
|
||||
/* Parent chip gradients */
|
||||
.tools-parent { background: linear-gradient(135deg, #a67c63, #8b6b52); }
|
||||
.frontend-parent { background: linear-gradient(135deg, #b8916f, #a67c63); }
|
||||
.backend-parent { background: linear-gradient(135deg, #c9b896, #b8916f); }
|
||||
.database-parent { background: linear-gradient(135deg, #e6d7b8, #d4c4a0); }
|
||||
|
||||
.frontend-parent {
|
||||
background: linear-gradient(135deg, #b8916f 0%, #a67c63 100%);
|
||||
}
|
||||
|
||||
.backend-parent {
|
||||
background: linear-gradient(135deg, #c9b896 0%, #b8916f 100%);
|
||||
}
|
||||
|
||||
.database-parent {
|
||||
background: linear-gradient(135deg, #e6d7b8 0%, #d4c4a0 100%);
|
||||
}
|
||||
|
||||
/* Locked Parent Category */
|
||||
.locked-parent {
|
||||
background: linear-gradient(135deg, #606060 0%, #4a4a4a 100%);
|
||||
background: linear-gradient(135deg, #606060, #4a4a4a);
|
||||
border: none;
|
||||
cursor: not-allowed;
|
||||
height: 100%;
|
||||
@@ -111,14 +102,12 @@
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
/* Chip Cells Column Layout */
|
||||
.chip-cells-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
/* Locked Content Styling */
|
||||
.locked-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -136,58 +125,46 @@
|
||||
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
|
||||
}
|
||||
|
||||
/* Individual Chip Cells - Keep original grayish overlay */
|
||||
/* Chip cells */
|
||||
.chip-cell {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 16px;
|
||||
border-radius: 0;
|
||||
border: 1px solid rgba(0, 0, 0, 0.2); /* Keep original border */
|
||||
background: rgba(0, 0, 0, 0.1); /* Keep original grayish overlay */
|
||||
border: 1px solid rgba(0, 0, 0, 0.2);
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2); /* Keep original shadow */
|
||||
transition: transform 0.2s ease; /* Allow scale animation */
|
||||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.chip-cell::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: 1px;
|
||||
right: 1px;
|
||||
inset: 1px 1px auto 1px;
|
||||
height: 4px;
|
||||
background: rgba(255, 255, 255, 0.1); /* Keep original highlight */
|
||||
border-radius: 0;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
/* Scale animation when tree node is hovered OR selected */
|
||||
/* Active states */
|
||||
.chip-cell.cell-hovered,
|
||||
.chip-cell.cell-selected {
|
||||
transform: scale(1.05) !important;
|
||||
background: rgba(0, 0, 0, 0.1) !important; /* Keep original grayish color */
|
||||
border: 1px solid rgba(0, 0, 0, 0.2) !important; /* Keep original border */
|
||||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2) !important; /* Keep original shadow */
|
||||
}
|
||||
|
||||
/* Parent categories scale when children are hovered OR selected */
|
||||
.chip-container.chip-hovered .chip-parent,
|
||||
.chip-container.chip-selected .chip-parent {
|
||||
transform: scale(1.02) !important;
|
||||
}
|
||||
|
||||
/* NO direct hover effects on cells */
|
||||
/* Prevent direct chip interactions */
|
||||
.chip-cell:hover,
|
||||
.chip-cell:focus,
|
||||
.chip-cell:active {
|
||||
background: rgba(0, 0, 0, 0.1) !important; /* Keep original grayish */
|
||||
border: 1px solid rgba(0, 0, 0, 0.2) !important; /* Keep original border */
|
||||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2) !important; /* Keep original shadow */
|
||||
background: rgba(0, 0, 0, 0.1) !important;
|
||||
border: 1px solid rgba(0, 0, 0, 0.2) !important;
|
||||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2) !important;
|
||||
transform: none !important;
|
||||
filter: none !important;
|
||||
opacity: 1 !important;
|
||||
animation: none !important;
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
.chip-cell:hover::before,
|
||||
@@ -195,60 +172,12 @@
|
||||
.chip-cell:active::before,
|
||||
.chip-cell.cell-hovered::before,
|
||||
.chip-cell.cell-selected::before {
|
||||
background: rgba(255, 255, 255, 0.1) !important; /* Keep original highlight */
|
||||
background: rgba(255, 255, 255, 0.1) !important;
|
||||
height: 4px !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* NO CONTAINER EFFECTS */
|
||||
.chip-normal,
|
||||
.chip-selected,
|
||||
.chip-hovered {
|
||||
/* No effects */
|
||||
}
|
||||
/* ===================== RESPONSIVE DESIGN ===================== */
|
||||
|
||||
/* Text glitch effect for tree nodes only */
|
||||
@keyframes nier-text-glitch {
|
||||
0%, 100% {
|
||||
transform: translateX(0);
|
||||
clip-path: inset(0 0 0 0);
|
||||
}
|
||||
10% {
|
||||
transform: translateX(-2px);
|
||||
clip-path: inset(0 0 40% 0);
|
||||
}
|
||||
15% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
20% {
|
||||
transform: translateX(1px);
|
||||
clip-path: inset(40% 0 0 0);
|
||||
}
|
||||
25% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
30% {
|
||||
transform: translateX(-1px);
|
||||
clip-path: inset(20% 0 20% 0);
|
||||
}
|
||||
35% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Scan line animation for tree nodes only */
|
||||
@keyframes nier-button-scan {
|
||||
0% {
|
||||
opacity: 0.5;
|
||||
left: -100%;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
left: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Responsive Adjustments */
|
||||
@media (max-width: 768px) {
|
||||
.chip-cell {
|
||||
height: 12px;
|
||||
@@ -263,14 +192,14 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* Touch device optimization for tree nodes only */
|
||||
/* Touch devices */
|
||||
@media (hover: none) {
|
||||
.tree-node-item:active::before {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tree-node-item:active .scan-line {
|
||||
animation: nier-button-scan 0.3s ease forwards;
|
||||
animation: scanLine 0.3s ease forwards;
|
||||
}
|
||||
|
||||
.tree-node-item:active {
|
||||
|
||||
@@ -0,0 +1,248 @@
|
||||
/* ===================== CONTACT PAGE ANIMATIONS ===================== */
|
||||
|
||||
/* Core keyframes - reused across components */
|
||||
@keyframes slideInLeft {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate3d(-30px, 0, 0);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, 30px, 0);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scaleIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes scanLine {
|
||||
from { transform: translate3d(-100%, 0, 0); opacity: 0; }
|
||||
50% { opacity: 1; }
|
||||
to { transform: translate3d(100%, 0, 0); opacity: 0; }
|
||||
}
|
||||
|
||||
/* ===================== CONTACT ELEMENTS ===================== */
|
||||
|
||||
/* Content container */
|
||||
.contact-content-container {
|
||||
opacity: 0;
|
||||
animation: slideInUp 0.8s ease-out 0.4s forwards;
|
||||
}
|
||||
|
||||
/* Availability status */
|
||||
.availability-status {
|
||||
opacity: 0;
|
||||
animation: slideInLeft 0.6s ease-out 0.6s forwards;
|
||||
}
|
||||
|
||||
/* Status dot */
|
||||
.status-dot {
|
||||
opacity: 0;
|
||||
animation: scaleIn 0.4s ease-out 0.8s forwards;
|
||||
}
|
||||
|
||||
/* Contact grid */
|
||||
.contact-grid {
|
||||
opacity: 0;
|
||||
animation: slideInUp 0.8s ease-out 0.8s forwards;
|
||||
}
|
||||
|
||||
/* Contact items */
|
||||
.contact-item {
|
||||
opacity: 0;
|
||||
animation: scaleIn 0.8s ease-out forwards;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.contact-item:nth-child(1) { animation-delay: 1.0s; }
|
||||
.contact-item:nth-child(2) { animation-delay: 1.1s; }
|
||||
.contact-item:nth-child(3) { animation-delay: 1.2s; }
|
||||
|
||||
/* Scan line effect */
|
||||
.contact-item::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, transparent, var(--color-nier-accent), transparent);
|
||||
animation: scanLine 1.5s ease-out forwards;
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
.contact-item:nth-child(1)::before { animation-delay: 1.2s; }
|
||||
.contact-item:nth-child(2)::before { animation-delay: 1.3s; }
|
||||
.contact-item:nth-child(3)::before { animation-delay: 1.4s; }
|
||||
|
||||
/* Contact icons */
|
||||
.contact-icon {
|
||||
opacity: 0;
|
||||
animation: scaleIn 0.5s ease-out forwards;
|
||||
}
|
||||
|
||||
.contact-item:nth-child(1) .contact-icon { animation-delay: 1.3s; }
|
||||
.contact-item:nth-child(2) .contact-icon { animation-delay: 1.4s; }
|
||||
.contact-item:nth-child(3) .contact-icon { animation-delay: 1.5s; }
|
||||
|
||||
/* Contact labels and values */
|
||||
.contact-label,
|
||||
.contact-value {
|
||||
opacity: 0;
|
||||
animation: slideInLeft 0.4s ease-out forwards;
|
||||
}
|
||||
|
||||
.contact-item:nth-child(1) .contact-label { animation-delay: 1.4s; }
|
||||
.contact-item:nth-child(2) .contact-label { animation-delay: 1.5s; }
|
||||
.contact-item:nth-child(3) .contact-label { animation-delay: 1.6s; }
|
||||
|
||||
.contact-item:nth-child(1) .contact-value { animation-delay: 1.5s; }
|
||||
.contact-item:nth-child(2) .contact-value { animation-delay: 1.6s; }
|
||||
.contact-item:nth-child(3) .contact-value { animation-delay: 1.7s; }
|
||||
|
||||
/* Info panels container */
|
||||
.info-panels-container {
|
||||
opacity: 0;
|
||||
animation: slideInUp 0.8s ease-out 1.4s forwards;
|
||||
}
|
||||
|
||||
/* Info panels */
|
||||
.info-panel {
|
||||
opacity: 0;
|
||||
animation: scaleIn 0.6s ease-out forwards;
|
||||
}
|
||||
|
||||
.info-panel:nth-child(1) { animation-delay: 1.6s; }
|
||||
.info-panel:nth-child(2) { animation-delay: 1.7s; }
|
||||
|
||||
/* Info panel titles and content */
|
||||
.info-panel-title {
|
||||
opacity: 0;
|
||||
animation: slideInLeft 0.4s ease-out forwards;
|
||||
}
|
||||
|
||||
.info-panel-content {
|
||||
opacity: 0;
|
||||
animation: fadeIn 0.4s ease-out forwards;
|
||||
}
|
||||
|
||||
.info-panel:nth-child(1) .info-panel-title { animation-delay: 1.8s; }
|
||||
.info-panel:nth-child(2) .info-panel-title { animation-delay: 1.9s; }
|
||||
|
||||
.info-panel:nth-child(1) .info-panel-content { animation-delay: 1.9s; }
|
||||
.info-panel:nth-child(2) .info-panel-content { animation-delay: 2.0s; }
|
||||
|
||||
/* ===================== HOVER EFFECTS ===================== */
|
||||
|
||||
.contact-item:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow:
|
||||
0 8px 25px rgba(0, 0, 0, 0.2),
|
||||
0 0 20px rgba(90, 90, 80, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.contact-item:hover .contact-icon {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 0 15px rgba(90, 90, 80, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
/* ===================== BACKGROUND PATTERN ===================== */
|
||||
|
||||
.contact-content-container::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
opacity: 1;
|
||||
background-image:
|
||||
linear-gradient(45deg, rgba(90, 90, 80, 0.02) 25%, transparent 25%),
|
||||
linear-gradient(-45deg, rgba(90, 90, 80, 0.02) 25%, transparent 25%),
|
||||
linear-gradient(45deg, transparent 75%, rgba(90, 90, 80, 0.02) 75%),
|
||||
linear-gradient(-45deg, transparent 75%, rgba(90, 90, 80, 0.02) 75%);
|
||||
background-size: 20px 20px;
|
||||
background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
/* ===================== RESPONSIVE DESIGN ===================== */
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.contact-content-container { animation-delay: 0.3s; }
|
||||
.availability-status { animation-delay: 0.4s; }
|
||||
.contact-grid { animation-delay: 0.6s; }
|
||||
|
||||
.contact-item:nth-child(1) { animation-delay: 0.8s; }
|
||||
.contact-item:nth-child(2) { animation-delay: 0.9s; }
|
||||
\contact-item:nth-child(3) { animation-delay: 1.0s; }
|
||||
|
||||
.info-panels-container { animation-delay: 1.2s; }
|
||||
.info-panel:nth-child(1) { animation-delay: 1.3s; }
|
||||
.info-panel:nth-child(2) { animation-delay: 1.4s; }
|
||||
|
||||
/* Faster animations on mobile */
|
||||
.contact-content-container,
|
||||
.availability-status,
|
||||
.contact-grid,
|
||||
.contact-item,
|
||||
.info-panels-container,
|
||||
.info-panel {
|
||||
animation-duration: 0.6s;
|
||||
}
|
||||
|
||||
.status-dot,
|
||||
.contact-icon,
|
||||
.contact-label,
|
||||
.contact-value,
|
||||
.info-panel-title,
|
||||
.info-panel-content {
|
||||
animation-duration: 0.3s;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===================== ACCESSIBILITY ===================== */
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*[class*="contact-"],
|
||||
*[class*="info-"],
|
||||
.availability-status,
|
||||
.status-dot {
|
||||
animation: none !important;
|
||||
opacity: 1 !important;
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
.contact-item::before,
|
||||
.contact-content-container::before {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.contact-item:hover {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,99 @@
|
||||
<!-- Contact content in separate container, isolated from section title -->
|
||||
<div class="flex justify-center w-full contact-content-container">
|
||||
<div class="max-w-5xl w-full p-6">
|
||||
<!-- Availability Status -->
|
||||
<div class="inline-flex items-center gap-2 bg-nier-dark text-nier-light px-5 py-3 border border-nier-border mb-12 font-terminal text-xs uppercase tracking-wide availability-status">
|
||||
<div class="w-2 h-2 bg-green-500 rounded-full animate-pulse status-dot"></div>
|
||||
AVAILABLE FOR OPPORTUNITIES
|
||||
</div>
|
||||
|
||||
<!-- Contact Grid -->
|
||||
<div class="grid gap-6 w-full contact-grid">
|
||||
<!-- Primary Communication Channel -->
|
||||
<a
|
||||
href="mailto:adam.benyekkou@example.com"
|
||||
class="bg-nier-bg border border-nier-border p-8 flex items-center gap-6 text-nier-dark no-underline transition-all duration-200 hover:bg-nier-highlight hover:text-nier-light hover:border-nier-accent group contact-item relative"
|
||||
>
|
||||
<div class="w-14 h-14 bg-nier-mid border border-nier-border flex items-center justify-center text-xl text-nier-dark flex-shrink-0 transition-all duration-200 group-hover:bg-nier-light group-hover:text-nier-dark contact-icon">
|
||||
<i class="fas fa-envelope"></i>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="font-terminal font-medium text-base text-nier-dark uppercase tracking-wide mb-2 group-hover:text-nier-light contact-label">
|
||||
PRIMARY COMMUNICATION CHANNEL
|
||||
</div>
|
||||
<div class="font-noto-jp text-base text-nier-mid leading-relaxed group-hover:text-nier-light contact-value">
|
||||
adam.benyekkou@example.com<br>
|
||||
Secure encrypted transmission protocol enabled
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Professional Network Access -->
|
||||
<a
|
||||
href="https://linkedin.com/in/adambnk"
|
||||
target="_blank"
|
||||
class="bg-nier-bg border border-nier-border p-8 flex items-center gap-6 text-nier-dark no-underline transition-all duration-200 hover:bg-nier-highlight hover:text-nier-light hover:border-nier-accent group contact-item relative"
|
||||
>
|
||||
<div class="w-14 h-14 bg-nier-mid border border-nier-border flex items-center justify-center text-xl text-nier-dark flex-shrink-0 transition-all duration-200 group-hover:bg-nier-light group-hover:text-nier-dark contact-icon">
|
||||
<i class="fab fa-linkedin-in"></i>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="font-terminal font-medium text-base text-nier-dark uppercase tracking-wide mb-2 group-hover:text-nier-light contact-label">
|
||||
PROFESSIONAL NETWORK ACCESS
|
||||
</div>
|
||||
<div class="font-noto-jp text-base text-nier-mid leading-relaxed group-hover:text-nier-light contact-value">
|
||||
LinkedIn professional interface<br>
|
||||
Connect for career opportunities and networking
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Source Code Repository -->
|
||||
<a
|
||||
href="https://github.com/adam-benyekkou"
|
||||
target="_blank"
|
||||
class="bg-nier-bg border border-nier-border p-8 flex items-center gap-6 text-nier-dark no-underline transition-all duration-200 hover:bg-nier-highlight hover:text-nier-light hover:border-nier-accent group contact-item relative"
|
||||
>
|
||||
<div class="w-14 h-14 bg-nier-mid border border-nier-border flex items-center justify-center text-xl text-nier-dark flex-shrink-0 transition-all duration-200 group-hover:bg-nier-light group-hover:text-nier-dark contact-icon">
|
||||
<i class="fab fa-github"></i>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="font-terminal font-medium text-base text-nier-dark uppercase tracking-wide mb-2 group-hover:text-nier-light contact-label">
|
||||
SOURCE CODE REPOSITORY
|
||||
</div>
|
||||
<div class="font-noto-jp text-base text-nier-mid leading-relaxed group-hover:text-nier-light contact-value">
|
||||
GitHub development archives<br>
|
||||
Access project source files and contribution history
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Info Panels -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-12 w-full info-panels-container">
|
||||
<!-- Response Protocol -->
|
||||
<div class="bg-nier-mid border border-nier-border p-6 info-panel">
|
||||
<div class="font-terminal text-base font-medium text-nier-dark mb-3 uppercase tracking-wide info-panel-title">
|
||||
RESPONSE PROTOCOL
|
||||
</div>
|
||||
<div class="font-noto-jp text-base text-nier-dark leading-relaxed info-panel-content">
|
||||
Standard response time: 24-48 hour cycle<br>
|
||||
Emergency contact: Email protocol recommended<br>
|
||||
Priority inquiries: LinkedIn messaging for urgent requests
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Collaboration Status -->
|
||||
<div class="bg-nier-mid border border-nier-border p-6 info-panel">
|
||||
<div class="font-terminal text-base font-medium text-nier-dark mb-3 uppercase tracking-wide info-panel-title">
|
||||
COLLABORATION STATUS
|
||||
</div>
|
||||
<div class="font-noto-jp text-base text-nier-dark leading-relaxed info-panel-content">
|
||||
Currently seeking: Full-time opportunities, internships, freelance projects<br>
|
||||
Specialization: Web development, Angular, modern tech stack<br>
|
||||
Location: Remote-ready, French hideout base of operations
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,11 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-contact-content',
|
||||
imports: [],
|
||||
templateUrl: './contact-content.component.html',
|
||||
styleUrl: './contact-content.component.css'
|
||||
})
|
||||
export class ContactContentComponent {
|
||||
|
||||
}
|
||||
@@ -1,3 +1,9 @@
|
||||
<section class="border-b-1 h-screen flex items-top justify-top checkered-bg p-6 relative">
|
||||
<app-section-title title="TRANSMISSION LINKS" />
|
||||
<section class="min-h-screen bg-nier-bg checkered-background">
|
||||
<!-- Section title with animation - separate container -->
|
||||
<div class="pt-8 pl-8 pb-8 bg-nier-bg checkered-background section-title-container">
|
||||
<app-section-title title="TRANSMISSION LINKS" />
|
||||
</div>
|
||||
|
||||
<!-- Contact content - completely separate container -->
|
||||
<app-contact-content />
|
||||
</section>
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { SectionTitleComponent } from '../../components/section-title/section-title.component';
|
||||
import { ContactContentComponent } from './contact-content/contact-content.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-contact',
|
||||
imports: [SectionTitleComponent],
|
||||
imports: [SectionTitleComponent, ContactContentComponent],
|
||||
templateUrl: './contact.component.html',
|
||||
styleUrl: './contact.component.css',
|
||||
})
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user