changes: api integration,

components, styles, fontawesome icons added

src/app/contact-sidebar/contact-sidebar.component.html

@@ -1,21 +1,21 @@
 <aside class="sidebar" [ngClass]="sideBarExpanded ? 'active' : ''" data-sidebar>
 
-    <div class="sidebar-info">
+    <div class="sidebar-info" ng-init="let displayName = ">
 
       <figure class="avatar-box">
-        <img src="./assets/images/my-avatar.png" alt="Richard hanrick" width="80">
+        <img src="./assets/images/my-avatar.png" alt="{{model.candidate?.displayName}}" width="80">
       </figure>
 
       <div class="info-content">
-        <h1 class="name" title="Richard hanrick">Richard hanrick</h1>
+        <h1 class="name" title="{{model.candidate?.displayName}}">{{model.candidate?.displayName}}</h1>
 
-        <p class="title">Web developer</p>
+        <p class="title">{{model.title}}</p>
       </div>
 
       <button class="info_more-btn" (click)="sideBarExpanded = !sideBarExpanded" data-sidebar-btn>
         <span>Show Contacts</span>
 
-        <ion-icon name="chevron-down"></ion-icon>
+        <i class="fa-regular fa-chevron-down"></i>
       </button>
 
     </div>
@@ -29,13 +29,13 @@
         <li class="contact-item">
 
           <div class="icon-box">
-            <ion-icon name="mail-outline"></ion-icon>
+            <i class="fa-light fa-envelope"></i>
           </div>
 
           <div class="contact-info">
             <p class="contact-title">Email</p>
 
-            <a href="mailto:richard@example.com" class="contact-link">richard.gmail.com</a>
+            <a href="mailto:richard@example.com" class="contact-link">{{model.candidate?.email}}</a>
           </div>
 
         </li>
@@ -43,13 +43,13 @@
         <li class="contact-item">
 
           <div class="icon-box">
-            <ion-icon name="phone-portrait-outline"></ion-icon>
+            <i class="fa-light fa-mobile-notch"></i>
           </div>
 
           <div class="contact-info">
             <p class="contact-title">Phone</p>
 
-            <a href="tel:+12133522795" class="contact-link">+1 (213) 352-2795</a>
+            <a href="tel:+12133522795" class="contact-link">{{model.candidate?.phone}}</a>
           </div>
 
         </li>
@@ -57,13 +57,13 @@
         <li class="contact-item">
 
           <div class="icon-box">
-            <ion-icon name="calendar-outline"></ion-icon>
+            <i class="fa-regular fa-cake-candles"></i>
           </div>
 
           <div class="contact-info">
             <p class="contact-title">Birthday</p>
 
-            <time datetime="1982-06-23">June 23, 1982</time>
+            <time>{{model.candidate?.dob}}</time>
           </div>
 
         </li>
@@ -71,13 +71,13 @@
         <li class="contact-item">
 
           <div class="icon-box">
-            <ion-icon name="location-outline"></ion-icon>
+            <i class="fa-light fa-location-dot"></i>
           </div>
 
           <div class="contact-info">
             <p class="contact-title">Location</p>
 
-            <address>Sacramento, California, USA</address>
+            <address>{{model.candidate?.address}}</address>
           </div>
 
         </li>
@@ -89,32 +89,20 @@
       <ul class="social-list">
 
         <li class="social-item">
-            <a href="#" class="social-link">
-              <ion-icon name="logo-linkedin"></ion-icon>
+            <a href="{{model.socialLinks?.linkedin}}" target="_blank" class="social-link">
+              <i class="fa-brands fa-linkedin"></i>
             </a>
           </li>
 
           <li class="social-item">
-            <a href="#" class="social-link">
-              <ion-icon name="logo-github"></ion-icon>
+            <a href="{{model.socialLinks?.gitHub}}" target="_blank" class="social-link">
+              <i class="fa-brands fa-github"></i>
             </a>
           </li>
 
         <li class="social-item">
-          <a href="#" class="social-link">
-            <ion-icon name="logo-facebook"></ion-icon>
-          </a>
-        </li>
-
-        <li class="social-item">
-          <a href="#" class="social-link">
-            <ion-icon name="logo-twitter"></ion-icon>
-          </a>
-        </li>
-
-        <li class="social-item">
-          <a href="#" class="social-link">
-            <ion-icon name="logo-instagram"></ion-icon>
+          <a href="{{model.socialLinks?.blogUrl}}" target="_blank" class="social-link">
+            <i class="fa-duotone fa-blog"></i>
           </a>
         </li>
       </ul>

src/app/contact-sidebar/contact-sidebar.component.ts

@@ -1,11 +1,24 @@
-import { Component } from '@angular/core';
+import { AfterViewInit, Component, OnInit } from '@angular/core';
+import { BaseComponent } from '../base/base.component';
+import { CvService } from '../services/cv.service';
+import { ISideBar } from './side-bar.model';
+import { ICv } from '../models/cv.model';
 
 @Component({
   selector: 'app-contact-sidebar',
   templateUrl: './contact-sidebar.component.html',
   styleUrl: './contact-sidebar.component.scss'
 })
-export class ContactSidebarComponent {
+export class ContactSidebarComponent extends BaseComponent<ISideBar> implements OnInit {
   sideBarExpanded: boolean = false;
-
+  displayName!: string;
+  constructor(svc: CvService){
+    super(svc);
+  }
+  
+  ngOnInit(): void {
+    this.svc.baseSubject.subscribe((resume: ICv | unknown) =>{
+      this.assignData(resume);
+    });
+  }
 }

src/app/contact-sidebar/side-bar.model.ts

@@ -0,0 +1,8 @@
+import { ICandidate } from "../models/candidate.model";
+import { ISocialLinks } from "../models/social-links.model";
+
+export interface ISideBar{
+    title: string;
+    candidate?: ICandidate;
+    socialLinks?: ISocialLinks;
+}