diff --git a/package.json b/package.json index 48394a0..05dfa36 100644 --- a/package.json +++ b/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" diff --git a/src/app/about/about.component.html b/src/app/about/about.component.html index cded0fb..16f8f6c 100644 --- a/src/app/about/about.component.html +++ b/src/app/about/about.component.html @@ -1,6 +1,6 @@
-
+

DSLAK è 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.

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.

diff --git a/src/app/about/about.component.scss b/src/app/about/about.component.scss index 198b00f..de85f7e 100644 --- a/src/app/about/about.component.scss +++ b/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); + } + } } diff --git a/src/app/app-layout/app-layout.component.html b/src/app/app-layout/app-layout.component.html index 1e15754..d132564 100644 --- a/src/app/app-layout/app-layout.component.html +++ b/src/app/app-layout/app-layout.component.html @@ -1,2 +1,4 @@ + + diff --git a/src/app/app-layout/app-layout.component.ts b/src/app/app-layout/app-layout.component.ts index ec8cf2b..8fea4ac 100644 --- a/src/app/app-layout/app-layout.component.ts +++ b/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) + } } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 37e4b7f..b84bd67 100644 --- a/src/app/app.module.ts +++ b/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] diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss index b4ea69a..72629da 100644 --- a/src/app/header/header.component.scss +++ b/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; diff --git a/src/app/header/header.component.ts b/src/app/header/header.component.ts index 6c4796e..e4c7522 100644 --- a/src/app/header/header.component.ts +++ b/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']) diff --git a/src/assets/scss/global.scss b/src/assets/scss/global.scss index a8e6487..e028bef 100644 --- a/src/assets/scss/global.scss +++ b/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; +} diff --git a/src/assets/scss/variables.scss b/src/assets/scss/variables.scss index d4114e6..a6189e7 100644 --- a/src/assets/scss/variables.scss +++ b/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';