feat: added the projects screen. almost done with the whole site

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

@@ -46,7 +46,7 @@
     </div>
 
     <div class="imageDiv">
-      <img id="talking" src="assets/rb_43081.webp" alt="Picture of people wanting to talk">
+      <img id="talking" src="../../../assets/contactPicture.webp" alt="Picture of people wanting to talk">
     </div>
   </div>
 </div>

src/app/components/global/background/background.component.html

 @if (window.innerWidth > 500) {
   <div id="circleContainer">
-    <img src="assets/plain-smooth-green-wall-texture.webp" alt="Background image" class="background-image">
+    <img src="../../../../assets/backgroundImg.webp" alt="Background image" class="background-image">
     @for (item of howManyCircles; track $index) {
       <div class="circle-div"></div>
     }
   </div>
 } @else {
-  <img src="assets/plain-smooth-green-wall-texture.webp" alt="Background image" class="background-image">
-}
\ No newline at end of file
+  <img src="../../../../assets/backgroundImg.webp" alt="Background image" class="background-image">
+}

src/app/components/global/header/header.component.scss

@@ -17,7 +17,8 @@
   align-items: center;
 
   .button:hover {
-    background-color: rgb(29, 29, 29);
+    background-color: rgba(0, 0, 0, 0.79);
+    cursor: pointer;
   }
 
   .button {

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

@@ -3,6 +3,59 @@
 <div class="wholeScreen">
   <app-header></app-header>
   <div class="restOfScreen">
+    <div class="project-container">
+      <!-- Desktop Mode: Pfeile links und rechts vom Bild -->
+      @if (!isMobile) {
+        <button (click)="changeProject(false)" class="nav-button">&#9664;</button>
 
+        <div class="project-display">
+          @for (project of projects; track $index) {
+            @if ($index === currentIndex) {
+              <img
+                [src]="project.imageUrl"
+                [alt]="project.title"
+                class="project-image"
+                [class.active]="transitionClass === 'active'"
+                [class.swipe-left]="transitionClass === 'swipe-left'"
+                [class.swipe-right]="transitionClass === 'swipe-right'"
+              />
+              <div class="project-info">
+                <h2>{{ project.title }}</h2>
+                <p>{{ project.description }}</p>
+              </div>
+            }
+          }
+        </div>
+
+        <button (click)="changeProject(true)" class="nav-button">&#9654;</button>
+      }
+
+      <!-- Mobile Mode: Pfeile unter dem Bild -->
+      @if (isMobile) {
+        <div class="project-display">
+          @for (project of projects; track $index) {
+            @if ($index === currentIndex) {
+              <img
+                [src]="project.imageUrl"
+                [alt]="project.title"
+                class="project-image"
+                [class.active]="transitionClass === 'active'"
+                [class.swipe-left]="transitionClass === 'swipe-left'"
+                [class.swipe-right]="transitionClass === 'swipe-right'"
+              />
+              <div class="project-info">
+                <h2>{{ project.title }}</h2>
+                <p>{{ project.description }}</p>
+              </div>
+            }
+          }
+        </div>
+
+        <div class="nav-buttons-container">
+          <button (click)="changeProject(false)" class="nav-button">&#9664;</button>
+          <button (click)="changeProject(true)" class="nav-button">&#9654;</button>
+        </div>
+      }
+    </div>
   </div>
 </div>

src/app/components/projects/projects.component.scss

+.restOfScreen {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.project-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  width: 80%;
+  height: 90%;
+  background-color: rgb(0, 0, 0, 0.53);
+  border-radius: 20px;
+  overflow: hidden;
+}
+
+.project-display {
+  margin-bottom: 1em;
+  margin-top: 1em;
+  height: 100%;
+  width: 80%;
+  display: flex;
+  align-content: space-around;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.project-image {
+  width: auto;
+  height: 70%;
+  max-width: 100%;
+  object-fit: contain;
+  box-sizing: border-box;
+  margin: 0 auto;
+  border-radius: 20px;
+  transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
+}
+
+.project-info {
+  color: white;
+  text-align: center;
+}
+
+.nav-button {
+  background: none;
+  border: none;
+  color: white;
+  font-size: 2rem;
+  cursor: pointer;
+  transition: color 0.2s;
+}
+
+.nav-buttons-container {
+  display: none; /* Versteckt die Container für mobile Buttons, falls sie nicht benötigt werden */
+}
+
+/* Mobile Mode */
+@media (max-width: 768px) {
+  .restOfScreen{
+    align-items: start;
+  }
+  .project-container {
+    margin-top: 2em;
+    background-color: rgb(0, 0, 0, 0.53);
+    width: 90%;
+    height: 70%;
+    display: flex;
+    flex-direction: column;
+  }
+  .nav-button {
+    position: static;
+  }
+
+  .nav-buttons-container {
+    width: 100%;
+    display: flex;
+    justify-content: space-around;
+    margin-bottom: 1em;
+  }
+}

src/app/components/projects/projects.component.ts

-import { Component } from '@angular/core';
-import {BackgroundComponent} from "../global/background/background.component";
-import {FooterComponent} from "../global/footer/footer.component";
-import {HeaderComponent} from "../global/header/header.component";
+import { Component, HostListener } from '@angular/core';
+import { BackgroundComponent } from "../global/background/background.component";
+import { FooterComponent } from "../global/footer/footer.component";
+import { HeaderComponent } from "../global/header/header.component";
+import { Project } from "../../models/projectModel";
+import { NgClass } from "@angular/common";
 
 @Component({
   selector: 'app-projects',
   standalone: true,
-    imports: [
-        BackgroundComponent,
-        FooterComponent,
-        HeaderComponent
-    ],
+  imports: [
+    BackgroundComponent,
+    FooterComponent,
+    HeaderComponent,
+    NgClass
+  ],
   templateUrl: './projects.component.html',
-  styleUrl: './projects.component.scss'
+  styleUrls: ['./projects.component.scss']
 })
 export class ProjectsComponent {
+  projects: Project[] = [
+    { title: 'BonApp', description: 'The social Media of the future, where you can find your perfect meal', imageUrl: 'assets/BonAppLogo.webp' },
+    { title: 'About Me Site', description: 'A personal portfolio of myself, to show my skills', imageUrl: 'assets/portfolio.webp' },
+    { title: 'Taper Monkey', description: 'The best and easiest way to learn the typing system and make levels for other users to enjoy it to', imageUrl: 'assets/taperMonkeyMacPicture.webp' },
+    { title: 'Your Project', description: "I would be glad to work for your Project. Contact me now and let's discuss our first project", imageUrl: 'assets/project.webp' },
+  ];
 
+  currentIndex = 0;
+  transitionClass = '';
+  isMobile = window.innerWidth <= 768; // initialer Wert basierend auf der aktuellen Fensterbreite
+
+  constructor() {
+    this.checkMobileView(); // Initiale Überprüfung bei der Komponentenerstellung
+  }
+
+  @HostListener('window:resize', ['$event'])
+  onResize() {
+    this.checkMobileView();
+  }
+
+  private checkMobileView() {
+    this.isMobile = window.innerWidth <= 768;
+  }
+
+  changeProject(next: boolean) {
+    // Festlegen der Swipe-Richtung basierend auf der Auswahl
+    this.transitionClass = next ? 'swipe-left' : 'swipe-right';
+
+    setTimeout(() => {
+      this.currentIndex = (this.currentIndex + (next ? 1 : -1) + this.projects.length) % this.projects.length;
+      this.transitionClass = 'active';
+    }); // Wartezeit für die Swipe-Animation
+  }
 }

src/app/models/projectModel.ts

+export interface Project {
+  title: string;
+  description: string;
+  imageUrl: string;
+}

src/index.html

@@ -5,7 +5,7 @@
   <title>Raphael Schreiber</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="./assets/code-6127616_1920.png">
+  <link rel="icon" type="image/x-icon" href="assets/favIcon2.png">
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>