add particles

package.json

@@ -21,6 +21,7 @@
     "@angular/platform-browser-dynamic": "~9.1.7",
     "@angular/router": "~9.1.7",
     "bootstrap": "^4.5.3",
+    "ng-particles": "^2.1.11",
     "rxjs": "~6.5.4",
     "tslib": "^1.10.0",
     "zone.js": "~0.10.2"

src/app/about/about.component.html

@@ -1,6 +1,6 @@
 <div class="component-about container">
   <div class="row">
-    <div class="col-10 mx-auto">
+    <div class="col-10 content mx-auto">
       <p> <b>DSLAK</b> è un progetto che nasce nel 2010 da un'idea di Carmine De Rosa, sviluppatore ed amministratore di sistema in ambiente Unix/Linux, dopo aver completato gli studi in ambito elettronico approfondisce le proprie conoscenze informatiche presso l'Università di Salerno dove insieme ad un gruppo di appassionati di haking fonda HCSSLUG (Linux Users Group dell'Università di Salerno) e ed il relativo HackLab con il quale realizza numerosi progetti in ambito OpenSource, basati sulla ricerca e sulla sperimentazione in ambito tecnologico. </p>
 
       <p> Nel 2006 si avvicina alle arti digitali e nel 2009, incuriosito dapprima dall'aspetto tecnico ma senza tralasciare quello scenico e concettuale, inizia ad approfondire le propie conoscenze nell'ambito della new-media art e delle installazioni interattive, studiando le soluzioni adottate da artisti affermati e sviluppando varie soluzioni alternative che utilizzano però un approccio più sostenibile, efficiente e soprattutto open. </p>

src/app/about/about.component.scss

@@ -1,48 +1,64 @@
 @import "../../assets/scss/variables";
 
 .component-about {
-  padding-top: 160px;
-  font-size: $font-18;
   z-index: 0;
 
-  .about-links {
+  .content {
+    margin: 150px auto 80px auto;
+    padding: 40px 50px;
+    font-size: $font-18;
+    text-align: justify;
+    background: $white-alpha;
     color: $black;
+    box-shadow: 0px 0px 25px $white-alpha;
+    border-radius: 10px;
 
-    .link {
-      display: flex;
-      text-decoration: none;
-      margin: 0;
-      padding: 0;
-      line-height: 35px;
-      width: 200px;
-      transition: transform .3s;
-
-
-      .icon {
-        display: inline-block;
-        font-size: 15px;
-        padding: 5px;
-        margin: 5px;
-        background: $dark-gray;
-        border-radius: 2px;
-        color: $white;
-        height: 25px;
-        width: 25px;
-        text-align: center;
-      }
+    .about-links {
+      color: $black;
 
-      .label {
-        display: inline-block;
-        color: $dark-gray;
-        font-size: $font-16;
-        padding-left: 5px;
+      .link {
+        display: flex;
+        text-decoration: none;
+        margin: 0;
+        padding: 0;
+        line-height: 35px;
+        width: 200px;
+        transition: transform .3s;
 
-      }
 
-      &:hover {
-        transform: scale(1.1);
+        .icon {
+          display: inline-block;
+          font-size: 15px;
+          padding: 5px;
+          margin: 5px;
+          background: $dark-gray;
+          border-radius: 2px;
+          color: $white;
+          height: 25px;
+          width: 25px;
+          text-align: center;
+        }
+
+        .label {
+          display: inline-block;
+          color: $dark-gray;
+          font-size: $font-16;
+          padding-left: 5px;
+
+        }
+
+        &:hover {
+          transform: scale(1.1);
+        }
       }
     }
   }
+}
 
+@media (min-width: map-get($grid-breakpoints, 'md')) {
+ .component-about {
+    .content {
+      transform: rotate(2deg) skew(0deg, -6deg);
+    }
+  }
 }

src/app/app-layout/app-layout.component.html

@@ -1,2 +1,4 @@
 <app-header></app-header>
 <router-outlet></router-outlet>
+
+<Particles class="particles" [id]="id" [options]="particlesOptions" (particlesLoaded)="particlesLoaded($event)"></Particles>

src/app/app-layout/app-layout.component.ts

@@ -1,4 +1,5 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit } from '@angular/core'
+import type { Container } from 'tsparticles'
 
 @Component({
   selector: 'app-app-layout',
@@ -7,9 +8,93 @@ import { Component, OnInit } from '@angular/core';
 })
 export class AppLayoutComponent implements OnInit {
 
+  id="tsparticles"
+  particlesOptions = {
+    background: {
+      color: {
+        value: "transparent"
+      }
+    },
+    fpsLimit: 60,
+    interactivity: {
+      detectsOn: "canvas",
+      events: {
+        onClick: {
+          enable: true,
+          mode: "push"
+        },
+        onHover: {
+          enable: true,
+          mode: "repulse"
+        },
+        resize: true
+      },
+      modes: {
+        bubble: {
+          distance: 200,
+          duration: 2,
+          opacity: 0.8,
+          size: 40
+        },
+        push: {
+          quantity: 6
+        },
+        repulse: {
+          distance: 100,
+          duration: 0.4
+        }
+      }
+    },
+    particles: {
+      color: {
+        value: "#fff"
+      },
+      links: {
+        color: "#fff",
+        distance: 150,
+        enable: true,
+        opacity: 0.7,
+        width: 1
+      },
+      collisions: {
+        enable: true
+      },
+      move: {
+        direction: "none",
+        enable: true,
+        outMode: "bounce",
+        random: false,
+        speed: 2,
+        straight: false
+      },
+      number: {
+        density: {
+          enable: true,
+          value_area: 600
+        },
+        value: 90
+      },
+      opacity: {
+        value: 0.5
+      },
+      shape: {
+        type: "circle"
+      },
+      size: {
+        random: true,
+        value: 5
+      }
+    },
+    detectRetina: true
+  }
+
   constructor() { }
 
   ngOnInit(): void {
   }
 
+
+  particlesLoaded(container: Container): void {
+    console.log('particlesLoaded', container)
+  }
 }

src/app/app.module.ts

@@ -1,5 +1,6 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
+import { NgParticlesModule } from "ng-particles";
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@@ -28,7 +29,8 @@ import { WorkshopsComponent } from './workshops/workshops.component';
   ],
   imports: [
     BrowserModule,
-    AppRoutingModule
+    AppRoutingModule,
+    NgParticlesModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/header/header.component.scss

@@ -7,7 +7,7 @@
   left: 0;
   height: 100vh;
   width: 100vw;
-  background: $yellow;
+  background: transparent;
   transition: height .5s, background .4s;
   z-index: 100;
 
@@ -61,9 +61,8 @@
   }
 
   &.sticky {
-    height: 100px;
-    background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%,
-                rgba(255, 255, 255, 0.8) 20%, $white 70%, $white 100%);
+    height: 0;
+    background: transparent;
 
     .logo-container {
       height: 80px;
@@ -72,7 +71,7 @@
       .circles {
         &:before,
         &:after {
-          background: $yellow;
+          //background: $yellow;
         }
       }
 
@@ -95,7 +94,7 @@
     left: 0;
     height: 100%;
     width: 100%;
-    background: $yellow;
+    background: $yellow-alpha;
     border-radius: 100px;
     transform: scale(0) skew(20deg, 20deg);
     transition: transform .5s, border-radius .4s;

src/app/header/header.component.ts

@@ -16,12 +16,13 @@ export class HeaderComponent implements OnInit {
   constructor(@Inject(DOCUMENT) private document: Document, private router: Router) {
     router.events.subscribe((val) => {
       this.isMenuOpen = false
-      this.isSticky = true
+      //this.isSticky = true
       this.document.body.classList.remove('no-scroll')
     })
   }
 
   ngOnInit(): void {
+    this.isSticky = this.router.url != '/'
   }
 
   @HostListener('window:scroll', ['$event'])

src/assets/scss/global.scss

@@ -11,3 +11,15 @@ body {
     overflow: hidden;
   }
 }
+
+
+.particles {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100vh;
+  width: 100vw;
+  background: radial-gradient(circle, $white 0%, $white 80%, rgba(160, 220,0,0.1) 90%, rgba(160, 220,0,0.2) 100%);
+  background: $yellow;
+  z-index: -1;
+}

src/assets/scss/variables.scss

@@ -22,15 +22,16 @@ $breadcrumb-height: 60px;
 
 // Colors
 $white:       #fff;
-$black:       #111;
+$black:       #000;
 $gray:        #ccc;
 $light-gray:  #eee;
 $dark-gray:   #333;
 
 $yellow:      #a2dc02;
 
-$white-alpha: rgba(255, 255, 255, 0.9);
-$black-alpha: rgba(0, 0, 0, 0.9);
+$white-alpha: rgba(255, 255, 255, 0.8);
+$black-alpha: rgba(0, 0, 0, 0.8);
+$yellow-alpha: rgba(160, 220, 0, 0.8);
 
 // Fonts
 $font-primary: 'Abel';