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.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "playground-frontend",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
@@ -11,7 +11,6 @@
   },
   "private": true,
   "dependencies": {
-    "@angular-devkit/build-angular": "~21.1.0",
     "@angular/animations": "~21.1.0",
     "@angular/cdk": "~21.1.0",
     "@angular/common": "~21.1.0",
@@ -23,18 +22,14 @@
     "@angular/router": "~21.1.0",
     "@ngx-translate/core": "~17.0.0",
     "@ngx-translate/http-loader": "~17.0.0",
-    "@tsparticles/angular": "~3.0.0",
-    "@tsparticles/engine": "~3.9.1",
     "rxjs": "~7.8.2",
-    "swiper": "~12.0.3",
+    "swiper": "~12.1.0",
-    "tslib": "~2.8.1",
+    "tslib": "~2.8.1"
-    "tsparticles": "~3.9.1"
   },
   "devDependencies": {
     "@angular/build": "~21.1.0",
     "@angular/cli": "~21.1.0",
     "@angular/compiler-cli": "~21.1.0",
-    "@angular/platform-browser-dynamic": "~21.1.0",
     "@types/jasmine": "~5.1.15",
     "angular-eslint": "21.2.0",
     "eslint": "^9.39.2",

src/app/app.routes.ts

@@ -1,16 +1,13 @@
 import { Routes } from '@angular/router';
 import {AboutComponent} from './pages/about/about.component';
-import {ProjectsComponent} from './pages/projects/projects.component';
+import {RouterConstants} from './constants/RouterConstants';
-import {ImprintComponent} from './pages/imprint/imprint.component';
-import {AlgorithmsComponent} from './pages/algorithms/algorithms.component';
-import {PathfindingComponent} from './pages/algorithms/pathfinding/pathfinding.component';
 
 export const routes: Routes = [
   { path: '', component: AboutComponent },
-  { path: 'about', component: AboutComponent},
+  { path: RouterConstants.ABOUT.PATH, component: RouterConstants.ABOUT.COMPONENT},
-  { path: 'projects', component: ProjectsComponent},
+  { path: RouterConstants.PROJECTS.PATH, component: RouterConstants.PROJECTS.COMPONENT},
-  { path: 'algorithms', component: AlgorithmsComponent},
+  { path: RouterConstants.ALGORITHMS.PATH, component: RouterConstants.ALGORITHMS.COMPONENT},
-  { path: 'algorithms/pathfinding', component: PathfindingComponent },
+  { path: RouterConstants.PATHFINDING.PATH, component: RouterConstants.PATHFINDING.COMPONENT},
-  { path: 'imprint', component: ImprintComponent},
+  { path: RouterConstants.IMPRINT.PATH, component: RouterConstants.IMPRINT.COMPONENT},
 ];
 

src/app/constants/RouterConstants.ts

@@ -0,0 +1,39 @@
+import {AboutComponent} from '../pages/about/about.component';
+import {ProjectsComponent} from '../pages/projects/projects.component';
+import {ImprintComponent} from '../pages/imprint/imprint.component';
+import {AlgorithmsComponent} from '../pages/algorithms/algorithms.component';
+import {PathfindingComponent} from '../pages/algorithms/pathfinding/pathfinding.component';
+
+export class RouterConstants {
+
+  static readonly ABOUT = {
+    PATH: 'about',
+    LINK: ['/about'] as const,
+    COMPONENT: AboutComponent
+  };
+
+  static readonly PROJECTS = {
+    PATH: 'projects',
+    LINK: ['/projects'] as const,
+    COMPONENT: ProjectsComponent
+  };
+
+  static readonly ALGORITHMS = {
+    PATH: 'algorithms',
+    LINK: ['/algorithms'] as const,
+    COMPONENT: AlgorithmsComponent
+  };
+
+  static readonly PATHFINDING = {
+    PATH: 'algorithms/pathfinding',
+    LINK: ['/algorithms', 'pathfinding'] as const,
+    COMPONENT: PathfindingComponent
+  };
+
+  static readonly IMPRINT = {
+    PATH: 'imprint',
+    LINK: ['/imprint'] as const,
+    COMPONENT: ImprintComponent
+  };
+}
+

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]="RouterConstants.ABOUT.LINK" mat-button>{{ 'TOPBAR.ABOUT' | translate }}</a>
-    <a routerLink="/projects" mat-button>{{ 'TOPBAR.PROJECTS' | translate }}</a>
+    <a [routerLink]="RouterConstants.PROJECTS.LINK" mat-button>{{ 'TOPBAR.PROJECTS' | translate }}</a>
-    <a routerLink="/algorithms" mat-button>{{ 'TOPBAR.ALGORITHMS' | translate }}</a>
+    <a [routerLink]="RouterConstants.ALGORITHMS.LINK" mat-button>{{ 'TOPBAR.ALGORITHMS' | translate }}</a>
-    <a routerLink="/imprint" mat-button>{{ 'TOPBAR.IMPRINT' | 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;
 }

src/app/pages/algorithms/algorithms.component.html

@@ -1,13 +1,13 @@
 <div class="container">
-  <h1>Algorithmen</h1>
+  <h1>{{ 'ALGORITHM.TITLE' |translate }}</h1>
   <div class="category-cards">
 @for (category of categories$ | async; track category.id) {
     <mat-card [routerLink]="[category.routerLink]">
       <mat-card-header>
-        <mat-card-title>{{ category.title }}</mat-card-title>
+        <mat-card-title>{{ category.title | translate }}</mat-card-title>
       </mat-card-header>
       <mat-card-content>
-        <p>{{ category.description }}</p>
+        <p>{{ category.description | translate}}</p>
       </mat-card-content>
     </mat-card>
   }

src/app/pages/algorithms/algorithms.component.scss

@@ -10,10 +10,7 @@
 
   mat-card {
     cursor: pointer;
-    max-width: 300px;
+    min-width: 300px;
-
+    max-width: 400px;
-    &:hover {
-      background-color: rgba(255, 255, 255, 0.1);
-    }
   }
 }

src/app/pages/algorithms/algorithms.component.ts

@@ -5,22 +5,20 @@ import { Observable } from 'rxjs';
 import { CommonModule } from '@angular/common';
 import { RouterLink } from '@angular/router';
 import { MatCardModule } from '@angular/material/card';
+import {TranslatePipe} from '@ngx-translate/core';
 
 @Component({
   selector: 'app-algorithms',
   templateUrl: './algorithms.component.html',
   styleUrls: ['./algorithms.component.scss'],
   standalone: true,
-  imports: [CommonModule, RouterLink, MatCardModule],
+  imports: [CommonModule, RouterLink, MatCardModule, TranslatePipe],
 })
 export class AlgorithmsComponent implements OnInit {
-  private algorithmsService = inject(AlgorithmsService);
+  private readonly algorithmsService = inject(AlgorithmsService);
-
 
   categories$: Observable<AlgorithmCategory[]> | undefined;
 
-
-
   ngOnInit(): void {
     this.categories$ = this.algorithmsService.getCategories();
   }

src/app/pages/algorithms/service/algorithms.service.ts

@@ -7,19 +7,13 @@ import { Observable, of } from 'rxjs';
 })
 export class AlgorithmsService {
 
-  private categories: AlgorithmCategory[] = [
+  private readonly categories: AlgorithmCategory[] = [
     {
       id: 'pathfinding',
-      title: 'Pfadfindungsalgorithmen',
+      title: 'ALGORITHM.PATHFINDING.TITLE',
-      description: 'Vergleich von Pfadfindungsalgorithmen wie Dijkstra und A*.',
+      description: 'ALGORITHM.PATHFINDING.DESCRIPTION',
       routerLink: 'pathfinding'
-    },
+    }
-    // {
-    //   id: 'sorting',
-    //   title: 'Sortieralgorithmen',
-    //   description: 'Visualisierung von Sortieralgorithmen wie Bubble Sort, Merge Sort und Quick Sort.',
-    //   routerLink: 'sorting'
-    // }
   ];
 
   getCategories(): Observable<AlgorithmCategory[]> {

src/assets/i18n/de.json

@@ -310,5 +310,12 @@
     "ALERT": {
       "START_END_NODES": "Bitte wählen Sie einen Start- und Endknoten aus, bevor Sie den Algorithmus starten."
     }
+  },
+  "ALGORITHM": {
+    "TITLE": "Algorithmen",
+    "PATHFINDING": {
+      "TITLE": "Wegfindung",
+      "DESCRIPTION": "Vergleich von Dijkstra vs. A*."
+    }
   }
 }

src/assets/i18n/en.json

@@ -310,5 +310,12 @@
     "ALERT": {
       "START_END_NODES": "Please select a start and end node before running the algorithm."
     }
+  },
+  "ALGORITHM": {
+    "TITLE": "Algorithms",
+    "PATHFINDING": {
+      "TITLE": "Pathfinding",
+      "DESCRIPTION": "Comparing of Dijkstra vs. A*."
+    }
   }
 }

src/main.ts

@@ -2,8 +2,6 @@ import { bootstrapApplication } from '@angular/platform-browser';
 import { appConfig } from './app/app.config';
 import packageJson from '../package.json';
 import {AppComponent} from './app/layout/app/app.component';
-import { register } from 'swiper/element/bundle';
-register();
 
 
 if (packageJson.version) {

tsconfig.app.json

@@ -3,6 +3,7 @@
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
+    "resolveJsonModule": true,
     "outDir": "./out-tsc/app",
     "types": []
   },

tsconfig.json

@@ -13,7 +13,10 @@
     "experimentalDecorators": true,
     "importHelpers": true,
     "target": "ES2022",
-    "module": "preserve"
+    "module": "preserve",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "esModuleInterop": true
   },
   "angularCompilerOptions": {
     "enableI18nLegacyMessageIdFormat": false,