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;
 }

src/styles.scss

@@ -702,12 +702,21 @@ app-root {
 }
 
 /* ---- Projects Page & Dialog ---- */
-.project-grid {
+.card-grid {
   display: grid;
   gap: clamp(1rem, 3vw, 1.5rem);
   grid-template-columns: repeat(auto-fill, minmax(min(100%, 450px), 1fr));
   max-width: var(--app-maxWidth);
-  margin: 0 auto;
+  margin-right: 1rem;
+  margin-left: 1rem;
+  margin-top: auto;
+}
+
+.algo-card {
+  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+  display: flex;
+  flex-direction: column;
+  cursor: pointer;
 }
 
 .project-card {