Add particle effect

src/app/app.css

@@ -1,9 +1,12 @@
 .shell {
   min-height: 100vh;
   position: relative;
+  isolation: isolate;
 }
 
 .content {
+  position: relative;
+  z-index: 2;
   max-width: 1500px;
   min-height: 100svh;
   margin: 0 auto;
@@ -26,7 +29,7 @@
   border-radius: 20px;
   background: rgba(22, 27, 34, 0.92);
   backdrop-filter: blur(10px);
-  z-index: 20;
+  z-index: 3;
 }
 
 .sidebar-header {

src/app/app.html

@@ -1,4 +1,6 @@
 <div class="shell">
+  <app-interactive-background></app-interactive-background>
+
   <main class="content">
     <router-outlet></router-outlet>
     <footer class="site-footer">

src/app/app.spec.ts

@@ -22,6 +22,7 @@ describe('App', () => {
     fixture.detectChanges();
 
     const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('app-interactive-background')).toBeTruthy();
     expect(compiled.querySelector('.sidebar')).toBeTruthy();
     expect(compiled.querySelectorAll('.nav a').length).toBeGreaterThanOrEqual(4);
     expect(compiled.querySelector('.site-footer')).toBeTruthy();

src/app/app.ts

@@ -1,9 +1,10 @@
 import { Component } from '@angular/core';
 import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
+import { InteractiveBackground } from '../components/interactive-background/interactive-background';
 
 @Component({
   selector: 'app-root',
-  imports: [RouterLink, RouterLinkActive, RouterOutlet],
+  imports: [RouterLink, RouterLinkActive, RouterOutlet, InteractiveBackground],
   templateUrl: './app.html',
   styleUrl: './app.css'
 })