🧱 Profile service updated

src/app/components/home/home.component.html

@@ -1,6 +1,6 @@
 <div class="container-fluid p-0 m-0">
   <div class="home-content text-center text-lg-start d-flex flex-column gap-3 gap-lg-5 col-12 align-items-md-center align-items-lg-start">
-    <h2 class="m-0 p-0">Say Hi from <span class="bg-gradient">Nerm</span>, Front-End & UI Developer</h2>
+    <h2 class="m-0 p-0">Say Hi from <span class="bg-gradient">Nerm</span>, {{ _profileService.dataProfile.mainRole }} & {{ _profileService.dataProfile.secondRole }}</h2>
     <p class="m-0 p-0">{{ _homeService.dataAbout.initial }}</p>
   </div>
 </div>

src/app/components/home/home.component.ts

@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { AboutService } from 'src/app/services/about.service';
+import { ProfileService } from 'src/app/services/profile.service';
 
 @Component({
   selector: 'app-home',
@@ -8,8 +9,9 @@ import { AboutService } from 'src/app/services/about.service';
 })
 export class HomeComponent {
 
-  constructor( public _homeService: AboutService ) {
-
-  }
+  constructor(
+    public _homeService: AboutService,
+    public _profileService: ProfileService
+  ) {}
 
 }

src/app/interfaces/profile.interface.ts

@@ -0,0 +1,8 @@
+export interface Profile {
+    imageProfile?:string,
+    email?:      string,
+    location?:   string,
+    mainRole?:   string,
+    rights?:     string,
+    secondRole?: string,
+}

src/app/services/profile.service.ts

@@ -0,0 +1,24 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Profile } from '../interfaces/profile.interface';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ProfileService {
+
+  cargada = false;
+  dataProfile: Profile = {};
+
+  constructor( private http: HttpClient) {
+    this.getProfileData();
+  }
+
+  private getProfileData() {
+    this.http.get('https://portfolio-web-bd37a-default-rtdb.firebaseio.com/profile.json')
+      .subscribe( (response: Profile) => {
+        this.cargada = true;
+        this.dataProfile = response;
+      })
+  }
+}

src/app/shared/profile/profile.component.html

@@ -4,17 +4,17 @@
       <a [routerLink]="['/']">
         <img src="assets/images/logo-picture.webp" alt="Icon Portfolio" loading="lazy">
       </a>
-      <h2 class="d-none d-md-block m-0 p-0 pt-2">Front-End &<br>UI Developer</h2>
+      <h2 class="d-none d-md-block m-0 p-0 pt-2">{{ _profileService.dataProfile.mainRole }} &<br>{{ _profileService.dataProfile.secondRole }}</h2>
     </div>
     <div class="card-profile__content mx-2 mx-md-3 gap-2">
       <div class="profile-picture my-3 mb-md-1">
         <img class="rounded" src="assets/images/profile-picture.webp" alt="Profile picture" loading="lazy">
       </div>
       <div class="profile-titles d-flex flex-column text-center">
-        <h1 class="d-block d-md-none">{{ role }}</h1>
-        <span class="mt-2 email-text">{{ email }}</span>
-        <span class="location-text">{{ location }}</span>
-        <span class="my-3 copyright-text">© {{ year }} Nerm. All Rights Reserved</span>
+        <h1 class="d-block d-md-none">{{ _profileService.dataProfile.mainRole }} & {{ _profileService.dataProfile.secondRole }}</h1>
+        <span class="mt-2 email-text">{{ _profileService.dataProfile.email }}</span>
+        <span class="location-text">{{ _profileService.dataProfile.location }}</span>
+        <span class="my-3 copyright-text">© {{ year }} {{ _profileService.dataProfile.rights }}</span>
       </div>
       <div class="d-flex d-flex flex-row align-items-center justify-content-center my-2 gap-3">
         <div

src/app/shared/profile/profile.component.ts

@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { NetworksService } from 'src/app/services/networks.service';
+import { ProfileService } from 'src/app/services/profile.service';
 
 @Component({
   selector: 'app-profile',
@@ -8,14 +9,12 @@ import { NetworksService } from 'src/app/services/networks.service';
 })
 export class ProfileComponent {
 
-  constructor( public _networkService: NetworksService) {
-  }
+  constructor(
+    public _networkService: NetworksService,
+    public _profileService: ProfileService
+  ) { }
 
   date: Date = new Date();
   year: number = this.date.getFullYear();
 
-  role: string = 'Front-End & UI Developer';
-  email: string = '[email protected]';
-  location: string = 'Tucson, Arizona';
-
 }