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 {