feat: added particles system to it, and modified files to show the particles as i want it

frontend/package.json

@@ -56,6 +56,9 @@
     "@angular/platform-server": "^22.0.0",
     "@angular/router": "^22.0.0",
     "@angular/ssr": "^22.0.0",
+    "@tsparticles/basic": "^4.1.3",
+    "@tsparticles/engine": "^4.1.3",
+    "@tsparticles/shape-image": "^4.1.3",
     "express": "^5.2.1",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",

frontend/src/app/app.component.html

@@ -1,4 +1,8 @@
+<div id="tsparticles"></div>
 <div class="app-container">
   <app-header></app-header>
+  <main class="main-content">
+    <router-outlet></router-outlet>
+  </main>
   <app-footer></app-footer>
 </div>

frontend/src/app/app.component.scss

@@ -1,5 +1,24 @@
 @use 'variables' as *;
 
+#tsparticles {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+}
+
+.main-content {
+  grid-area: main;
+  background: transparent;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  grid-column: 1 / -1;
+  height: 100%;
+}
+
 app-header {
   grid-area: header;
   width: 100%;
@@ -24,5 +43,5 @@ app-footer {
     'main main main news'
     'footer footer footer footer';
   height: 100vh;
-  background-color: $color-background-dark;
+  background: transparent;
 }

frontend/src/app/app.component.ts

@@ -1,13 +1,52 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject, PLATFORM_ID, OnInit } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+import { RouterOutlet } from '@angular/router';
 import { HeaderComponent } from './shared/ui/header/header.component';
 import { FooterComponent } from './shared/ui/footer/footer.component';
 
+import { tsParticles } from '@tsparticles/engine';
+import { loadBasic } from '@tsparticles/basic';
+import { loadImageShape } from '@tsparticles/shape-image';
+
 @Component({
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'app-root',
-  imports: [HeaderComponent, FooterComponent],
+  imports: [RouterOutlet, HeaderComponent, FooterComponent],
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
 })
-export class AppComponent {}
+export class AppComponent implements OnInit {
+  private platformId = inject(PLATFORM_ID);
+
+  async ngOnInit(): Promise<void> {
+    if (!isPlatformBrowser(this.platformId)) return;
+
+    await loadBasic(tsParticles);
+    await loadImageShape(tsParticles);
+
+    await tsParticles.load({
+      id: 'tsparticles',
+      options: {
+        background: { color: '#121212' },
+        particles: {
+          number: { value: 200 },
+          shape: {
+            type: 'image',
+            options: {
+              image: {
+                src: 'assets/logo/djredflame.png',
+                width: 50,
+                height: 50,
+              },
+            },
+          },
+          size: { value: { min: 5, max: 10 } },
+          opacity: { value: 0.8 },
+          move: { enable: true, speed: 1.5, direction: 'none', outModes: 'bounce' },
+          rotate: { value: { min: 0, max: 360 }, animation: { enable: true, speed: 5 } },
+        },
+      },
+    });
+  }
+}

frontend/src/app/pages/home/home.component.html

@@ -1,4 +1,4 @@
 <div class="home-container">
-  <h1>Welcome to DJ RedFlame's Website</h1>
+  <h1>Welcome to DJ Redflame's Website</h1>
   <p>This is under construction, be patient</p>
 </div>

frontend/src/app/pages/home/home.component.scss

@@ -1,7 +1,14 @@
 @use 'variables' as *;
 
+:host {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
 .home-container {
   width: 100%;
+  background: rgba($color-background-dark, 0.8);
 
   h1 {
     text-align: center;

frontend/src/app/shared/ui/footer/footer.component.scss

@@ -2,6 +2,7 @@
 
 .footer {
   width: 100%;
+  background: rgba($color-background-dark, 0.8);
 
   p {
     text-align: center;

frontend/src/app/shared/ui/header/header.component.html

@@ -1 +1 @@
-<app-nav></app-nav> <router-outlet></router-outlet>
+<app-nav></app-nav>

frontend/src/app/shared/ui/header/header.component.ts

@@ -1,10 +1,9 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { NavComponent } from '../nav/nav.component';
-import { RouterOutlet } from '@angular/router';
 
 @Component({
   selector: 'app-header',
-  imports: [NavComponent, RouterOutlet],
+  imports: [NavComponent],
   templateUrl: './header.component.html',
   styleUrl: './header.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,

frontend/src/styles.scss

@@ -6,7 +6,8 @@ body {
   padding: 0;
   width: 100%;
   min-height: 100%;
-  background-color: $color-background-dark;
+  background-color: transparent;
+  overflow-x: hidden;
 }
 
 app-root {