working on something big

src/app/app.component.html

 <router-outlet>
-  <app-background class="background"></app-background>
 </router-outlet>

src/app/components/about-me/about-me.component.html

+<app-background class="backgroundExtended"></app-background>
 <div class="wholeScreen">
     <app-header></app-header>
     <div class="restOfScreen">

src/app/components/contact/contact.component.html

+<app-background class="backgroundExtended"></app-background>
+
 <div class="wholeScreen">
   <app-header></app-header>
   <div class="restOfScreen">

src/app/components/contact/contact.component.ts

-import {Component} from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {BackgroundComponent} from "../global/background/background.component";
 import {FooterComponent} from "../global/footer/footer.component";
 import {HeaderComponent} from "../global/header/header.component";
@@ -28,7 +28,7 @@ import {MatButton} from "@angular/material/button";
   templateUrl: './contact.component.html',
   styleUrl: './contact.component.scss'
 })
-export class ContactComponent {
+export class ContactComponent implements OnInit {
   nameOfCustomer = new FormControl("", [Validators.required]);
   emailOfCustomer = new FormControl("", [
     Validators.required,
@@ -36,28 +36,56 @@ export class ContactComponent {
     Validators.pattern("^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$")
   ]);
   textOfCustomer = new FormControl("", [Validators.required]);
+  private amountOfEmailsSent: number = 0;
+  private emailSendingAllowed: boolean = true;
 
-  public sendEmail(e: Event) {
-    if (this.nameOfCustomer.valid && this.emailOfCustomer.valid && this.textOfCustomer.valid) {
-      e.preventDefault(); // Verhindert die Standard-Formularaktion
+  ngOnInit(): void {
+    if (localStorage.getItem("emailsSent") === null) {
+      localStorage.setItem("emailsSent", "0");
+    } else {
+      try {
+        this.amountOfEmailsSent = +localStorage.getItem("emailsSent")!;
+      } catch (error) {
+        this.emailSendingAllowed = false;
+        alert("An error occurred using the email feature. You will not be able to use this feature. Please clear your LocalStorage or use another device.");
+      }
+    }
+  }
 
-      const templateParams = {
-        nameOfCustomer: this.nameOfCustomer.value,
-        emailOfCustomer: this.emailOfCustomer.value,
-        textOfCustomer: this.textOfCustomer.value,
-      };
+  public sendEmail(e: Event) {
+    try {
+      this.amountOfEmailsSent = +localStorage.getItem("emailsSent")!;
+      console.log(`Here is the number: ${this.amountOfEmailsSent}`)
+    } catch (error) {
+      this.emailSendingAllowed = false;
+      alert("An error occurred using the email feature. You will not be able to use this feature. Please clear your LocalStorage or use another device.");
+    }
 
-      emailjs.send('service_nt705ry', 'template_kp1qstl', templateParams, 'z_tcBe0UR1PXaeCD1')
-        .then((result: EmailJSResponseStatus) => {
-          this.nameOfCustomer.reset();
-          this.emailOfCustomer.reset();
-          this.textOfCustomer.reset();
-          alert('Email sent successfully');
-        }, (error) => {
-          alert('Failed to send email');
-        });
+    if (!this.emailSendingAllowed || +this.amountOfEmailsSent >= 3) {
+      alert("You have sent too many messages or you are not allowed to send messages. Please try again later");
     } else {
-      alert("Please fill all the inputs correctly");
+      if (this.nameOfCustomer.valid && this.emailOfCustomer.valid && this.textOfCustomer.valid) {
+        e.preventDefault();
+
+        const templateParams = {
+          nameOfCustomer: this.nameOfCustomer.value,
+          emailOfCustomer: this.emailOfCustomer.value,
+          textOfCustomer: this.textOfCustomer.value,
+        };
+
+        emailjs.send('service_nt705ry', 'template_kp1qstl', templateParams, 'z_tcBe0UR1PXaeCD1')
+          .then((result: EmailJSResponseStatus) => {
+            localStorage.setItem("emailsSent", String(this.amountOfEmailsSent + 1));
+            this.nameOfCustomer.reset();
+            this.emailOfCustomer.reset();
+            this.textOfCustomer.reset();
+            alert('Email sent successfully');
+          }, (error) => {
+            alert('Failed to send email');
+          });
+      } else {
+        alert("Please fill all the inputs correctly");
+      }
     }
   }
 }

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

+<app-background class="background"></app-background>
+
 <div class="wholeScreen">
     <app-header></app-header>
     <div class="restOfScreen">

src/app/components/impressum/impressum.component.html

+<app-background class="background"></app-background>
+
 <div class="wholeScreen">
   <app-header></app-header>
   <div class="restOfScreen">

src/app/components/page-not-found/page-not-found.component.html

+<app-background class="background"></app-background>
+
 <div class="wholeScreen">
     <app-header></app-header>
 

src/app/components/projects/projects.component.html

+<app-background class="background"></app-background>
+
 <div class="wholeScreen">
   <app-header></app-header>
   <div class="restOfScreen">

src/app/components/skills/skills.component.html

+<app-background class="background"></app-background>
+
 <div class="wholeScreen">
   <app-header></app-header>
   <div class="restOfScreen">