Fixed some styling issues

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

@@ -1,8 +1,7 @@
-<div class="algo-container">
-  <h1>{{ 'ALGORITHM.TITLE' |translate }}</h1>
-  <div class="category-cards">
+<h1>{{ 'ALGORITHM.TITLE' |translate }}</h1>
+  <div class="card-grid">
 @for (category of categories$ | async; track category.id) {
-    <mat-card [routerLink]="[category.routerLink]">
+    <mat-card class="algo-card" [routerLink]="[category.routerLink]">
       <mat-card-header>
         <mat-card-title>{{ category.title | translate }}</mat-card-title>
       </mat-card-header>
@@ -12,4 +11,3 @@
     </mat-card>
   }
   </div>
-</div>

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

@@ -6,7 +6,7 @@
 import { Component } from '@angular/core';
 import { MatCard, MatCardContent, MatCardHeader, MatCardTitle } from '@angular/material/card';
 import { TranslatePipe } from '@ngx-translate/core';
-import { BabylonCanvas, RenderConfig, SceneEventData } from '../../../shared/rendering/canvas/babylon-canvas.component';
+import { BabylonCanvas, RenderConfig, SceneEventData } from '../../../shared/components/render-canvas/babylon-canvas.component';
 import { ComputeShader, StorageBuffer, MeshBuilder, ShaderMaterial, ShaderLanguage, ArcRotateCamera } from '@babylonjs/core';
 import {
   CLOTH_FRAGMENT_SHADER_WGSL,

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

@@ -8,7 +8,7 @@ import {MatSelect} from '@angular/material/select';
 import {AlgorithmInformation} from '../information/information.models';
 import {UrlConstants} from '../../../constants/UrlConstants';
 import {FormsModule} from '@angular/forms';
-import {BabylonCanvas, RenderCallback, RenderConfig, SceneEventData} from '../../../shared/rendering/canvas/babylon-canvas.component';
+import {BabylonCanvas, RenderCallback, RenderConfig, SceneEventData} from '../../../shared/components/render-canvas/babylon-canvas.component';
 import {FRACTAL2D_FRAGMENT, FRACTAL2D_VERTEX} from './fractal.shader';
 import {PointerEventTypes, PointerInfo, ShaderMaterial, Vector2} from '@babylonjs/core';
 import {MatButton} from '@angular/material/button';

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

@@ -7,7 +7,7 @@ import {TranslatePipe} from '@ngx-translate/core';
 import {AlgorithmInformation} from '../information/information.models';
 import {UrlConstants} from '../../../constants/UrlConstants';
 import {MatButton} from '@angular/material/button';
-import {BabylonCanvas, RenderCallback, RenderConfig} from '../../../shared/rendering/canvas/babylon-canvas.component';
+import {BabylonCanvas, RenderCallback, RenderConfig} from '../../../shared/components/render-canvas/babylon-canvas.component';
 
 @Component({
   selector: 'app-fractal3d',

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

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {BabylonCanvas, RenderConfig, SceneEventData} from '../../../shared/rendering/canvas/babylon-canvas.component';
+import {BabylonCanvas, RenderConfig, SceneEventData} from '../../../shared/components/render-canvas/babylon-canvas.component';
 import {MatCard, MatCardContent, MatCardHeader, MatCardTitle} from '@angular/material/card';
 import {ComputeShader, ShaderLanguage, StorageBuffer} from '@babylonjs/core';
 import {PENDULUM_FRAGMENT_SHADER_WGSL, PENDULUM_PHYSIC_COMPUTE_SHADER_WGSL, PENDULUM_RENDER_COMPUTE_SHADER_WGSL, PENDULUM_VERTEX_SHADER_WGSL} from './pendulum.shader';

src/app/pages/projects/projects.component.html

@@ -1,4 +1,4 @@
-<div class="project-grid">
+<div class="card-grid">
   @if (featuredProject(); as project) {
     <mat-card class="project-card featured">
       <mat-card-header>

src/app/shared/components/particles-background/particles-background.component.scss

@@ -11,4 +11,5 @@ canvas {
   display: block;
   width: 100%;
   height: 100%;
+  border-width: 0;
 }