CavyDev/my_portfolio
1
0
Fork 0
mirror of https://github.com/adam-benyekkou/my_portfolio.git synced 2026-01-15 20:20:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added fade in animation about and projects pages

Browse Source
This commit is contained in:
AdamBtech
2025-05-26 22:11:05 +02:00
parent a659d17327
commit 6d484f346e
4 changed files with 1655 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1018
src/app/pages/projects/projects.component.css
View File

File diff suppressed because it is too large Load Diff

58
src/app/pages/projects/projects.component.html
View File

@@ -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>