changes: api integration,

components, styles, fontawesome icons added

angular.json

@@ -68,7 +68,8 @@
               "buildTarget": "my-portfolio:build:production"
             },
             "development": {
-              "buildTarget": "my-portfolio:build:development"
+              "buildTarget": "my-portfolio:build:development",
+              "proxyConfig": "src/proxy.conf.json"
             }
           },
           "defaultConfiguration": "development"

src/app/about/about.component.html

@@ -4,19 +4,9 @@
     </header>
     
     <section class="about-text">
-      <p>
+      <pre class="text-style">
-        I'm Creative Director and UI/UX Designer from Sydney, Australia, working in web development and print media.
+        {{model.about}}
-        I enjoy
+      </pre>
-        turning complex problems into simple, beautiful and intuitive designs.
-      </p>
-    
-      <p>
-        My job is to build your website so that it is functional and user-friendly but at the same time attractive.
-        Moreover, I
-        add personal touch to your product and make sure that is eye-catching and easy to use. My aim is to bring
-        across your
-        message and identity in the most creative way. I created web design for many famous brand companies.
-      </p>
     </section>
     
     
@@ -26,75 +16,22 @@
     
     <section class="service">
     
-      <h3 class="h3 service-title">What i'm doing</h3>
+      <h3 class="h3 service-title">Interests</h3>
     
       <ul class="service-list">
 
-        <li class="service-item">
+        <li class="service-item" *ngFor="let hobby of model.hobbies">
-    
           <div class="service-icon-box">
-            <img src="./assets/images/icon-design.svg
+            <i class="fa-regular fa-2x " [ngClass]="hobby.icon"></i>  
-            " alt="design icon" width="40">
           </div>
-    
           <div class="service-content-box">
-            <h4 class="h4 service-item-title">Web design</h4>
+            <h4 class="h4 service-item-title">{{hobby.name}}</h4>
     
             <p class="service-item-text">
-              The most modern and high-quality design made at a professional level.
+              {{hobby.description}}
             </p>
           </div>
-    
         </li>
-    
-        <li class="service-item">
-    
-          <div class="service-icon-box">
-            <img src="./assets/images/icon-dev.svg" alt="Web development icon" width="40">
-          </div>
-    
-          <div class="service-content-box">
-            <h4 class="h4 service-item-title">Web development</h4>
-    
-            <p class="service-item-text">
-              High-quality development of sites at the professional level.
-            </p>
-          </div>
-    
-        </li>
-    
-        <li class="service-item">
-    
-          <div class="service-icon-box">
-            <img src="./assets/images/icon-app.svg" alt="mobile app icon" width="40">
-          </div>
-    
-          <div class="service-content-box">
-            <h4 class="h4 service-item-title">Mobile apps</h4>
-    
-            <p class="service-item-text">
-              Professional development of applications for iOS and Android.
-            </p>
-          </div>
-    
-        </li>
-    
-        <li class="service-item">
-    
-          <div class="service-icon-box">
-            <img src="./assets/images/icon-photo.svg" alt="camera icon" width="40">
-          </div>
-    
-          <div class="service-content-box">
-            <h4 class="h4 service-item-title">Photography</h4>
-    
-            <p class="service-item-text">
-              I make high-quality photos of any category at a professional level.
-            </p>
-          </div>
-    
-        </li>
-    
       </ul>
     
     </section>

src/app/about/about.component.scss

@@ -0,0 +1,4 @@
+.text-style {
+    white-space: pre-line;
+    font-family: var(--ff-poppins);
+}

src/app/about/about.component.ts

@@ -1,10 +1,19 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { CvService } from '../services/cv.service';
+import { IAbout } from './about.model';
+import { BaseComponent } from '../base/base.component';
 
 @Component({
   selector: 'app-about',
   templateUrl: './about.component.html',
   styleUrl: './about.component.scss'
 })
-export class AboutComponent {
+export class AboutComponent extends BaseComponent<IAbout> implements OnInit {
+  constructor(svc: CvService){
+    super(svc);
+  }
 
+  ngOnInit(): void {
+    this.init();
+  }
 }

src/app/about/about.model.ts

@@ -0,0 +1,6 @@
+import { IHobby } from "../models/hobby.model";
+
+export interface IAbout{
+    about: string;
+    hobbies: IHobby[];
+}

src/app/app-routing.module.ts

@@ -2,17 +2,16 @@ import { NgModule } from '@angular/core';
 import { AboutComponent } from './about/about.component';
 import { RouterModule, Routes } from '@angular/router';
 import { ResumeComponent } from './resume/resume.component';
-import { PortfolioComponent } from './portfolio/portfolio.component';
+import { ProjectsComponent } from './projects/projects.component';
 import { BlogComponent } from './blog/blog.component';
 import { ContactComponent } from './contact/contact.component';
 
 const routes: Routes = [
-  { path: 'about', component: AboutComponent, title: "About" },
+  { path: '', component: AboutComponent, title: "Bangara Raju" },
-  { path: 'resume', component: ResumeComponent, title: "Resume" },
+  { path: 'resume', component: ResumeComponent, title: "Bangara Raju - Resume" },
-  { path: 'portfolio', component: PortfolioComponent, title: "Portfolio" },
+  { path: 'projects', component: ProjectsComponent, title: "Bangara Raju - Projects" },
-  { path: 'blog', component: BlogComponent, title: "Blog" },
+  { path: 'blog-posts', component: BlogComponent, title: "Bangara Raju - Posts" },
-  { path: 'contact', component: ContactComponent, title: "Contact" },
+  { path: 'contact', component: ContactComponent, title: "Bangara Raju - Contact" }
-  { path: '', redirectTo: '/about', pathMatch: 'full'}
 ];
 
 @NgModule({

src/app/app.module.ts

@@ -6,10 +6,11 @@ import { ContactSidebarComponent } from './contact-sidebar/contact-sidebar.compo
 import { NavbarComponent } from './navbar/navbar.component';
 import { AboutComponent } from './about/about.component';
 import { ResumeComponent } from './resume/resume.component';
-import { PortfolioComponent } from './portfolio/portfolio.component';
+import { ProjectsComponent } from './projects/projects.component';
 import { BlogComponent } from './blog/blog.component';
 import { ContactComponent } from './contact/contact.component';
 import { AppRoutingModule } from './app-routing.module';
+import { HttpClientModule } from '@angular/common/http';
 
 @NgModule({
   declarations: [
@@ -18,12 +19,13 @@ import { AppRoutingModule } from './app-routing.module';
     NavbarComponent,
     AboutComponent,
     ResumeComponent,
-    PortfolioComponent,
+    ProjectsComponent,
     BlogComponent,
     ContactComponent
   ],
   imports: [
     BrowserModule,
+    HttpClientModule,
     AppRoutingModule
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],

src/app/base/base.component.ts

@@ -0,0 +1,21 @@
+import { ICv } from "../models/cv.model";
+import { CvService } from "../services/cv.service";
+
+export abstract class BaseComponent<T extends object> {
+    public model: T = <T>{};
+    candidateId: number = 1;
+    constructor(public svc: CvService) {
+    }
+
+    init(): void {
+        this.svc.getCv(this.candidateId).subscribe((response) => {
+            this.svc.resume = response;
+            this.assignData(response);
+            this.svc.baseSubject.next(response);
+        });
+    }
+
+    assignData(response: Partial<ICv> | unknown){
+        Object.assign(this.model, response);
+    }
+}

src/app/blog/blog.component.html

@@ -1,7 +1,7 @@
 <article class="blog" data-page="blog">
 
     <header>
-      <h2 class="h2 article-title">Blog</h2>
+      <h2 class="h2 article-title">Posts</h2>
     </header>
 
     <section class="blog-posts">

src/app/blog/blog.component.ts

@@ -1,10 +1,19 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { CvService } from '../services/cv.service';
+import { ISideBar } from '../contact-sidebar/side-bar.model';
+import { BaseComponent } from '../base/base.component';
 
 @Component({
   selector: 'app-blog',
   templateUrl: './blog.component.html',
   styleUrl: './blog.component.scss'
 })
-export class BlogComponent {
+export class BlogComponent extends BaseComponent<ISideBar> implements OnInit{
+  constructor(svc: CvService){
+    super(svc);
+  }
 
+  ngOnInit(): void {
+    this.init();
+  }
 }

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">
+            <a href="{{model.socialLinks?.linkedin}}" target="_blank" class="social-link">
-              <ion-icon name="logo-linkedin"></ion-icon>
+              <i class="fa-brands fa-linkedin"></i>
             </a>
           </li>
 
           <li class="social-item">
-            <a href="#" class="social-link">
+            <a href="{{model.socialLinks?.gitHub}}" target="_blank" class="social-link">
-              <ion-icon name="logo-github"></ion-icon>
+              <i class="fa-brands fa-github"></i>
             </a>
           </li>
 
         <li class="social-item">
-          <a href="#" class="social-link">
+          <a href="{{model.socialLinks?.blogUrl}}" target="_blank" class="social-link">
-            <ion-icon name="logo-facebook"></ion-icon>
+            <i class="fa-duotone fa-blog"></i>
-          </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>
         </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;
+}

src/app/contact/contact.component.html

@@ -27,7 +27,7 @@
         <textarea name="message" class="form-input" placeholder="Your Message" required data-form-input></textarea>
 
         <button class="form-btn" type="submit" disabled data-form-btn>
-          <ion-icon name="paper-plane"></ion-icon>
+          <i class="fa-regular fa-paper-plane"></i>
           <span>Send Message</span>
         </button>
 

src/app/contact/contact.component.ts

@@ -1,10 +1,19 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { BaseComponent } from '../base/base.component';
+import { CvService } from '../services/cv.service';
+import { ISideBar } from '../contact-sidebar/side-bar.model';
 
 @Component({
   selector: 'app-contact',
   templateUrl: './contact.component.html',
   styleUrl: './contact.component.scss'
 })
-export class ContactComponent {
+export class ContactComponent extends BaseComponent<ISideBar> implements OnInit{
+  constructor(svc: CvService){
+    super(svc);
+  }
 
+  ngOnInit(): void {
+    this.init();
+  }
 }

src/app/models/academic.model.ts

@@ -0,0 +1,9 @@
+export interface IAcademic{
+    academicId: number;
+    institution: string;
+    startYear: number;
+    endYear: number;
+    degree: string;
+    period: string;
+    degreeSpecialization: string;
+}

src/app/models/candidate.model.ts

@@ -0,0 +1,10 @@
+export interface ICandidate{
+    firstName: string;
+    lastName: string;
+    dob: string;
+    email: string;
+    phone: string;
+    address: string;
+    avatar: string;
+    displayName: string;
+}

src/app/models/cv.model.ts

@@ -0,0 +1,22 @@
+import { IAcademic } from "./academic.model";
+import { ICandidate } from "./candidate.model";
+import { IExperience } from "./experience.model";
+import { IHobby } from "./hobby.model";
+import { IPost } from "./post.model";
+import { IProject } from "./project.model";
+import { ISkill } from "./skill.model";
+import { ISocialLinks } from "./social-links.model";
+
+export interface ICv{
+    resumeId: number;
+    title: string;
+    about: string;
+    candidate: ICandidate;
+    socialLinks: ISocialLinks;
+    posts: IPost[];
+    academics: IAcademic[];
+    skills: ISkill[];
+    experiences: IExperience[];
+    hobbies: IHobby[];
+    projects: IProject[];
+}

src/app/models/experience-details.model.ts

@@ -0,0 +1,5 @@
+export interface IExperienceDetails{
+    id: number;
+    details: string;
+    order: number;
+}

src/app/models/experience.model.ts

@@ -0,0 +1,12 @@
+import { IExperienceDetails } from "./experience-details.model";
+
+export interface IExperience{
+    experienceId: number;
+    title: string;
+    description: string;
+    company: string;
+    startYear: string;
+    endYear: string;
+    period: string;
+    details: IExperienceDetails[];
+}

src/app/models/hobby.model.ts

@@ -0,0 +1,6 @@
+export interface IHobby{
+    hobbyId: number;
+    name: string;
+    description: string;
+    icon: string;
+}

src/app/models/post.model.ts

@@ -0,0 +1,11 @@
+export interface IPost{
+    postId: number;
+    slug: string;
+    title: string;
+    description: string;
+    category: string;
+    postUrl: string;
+    likes: number;
+    views: number;
+    comments: number;
+}

src/app/models/project.model.ts

@@ -0,0 +1,10 @@
+export interface IProject{
+    projectId: number;
+    name: string;
+    description: string;
+    category: string;
+    roles: string[];
+    responsibilities: string[];
+    technologiesUsed: string[];
+    imagePath: string;
+}

src/app/models/skill.model.ts

@@ -0,0 +1,6 @@
+export interface ISkill{
+    skillId: number;
+    name: string;
+    description: string;
+    proficiencyLevel: number;
+}

src/app/models/social-links.model.ts

@@ -0,0 +1,6 @@
+export interface ISocialLinks{
+    id: number;
+    gitHub: string;
+    linkedin: string;
+    blogUrl: string;
+}

src/app/navbar/navbar.component.html

@@ -3,7 +3,7 @@
     <ul class="navbar-list">
 
       <li class="navbar-item">
-        <button routerLink="/about" routerLinkActive="active" class="navbar-link" data-nav-link>About</button>
+        <button routerLink="" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" class="navbar-link" data-nav-link>About</button>
       </li>
 
       <li class="navbar-item">
@@ -11,11 +11,11 @@
       </li>
 
       <li class="navbar-item">
-        <button routerLink="/portfolio" routerLinkActive="active" class="navbar-link" data-nav-link>Portfolio</button>
+        <button routerLink="/projects" routerLinkActive="active" class="navbar-link" data-nav-link>Projects</button>
       </li>
 
       <li class="navbar-item">
-        <button routerLink="/blog" routerLinkActive="active" class="navbar-link" data-nav-link>Blog</button>
+        <button routerLink="/blog-posts" routerLinkActive="active" class="navbar-link" data-nav-link>Blog</button>
       </li>
 
       <li class="navbar-item">

src/app/portfolio/portfolio.component.ts

@@ -1,10 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-portfolio',
-  templateUrl: './portfolio.component.html',
-  styleUrl: './portfolio.component.scss'
-})
-export class PortfolioComponent {
-
-}

src/app/projects/projects.component.html

@@ -1,7 +1,7 @@
-<article class="portfolio" data-page="portfolio">
+<article class="projects" data-page="projects">
 
     <header>
-      <h2 class="h2 article-title">Portfolio</h2>
+      <h2 class="h2 article-title">Projects</h2>
     </header>
 
     <section class="projects">

src/app/projects/projects.component.spec.ts

@@ -1,6 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { PortfolioComponent } from './portfolio.component';
+import { PortfolioComponent } from './projects.component';
 
 describe('PortfolioComponent', () => {
   let component: PortfolioComponent;

src/app/projects/projects.component.ts

@@ -0,0 +1,19 @@
+import { Component, OnInit } from '@angular/core';
+import { BaseComponent } from '../base/base.component';
+import { ISideBar } from '../contact-sidebar/side-bar.model';
+import { CvService } from '../services/cv.service';
+
+@Component({
+  selector: 'app-projects',
+  templateUrl: './projects.component.html',
+  styleUrl: './projects.component.scss'
+})
+export class ProjectsComponent extends BaseComponent<ISideBar> implements OnInit{
+  constructor(svc: CvService){
+    super(svc);
+  }
+
+  ngOnInit(): void {
+    this.init();
+  }
+}

src/app/resume/resume.component.html

@@ -8,7 +8,7 @@
 
       <div class="title-wrapper">
         <div class="icon-box">
-          <ion-icon name="book-outline"></ion-icon>
+          <i class="fa-light fa-book-open"></i>
         </div>
 
         <h3 class="h3">Education</h3>
@@ -16,43 +16,14 @@
 
       <ol class="timeline-list">
 
-        <li class="timeline-item">
+        <li class="timeline-item" *ngFor="let education of model.academics">
 
-          <h4 class="h4 timeline-item-title">University school of the arts</h4>
+          <h4 class="h4 timeline-item-title">{{education.degree}}{{education.degreeSpecialization != null ? " - " + education.degreeSpecialization : ""}}</h4>
 
-          <span>2007 — 2008</span>
+          <span>{{education.period}}</span>
 
           <p class="timeline-text">
-            Nemo enims ipsam voluptatem, blanditiis praesentium voluptum delenit atque corrupti, quos dolores et
+            {{education.institution}}
-            quas molestias
-            exceptur.
-          </p>
-
-        </li>
-
-        <li class="timeline-item">
-
-          <h4 class="h4 timeline-item-title">New york academy of art</h4>
-
-          <span>2006 — 2007</span>
-
-          <p class="timeline-text">
-            Ratione voluptatem sequi nesciunt, facere quisquams facere menda ossimus, omnis voluptas assumenda est
-            omnis..
-          </p>
-
-        </li>
-
-        <li class="timeline-item">
-
-          <h4 class="h4 timeline-item-title">High school of art and design</h4>
-
-          <span>2002 — 2004</span>
-
-          <p class="timeline-text">
-            Duis aute irure dolor in reprehenderit in voluptate, quila voluptas mag odit aut fugit, sed consequuntur
-            magni dolores
-            eos.
           </p>
 
         </li>
@@ -65,7 +36,7 @@
 
       <div class="title-wrapper">
         <div class="icon-box">
-          <ion-icon name="book-outline"></ion-icon>
+          <i class="fa-light fa-briefcase"></i>
         </div>
 
         <h3 class="h3">Experience</h3>
@@ -73,44 +44,14 @@
 
       <ol class="timeline-list">
 
-        <li class="timeline-item">
+        <li class="timeline-item" *ngFor="let experience of model.experiences">
 
-          <h4 class="h4 timeline-item-title">Creative director</h4>
+          <h4 class="h4 timeline-item-title">{{experience.title}}</h4>
 
-          <span>2015 — Present</span>
+          <span>{{experience.period}}</span>
 
           <p class="timeline-text">
-            Nemo enim ipsam voluptatem blanditiis praesentium voluptum delenit atque corrupti, quos dolores et qvuas
+            {{experience.company}}
-            molestias
-            exceptur.
-          </p>
-
-        </li>
-
-        <li class="timeline-item">
-
-          <h4 class="h4 timeline-item-title">Art director</h4>
-
-          <span>2013 — 2015</span>
-
-          <p class="timeline-text">
-            Nemo enims ipsam voluptatem, blanditiis praesentium voluptum delenit atque corrupti, quos dolores et
-            quas molestias
-            exceptur.
-          </p>
-
-        </li>
-
-        <li class="timeline-item">
-
-          <h4 class="h4 timeline-item-title">Web designer</h4>
-
-          <span>2010 — 2013</span>
-
-          <p class="timeline-text">
-            Nemo enims ipsam voluptatem, blanditiis praesentium voluptum delenit atque corrupti, quos dolores et
-            quas molestias
-            exceptur.
           </p>
 
         </li>
@@ -125,11 +66,11 @@
 
       <ul class="skills-list content-card">
 
-        <li class="skills-item">
+        <li class="skills-item" *ngFor="let skill of model.skills">
 
           <div class="title-wrapper">
-            <h5 class="h5">Web design</h5>
+            <h5 class="h5">{{skill.name}}</h5>
-            <data value="80">80%</data>
+            <data value="{{skill.proficiencyLevel}}">{{skill.proficiencyLevel}}%</data>
           </div>
 
           <div class="skill-progress-bg">
@@ -138,45 +79,6 @@
 
         </li>
         
-        <li class="skills-item">
-
-          <div class="title-wrapper">
-            <h5 class="h5">Graphic design</h5>
-            <data value="70">70%</data>
-          </div>
-
-          <div class="skill-progress-bg">
-            <div class="skill-progress-fill" style="width: 70%;"></div>
-          </div>
-
-        </li>
-
-        <li class="skills-item">
-
-          <div class="title-wrapper">
-            <h5 class="h5">Branding</h5>
-            <data value="90">90%</data>
-          </div>
-
-          <div class="skill-progress-bg">
-            <div class="skill-progress-fill" style="width: 90%;"></div>
-          </div>
-
-        </li>
-
-        <li class="skills-item">
-
-          <div class="title-wrapper">
-            <h5 class="h5">WordPress</h5>
-            <data value="50">50%</data>
-          </div>
-
-          <div class="skill-progress-bg">
-            <div class="skill-progress-fill" style="width: 50%;"></div>
-          </div>
-
-        </li>
-
       </ul>
 
     </section>

src/app/resume/resume.component.ts

@@ -1,10 +1,19 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { BaseComponent } from '../base/base.component';
+import { IResume } from './resume.model';
+import { CvService } from '../services/cv.service';
 
 @Component({
   selector: 'app-resume',
   templateUrl: './resume.component.html',
   styleUrl: './resume.component.scss'
 })
-export class ResumeComponent {
+export class ResumeComponent extends BaseComponent<IResume> implements OnInit {
+  constructor(svc: CvService){
+    super(svc);
+  }
 
+  ngOnInit(): void {
+    this.init();
+  }
 }

src/app/resume/resume.model.ts

@@ -0,0 +1,9 @@
+import { IAcademic } from "../models/academic.model";
+import { IExperience } from "../models/experience.model";
+import { ISkill } from "../models/skill.model";
+
+export interface IResume{
+    academics?: IAcademic[];
+    experiences?: IExperience[];
+    skills?: ISkill[];
+}

src/app/services/cv.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ResumeService } from './cv.service';
+
+describe('ResumeService', () => {
+  let service: ResumeService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ResumeService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/cv.service.ts

@@ -0,0 +1,20 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { ICv } from '../models/cv.model';
+import { Observable, Subject, of } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class CvService {
+  public resume!: ICv;
+  public baseSubject = new Subject();
+  constructor(private http: HttpClient) { }
+
+  getCv(candidateId: number): Observable<ICv> {
+    if(this.resume != null){
+      return of(this.resume);
+    }
+    return this.http.get<ICv>(`/api/cv/${candidateId}`);
+  }
+}

src/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>MyPortfolio</title>
+  <title>My Portfolio</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
@@ -39,5 +39,9 @@
   -->
   <script type="module" src="https://unpkg.com/ionicons@7.3.1/dist/ionicons/ionicons.esm.js"></script>
   <script nomodule src="https://unpkg.com/ionicons@7.3.1/dist/ionicons/ionicons.js"></script>
+  <!--
+    - Font Awesome Pack
+  -->
+  <link href="https://cdn.jsdelivr.net/gh/eliyantosarage/font-awesome-pro@main/fontawesome-pro-6.5.1-web/css/all.min.css" rel="stylesheet">
 </body>
 </html>

src/proxy.conf.json

@@ -0,0 +1,6 @@
+{
+    "/api": {
+        "target": "https://localhost:7013",
+        "secure": false
+    }
+}

src/styles.scss

@@ -404,7 +404,7 @@
   }
   
   .contact-item {
-    min-width: 100%;
+    // min-width: 100%;
     display: flex;
     align-items: center;
     gap: 16px;
@@ -540,7 +540,9 @@
     z-index: -1;
   }
   
-  .service-icon-box { margin-bottom: 10px; }
+  .service-icon-box { margin-bottom: 10px; text-align: center;}
+
+  .service-icon-box i { color: hsl(45, 54%, 58%); }
   
   .service-icon-box img { margin: auto; }
   
@@ -872,7 +874,7 @@
   
   
   /*-----------------------------------*\
-    #PORTFOLIO
+    #PROJECTS
   \*-----------------------------------*/
   
   .filter-list { display: none; }
@@ -1244,7 +1246,7 @@
   
   
     /**
-     * #PORTFOLIO, BLOG 
+     * #PROJECTS, BLOG 
      */
   
     .project-img,
@@ -1333,7 +1335,8 @@
       margin-bottom: 30px;
     }
   
-    .sidebar.active { max-height: 584px; }
+    // .sidebar.active { max-height: 584px; }
+    .sidebar.active { max-height: max-content; }
   
     .sidebar-info { gap: 25px; }
   
@@ -1503,7 +1506,7 @@
   
   
     /**
-     * #PORTFOLIO, BLOG
+     * #PROJECTS, BLOG
      */
   
     .project-img, .blog-banner-box { border-radius: 16px; }
@@ -1596,7 +1599,7 @@
   
   
     /**
-     * PORTFOLIO
+     * PROJECTS
      */
   
     .article-title { padding-bottom: 20px; }
@@ -1622,7 +1625,7 @@
   
     .filter-item button.active { color: var(--orange-yellow-crayola); }
   
-    /* portfolio and blog grid */
+    /* projects and blog grid */
   
     .project-list, .blog-posts-list { grid-template-columns: 1fr 1fr; }
   
@@ -1741,7 +1744,7 @@
   
   
     /**
-     * PORTFOLIO
+     * PROJECTS
      */
   
     .project-list { grid-template-columns: repeat(3, 1fr); }
@@ -1827,7 +1830,7 @@
       position: sticky;
       top: 60px;
       max-height: max-content;
-      height: 100%;
+      // height: 100%;
       margin-bottom: 0;
       padding-top: 60px;
       z-index: 1;