mirror of
https://github.com/adam-benyekkou/my_portfolio.git
synced 2026-01-15 20:20:09 +00:00
Added fade in animation about and projects pages
This commit is contained in:
AdamBtech
@@ -0,0 +1,551 @@
|
||||
/* ===================== NEURAL PROFILE SECTION ANIMATIONS ===================== */
|
||||
|
||||
/* Section Container Animation */
|
||||
.neural-section {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
animation: neuralSectionMaterialize 1.2s ease-out 0.1s forwards;
|
||||
}
|
||||
|
||||
@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 */
|
||||
.neural-header {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
animation: neuralHeaderSlideDown 1s ease-out 0.3s forwards;
|
||||
}
|
||||
|
||||
@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 */
|
||||
.neural-divider {
|
||||
opacity: 0;
|
||||
transform: scaleX(0);
|
||||
transform-origin: left;
|
||||
animation: neuralDividerExpand 0.8s ease-out 0.8s forwards;
|
||||
}
|
||||
|
||||
@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 */
|
||||
.neural-content-grid {
|
||||
opacity: 0;
|
||||
transform: translateY(40px);
|
||||
animation: neuralContentReveal 1.2s ease-out 0.5s forwards;
|
||||
}
|
||||
|
||||
@keyframes neuralContentReveal {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(40px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Left Panel - Neural Profile Tree Animation */
|
||||
.neural-left-panel {
|
||||
opacity: 0;
|
||||
transform: translateX(-40px) scale(0.95);
|
||||
animation: neuralLeftPanelSlideIn 1.2s ease-out 0.7s 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 */
|
||||
.neural-tree-container {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
animation: neuralTreeContentFadeUp 0.8s ease-out 1.2s forwards;
|
||||
}
|
||||
|
||||
@keyframes neuralTreeContentFadeUp {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Right Panel Container Animation */
|
||||
.neural-right-panel {
|
||||
opacity: 0;
|
||||
transform: translateX(40px);
|
||||
animation: neuralRightPanelSlideIn 1s ease-out 0.9s forwards;
|
||||
}
|
||||
|
||||
@keyframes neuralRightPanelSlideIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(40px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Video Display Panel Animation */
|
||||
.neural-video-panel {
|
||||
opacity: 0;
|
||||
transform: scale(0.95) translateY(20px);
|
||||
animation: neuralVideoPanelMaterialize 1.2s ease-out 1.1s 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 */
|
||||
.neural-video-inner {
|
||||
opacity: 0;
|
||||
transform: scale(0.9);
|
||||
animation: neuralVideoInnerExpand 0.8s ease-out 1.5s 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 */
|
||||
.neural-holo-video {
|
||||
opacity: 0;
|
||||
animation: neuralHoloVideoFadeIn 1s ease-out 1.8s 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 */
|
||||
.neural-status-panel {
|
||||
opacity: 0;
|
||||
transform: translateY(30px) scale(0.95);
|
||||
animation: neuralStatusPanelRise 1s ease-out 1.3s 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 */
|
||||
.neural-status-grid {
|
||||
opacity: 0;
|
||||
transform: translateY(15px);
|
||||
animation: neuralStatusGridFadeUp 0.6s ease-out 1.7s forwards;
|
||||
}
|
||||
|
||||
@keyframes neuralStatusGridFadeUp {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(15px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Status Items Staggered Animation */
|
||||
.neural-status-item {
|
||||
opacity: 0;
|
||||
transform: translateX(-15px);
|
||||
animation: neuralStatusItemSlideIn 0.5s ease-out forwards;
|
||||
}
|
||||
|
||||
.neural-status-item:nth-child(1) { animation-delay: 1.9s; }
|
||||
.neural-status-item:nth-child(2) { animation-delay: 2.1s; }
|
||||
|
||||
@keyframes neuralStatusItemSlideIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(-15px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Status Labels Animation */
|
||||
.neural-status-label {
|
||||
opacity: 0;
|
||||
transform: translateY(-5px);
|
||||
animation: neuralStatusLabelFadeDown 0.4s 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; }
|
||||
|
||||
@keyframes neuralStatusLabelFadeDown {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
100% {
|
||||
opacity: 0.6;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Status Values Animation */
|
||||
.neural-status-value {
|
||||
opacity: 0;
|
||||
transform: scale(0.9);
|
||||
animation: neuralStatusValuePop 0.4s 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; }
|
||||
|
||||
@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 */
|
||||
.neural-pulse-dot {
|
||||
opacity: 0;
|
||||
animation: neuralPulseDotAppear 0.6s ease-out forwards;
|
||||
}
|
||||
|
||||
.neural-status-item:nth-child(1) .neural-pulse-dot { animation-delay: 2.2s; }
|
||||
|
||||
@keyframes neuralPulseDotAppear {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0.5);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.8;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* Background Checkered Pattern Enhancement */
|
||||
.neural-checkered-bg {
|
||||
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;
|
||||
}
|
||||
|
||||
@keyframes neuralBgPatternFadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Scanning Line Effect for Neural Section */
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===================== 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;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
/* Much faster animations on mobile */
|
||||
.neural-section {
|
||||
animation-duration: 0.8s;
|
||||
animation-delay: 0.05s;
|
||||
}
|
||||
|
||||
.neural-header {
|
||||
animation-duration: 0.6s;
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
.neural-divider {
|
||||
animation-duration: 0.5s;
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
|
||||
.neural-content-grid {
|
||||
animation-duration: 0.8s;
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
|
||||
.neural-left-panel {
|
||||
animation-duration: 0.8s;
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
|
||||
.neural-right-panel {
|
||||
animation-duration: 0.6s;
|
||||
animation-delay: 0.5s;
|
||||
}
|
||||
|
||||
.neural-video-panel {
|
||||
animation-duration: 0.8s;
|
||||
animation-delay: 0.6s;
|
||||
}
|
||||
|
||||
.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; }
|
||||
}
|
||||
|
||||
/* ===================== 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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,55 +1,61 @@
|
||||
<section class="border-b border-nier-border min-h-screen checkered-background p-6 lg:p-8 flex flex-col relative">
|
||||
<section class="border-b border-nier-border min-h-screen checkered-background neural-checkered-bg p-6 lg:p-8 flex flex-col relative neural-section">
|
||||
|
||||
<!-- Scanning line effect -->
|
||||
<div class="neural-scan-line"></div>
|
||||
|
||||
<!-- Header section with NieR styling -->
|
||||
<div class="mb-6 lg:mb-8">
|
||||
<div class="mb-6 lg:mb-8 neural-header">
|
||||
<app-section-title title="NEURAL PROFILE"/>
|
||||
<!-- Subtle divider line -->
|
||||
<div class="mt-3 h-px bg-nier-border opacity-50"></div>
|
||||
<!-- Subtle divider line with animation -->
|
||||
<div class="mt-3 h-px bg-nier-border opacity-50 neural-divider"></div>
|
||||
</div>
|
||||
|
||||
<!-- Main content grid -->
|
||||
<div class="flex-1 grid grid-cols-1 lg:grid-cols-12 gap-6 lg:gap-8">
|
||||
<div class="flex-1 grid grid-cols-1 lg:grid-cols-12 gap-6 lg:gap-8 neural-content-grid">
|
||||
|
||||
<!-- Left panel - Neural Profile Tree -->
|
||||
<div class="lg:col-span-7 xl:col-span-6">
|
||||
<div class="lg:col-span-7 xl:col-span-6 neural-left-panel">
|
||||
<div class="h-full bg-nier-bg border-2 border-nier-border font-terminal text-nier-dark">
|
||||
<!-- Inner content container with proper padding -->
|
||||
<div class="h-full p-4 lg:p-6">
|
||||
<div class="h-full p-4 lg:p-6 neural-tree-container">
|
||||
<app-neural-profile-tree/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right panel - Video and status (responsive) -->
|
||||
<div class="lg:col-span-5 xl:col-span-6 flex flex-col gap-4 lg:gap-6">
|
||||
<div class="lg:col-span-5 xl:col-span-6 flex flex-col gap-4 lg:gap-6 neural-right-panel">
|
||||
|
||||
<!-- Main video display -->
|
||||
<div class="flex-1 bg-nier-dark border-2 border-nier-accent">
|
||||
<div class="h-full min-h-[250px] sm:min-h-[300px] lg:min-h-[400px] xl:min-h-[500px] p-2">
|
||||
<div class="flex-1 bg-nier-dark border-2 border-nier-accent neural-video-panel">
|
||||
<div class="h-full min-h-[250px] sm:min-h-[300px] lg:min-h-[400px] xl:min-h-[500px] p-2 neural-video-inner">
|
||||
<div class="w-full h-full bg-nier-bg/10 border border-nier-border/50">
|
||||
<app-holo-video-container
|
||||
containerClasses="w-full h-full"
|
||||
containerClasses="w-full h-full neural-holo-video"
|
||||
videoSrc="video/cyber_skull.mp4"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Status panel -->
|
||||
<div class="bg-nier-mid border-2 border-nier-border font-terminal">
|
||||
<div class="p-3 sm:p-4 lg:p-6">
|
||||
<div class="bg-nier-mid border-2 border-nier-border font-terminal neural-status-panel">
|
||||
<div class="p-3 sm:p-4 lg:p-6 neural-status-grid">
|
||||
<!-- Status grid - responsive layout -->
|
||||
<div class="nier-grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4 p-3">
|
||||
<div class="text-nier-dark">
|
||||
<div class="text-xs font-terminal-retro tracking-wider opacity-60 mb-1">STATUS</div>
|
||||
<div class="flex items-center gap-2 font-terminal text-sm">
|
||||
<div class="w-2 h-2 bg-nier-accent animate-pulse"></div>
|
||||
|
||||
<div class="text-nier-dark neural-status-item">
|
||||
<div class="text-xs font-terminal-retro tracking-wider opacity-60 mb-1 neural-status-label">STATUS</div>
|
||||
<div class="flex items-center gap-2 font-terminal text-sm neural-status-value">
|
||||
<div class="w-2 h-2 bg-nier-accent animate-pulse neural-pulse-dot"></div>
|
||||
<span>NEURAL SCAN ACTIVE</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-nier-dark">
|
||||
<div class="text-xs font-terminal-retro tracking-wider opacity-60 mb-1">MODE</div>
|
||||
<div class="font-terminal text-sm">REAL-TIME ANALYSIS</div>
|
||||
|
||||
<div class="text-nier-dark neural-status-item">
|
||||
<div class="text-xs font-terminal-retro tracking-wider opacity-60 mb-1 neural-status-label">MODE</div>
|
||||
<div class="font-terminal text-sm neural-status-value">REAL-TIME ANALYSIS</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,30 +1,35 @@
|
||||
<!-- project-list.component.html -->
|
||||
<section class="min-h-screen bg-nier-bg checkered-background">
|
||||
<!-- Section title with padding instead of margin to avoid white space -->
|
||||
<div class="pt-8 pl-8 pb-8 bg-nier-bg checkered-background">
|
||||
<!-- Section title with animation -->
|
||||
<div class="pt-8 pl-8 pb-8 bg-nier-bg checkered-background section-title-container">
|
||||
<app-section-title title="EXECUTE // DIRECTORY" />
|
||||
</div>
|
||||
|
||||
<div class="max-w-6xl mx-auto p-6">
|
||||
<!-- Terminal Header -->
|
||||
<div class="checkered-background border-2 border-nier-border p-8 mb-8 font-terminal-nier relative overflow-hidden">
|
||||
<!-- Scan line animation -->
|
||||
<div class="absolute top-0 left-0 w-full h-full opacity-10 animate-scan"></div>
|
||||
<div class="text-base mb-2 font-terminal">>> ACCESSING PROJECT DATABASE...</div>
|
||||
<div class="my-6">
|
||||
<!-- Terminal Header with animation -->
|
||||
<div class="checkered-background border-2 border-nier-border p-8 mb-8 font-terminal-nier relative overflow-hidden terminal-header">
|
||||
<!-- Enhanced scan line animation -->
|
||||
<div class="absolute top-0 left-0 w-full h-full opacity-10 enhanced-scan"></div>
|
||||
|
||||
<!-- Terminal text lines with staggered animation -->
|
||||
<div class="text-base mb-2 font-terminal terminal-line">>> ACCESSING PROJECT DATABASE...</div>
|
||||
|
||||
<!-- Progress bar with animation -->
|
||||
<div class="my-6 progress-container">
|
||||
<div class="w-full h-6 border-2 border-nier-accent bg-nier-bg relative overflow-hidden">
|
||||
<div class="h-full bg-nier-dark transition-all duration-[3000ms] ease-out"
|
||||
[class.w-full]="isLoading()"
|
||||
[class.w-0]="!isLoading()"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-base mb-2 font-terminal">>> CONNECTION ESTABLISHED</div>
|
||||
<div class="text-base mb-2 font-terminal">>> DISPLAYING ARCHIVED MISSIONS</div>
|
||||
|
||||
<div class="text-base mb-2 font-terminal terminal-line">>> CONNECTION ESTABLISHED</div>
|
||||
<div class="text-base mb-2 font-terminal terminal-line">>> DISPLAYING ARCHIVED MISSIONS</div>
|
||||
</div>
|
||||
|
||||
<!-- Directory Tree -->
|
||||
<div class="bg-nier-dark text-nier-light border-2 border-nier-accent p-6 mb-8 font-terminal text-sm">
|
||||
<div class="font-noto-jp text-xl mb-4 border-b border-nier-mid pb-2">SYSTEM DIRECTORY</div>
|
||||
<!-- Directory Tree with animation -->
|
||||
<div class="bg-nier-dark text-nier-light border-2 border-nier-accent p-6 mb-8 font-terminal text-sm directory-tree">
|
||||
<div class="font-noto-jp text-xl mb-4 border-b border-nier-mid pb-2 directory-header">SYSTEM DIRECTORY</div>
|
||||
<div class="space-y-1">
|
||||
@for (line of directoryLines(); track $index) {
|
||||
<div class="opacity-0 animate-fade-in-line"
|
||||
@@ -35,8 +40,8 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Projects Grid -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
|
||||
<!-- Projects Grid with animation -->
|
||||
<div class="grid-project-cards mb-8 projects-grid">
|
||||
@for (project of projects(); track project.id) {
|
||||
<app-project-card
|
||||
[project]="project"
|
||||
@@ -44,27 +49,32 @@
|
||||
}
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="text-center p-6 border-t-2 border-nier-border font-terminal-retro text-sm text-nier-mid">
|
||||
<!-- Footer with animation -->
|
||||
<div class="text-center p-6 border-t-2 border-nier-border font-terminal-retro text-sm text-nier-mid directory-footer">
|
||||
>>> END_OF_DIRECTORY_LISTING<br>
|
||||
>>> TOTAL_PROJECTS: {{ totalProjects() }} | ACTIVE: {{ activeProjects() }} | REDACTED: {{ redactedProjects() }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Case Study Modal -->
|
||||
<!-- Case Study Modal with enhanced animations -->
|
||||
@if (selectedProject()) {
|
||||
<div class="fixed inset-0 z-50 overflow-y-auto p-4 flex items-start justify-center transition-all duration-300"
|
||||
<div class="fixed inset-0 z-50 overflow-y-auto p-4 flex items-start justify-center transition-all duration-300 modal-overlay"
|
||||
style="background-color: rgba(41, 41, 37, 0.9);"
|
||||
(click)="closeCaseStudy($event)">
|
||||
<div class="bg-nier-bg border-4 border-nier-accent max-w-4xl w-full max-h-[90vh] overflow-y-auto relative mt-8">
|
||||
<div class="bg-nier-dark text-nier-light p-6 border-b-2 border-nier-border sticky top-0 z-10">
|
||||
|
||||
<div class="bg-nier-bg border-4 border-nier-accent max-w-4xl w-full max-h-[90vh] overflow-y-auto relative mt-8 modal-container">
|
||||
|
||||
<!-- Modal Header -->
|
||||
<div class="bg-nier-dark text-nier-light p-6 border-b-2 border-nier-border sticky top-0 z-10 modal-header">
|
||||
<div class="font-noto-jp text-3xl mb-2">{{ selectedProject()?.caseStudy?.title }}</div>
|
||||
<button class="absolute top-4 right-6 bg-transparent border-2 border-nier-light text-nier-light w-10 h-10 cursor-pointer font-terminal text-xl hover:bg-nier-light hover:text-nier-dark transition-colors duration-300"
|
||||
<button class="absolute top-4 right-6 bg-transparent border-2 border-nier-light text-nier-light w-10 h-10 cursor-pointer font-terminal text-xl hover:bg-nier-light hover:text-nier-dark transition-colors duration-300 modal-close-btn"
|
||||
(click)="closeCaseStudy()">×</button>
|
||||
</div>
|
||||
<div class="p-8">
|
||||
|
||||
<!-- Modal Content -->
|
||||
<div class="p-8 modal-content">
|
||||
@for (section of selectedProject()?.caseStudy?.sections; track section.title) {
|
||||
<div class="mb-8 pb-6 border-b border-nier-border last:border-b-0">
|
||||
<div class="mb-8 pb-6 border-b border-nier-border last:border-b-0 modal-section">
|
||||
<div class="font-noto-jp text-xl mb-4 text-nier-accent">{{ section.title }}</div>
|
||||
<div class="leading-relaxed mb-4" [innerHTML]="section.content"></div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user