refactor existing cards to 2 new card components

axherrm · Jan 6, 2024 · b907846 · b907846
1 parent cd546af
commit b907846
Show file tree

Hide file tree

Showing 11 changed files with 138 additions and 74 deletions.
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -30,47 +30,33 @@ <h2 id="main-subheading">Software Engineer</h2>
   </div>
 
   <div style="text-align: center">
-    <p-card #education_card styleClass="border-dark" [style]="{'width': '80%', 'display': 'inline-block', 'margin-bottom': '5vh'}">
-      <ng-template pTemplate="content">
-        <h1 style="margin: 0">{{ dataService.languagePack.education }}</h1>
-      </ng-template>
-    </p-card>
+    <heading-card #education_card [heading]="dataService.languagePack.education" type="light"></heading-card>
     <p-timeline id="eduction-tl" [value]="dataService.education" align="alternate" [style]="{'width': '70%', 'display': 'inline-block'}">
       <ng-template pTemplate="marker">
         <span class="dot"></span>
       </ng-template>
       <ng-template pTemplate="content" let-educationItem>
-        <p-card [header]="educationItem.heading" [subheader]="educationItem.subheading" styleClass="timeline-card-education">
-          <p [innerHTML]="educationItem.content" style="margin-bottom: 0"></p>
-          <p *ngIf="educationItem.bulletPoints" style="margin-bottom: 0">
-            <p-badge *ngFor="let bulletPoint of educationItem.bulletPoints" [value]="bulletPoint" [style]="{'margin': '0 0.3vh', 'background': 'rgba(75,85,93,0.7)'}"></p-badge>
-          </p>
-        </p-card>
+        <timeline-card type="light" [heading]="educationItem.heading" [subheading]="educationItem.subheading"
+                       [content]="educationItem.content" [bulletPoints]="educationItem.bulletPoints">
+        </timeline-card>
       </ng-template>
       <ng-template pTemplate="opposite" let-educationItem>
-        <p-badge [value]="educationItem.date" size="large" styleClass="timeline-date-education"></p-badge>
+        <p-badge [value]="educationItem.date" size="large" styleClass="timeline-date-dark"></p-badge>
       </ng-template>
     </p-timeline>
 
-    <p-card #experience_card styleClass="border-bright" [style]="{'width': '80%', 'display': 'inline-block', 'margin-bottom': '5vh', 'background': 'rgb(75,75,75)', 'color': 'white'}">
-      <ng-template pTemplate="content">
-        <h1 style="margin: 0">{{ dataService.languagePack.experience }}</h1>
-      </ng-template>
-    </p-card>
+    <heading-card #experience_card [heading]="dataService.languagePack.experience" type="dark"></heading-card>
     <p-timeline id="experience-tl" [value]="dataService.experience" align="alternate" [style]="{'width': '70%', 'display': 'inline-block'}">
       <ng-template pTemplate="marker">
         <span class="dot"></span>
       </ng-template>
       <ng-template pTemplate="content" let-experienceItem>
-        <p-card [header]="experienceItem.heading" [subheader]="experienceItem.subheading" styleClass="timeline-card-experience">
-          <p [innerHTML]="experienceItem.content" style="margin-bottom: 0"></p>
-          <p *ngIf="experienceItem.skills" style="margin-bottom: 0">
-            <p-badge *ngFor="let skill of experienceItem.skills" [value]="skill" [style]="{'margin': '0 0.3vh', 'background': 'rgba(75,85,93,0.7)'}"></p-badge>
-          </p>
-        </p-card>
+        <timeline-card type="dark" [heading]="experienceItem.heading" [subheading]="experienceItem.subheading"
+                       [content]="experienceItem.content" [bulletPoints]="experienceItem.skills">
+        </timeline-card>
       </ng-template>
       <ng-template pTemplate="opposite" let-experienceItem>
-        <p-badge [value]="experienceItem.date" size="large" styleClass="timeline-date-experience"></p-badge>
+        <p-badge [value]="experienceItem.date" size="large" styleClass="timeline-date-light"></p-badge>
       </ng-template>
     </p-timeline>
   </div>

diff --git a/src/app/app.component.scss b/src/app/app.component.scss
@@ -38,56 +38,15 @@
     }
   }
 
-  .p-card-content {
-    padding: 0;
-  }
-
-  .border-dark {
-    border: 1px solid #232323;
-  }
-
-  .border-bright {
-    border: 1px solid #7a7a7a;
-  }
-
-  .background-dark {
-    background: rgba(75,75,75,0.9);
-  }
-
-  .background-white {
-    background: rgba(255,255,255,0.8);
-  }
-
-  .timeline-card-education {
-    @extend .border-dark;
-    @extend .background-white;
-    margin-bottom: 3vh;
-  }
-
-  .timeline-date-education {
-    @extend .border-bright;
-    @extend .background-dark;
-  }
-
-  .timeline-card-experience {
-    @extend .border-bright;
-    @extend .background-dark;
-    margin-bottom: 3vh;
-    color: #dcdcdc;
-
-    &> div.p-card-body > div.p-card-title {
-      color: white;
-    }
-
-    &> div.p-card-body > div.p-card-subtitle {
-      color: #ffffff;
-    }
+  .timeline-date-light {
+    background: var(--background-light);
+    border: var(--border-dark);
+    color: #4B5563;
   }
 
-  .timeline-date-experience {
-    @extend .border-dark;
-    @extend .background-white;
-    color: #4B5563;
+  .timeline-date-dark {
+    background: var(--background-dark);
+    border: var(--border-light);
   }
 
 }
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -8,13 +8,15 @@ import gsap from 'gsap';
 import {ScrollTrigger} from "gsap/ScrollTrigger";
 import {DataService} from "./data/data.service";
 import {SpeedDialModule} from "primeng/speeddial";
+import {TimelineCardComponent} from "./components/timeline-card/timeline-card.component";
+import {HeadingCardComponent} from "./components/heading-card/heading-card.component";
 
 gsap.registerPlugin(ScrollTrigger);
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [CommonModule, NgOptimizedImage, TimelineModule, CardModule, ButtonModule, BadgeModule, SpeedDialModule],
+  imports: [CommonModule, NgOptimizedImage, TimelineModule, CardModule, ButtonModule, BadgeModule, SpeedDialModule, TimelineCardComponent, HeadingCardComponent],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss'
 })

diff --git a/src/app/components/heading-card/heading-card.component.html b/src/app/components/heading-card/heading-card.component.html
@@ -0,0 +1,5 @@
+<p-card [styleClass]="type==='light' ? 'heading-card-light' : 'heading-card-dark'">
+  <ng-template pTemplate="content">
+    <h1 style="margin: 0">{{ heading }}</h1>
+  </ng-template>
+</p-card>
diff --git a/src/app/components/heading-card/heading-card.component.scss b/src/app/components/heading-card/heading-card.component.scss
@@ -0,0 +1,21 @@
+:host ::ng-deep {
+  .p-card-content {
+    padding: 0;
+  }
+
+  .heading-card {
+    width: 80%;
+    display: inline-block;
+    margin-bottom: 5vh;
+  }
+
+  .heading-card-light {
+    @extend .heading-card;
+  }
+
+  .heading-card-dark {
+    @extend .heading-card;
+    background: rgb(75,75,75);
+    color: white;
+  }
+}
diff --git a/src/app/components/heading-card/heading-card.component.ts b/src/app/components/heading-card/heading-card.component.ts
@@ -0,0 +1,19 @@
+import {Component, Input} from '@angular/core';
+import {CardModule} from "primeng/card";
+
+@Component({
+  selector: 'heading-card',
+  standalone: true,
+  imports: [
+    CardModule
+  ],
+  templateUrl: './heading-card.component.html',
+  styleUrl: './heading-card.component.scss'
+})
+export class HeadingCardComponent {
+
+  @Input() heading: string;
+
+  @Input() type?: "light" | "dark" = "dark";
+
+}
diff --git a/src/app/components/timeline-card/timeline-card.component.html b/src/app/components/timeline-card/timeline-card.component.html
@@ -0,0 +1,8 @@
+<p-card [header]="heading" [subheader]="subheading"
+        [styleClass]="type==='light'? 'timeline-card-light' : 'timeline-card-dark'">
+  <div [innerHTML]="content" style="margin-top: 1rem"></div>
+  <div *ngIf="bulletPoints" style="margin-top: 1rem">
+    <p-badge *ngFor="let bulletPoint of bulletPoints" [value]="bulletPoint"
+             [style]="{'margin': '0 0.3vh', 'background': 'rgba(75,85,93,0.7)'}"></p-badge>
+  </div>
+</p-card>
diff --git a/src/app/components/timeline-card/timeline-card.component.scss b/src/app/components/timeline-card/timeline-card.component.scss
@@ -0,0 +1,30 @@
+:host ::ng-deep {
+  .p-card-content {
+    padding: 0;
+  }
+
+  .timeline-card {
+    margin-bottom: 3vh;
+  }
+
+  .timeline-card-light {
+    @extend .timeline-card;
+    border: var(--border-dark);
+    background: var(--background-light);
+  }
+
+  .timeline-card-dark {
+    @extend .timeline-card;
+    border: var(--border-light);
+    background: var(--background-dark);
+    color: #dcdcdc;
+
+    & > div.p-card-body > div.p-card-title {
+      color: white;
+    }
+
+    & > div.p-card-body > div.p-card-subtitle {
+      color: #ffffff;
+    }
+  }
+}
diff --git a/src/app/components/timeline-card/timeline-card.component.ts b/src/app/components/timeline-card/timeline-card.component.ts
@@ -0,0 +1,28 @@
+import {Component, Input} from '@angular/core';
+import {CardModule} from "primeng/card";
+import {BadgeModule} from "primeng/badge";
+import {NgClass, NgForOf, NgIf} from "@angular/common";
+
+@Component({
+  selector: 'timeline-card',
+  standalone: true,
+  imports: [
+    CardModule,
+    BadgeModule,
+    NgIf,
+    NgForOf,
+    NgClass
+  ],
+  templateUrl: './timeline-card.component.html',
+  styleUrl: './timeline-card.component.scss'
+})
+export class TimelineCardComponent {
+
+  @Input() heading: string;
+  @Input() subheading: string;
+  @Input() content: string;
+  @Input() bulletPoints?: string[];
+
+  @Input() type?: "light" | "dark" = "light";
+
+}
diff --git a/src/app/data/model.ts b/src/app/data/model.ts
@@ -3,10 +3,11 @@ export interface TimelineItem {
   subheading: string;
   date: string;
   content: string;
+  bulletPoints?: string[];
 }
 
 export interface EducationItem extends TimelineItem {
-  bulletPoints?: string[];
+
 }
 
 export interface ExperienceItem extends TimelineItem {

diff --git a/src/styles.scss b/src/styles.scss
@@ -36,6 +36,11 @@ html {
   .text-color-grey-dark-2 { color: var(--color-grey-dark-2); }
   .text-color-grey-medium-1 { color: var(--color-grey-medium-1); }
   .color-white-darker { color: var(--color-white-darker); }
+
+  --border-light: 1px solid #7a7a7a;
+  --border-dark: 1px solid #232323;
+  --background-light: rgba(255, 255, 255, 0.8);
+  --background-dark: rgba(75, 75, 75, 0.9);
 }
 
 .text {