Refactored detail-block into shared component

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

@@ -125,44 +125,6 @@
   text-shadow: 0 1px 2px rgba(0,0,0,0.1);
 }
 
-/* Detail Blocks */
-.detail-block {
-  margin-bottom: var(--card-gap);
-  padding: 0.25rem;
-  border-left: 2px solid transparent;
-  transition: border-color 0.3s ease, padding-left 0.3s ease;
-}
-
-.detail-block:hover {
-  border-left-color: var(--color-nier-accent);
-  padding-left: 0.5rem;
-}
-
-.detail-label {
-  font-family: var(--font-terminal);
-  font-size: 0.75rem;
-  color: var(--color-nier-text-dark);
-  font-weight: 500;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  display: block;
-  margin-bottom: 0.25rem;
-  opacity: 0.8;
-  transition: opacity 0.3s ease;
-}
-
-.detail-block:hover .detail-label {
-  opacity: 1;
-}
-
-.detail-value {
-  font-family: var(--font-noto-jp);
-  color: var(--color-nier-text-dark);
-  font-size: 0.85rem;
-  line-height: 1.4;
-  display: block;
-}
-
 /* Tech Stack Section */
 .tech-section {
   margin-top: var(--card-gap);

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

@@ -13,15 +13,8 @@
       </header>
 
       <div class="experience-body">
-        <div class="detail-block">
+        <app-detail-block label="PROGRAM:" [value]="training.classification"/>
-          <span class="detail-label">PROGRAM:</span>
+        <app-detail-block label="INSTITUTION:" [value]="training.timeline"/>
-          <span class="detail-value">{{ training.classification }}</span>
-        </div>
-
-        <div class="detail-block">
-          <span class="detail-label">INSTITUTION:</span>
-          <span class="detail-value">{{ training.timeline }}</span>
-        </div>
 
         <div class="tech-section">
           <div class="detail-label">CURRICULUM:</div>

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

@@ -1,9 +1,10 @@
 import { Component, signal } from '@angular/core';
 import { type Experience } from '../../../../shared/models/experience.model';
+import { DetailBlockComponent } from '../shared/detail-block/detail-block.component';
 
 @Component({
   selector: 'app-column-education-info',
-  imports: [],
+  imports: [DetailBlockComponent],
   templateUrl: './column-education-info.component.html',
   styleUrl: './column-education-info.component.css',
 })

src/app/pages/experience/operative-history/column-professional-info/column-professional-info.component.css

@@ -150,44 +150,6 @@
   color: var(--color-nier-text-light);
 }
 
-/* Detail Blocks */
-.detail-block {
-  margin-bottom: var(--card-gap);
-  padding: 0.25rem;
-  border-left: 2px solid transparent;
-  transition: border-color 0.3s ease, padding-left 0.3s ease;
-}
-
-.detail-block:hover {
-  border-left-color: var(--color-nier-accent);
-  padding-left: 0.5rem;
-}
-
-.detail-label {
-  font-family: var(--font-terminal);
-  font-size: 0.75rem;
-  color: var(--color-nier-text-dark);
-  font-weight: 500;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  display: block;
-  margin-bottom: 0.25rem;
-  opacity: 0.8;
-  transition: opacity 0.3s ease;
-}
-
-.detail-block:hover .detail-label {
-  opacity: 1;
-}
-
-.detail-value {
-  font-family: var(--font-noto-jp);
-  color: var(--color-nier-text-dark);
-  font-size: 0.85rem;
-  line-height: 1.4;
-  display: block;
-}
-
 /* Tech Stack Section */
 .tech-section {
   margin-top: var(--card-gap);

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

@@ -22,15 +22,8 @@
         </header>
 
         <div class="experience-body">
-          <div class="detail-block">
+          <app-detail-block label="CLASSIFICATION:" [value]="experience.classification"/>
-            <span class="detail-label">CLASSIFICATION:</span>
+          <app-detail-block label="TIMELINE:" [value]="experience.timeline"/>
-            <span class="detail-value">{{ experience.classification }}</span>
-          </div>
-
-          <div class="detail-block">
-            <span class="detail-label">TIMELINE:</span>
-            <span class="detail-value">{{ experience.timeline }}</span>
-          </div>
 
           <div class="tech-section">
             <div class="detail-label">TECH_STACK:</div>

src/app/pages/experience/operative-history/column-professional-info/column-professional-info.component.ts

@@ -1,9 +1,10 @@
 import { Component, signal } from '@angular/core';
 import { Experience } from '../../../../shared/models/experience.model';
+import { DetailBlockComponent } from '../shared/detail-block/detail-block.component';
 
 @Component({
   selector: 'app-column-professional-info',
-  imports: [],
+  imports: [DetailBlockComponent],
   templateUrl: './column-professional-info.component.html',
   styleUrl: './column-professional-info.component.css',
 })

src/app/pages/experience/operative-history/shared/detail-block/detail-block.component.css

@@ -0,0 +1,36 @@
+.detail-block {
+  margin-bottom: var(--card-gap);
+  padding: 0.25rem;
+  border-left: 2px solid transparent;
+  transition: border-color 0.3s ease, padding-left 0.3s ease;
+}
+
+.detail-block:hover {
+  border-left-color: var(--color-nier-accent);
+  padding-left: 0.5rem;
+}
+
+.detail-label {
+  font-family: var(--font-terminal);
+  font-size: 0.75rem;
+  color: var(--color-nier-text-dark);
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  display: block;
+  margin-bottom: 0.25rem;
+  opacity: 0.8;
+  transition: opacity 0.3s ease;
+}
+
+.detail-block:hover .detail-label {
+  opacity: 1;
+}
+
+.detail-value {
+  font-family: var(--font-noto-jp);
+  color: var(--color-nier-text-dark);
+  font-size: 0.85rem;
+  line-height: 1.4;
+  display: block;
+}

src/app/pages/experience/operative-history/shared/detail-block/detail-block.component.html

@@ -0,0 +1,4 @@
+<div class="detail-block">
+  <span class="detail-label">{{ label()}}</span>
+  <span class="detail-value">{{ value() }}</span>
+</div>

src/app/pages/experience/operative-history/shared/detail-block/detail-block.component.ts

@@ -0,0 +1,12 @@
+import { Component, input } from '@angular/core';
+
+@Component({
+  selector: 'app-detail-block',
+  imports: [],
+  templateUrl: './detail-block.component.html',
+  styleUrl: './detail-block.component.css',
+})
+export class DetailBlockComponent {
+  label = input<string>();
+  value = input<string>();
+}

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

@@ -0,0 +1 @@
+<p>info-card works!</p>

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

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-info-card',
+  imports: [],
+  templateUrl: './info-card.component.html',
+  styleUrl: './info-card.component.css'
+})
+export class InfoCardComponent {
+
+}