mirror of
https://github.com/adam-benyekkou/my_portfolio.git
synced 2026-01-15 20:20:09 +00:00
Refactored info-card and detail block into wrapper reusable components
This commit is contained in:
AdamBtech
@@ -200,47 +200,6 @@
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Info Card Styles */
|
||||
.info-card {
|
||||
border: 2px solid var(--color-nier-border);
|
||||
background: var(--color-nier-bg);
|
||||
position: relative;
|
||||
transition: var(--transition-smooth);
|
||||
margin-bottom: var(--card-gap);
|
||||
flex-shrink: 0;
|
||||
border-radius: var(--border-radius);
|
||||
|
||||
/* Card initial state */
|
||||
opacity: 0;
|
||||
transform: translateY(30px) scale(0.95);
|
||||
animation: cardFadeIn var(--animation-duration) ease-out calc(var(--animation-delay-base) * 10) forwards;
|
||||
}
|
||||
|
||||
.info-card:hover {
|
||||
transform: translateY(-1px) scale(1.01);
|
||||
box-shadow: var(--shadow-subtle);
|
||||
}
|
||||
|
||||
.info-header {
|
||||
background: linear-gradient(135deg, var(--color-nier-dark) 0%, var(--color-nier-highlight) 100%);
|
||||
color: var(--color-nier-text-light);
|
||||
padding: 0.5rem;
|
||||
font-family: var(--font-terminal);
|
||||
font-size: 0.8rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
border-bottom: 2px solid var(--color-nier-border);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.info-content {
|
||||
padding: var(--card-padding);
|
||||
background: var(--color-nier-bg);
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* Visual Effects */
|
||||
.corner-accent {
|
||||
position: absolute;
|
||||
|
||||
@@ -13,8 +13,8 @@
|
||||
</header>
|
||||
|
||||
<div class="experience-body">
|
||||
<app-detail-block label="PROGRAM:" [value]="training.classification"/>
|
||||
<app-detail-block label="INSTITUTION:" [value]="training.timeline"/>
|
||||
<app-detail-block label="PROGRAM:" [value]="training.classification" />
|
||||
<app-detail-block label="INSTITUTION:" [value]="training.timeline" />
|
||||
|
||||
<div class="tech-section">
|
||||
<div class="detail-label">CURRICULUM:</div>
|
||||
@@ -29,10 +29,10 @@
|
||||
}
|
||||
|
||||
<!-- Additional Education Info -->
|
||||
<div class="info-card">
|
||||
<div class="info-header">ACADEMIC_FOCUS</div>
|
||||
<div class="info-content">
|
||||
<p>Full-stack development specialization with emphasis on modern web technologies and enterprise-grade solutions.</p>
|
||||
</div>
|
||||
</div>
|
||||
<app-info-card headerTitle="ACADEMIC_FOCUS">
|
||||
<p>
|
||||
Full-stack development specialization with emphasis on modern web
|
||||
technologies and enterprise-grade solutions.
|
||||
</p>
|
||||
</app-info-card>
|
||||
</div>
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
import { Component, signal } from '@angular/core';
|
||||
import { type Experience } from '../../../../shared/models/experience.model';
|
||||
import { DetailBlockComponent } from '../shared/detail-block/detail-block.component';
|
||||
import { InfoCardComponent } from '../shared/info-card/info-card.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-column-education-info',
|
||||
imports: [DetailBlockComponent],
|
||||
imports: [DetailBlockComponent, InfoCardComponent],
|
||||
templateUrl: './column-education-info.component.html',
|
||||
styleUrl: './column-education-info.component.css',
|
||||
})
|
||||
|
||||
@@ -38,46 +38,7 @@
|
||||
animation: slideInLeft 0.4s ease-out calc(var(--animation-delay-base) * 7) forwards;
|
||||
}
|
||||
|
||||
/* Info Card Styles */
|
||||
.info-card {
|
||||
border: 2px solid var(--color-nier-border);
|
||||
background: var(--color-nier-bg);
|
||||
position: relative;
|
||||
transition: var(--transition-smooth);
|
||||
margin-bottom: var(--card-gap);
|
||||
flex-shrink: 0;
|
||||
border-radius: var(--border-radius);
|
||||
|
||||
/* Card initial state */
|
||||
opacity: 0;
|
||||
transform: translateY(30px) scale(0.95);
|
||||
animation: cardFadeIn var(--animation-duration) ease-out calc(var(--animation-delay-base) * 10) forwards;
|
||||
}
|
||||
|
||||
.info-card:hover {
|
||||
transform: translateY(-1px) scale(1.01);
|
||||
box-shadow: var(--shadow-subtle);
|
||||
}
|
||||
|
||||
.info-header {
|
||||
background: linear-gradient(135deg, var(--color-nier-dark) 0%, var(--color-nier-highlight) 100%);
|
||||
color: var(--color-nier-text-light);
|
||||
padding: 0.5rem;
|
||||
font-family: var(--font-terminal);
|
||||
font-size: 0.8rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
border-bottom: 2px solid var(--color-nier-border);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.info-content {
|
||||
padding: var(--card-padding);
|
||||
background: var(--color-nier-bg);
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* Personal Info Grid */
|
||||
.trait-grid {
|
||||
|
||||
@@ -1,48 +1,41 @@
|
||||
<div class="column personal-column">
|
||||
<h2 class="column-title">[PERSONAL_DATA]</h2>
|
||||
|
||||
<div class="info-card">
|
||||
<div class="info-header">INTERESTS</div>
|
||||
<div class="info-content">
|
||||
<div class="interest-item">
|
||||
<span class="interest-label">READINGS:</span>
|
||||
<span class="interest-value"> Science Fiction, Philosophy, Fantasy</span>
|
||||
</div>
|
||||
<div class="interest-item">
|
||||
<span class="interest-label">INTERESTS:</span>
|
||||
<span class="interest-value">Digital & Tabletop Games, Hiking, Drawing</span>
|
||||
</div>
|
||||
<div class="interest-item">
|
||||
<span class="interest-label">PETS:</span>
|
||||
<span class="interest-value"> Proud Dad of 6 Guinea Pigs (You read right!)</span>
|
||||
</div>
|
||||
<app-info-card headerTitle="INTERESTS">
|
||||
<div class="interest-item">
|
||||
<span class="interest-label">READINGS:</span>
|
||||
<span class="interest-value"> Science Fiction, Philosophy, Fantasy</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="interest-item">
|
||||
<span class="interest-label">INTERESTS:</span>
|
||||
<span class="interest-value">Digital & Tabletop Games, Hiking, Drawing</span>
|
||||
</div>
|
||||
<div class="interest-item">
|
||||
<span class="interest-label">PETS:</span>
|
||||
<span class="interest-value"> Proud Dad of 6 Guinea Pigs (You read right!)</span>
|
||||
</div>
|
||||
</app-info-card>
|
||||
|
||||
<div class="info-card">
|
||||
<div class="info-header">CORE_TRAITS</div>
|
||||
<div class="info-content">
|
||||
<div class="trait-grid">
|
||||
<span class="trait-item">CURIOUS</span>
|
||||
<span class="trait-item">PERSISTENT</span>
|
||||
<span class="trait-item">ANALYTICAL</span>
|
||||
<span class="trait-item">CREATIVE</span>
|
||||
<span class="trait-item">ADAPTIVE</span>
|
||||
<span class="trait-item">SELF-LEARNER</span>
|
||||
</div>
|
||||
<app-info-card headerTitle="CORE_TRAITS">
|
||||
<div class="trait-grid">
|
||||
<span class="trait-item">CURIOUS</span>
|
||||
<span class="trait-item">PERSISTENT</span>
|
||||
<span class="trait-item">ANALYTICAL</span>
|
||||
<span class="trait-item">CREATIVE</span>
|
||||
<span class="trait-item">ADAPTIVE</span>
|
||||
<span class="trait-item">SELF-LEARNER</span>
|
||||
</div>
|
||||
</div>
|
||||
</app-info-card>
|
||||
|
||||
<div class="info-card philosophy-card">
|
||||
<div class="info-header">PHILOSOPHY</div>
|
||||
<div class="info-content">
|
||||
<p class="philosophy-text">
|
||||
"The most elegant code emerges from understanding both the technical substrate and the consciousness it serves."
|
||||
</p>
|
||||
<div class="philosophy-note">
|
||||
{{ personalNote() }}
|
||||
</div>
|
||||
<app-info-card headerTitle="PHILOSOPHY">
|
||||
<p class="philosophy-text">
|
||||
"The most elegant code emerges from understanding both the technical substrate and the consciousness it serves."
|
||||
</p>
|
||||
<div class="philosophy-note">
|
||||
{{ personalNote() }}
|
||||
</div>
|
||||
</div>
|
||||
</app-info-card>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
import { Component, signal } from '@angular/core';
|
||||
import { InfoCardComponent } from '../shared/info-card/info-card.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-column-personal-info',
|
||||
imports: [],
|
||||
imports: [InfoCardComponent],
|
||||
templateUrl: './column-personal-info.component.html',
|
||||
styleUrl: './column-personal-info.component.css',
|
||||
})
|
||||
|
||||
@@ -0,0 +1,51 @@
|
||||
.info-card {
|
||||
border: 2px solid var(--color-nier-border);
|
||||
background: var(--color-nier-bg);
|
||||
position: relative;
|
||||
transition: var(--transition-smooth);
|
||||
margin-bottom: var(--card-gap);
|
||||
flex-shrink: 0;
|
||||
border-radius: var(--border-radius);
|
||||
|
||||
/* Card initial state */
|
||||
opacity: 0;
|
||||
transform: translateY(30px) scale(0.95);
|
||||
animation: cardFadeIn var(--animation-duration) ease-out calc(var(--animation-delay-base) * 10) forwards;
|
||||
}
|
||||
|
||||
.info-card:hover {
|
||||
transform: translateY(-1px) scale(1.01);
|
||||
box-shadow: var(--shadow-subtle);
|
||||
}
|
||||
|
||||
.info-header {
|
||||
background: linear-gradient(135deg, var(--color-nier-dark) 0%, var(--color-nier-highlight) 100%);
|
||||
color: var(--color-nier-text-light);
|
||||
padding: 0.5rem;
|
||||
font-family: var(--font-terminal);
|
||||
font-size: 0.8rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
border-bottom: 2px solid var(--color-nier-border);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.info-content {
|
||||
padding: var(--card-padding);
|
||||
background: var(--color-nier-bg);
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* Add this missing keyframe animation */
|
||||
@keyframes cardFadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px) scale(0.95);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1 +1,6 @@
|
||||
<p>info-card works!</p>
|
||||
<div class="info-card">
|
||||
<div class="info-header">{{headerTitle()}}</div>
|
||||
<div class="info-content">
|
||||
<ng-content />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { Component, input, ViewEncapsulation } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-info-card',
|
||||
imports: [],
|
||||
templateUrl: './info-card.component.html',
|
||||
styleUrl: './info-card.component.css'
|
||||
styleUrl: './info-card.component.css',
|
||||
encapsulation: ViewEncapsulation.None, // Add this line
|
||||
})
|
||||
export class InfoCardComponent {
|
||||
|
||||
headerTitle = input.required<string>();
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user