Refactored info-card and detail block into wrapper reusable components

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;

src/app/pages/experience/operative-history/column-education-info/column-education-info.component.html

@@ -13,8 +13,8 @@
       </header>
 
       <div class="experience-body">
-        <app-detail-block label="PROGRAM:" [value]="training.classification"/>
+        <app-detail-block label="PROGRAM:" [value]="training.classification" />
-        <app-detail-block label="INSTITUTION:" [value]="training.timeline"/>
+        <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">
+  <app-info-card headerTitle="ACADEMIC_FOCUS">
-    <div class="info-header">ACADEMIC_FOCUS</div>
+    <p>
-    <div class="info-content">
+      Full-stack development specialization with emphasis on modern web
-      <p>Full-stack development specialization with emphasis on modern web technologies and enterprise-grade solutions.</p>
+      technologies and enterprise-grade solutions.
-    </div>
+    </p>
-  </div>
+  </app-info-card>
 </div>

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',
 })

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 {

src/app/pages/experience/operative-history/column-personal-info/column-personal-info.component.html

@@ -1,9 +1,7 @@
 <div class="column personal-column">
   <h2 class="column-title">[PERSONAL_DATA]</h2>
 
-  <div class="info-card">
+  <app-info-card headerTitle="INTERESTS">
-    <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>
@@ -16,12 +14,9 @@
       <span class="interest-label">PETS:</span>
       <span class="interest-value"> Proud Dad of 6 Guinea Pigs (You read right!)</span>
     </div>
-    </div>
+  </app-info-card>
-  </div>
 
-  <div class="info-card">
+  <app-info-card headerTitle="CORE_TRAITS">
-    <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>
@@ -30,19 +25,17 @@
       <span class="trait-item">ADAPTIVE</span>
       <span class="trait-item">SELF-LEARNER</span>
     </div>
-    </div>
+  </app-info-card>
-  </div>
 
-  <div class="info-card philosophy-card">
+  <app-info-card headerTitle="PHILOSOPHY">
-    <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>
-    </div>
+  </app-info-card>
-  </div>
+
+
 </div>
 

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',
 })

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);
+  }
+}

src/app/pages/experience/operative-history/shared/info-card/info-card.component.html

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

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<string>();
 }