+
+ 
+
+ {{item.title}}
+ {{item.type}}
+
+
+
+
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 de85f7e..24c9086 100644 --- a/src/app/about/about.component.scss +++ b/src/app/about/about.component.scss @@ -4,6 +4,7 @@ z-index: 0; .content { + position: relative; margin: 150px auto 80px auto; padding: 40px 50px; font-size: $font-18; @@ -24,7 +25,7 @@ line-height: 35px; width: 200px; transition: transform .3s; - + -webkit-backface-visibility: hidden; .icon { display: inline-block; @@ -52,6 +53,27 @@ } } } + + .back { + position: absolute; + top: -40px; + left: 0px; + height: 40px; + width: 60px; + appearance: none; + border: none; + padding: 0; + font-size: $font-40; + color: $white-alpha; + background: transparent; + cursor: pointer; + transition: transform .3s; + -webkit-backface-visibility: hidden; + + &:hover { + transform: scale(1.1) translateX(-10px); + } + } } } diff --git a/src/app/about/about.component.ts b/src/app/about/about.component.ts index 9898f7a..204648a 100644 --- a/src/app/about/about.component.ts +++ b/src/app/about/about.component.ts @@ -1,4 +1,5 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit } from '@angular/core' +import { Location } from '@angular/common' @Component({ selector: 'app-about', @@ -7,9 +8,14 @@ import { Component, OnInit } from '@angular/core'; }) export class AboutComponent implements OnInit { - constructor() { } + constructor( + private location: Location + ) { } ngOnInit(): void { } + back() { + this.location.back() + } } diff --git a/src/app/app-layout/app-layout.component.ts b/src/app/app-layout/app-layout.component.ts index d041db1..83ed410 100644 --- a/src/app/app-layout/app-layout.component.ts +++ b/src/app/app-layout/app-layout.component.ts @@ -8,7 +8,7 @@ import type { Container } from 'tsparticles' }) export class AppLayoutComponent implements OnInit { - public particlesEnabled: boolean = false + public particlesEnabled: boolean = true public id: string = 'tsparticles' public particlesOptions: any = { diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 880d671..1b2066f 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -3,12 +3,7 @@ import { Routes, RouterModule } from '@angular/router' import { AppLayoutComponent } from './app-layout/app-layout.component' import { AboutComponent } from './about/about.component' import { PortfolioComponent } from './portfolio/portfolio.component' -import { ExhibitionsComponent } from './exhibitions/exhibitions.component' -import { InstallationsComponent } from './installations/installations.component' -import { EntertainmentComponent } from './entertainment/entertainment.component' -import { PerformancesComponent } from './performances/performances.component' -import { WorkshopsComponent } from './workshops/workshops.component' - +import { DetailComponent } from './detail/detail.component' const routes: Routes = [ { @@ -17,13 +12,19 @@ const routes: Routes = [ children: [ //{ path: '', redirectTo: '/portfolio', pathMatch: 'full' }, { path: '', component: PortfolioComponent }, - { path: 'portfolio', component: PortfolioComponent }, { path: 'about', component: AboutComponent }, - { path: 'exhibitions', component: ExhibitionsComponent }, - { path: 'installations', component: InstallationsComponent }, - { path: 'entertainment', component: EntertainmentComponent }, - { path: 'performances', component: PerformancesComponent }, - { path: 'workshops', component: WorkshopsComponent } + { path: 'portfolio', component: PortfolioComponent }, + { path: 'exhibitions', component: PortfolioComponent }, + { path: 'installations', component: PortfolioComponent }, + { path: 'entertainment', component: PortfolioComponent }, + { path: 'performances', component: PortfolioComponent }, + { path: 'workshops', component: PortfolioComponent }, + { path: 'detail', component: DetailComponent, + children: [ + { path: '**', component: DetailComponent } + ] + } + ] } ] diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 9ac77c7..cb94103 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -9,11 +9,7 @@ import { HeaderComponent } from './header/header.component'; import { AppLayoutComponent } from './app-layout/app-layout.component'; import { AboutComponent } from './about/about.component'; import { PortfolioComponent } from './portfolio/portfolio.component'; -import { ExhibitionsComponent } from './exhibitions/exhibitions.component'; -import { InstallationsComponent } from './installations/installations.component'; -import { EntertainmentComponent } from './entertainment/entertainment.component'; -import { PerformancesComponent } from './performances/performances.component'; -import { WorkshopsComponent } from './workshops/workshops.component'; +import { DetailComponent } from './detail/detail.component'; @NgModule({ declarations: [ @@ -22,11 +18,7 @@ import { WorkshopsComponent } from './workshops/workshops.component'; AppLayoutComponent, AboutComponent, PortfolioComponent, - ExhibitionsComponent, - InstallationsComponent, - EntertainmentComponent, - PerformancesComponent, - WorkshopsComponent + DetailComponent ], imports: [ BrowserModule, diff --git a/src/app/detail/detail.component.html b/src/app/detail/detail.component.html new file mode 100644 index 0000000..408cb39 --- /dev/null +++ b/src/app/detail/detail.component.html @@ -0,0 +1,9 @@ +
+ ;
+describe('DetailComponent', () => {
+ let component: DetailComponent;
+ let fixture: ComponentFixture;
beforeEach(async(() => {
TestBed.configureTestingModule({
- declarations: [ ExhibitionsComponent ]
+ declarations: [ DetailComponent ]
})
.compileComponents();
}));
beforeEach(() => {
- fixture = TestBed.createComponent(ExhibitionsComponent);
+ fixture = TestBed.createComponent(DetailComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
diff --git a/src/app/detail/detail.component.ts b/src/app/detail/detail.component.ts
new file mode 100644
index 0000000..760367f
--- /dev/null
+++ b/src/app/detail/detail.component.ts
@@ -0,0 +1,38 @@
+import { Component, OnInit } from '@angular/core'
+import { Router, NavigationEnd } from '@angular/router'
+import { Location } from '@angular/common'
+import { ApisService } from '../services/apis.service'
+
+@Component({
+ selector: 'app-detail',
+ templateUrl: './detail.component.html',
+ styleUrls: ['./detail.component.scss']
+})
+export class DetailComponent implements OnInit {
+
+ public details: any = {}
+
+ constructor(
+ private apisService: ApisService,
+ private router: Router,
+ private location: Location
+ ){ }
+
+ ngOnInit(): void {
+ this.showDetails(this.router.url.split('/')[2])
+ }
+
+ showDetails(id): void {
+ this.apisService.getDetails(id).toPromise().then((response) => {
+ this.details = response.item
+ },(error) => {
+ console.error('getPortfolio ERROR', error)
+ }).catch((e) => {
+ console.error('getPortfolio CATCH', e)
+ })
+ }
+
+ back() {
+ this.location.back()
+ }
+}
diff --git a/src/app/entertainment/entertainment.component.html b/src/app/entertainment/entertainment.component.html
deleted file mode 100644
index 64e075f..0000000
--- a/src/app/entertainment/entertainment.component.html
+++ /dev/null
@@ -1 +0,0 @@
-;
-
- beforeEach(async(() => {
- TestBed.configureTestingModule({
- declarations: [ EntertainmentComponent ]
- })
- .compileComponents();
- }));
-
- beforeEach(() => {
- fixture = TestBed.createComponent(EntertainmentComponent);
- component = fixture.componentInstance;
- fixture.detectChanges();
- });
-
- it('should create', () => {
- expect(component).toBeTruthy();
- });
-});
diff --git a/src/app/entertainment/entertainment.component.ts b/src/app/entertainment/entertainment.component.ts
deleted file mode 100644
index c6b6381..0000000
--- a/src/app/entertainment/entertainment.component.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
- selector: 'app-entertainment',
- templateUrl: './entertainment.component.html',
- styleUrls: ['./entertainment.component.scss']
-})
-export class EntertainmentComponent implements OnInit {
-
- constructor() { }
-
- ngOnInit(): void {
- }
-
-}
diff --git a/src/app/exhibitions/exhibitions.component.html b/src/app/exhibitions/exhibitions.component.html
deleted file mode 100644
index 85a0021..0000000
--- a/src/app/exhibitions/exhibitions.component.html
+++ /dev/null
@@ -1 +0,0 @@
-;
-
- beforeEach(async(() => {
- TestBed.configureTestingModule({
- declarations: [ InstallationsComponent ]
- })
- .compileComponents();
- }));
-
- beforeEach(() => {
- fixture = TestBed.createComponent(InstallationsComponent);
- component = fixture.componentInstance;
- fixture.detectChanges();
- });
-
- it('should create', () => {
- expect(component).toBeTruthy();
- });
-});
diff --git a/src/app/installations/installations.component.ts b/src/app/installations/installations.component.ts
deleted file mode 100644
index 61102ea..0000000
--- a/src/app/installations/installations.component.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
- selector: 'app-installations',
- templateUrl: './installations.component.html',
- styleUrls: ['./installations.component.scss']
-})
-export class InstallationsComponent implements OnInit {
-
- constructor() { }
-
- ngOnInit(): void {
- }
-
-}
diff --git a/src/app/performances/performances.component.html b/src/app/performances/performances.component.html
deleted file mode 100644
index 7b9658d..0000000
--- a/src/app/performances/performances.component.html
+++ /dev/null
@@ -1 +0,0 @@
-;
-
- beforeEach(async(() => {
- TestBed.configureTestingModule({
- declarations: [ PerformancesComponent ]
- })
- .compileComponents();
- }));
-
- beforeEach(() => {
- fixture = TestBed.createComponent(PerformancesComponent);
- component = fixture.componentInstance;
- fixture.detectChanges();
- });
-
- it('should create', () => {
- expect(component).toBeTruthy();
- });
-});
diff --git a/src/app/performances/performances.component.ts b/src/app/performances/performances.component.ts
deleted file mode 100644
index 97bbb04..0000000
--- a/src/app/performances/performances.component.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
- selector: 'app-performances',
- templateUrl: './performances.component.html',
- styleUrls: ['./performances.component.scss']
-})
-export class PerformancesComponent implements OnInit {
-
- constructor() { }
-
- ngOnInit(): void {
- }
-
-}
diff --git a/src/app/portfolio/portfolio.component.html b/src/app/portfolio/portfolio.component.html
index 8efcc9d..546cba5 100644
--- a/src/app/portfolio/portfolio.component.html
+++ b/src/app/portfolio/portfolio.component.html
@@ -1,12 +1,14 @@
+
diff --git a/src/app/detail/detail.component.scss b/src/app/detail/detail.component.scss
new file mode 100644
index 0000000..0df604d
--- /dev/null
+++ b/src/app/detail/detail.component.scss
@@ -0,0 +1,63 @@
+@import "../../assets/scss/variables";
+
+.component-detail {
+ z-index: 0;
+
+ .content {
+ position: relative;
+ margin: 150px auto 80px auto;
+ padding: 40px 50px;
+ background: $white-alpha;
+ color: $black;
+ box-shadow: 0px 0px 25px $white-alpha;
+ border-radius: 10px;
+
+ .title {
+ margin-top: 0;
+ font-size: $font-34;
+ font-weight: bold;
+ text-transform: uppercase;
+ }
+
+ .text {
+ font-size: $font-18;
+ text-align: justify;
+ }
+
+ .tags {
+ display: block;
+ font-size: $font-12;
+ text-transform: uppercase;
+ padding-top: 40px;
+ }
+
+ .back {
+ position: absolute;
+ top: -40px;
+ left: 0px;
+ height: 40px;
+ width: 60px;
+ appearance: none;
+ border: none;
+ padding: 0;
+ font-size: $font-40;
+ color: $white-alpha;
+ background: transparent;
+ cursor: pointer;
+ transition: transform .3s;
+ -webkit-backface-visibility: hidden;
+
+ &:hover {
+ transform: scale(1.1) translateX(-10px);
+ }
+ }
+ }
+}
+
+@media (min-width: map-get($grid-breakpoints, 'md')) {
+ .component-detail {
+ .content {
+ transform: rotate(2deg) skew(0deg, -6deg);
+ }
+ }
+}
diff --git a/src/app/exhibitions/exhibitions.component.spec.ts b/src/app/detail/detail.component.spec.ts
similarity index 53%
rename from src/app/exhibitions/exhibitions.component.spec.ts
rename to src/app/detail/detail.component.spec.ts
index c655d74..149b9be 100644
--- a/src/app/exhibitions/exhibitions.component.spec.ts
+++ b/src/app/detail/detail.component.spec.ts
@@ -1,20 +1,20 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { ExhibitionsComponent } from './exhibitions.component';
+import { DetailComponent } from './detail.component';
-describe('ExhibitionsComponent', () => {
- let component: ExhibitionsComponent;
- let fixture: ComponentFixture
+
+
+{{details.title}}
+ + +entertainment works!
diff --git a/src/app/entertainment/entertainment.component.scss b/src/app/entertainment/entertainment.component.scss deleted file mode 100644 index e69de29..0000000 diff --git a/src/app/entertainment/entertainment.component.spec.ts b/src/app/entertainment/entertainment.component.spec.ts deleted file mode 100644 index 416bfd2..0000000 --- a/src/app/entertainment/entertainment.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { EntertainmentComponent } from './entertainment.component'; - -describe('EntertainmentComponent', () => { - let component: EntertainmentComponent; - let fixture: ComponentFixtureexhibitions works!
diff --git a/src/app/exhibitions/exhibitions.component.scss b/src/app/exhibitions/exhibitions.component.scss deleted file mode 100644 index e69de29..0000000 diff --git a/src/app/exhibitions/exhibitions.component.ts b/src/app/exhibitions/exhibitions.component.ts deleted file mode 100644 index c2c1747..0000000 --- a/src/app/exhibitions/exhibitions.component.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { Component, OnInit } from '@angular/core'; - -@Component({ - selector: 'app-exhibitions', - templateUrl: './exhibitions.component.html', - styleUrls: ['./exhibitions.component.scss'] -}) -export class ExhibitionsComponent implements OnInit { - - constructor() { } - - ngOnInit(): void { - } - -} diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss index 72629da..83a90d6 100644 --- a/src/app/header/header.component.scss +++ b/src/app/header/header.component.scss @@ -65,8 +65,8 @@ background: transparent; .logo-container { - height: 80px; - width: 80px; + height: 100px; + width: 100px; .circles { &:before, @@ -76,8 +76,8 @@ } &.menu-open { - height: 120px; - width: 120px; + height: 140px; + width: 140px; .circles { &:before, &:after { diff --git a/src/app/installations/installations.component.html b/src/app/installations/installations.component.html deleted file mode 100644 index c142693..0000000 --- a/src/app/installations/installations.component.html +++ /dev/null @@ -1 +0,0 @@ -installations works!
diff --git a/src/app/installations/installations.component.scss b/src/app/installations/installations.component.scss deleted file mode 100644 index e69de29..0000000 diff --git a/src/app/installations/installations.component.spec.ts b/src/app/installations/installations.component.spec.ts deleted file mode 100644 index c50ae75..0000000 --- a/src/app/installations/installations.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { InstallationsComponent } from './installations.component'; - -describe('InstallationsComponent', () => { - let component: InstallationsComponent; - let fixture: ComponentFixtureperformances works!
diff --git a/src/app/performances/performances.component.scss b/src/app/performances/performances.component.scss deleted file mode 100644 index e69de29..0000000 diff --git a/src/app/performances/performances.component.spec.ts b/src/app/performances/performances.component.spec.ts deleted file mode 100644 index 0ee44e3..0000000 --- a/src/app/performances/performances.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { PerformancesComponent } from './performances.component'; - -describe('PerformancesComponent', () => { - let component: PerformancesComponent; - let fixture: ComponentFixture
-
-
- {
+ let urlApi = `${this.restApi}?query=single&id=${id}`
+ return this.http.get(urlApi).pipe(
+ catchError(this.handleError)
+ )
+ }
+
}
diff --git a/src/assets/fonts/icomoon.eot b/src/assets/fonts/icomoon.eot
index 5824380..80e12db 100644
Binary files a/src/assets/fonts/icomoon.eot and b/src/assets/fonts/icomoon.eot differ
diff --git a/src/assets/fonts/icomoon.svg b/src/assets/fonts/icomoon.svg
index 72eb491..5aa57eb 100644
--- a/src/assets/fonts/icomoon.svg
+++ b/src/assets/fonts/icomoon.svg
@@ -7,6 +7,7 @@
- {{item.title}}
- {{item.type}}
-
+
diff --git a/src/app/portfolio/portfolio.component.scss b/src/app/portfolio/portfolio.component.scss
index df199b0..554c6d3 100644
--- a/src/app/portfolio/portfolio.component.scss
+++ b/src/app/portfolio/portfolio.component.scss
@@ -1,7 +1,7 @@
@import "../../assets/scss/variables";
.component-portfolio {
- padding-top: 100px;
+ padding-top: 140px;
.box {
position: relative;
@@ -9,7 +9,7 @@
background: $black;
border-radius: 10px;
overflow: hidden;
- margin: 40px;
+ margin: 20px 0;
padding: 20px;
cursor: pointer;
transition: transform .4s;
@@ -64,10 +64,12 @@
}
&:hover {
- //transform: scale(1.4) skew(2deg, 2deg) rotate(2deg);
+ z-index: 50;
+
@each $angle in 0,1,2,3,4,5,6 {
&.skew-#{$angle} {transform: scale(1.4) rotate(2deg) skew(#{3 - $angle}deg, #{3 - $angle}deg) ;}
}
+
.image {
transform: translate(-50%, -50%) scale(1.4);
}
diff --git a/src/app/portfolio/portfolio.component.ts b/src/app/portfolio/portfolio.component.ts
index 95cbf2b..ecdf1e1 100644
--- a/src/app/portfolio/portfolio.component.ts
+++ b/src/app/portfolio/portfolio.component.ts
@@ -1,4 +1,5 @@
import { Component, OnInit } from '@angular/core'
+import { Router, NavigationEnd } from '@angular/router'
import { ApisService } from '../services/apis.service'
@Component({
@@ -10,10 +11,13 @@ export class PortfolioComponent implements OnInit {
public portfolioItems: any = []
- constructor(private apisService: ApisService) { }
+ constructor(
+ private apisService: ApisService,
+ private router: Router)
+ { }
ngOnInit(): void {
- this.apisService.getPortfolio('portfolio').toPromise().then((response) => {
+ this.apisService.getPortfolio(this.router.url.split('/')[1]).toPromise().then((response) => {
this.portfolioItems = response.items
},(error) => {
console.error('getPortfolio ERROR', error)
@@ -22,5 +26,8 @@ export class PortfolioComponent implements OnInit {
})
}
+ showDetails(id): void {
+ this.router.navigate([`/detail/${id}`])
+ }
}
diff --git a/src/app/services/apis.service.ts b/src/app/services/apis.service.ts
index 48124b9..3df86b3 100644
--- a/src/app/services/apis.service.ts
+++ b/src/app/services/apis.service.ts
@@ -23,4 +23,11 @@ export class ApisService extends BaseService {
)
}
+ getDetails(id): Observable