diff --git a/src/app/pages/algorithms/algorithms.component.html b/src/app/pages/algorithms/algorithms.component.html
index 2bad6cd..33b785e 100644
--- a/src/app/pages/algorithms/algorithms.component.html
+++ b/src/app/pages/algorithms/algorithms.component.html
@@ -1,8 +1,7 @@
-
-
{{ 'ALGORITHM.TITLE' |translate }}
-
+
{{ 'ALGORITHM.TITLE' |translate }}
+
@for (category of categories$ | async; track category.id) {
-
+
{{ category.title | translate }}
@@ -12,4 +11,3 @@
}
-
diff --git a/src/app/pages/algorithms/cloth/cloth.component.ts b/src/app/pages/algorithms/cloth/cloth.component.ts
index 20b81a0..f51779d 100644
--- a/src/app/pages/algorithms/cloth/cloth.component.ts
+++ b/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,
diff --git a/src/app/pages/algorithms/fractal/fractal.component.ts b/src/app/pages/algorithms/fractal/fractal.component.ts
index acd18aa..c1c6707 100644
--- a/src/app/pages/algorithms/fractal/fractal.component.ts
+++ b/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';
diff --git a/src/app/pages/algorithms/fractal3d/fractal3d.component.ts b/src/app/pages/algorithms/fractal3d/fractal3d.component.ts
index b65351b..b9244b7 100644
--- a/src/app/pages/algorithms/fractal3d/fractal3d.component.ts
+++ b/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',
diff --git a/src/app/pages/algorithms/pendulum/pendulum.component.ts b/src/app/pages/algorithms/pendulum/pendulum.component.ts
index 3c27ef4..67f0d78 100644
--- a/src/app/pages/algorithms/pendulum/pendulum.component.ts
+++ b/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';
diff --git a/src/app/pages/projects/projects.component.html b/src/app/pages/projects/projects.component.html
index 5d5f968..f11ad3d 100644
--- a/src/app/pages/projects/projects.component.html
+++ b/src/app/pages/projects/projects.component.html
@@ -1,4 +1,4 @@
-
+
@if (featuredProject(); as project) {
diff --git a/src/app/shared/components/particles-background/particles-background.component.scss b/src/app/shared/components/particles-background/particles-background.component.scss
index 1024a3c..2f4354d 100644
--- a/src/app/shared/components/particles-background/particles-background.component.scss
+++ b/src/app/shared/components/particles-background/particles-background.component.scss
@@ -11,4 +11,5 @@ canvas {
display: block;
width: 100%;
height: 100%;
+ border-width: 0;
}
diff --git a/src/app/shared/rendering/canvas/babylon-canvas.component.html b/src/app/shared/components/render-canvas/babylon-canvas.component.html
similarity index 100%
rename from src/app/shared/rendering/canvas/babylon-canvas.component.html
rename to src/app/shared/components/render-canvas/babylon-canvas.component.html
diff --git a/src/app/shared/rendering/canvas/babylon-canvas.component.scss b/src/app/shared/components/render-canvas/babylon-canvas.component.scss
similarity index 100%
rename from src/app/shared/rendering/canvas/babylon-canvas.component.scss
rename to src/app/shared/components/render-canvas/babylon-canvas.component.scss
diff --git a/src/app/shared/rendering/canvas/babylon-canvas.component.ts b/src/app/shared/components/render-canvas/babylon-canvas.component.ts
similarity index 100%
rename from src/app/shared/rendering/canvas/babylon-canvas.component.ts
rename to src/app/shared/components/render-canvas/babylon-canvas.component.ts
diff --git a/src/styles.scss b/src/styles.scss
index d4a918e..13b6e7c 100644
--- a/src/styles.scss
+++ b/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 {