diff --git a/src/app/pages/experience/operative-history/column-education-info/column-education-info.component.css b/src/app/pages/experience/operative-history/column-education-info/column-education-info.component.css index 4892b79..3338ef6 100644 --- a/src/app/pages/experience/operative-history/column-education-info/column-education-info.component.css +++ b/src/app/pages/experience/operative-history/column-education-info/column-education-info.component.css @@ -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; diff --git a/src/app/pages/experience/operative-history/column-education-info/column-education-info.component.html b/src/app/pages/experience/operative-history/column-education-info/column-education-info.component.html index 07f6f1a..bf05e53 100644 --- a/src/app/pages/experience/operative-history/column-education-info/column-education-info.component.html +++ b/src/app/pages/experience/operative-history/column-education-info/column-education-info.component.html @@ -13,8 +13,8 @@
- - + +
CURRICULUM:
@@ -29,10 +29,10 @@ } -
-
ACADEMIC_FOCUS
-
-

Full-stack development specialization with emphasis on modern web technologies and enterprise-grade solutions.

-
-
+ +

+ Full-stack development specialization with emphasis on modern web + technologies and enterprise-grade solutions. +

+
diff --git a/src/app/pages/experience/operative-history/column-education-info/column-education-info.component.ts b/src/app/pages/experience/operative-history/column-education-info/column-education-info.component.ts index 67541c1..c74460f 100644 --- a/src/app/pages/experience/operative-history/column-education-info/column-education-info.component.ts +++ b/src/app/pages/experience/operative-history/column-education-info/column-education-info.component.ts @@ -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', }) diff --git a/src/app/pages/experience/operative-history/column-personal-info/column-personal-info.component.css b/src/app/pages/experience/operative-history/column-personal-info/column-personal-info.component.css index 3cc1896..0c2f785 100644 --- a/src/app/pages/experience/operative-history/column-personal-info/column-personal-info.component.css +++ b/src/app/pages/experience/operative-history/column-personal-info/column-personal-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 { diff --git a/src/app/pages/experience/operative-history/column-personal-info/column-personal-info.component.html b/src/app/pages/experience/operative-history/column-personal-info/column-personal-info.component.html index 6978243..ac70586 100644 --- a/src/app/pages/experience/operative-history/column-personal-info/column-personal-info.component.html +++ b/src/app/pages/experience/operative-history/column-personal-info/column-personal-info.component.html @@ -1,48 +1,41 @@

[PERSONAL_DATA]

-
-
INTERESTS
-
-
- READINGS: - Science Fiction, Philosophy, Fantasy -
-
- INTERESTS: - Digital & Tabletop Games, Hiking, Drawing -
-
- PETS: - Proud Dad of 6 Guinea Pigs (You read right!) -
+ +
+ READINGS: + Science Fiction, Philosophy, Fantasy
-
+
+ INTERESTS: + Digital & Tabletop Games, Hiking, Drawing +
+
+ PETS: + Proud Dad of 6 Guinea Pigs (You read right!) +
+ -
-
CORE_TRAITS
-
-
- CURIOUS - PERSISTENT - ANALYTICAL - CREATIVE - ADAPTIVE - SELF-LEARNER -
+ +
+ CURIOUS + PERSISTENT + ANALYTICAL + CREATIVE + ADAPTIVE + SELF-LEARNER
-
+ -
-
PHILOSOPHY
-
-

- "The most elegant code emerges from understanding both the technical substrate and the consciousness it serves." -

-
- {{ personalNote() }} -
+ +

+ "The most elegant code emerges from understanding both the technical substrate and the consciousness it serves." +

+
+ {{ personalNote() }}
-
+ + +
diff --git a/src/app/pages/experience/operative-history/column-personal-info/column-personal-info.component.ts b/src/app/pages/experience/operative-history/column-personal-info/column-personal-info.component.ts index be49a5e..7d44048 100644 --- a/src/app/pages/experience/operative-history/column-personal-info/column-personal-info.component.ts +++ b/src/app/pages/experience/operative-history/column-personal-info/column-personal-info.component.ts @@ -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', }) diff --git a/src/app/pages/experience/operative-history/shared/info-card/info-card.component.css b/src/app/pages/experience/operative-history/shared/info-card/info-card.component.css index e69de29..ca5e046 100644 --- a/src/app/pages/experience/operative-history/shared/info-card/info-card.component.css +++ b/src/app/pages/experience/operative-history/shared/info-card/info-card.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); + } +} diff --git a/src/app/pages/experience/operative-history/shared/info-card/info-card.component.html b/src/app/pages/experience/operative-history/shared/info-card/info-card.component.html index 41f7c99..1674573 100644 --- a/src/app/pages/experience/operative-history/shared/info-card/info-card.component.html +++ b/src/app/pages/experience/operative-history/shared/info-card/info-card.component.html @@ -1 +1,6 @@ -

info-card works!

+
+
{{headerTitle()}}
+
+ +
+
diff --git a/src/app/pages/experience/operative-history/shared/info-card/info-card.component.ts b/src/app/pages/experience/operative-history/shared/info-card/info-card.component.ts index c0dbe0c..b5946e9 100644 --- a/src/app/pages/experience/operative-history/shared/info-card/info-card.component.ts +++ b/src/app/pages/experience/operative-history/shared/info-card/info-card.component.ts @@ -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(); }