Remove particles background and update routing

Deleted the particles background component and its related files. Updated routing logic and constants, refactored topbar and algorithms pages, and performed dependency updates and cleanup in package files. Also improved i18n translations and adjusted TypeScript configuration.

src/app/layout/background/particles-bg.component.html

@@ -1,6 +0,0 @@
-<ngx-particles
-  [id]="id"
-  [options]="particlesOptions"
-  [particlesInit]="particlesInit"
-  (particlesLoaded)="particlesLoaded($event)"
-></ngx-particles>

src/app/layout/background/particles-bg.component.scss

@@ -1,2 +0,0 @@
-:host { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
-.particles { width: 100%; height: 100%; display: block; }

src/app/layout/background/particles-bg.component.ts

@@ -1,104 +0,0 @@
-import {
-  Container,
-  Engine
-} from "@tsparticles/engine";
-import {NgParticlesService, NgxParticlesModule} from "@tsparticles/angular";
-import { Component, inject } from '@angular/core';
-import {loadFull} from 'tsparticles';
-
-@Component({
-  selector: 'app-particles-bg',
-  standalone: true,
-  imports: [
-    NgxParticlesModule
-  ],
-  templateUrl: './particles-bg.component.html',
-  styleUrl: './particles-bg.component.scss',
-})
-export class ParticlesBgComponent {
-  private readonly ngParticlesService = inject(NgParticlesService);
-
-  id = "tsparticles";
-
-  /* Starting from 1.19.0 you can use a remote url (AJAX request) to a JSON with the configuration */
-  particlesUrl = "http://foo.bar/particles.json";
-
-  /* or the classic JavaScript object */
-  particlesOptions = {
-    /*background: {
-      color: {
-        value: "#0d47a1",
-      },
-    },
-    fpsLimit: 120,
-    interactivity: {
-      events: {
-        onClick: {
-          enable: true,
-        },
-        onHover: {
-          enable: true,
-        },
-        resize: true,
-      },
-      modes: {
-        push: {
-          quantity: 4,
-        },
-        repulse: {
-          distance: 200,
-          duration: 0.4,
-        },
-      },
-    },
-    particles: {
-      color: {
-        value: "#ffffff",
-      },
-      links: {
-        color: "#ffffff",
-        distance: 150,
-        enable: true,
-        opacity: 0.5,
-        width: 1,
-      },
-      move: {
-        direction: MoveDirection.none,
-        enable: true,
-        outModes: {
-          default: OutMode.bounce,
-        },
-        random: false,
-        speed: 6,
-        straight: false,
-      },
-      number: {
-        density: {
-          enable: true,
-          area: 800,
-        },
-        value: 80,
-      },
-      opacity: {
-        value: 0.5,
-      },
-      shape: {
-        type: "circle",
-      },
-      size: {
-        value: { min: 1, max: 5 },
-      },
-    },
-    detectRetina: true,*/
-  };
-
-
-  async particlesInit(engine: Engine): Promise<void> {
-    await loadFull(engine);
-  }
-
-
-  particlesLoaded(container: Container): void {
-    console.log(container);
-  }
-}

src/app/layout/topbar/topbar.component.html

@@ -10,10 +10,10 @@
   </a>
 
   <nav class="nav">
-    <a routerLink="/about" mat-button>{{ 'TOPBAR.ABOUT' | translate }}</a>
-    <a routerLink="/projects" mat-button>{{ 'TOPBAR.PROJECTS' | translate }}</a>
-    <a routerLink="/algorithms" mat-button>{{ 'TOPBAR.ALGORITHMS' | translate }}</a>
-    <a routerLink="/imprint" mat-button>{{ 'TOPBAR.IMPRINT' | translate }}</a>
+    <a [routerLink]="RouterConstants.ABOUT.LINK" mat-button>{{ 'TOPBAR.ABOUT' | translate }}</a>
+    <a [routerLink]="RouterConstants.PROJECTS.LINK" mat-button>{{ 'TOPBAR.PROJECTS' | translate }}</a>
+    <a [routerLink]="RouterConstants.ALGORITHMS.LINK" mat-button>{{ 'TOPBAR.ALGORITHMS' | translate }}</a>
+    <a [routerLink]="RouterConstants.IMPRINT.LINK" mat-button>{{ 'TOPBAR.IMPRINT' | translate }}</a>
   </nav>
 
   <!-- Mobile nav menu button -->
@@ -29,16 +29,16 @@
 
   <!-- Mobile nav menu -->
   <mat-menu #navMenu="matMenu" xPosition="before">
-    <button mat-menu-item routerLink="/about">
+    <button mat-menu-item [routerLink]="RouterConstants.ABOUT.LINK">
       {{ 'TOPBAR.ABOUT' | translate }}
     </button>
-    <button mat-menu-item routerLink="/projects">
+    <button mat-menu-item [routerLink]="RouterConstants.PROJECTS.LINK">
       {{ 'TOPBAR.PROJECTS' | translate }}
     </button>
-    <button mat-menu-item routerLink="/algorithms">
+    <button mat-menu-item [routerLink]="RouterConstants.ALGORITHMS.LINK">
       {{ 'TOPBAR.ALGORITHMS' | translate }}
     </button>
-    <button mat-menu-item routerLink="/imprint">
+    <button mat-menu-item [routerLink]="RouterConstants.IMPRINT.LINK">
       {{ 'TOPBAR.IMPRINT' | translate }}
     </button>
   </mat-menu>

src/app/layout/topbar/topbar.component.ts

@@ -10,6 +10,7 @@ import { ThemeService } from '../../service/theme.service';
 import { LanguageService } from '../../service/language.service';
 import { MatDivider } from '@angular/material/divider';
 import {AssetsConstants} from '../../constants/AssetsConstants';
+import {RouterConstants} from '../../constants/RouterConstants';
 
 @Component({
   selector: 'app-topbar',
@@ -41,4 +42,5 @@ export class TopbarComponent {
   setLang(code: 'de' | 'en') { this.lang.use(code); }
 
   protected readonly AssetsConstants = AssetsConstants;
+  protected readonly RouterConstants = RouterConstants;
 }