From b3e0026cb2c9fc64fd6f5717facd6c772f34af1b Mon Sep 17 00:00:00 2001 From: Dslak Date: Wed, 2 Dec 2020 12:09:47 +0100 Subject: [PATCH 1/8] add about add bootstrap --- package.json | 1 + src/app/about/about.component.html | 41 ++++++++++- src/app/about/about.component.scss | 48 +++++++++++++ src/app/app-layout/app-layout.component.html | 52 -------------- src/app/app-routing.module.ts | 3 +- src/app/header/header.component.scss | 9 ++- src/app/header/header.component.ts | 4 +- src/app/portfolio/portfolio.component.html | 42 +++++++++++ src/assets/fonts/icomoon.eot | Bin 0 -> 5464 bytes src/assets/fonts/icomoon.svg | 24 +++++++ src/assets/fonts/icomoon.ttf | Bin 0 -> 5300 bytes src/assets/fonts/icomoon.woff | Bin 0 -> 5376 bytes src/assets/fonts/selection.json | 1 + src/assets/scss/icons.scss | 72 +++++++++++++++++++ src/assets/scss/main.scss | 4 ++ src/assets/scss/variables.scss | 2 +- 16 files changed, 244 insertions(+), 59 deletions(-) create mode 100644 src/assets/fonts/icomoon.eot create mode 100644 src/assets/fonts/icomoon.svg create mode 100644 src/assets/fonts/icomoon.ttf create mode 100644 src/assets/fonts/icomoon.woff create mode 100644 src/assets/fonts/selection.json create mode 100644 src/assets/scss/icons.scss diff --git a/package.json b/package.json index 5c909c1..48394a0 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "@angular/platform-browser": "~9.1.7", "@angular/platform-browser-dynamic": "~9.1.7", "@angular/router": "~9.1.7", + "bootstrap": "^4.5.3", "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 6094aa9..cded0fb 100644 --- a/src/app/about/about.component.html +++ b/src/app/about/about.component.html @@ -1 +1,40 @@ -

about works!

+
+
+
+

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.

+ +

Nel 2011 realizza le sue prime installazioni interattive e ad oggi è alla continua ricerca di soluzioni creative.

+ +

DSLAK ha ad oggi all'attivo numerosi progetti, come workshops sull'utilizzo di sensori e microcontrollori nel campo dell'interattività e delle arti digitali, installazioni interattive e performances live frutto della sperimentazione e della ricerca continua, oltre alle collaborazioni con diversi artisti nazionali ed internazionali.

+ + +
+ + +
dslakMediaArts
+ + + +
dslak
+ + + +
dslak
+ + + +
dslak_
+ + + +
+39 339 1805849
+ + + +
dslaknma@gmail.com
+ +
+
+
diff --git a/src/app/about/about.component.scss b/src/app/about/about.component.scss index e69de29..198b00f 100644 --- a/src/app/about/about.component.scss +++ b/src/app/about/about.component.scss @@ -0,0 +1,48 @@ +@import "../../assets/scss/variables"; + +.component-about { + padding-top: 160px; + font-size: $font-18; + z-index: 0; + + .about-links { + color: $black; + + .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; + } + + .label { + display: inline-block; + color: $dark-gray; + font-size: $font-16; + padding-left: 5px; + + } + + &:hover { + transform: scale(1.1); + } + } + } + +} diff --git a/src/app/app-layout/app-layout.component.html b/src/app/app-layout/app-layout.component.html index a8b3c97..1e15754 100644 --- a/src/app/app-layout/app-layout.component.html +++ b/src/app/app-layout/app-layout.component.html @@ -1,54 +1,2 @@ -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index c438ec1..880d671 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -15,7 +15,8 @@ const routes: Routes = [ path: '', component: AppLayoutComponent, children: [ - { path: '', redirectTo: '/portfolio', pathMatch: 'full' }, + //{ path: '', redirectTo: '/portfolio', pathMatch: 'full' }, + { path: '', component: PortfolioComponent }, { path: 'portfolio', component: PortfolioComponent }, { path: 'about', component: AboutComponent }, { path: 'exhibitions', component: ExhibitionsComponent }, diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss index 0c448c9..b4ea69a 100644 --- a/src/app/header/header.component.scss +++ b/src/app/header/header.component.scss @@ -8,7 +8,8 @@ height: 100vh; width: 100vw; background: $yellow; - transition: height .5s; + transition: height .5s, background .4s; + z-index: 100; .logo-container { height: 200px; @@ -60,7 +61,9 @@ } &.sticky { - height: 0px; + height: 100px; + background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, + rgba(255, 255, 255, 0.8) 20%, $white 70%, $white 100%); .logo-container { height: 80px; @@ -102,7 +105,7 @@ display: block; text-align: center; padding-top: 180px; - height: calc(100vh - 180px); + height: 100vh; overflow: hidden; overflow-y: auto; diff --git a/src/app/header/header.component.ts b/src/app/header/header.component.ts index 5776f44..6c4796e 100644 --- a/src/app/header/header.component.ts +++ b/src/app/header/header.component.ts @@ -11,6 +11,7 @@ export class HeaderComponent implements OnInit { public isSticky: boolean = false public isMenuOpen: boolean = false + public isFirstScroll: boolean = true constructor(@Inject(DOCUMENT) private document: Document, private router: Router) { router.events.subscribe((val) => { @@ -29,7 +30,8 @@ export class HeaderComponent implements OnInit { || document.documentElement.scrollTop || document.body.scrollTop || 0 - this.isSticky = this.isMenuOpen || verticalOffset > 10 + this.isFirstScroll = this.router.url == '/' + this.isSticky = this.isFirstScroll ? this.isMenuOpen || verticalOffset > 10 : true } toggleMenu(): void { diff --git a/src/app/portfolio/portfolio.component.html b/src/app/portfolio/portfolio.component.html index 6944f6f..616f657 100644 --- a/src/app/portfolio/portfolio.component.html +++ b/src/app/portfolio/portfolio.component.html @@ -1 +1,43 @@

portfolio works!

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/assets/fonts/icomoon.eot b/src/assets/fonts/icomoon.eot new file mode 100644 index 0000000000000000000000000000000000000000..5824380a35eafe9d20ddccab6fe2bdb7af243f82 GIT binary patch literal 5464 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 literal 0 HcmV?d00001 diff --git a/src/assets/fonts/icomoon.svg b/src/assets/fonts/icomoon.svg new file mode 100644 index 0000000..72eb491 --- /dev/null +++ b/src/assets/fonts/icomoon.svg @@ -0,0 +1,24 @@ + + + +Generated by IcoMoon + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/fonts/icomoon.ttf b/src/assets/fonts/icomoon.ttf new file mode 100644 index 0000000000000000000000000000000000000000..1492972c54ff9c9c8dfdaaa8b572a256ed2c6f1a GIT binary patch literal 5300 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 Yoj^~*bH+DdZ(snd5e|Oyk$kxQf6!GLjsO4v literal 0 HcmV?d00001 diff --git a/src/assets/fonts/icomoon.woff b/src/assets/fonts/icomoon.woff new file mode 100644 index 0000000000000000000000000000000000000000..6deaa896ab58dbcb0073ddbf316b033602a6f22e GIT binary patch literal 5376 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 literal 0 HcmV?d00001 diff --git a/src/assets/fonts/selection.json b/src/assets/fonts/selection.json new file mode 100644 index 0000000..2365dd4 --- /dev/null +++ b/src/assets/fonts/selection.json @@ -0,0 +1 @@ +{"IcoMoonType":"selection","icons":[{"icon":{"paths":["M950.857 859.429v-438.857c-12 13.714-25.143 26.286-39.429 37.714-81.714 62.857-164 126.857-243.429 193.143-42.857 36-96 80-155.429 80h-1.143c-59.429 0-112.571-44-155.429-80-79.429-66.286-161.714-130.286-243.429-193.143-14.286-11.429-27.429-24-39.429-37.714v438.857c0 9.714 8.571 18.286 18.286 18.286h841.143c9.714 0 18.286-8.571 18.286-18.286zM950.857 258.857c0-14.286 3.429-39.429-18.286-39.429h-841.143c-9.714 0-18.286 8.571-18.286 18.286 0 65.143 32.571 121.714 84 162.286 76.571 60 153.143 120.571 229.143 181.143 30.286 24.571 85.143 77.143 125.143 77.143h1.143c40 0 94.857-52.571 125.143-77.143 76-60.571 152.571-121.143 229.143-181.143 37.143-29.143 84-92.571 84-141.143zM1024 237.714v621.714c0 50.286-41.143 91.429-91.429 91.429h-841.143c-50.286 0-91.429-41.143-91.429-91.429v-621.714c0-50.286 41.143-91.429 91.429-91.429h841.143c50.286 0 91.429 41.143 91.429 91.429z"],"width":1024,"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["envelope-o"],"defaultCode":61443,"grid":14},"attrs":[],"properties":{"name":"envelope-o","id":0,"order":47,"prevSize":28,"code":61443},"setIdx":0,"setId":0,"iconIdx":0},{"icon":{"paths":["M731.429 348.571c-21.714 9.714-44.571 16-69.143 19.429 25.143-14.857 44-38.857 53.143-66.857-23.429 13.714-49.143 24-76.571 29.143-21.714-23.429-53.143-37.714-87.429-37.714-66.286 0-120 53.714-120 120 0 9.143 0.571 18.857 2.857 27.429-100-5.143-188.571-52.571-248-125.714-10.286 17.714-16.571 38.857-16.571 60.571 0 41.714 19.429 78.286 52 100-20-0.571-38.857-6.286-57.143-14.857v1.143c0 58.286 44 106.857 98.857 117.714-10.286 2.857-18.286 4.571-29.143 4.571-7.429 0-14.857-1.143-22.286-2.286 15.429 47.429 59.429 82.286 112 83.429-41.143 32-92.571 51.429-149.143 51.429-9.714 0-19.429-0.571-28.571-1.714 53.143 33.714 116 53.714 184 53.714 220.571 0 341.714-182.857 341.714-341.714 0-5.143 0-10.286-0.571-15.429 23.429-16.571 44-37.714 60-62.286zM877.714 237.714v548.571c0 90.857-73.714 164.571-164.571 164.571h-548.571c-90.857 0-164.571-73.714-164.571-164.571v-548.571c0-90.857 73.714-164.571 164.571-164.571h548.571c90.857 0 164.571 73.714 164.571 164.571z"],"width":877.7142857142857,"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["twitter-square"],"defaultCode":61569,"grid":14},"attrs":[],"properties":{"name":"twitter-square","id":1,"order":31,"prevSize":28,"code":61569},"setIdx":0,"setId":0,"iconIdx":1},{"icon":{"paths":["M713.143 73.143c90.857 0 164.571 73.714 164.571 164.571v548.571c0 90.857-73.714 164.571-164.571 164.571h-107.429v-340h113.714l17.143-132.571h-130.857v-84.571c0-38.286 10.286-64 65.714-64l69.714-0.571v-118.286c-12-1.714-53.714-5.143-101.714-5.143-101.143 0-170.857 61.714-170.857 174.857v97.714h-114.286v132.571h114.286v340h-304c-90.857 0-164.571-73.714-164.571-164.571v-548.571c0-90.857 73.714-164.571 164.571-164.571h548.571z"],"width":877.7142857142857,"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["facebook-square"],"defaultCode":61570,"grid":14},"attrs":[],"properties":{"name":"facebook-square","id":2,"order":30,"prevSize":28,"code":61570},"setIdx":0,"setId":0,"iconIdx":2},{"icon":{"paths":["M804.571 708.571c0 20.571-9.143 60.571-17.714 79.429-12 28-44 46.286-69.714 60.571-33.714 18.286-68 29.143-106.286 29.143-53.143 0-101.143-21.714-149.714-39.429-34.857-12.571-68.571-28-100-47.429-97.143-60-214.286-177.143-274.286-274.286-19.429-31.429-34.857-65.143-47.429-100-17.714-48.571-39.429-96.571-39.429-149.714 0-38.286 10.857-72.571 29.143-106.286 14.286-25.714 32.571-57.714 60.571-69.714 18.857-8.571 58.857-17.714 79.429-17.714 4 0 8 0 12 1.714 12 4 24.571 32 30.286 43.429 18.286 32.571 36 65.714 54.857 97.714 9.143 14.857 26.286 33.143 26.286 50.857 0 34.857-103.429 85.714-103.429 116.571 0 15.429 14.286 35.429 22.286 49.143 57.714 104 129.714 176 233.714 233.714 13.714 8 33.714 22.286 49.143 22.286 30.857 0 81.714-103.429 116.571-103.429 17.714 0 36 17.143 50.857 26.286 32 18.857 65.143 36.571 97.714 54.857 11.429 5.714 39.429 18.286 43.429 30.286 1.714 4 1.714 8 1.714 12z"],"width":804.5714285714286,"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["phone"],"defaultCode":61589,"grid":14},"attrs":[],"properties":{"name":"phone","id":3,"order":43,"prevSize":28,"code":61589},"setIdx":0,"setId":0,"iconIdx":3},{"icon":{"paths":["M731.429 681.714c0-2.857 0-6.286-1.143-9.143-3.429-10.286-86.857-52.571-102.857-61.714-10.857-6.286-24-18.857-37.143-18.857-25.143 0-62.286 74.857-84.571 74.857-11.429 0-25.714-10.286-36-16-75.429-42.286-127.429-94.286-169.714-169.714-5.714-10.286-16-24.571-16-36 0-22.286 74.857-59.429 74.857-84.571 0-13.143-12.571-26.286-18.857-37.143-9.143-16-51.429-99.429-61.714-102.857-2.857-1.143-6.286-1.143-9.143-1.143-14.857 0-44 6.857-57.714 12.571-37.714 17.143-65.143 89.143-65.143 128.571 0 38.286 15.429 73.143 28.571 108.571 45.714 125.143 181.714 261.143 306.857 306.857 35.429 13.143 70.286 28.571 108.571 28.571 39.429 0 111.429-27.429 128.571-65.143 5.714-13.714 12.571-42.857 12.571-57.714zM877.714 237.714v548.571c0 90.857-73.714 164.571-164.571 164.571h-548.571c-90.857 0-164.571-73.714-164.571-164.571v-548.571c0-90.857 73.714-164.571 164.571-164.571h548.571c90.857 0 164.571 73.714 164.571 164.571z"],"width":877.7142857142857,"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["phone-square"],"defaultCode":61592,"grid":14},"attrs":[],"properties":{"name":"phone-square","id":4,"order":35,"prevSize":28,"code":61592},"setIdx":0,"setId":0,"iconIdx":4},{"icon":{"paths":["M925.714 233.143c-25.143 36.571-56.571 69.143-92.571 95.429 0.571 8 0.571 16 0.571 24 0 244-185.714 525.143-525.143 525.143-104.571 0-201.714-30.286-283.429-82.857 14.857 1.714 29.143 2.286 44.571 2.286 86.286 0 165.714-29.143 229.143-78.857-81.143-1.714-149.143-54.857-172.571-128 11.429 1.714 22.857 2.857 34.857 2.857 16.571 0 33.143-2.286 48.571-6.286-84.571-17.143-148-91.429-148-181.143v-2.286c24.571 13.714 53.143 22.286 83.429 23.429-49.714-33.143-82.286-89.714-82.286-153.714 0-34.286 9.143-65.714 25.143-93.143 90.857 112 227.429 185.143 380.571 193.143-2.857-13.714-4.571-28-4.571-42.286 0-101.714 82.286-184.571 184.571-184.571 53.143 0 101.143 22.286 134.857 58.286 41.714-8 81.714-23.429 117.143-44.571-13.714 42.857-42.857 78.857-81.143 101.714 37.143-4 73.143-14.286 106.286-28.571z"],"width":950.8571428571428,"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["twitter"],"defaultCode":61593,"grid":14},"attrs":[],"properties":{"name":"twitter","id":5,"order":45,"prevSize":28,"code":61593},"setIdx":0,"setId":0,"iconIdx":5},{"icon":{"paths":["M548 6.857v150.857h-89.714c-70.286 0-83.429 33.714-83.429 82.286v108h167.429l-22.286 169.143h-145.143v433.714h-174.857v-433.714h-145.714v-169.143h145.714v-124.571c0-144.571 88.571-223.429 217.714-223.429 61.714 0 114.857 4.571 130.286 6.857z"],"width":602.2582857142856,"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["facebook","facebook-f"],"defaultCode":61594,"grid":14},"attrs":[],"properties":{"name":"facebook, facebook-f","id":6,"order":44,"prevSize":28,"code":61594},"setIdx":0,"setId":0,"iconIdx":6},{"icon":{"paths":["M1024 405.714v453.714c0 50.286-41.143 91.429-91.429 91.429h-841.143c-50.286 0-91.429-41.143-91.429-91.429v-453.714c17.143 18.857 36.571 35.429 57.714 49.714 94.857 64.571 190.857 129.143 284 197.143 48 35.429 107.429 78.857 169.714 78.857h1.143c62.286 0 121.714-43.429 169.714-78.857 93.143-67.429 189.143-132.571 284.571-197.143 20.571-14.286 40-30.857 57.143-49.714zM1024 237.714c0 64-47.429 121.714-97.714 156.571-89.143 61.714-178.857 123.429-267.429 185.714-37.143 25.714-100 78.286-146.286 78.286h-1.143c-46.286 0-109.143-52.571-146.286-78.286-88.571-62.286-178.286-124-266.857-185.714-40.571-27.429-98.286-92-98.286-144 0-56 30.286-104 91.429-104h841.143c49.714 0 91.429 41.143 91.429 91.429z"],"width":1024,"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["envelope"],"defaultCode":61664,"grid":14},"attrs":[],"properties":{"name":"envelope","id":7,"order":36,"prevSize":28,"code":61664},"setIdx":0,"setId":0,"iconIdx":7},{"icon":{"paths":["M525.143 744.571v-89.714c0-18.857-5.714-28.571-16.571-28.571-6.286 0-12.571 2.857-18.857 9.143v128c6.286 6.286 12.571 9.143 18.857 9.143 10.857 0 16.571-9.143 16.571-28zM630.286 674.857h37.714v-19.429c0-19.429-6.286-29.143-18.857-29.143s-18.857 9.714-18.857 29.143v19.429zM304 522.857v40h-45.714v241.714h-42.286v-241.714h-44.571v-40h132.571zM418.857 594.857v209.714h-38.286v-22.857c-14.857 17.143-29.143 25.714-43.429 25.714-12 0-20.571-5.143-24-16-2.286-6.286-3.429-16-3.429-30.857v-165.714h37.714v154.286c0 8.571 0 13.714 0.571 14.857 0.571 5.714 3.429 8.571 8.571 8.571 8 0 15.429-5.714 24-17.714v-160h38.286zM562.857 658.286v83.429c0 18.857-1.143 33.143-4 41.714-4.571 16-14.857 24-30.286 24-13.143 0-26.286-8-38.857-23.429v20.571h-38.286v-281.714h38.286v92c12-14.857 25.143-22.857 38.857-22.857 15.429 0 25.714 8 30.286 24 2.857 8.571 4 22.286 4 42.286zM706.286 732v5.143c0 12.571-0.571 20.571-1.143 24.571-1.143 8.571-4 16-8.571 22.857-10.286 15.429-26.286 22.857-45.714 22.857-20 0-35.429-7.429-46.286-21.714-8-10.286-12-26.857-12-49.143v-73.714c0-22.286 3.429-38.286 11.429-49.143 10.857-14.286 26.286-21.714 45.714-21.714 18.857 0 34.286 7.429 44.571 21.714 8 10.857 12 26.857 12 49.143v43.429h-76v37.143c0 19.429 6.286 29.143 19.429 29.143 9.143 0 14.857-5.143 17.143-14.857 0-2.286 0.571-10.857 0.571-25.714h38.857zM448.571 261.143v89.143c0 19.429-6.286 29.143-18.286 29.143-12.571 0-18.286-9.714-18.286-29.143v-89.143c0-19.429 5.714-29.714 18.286-29.714 12 0 18.286 10.286 18.286 29.714zM753.143 668.571v0c0-49.143 0-101.143-10.857-148.571-8-33.714-35.429-58.286-68-61.714-77.714-8.571-156.571-8.571-235.429-8.571-78.286 0-157.143 0-234.857 8.571-33.143 3.429-60.571 28-68 61.714-10.857 47.429-11.429 99.429-11.429 148.571v0c0 48.571 0 100.571 11.429 148.571 7.429 33.143 34.857 57.714 67.429 61.714 78.286 8.571 157.143 8.571 235.429 8.571s157.143 0 235.429-8.571c32.571-4 60-28.571 67.429-61.714 11.429-48 11.429-100 11.429-148.571zM321.714 296.571l51.429-169.143h-42.857l-29.143 111.429-30.286-111.429h-44.571c8.571 26.286 18.286 52.571 26.857 78.857 13.714 40 22.286 69.714 26.286 90.286v114.857h42.286v-114.857zM486.857 342.857v-74.286c0-22.286-4-38.857-12-49.714-10.857-14.286-25.714-21.714-44.571-21.714-19.429 0-34.286 7.429-44.571 21.714-8 10.857-12 27.429-12 49.714v74.286c0 22.286 4 38.857 12 49.714 10.286 14.286 25.143 21.714 44.571 21.714 18.857 0 33.714-7.429 44.571-21.714 8-10.286 12-27.429 12-49.714zM590.286 411.429h38.286v-211.429h-38.286v161.714c-8.571 12-16.571 17.714-24 17.714-5.143 0-8.571-2.857-9.143-9.143-0.571-1.143-0.571-5.714-0.571-14.857v-155.429h-38.286v167.429c0 14.857 1.143 24.571 3.429 31.429 4 10.286 12.571 15.429 24.571 15.429 14.286 0 28.571-8.571 44-25.714v22.857zM877.714 237.714v548.571c0 90.857-73.714 164.571-164.571 164.571h-548.571c-90.857 0-164.571-73.714-164.571-164.571v-548.571c0-90.857 73.714-164.571 164.571-164.571h548.571c90.857 0 164.571 73.714 164.571 164.571z"],"width":877.7142857142857,"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["youtube-square"],"defaultCode":61798,"grid":14},"attrs":[],"properties":{"name":"youtube-square","id":8,"order":37,"prevSize":28,"code":61798},"setIdx":0,"setId":0,"iconIdx":8},{"icon":{"paths":["M554.857 710.857v120.571c0 25.714-7.429 38.286-22.286 38.286-8.571 0-17.143-4-25.714-12.571v-172c8.571-8.571 17.143-12.571 25.714-12.571 14.857 0 22.286 13.143 22.286 38.286zM748 711.429v26.286h-51.429v-26.286c0-25.714 8.571-38.857 25.714-38.857s25.714 13.143 25.714 38.857zM196 586.857h61.143v-53.714h-178.286v53.714h60v325.143h57.143v-325.143zM360.571 912h50.857v-282.286h-50.857v216c-11.429 16-22.286 24-32.571 24-6.857 0-10.857-4-12-12-0.571-1.714-0.571-8-0.571-20v-208h-50.857v223.429c0 20 1.714 33.143 4.571 41.714 4.571 14.286 16.571 21.143 33.143 21.143 18.286 0 37.714-11.429 58.286-34.857v30.857zM605.714 827.429v-112.571c0-26.286-1.143-45.143-5.143-56.571-6.286-21.143-20.571-32-40.571-32-18.857 0-36.571 10.286-53.143 30.857v-124h-50.857v378.857h50.857v-27.429c17.143 21.143 34.857 31.429 53.143 31.429 20 0 34.286-10.857 40.571-31.429 4-12 5.143-30.857 5.143-57.143zM798.857 821.714v-7.429h-52c0 20.571-0.571 32-1.143 34.857-2.857 13.714-10.286 20.571-22.857 20.571-17.714 0-26.286-13.143-26.286-39.429v-49.714h102.286v-58.857c0-30.286-5.143-52-15.429-66.286-14.857-19.429-34.857-29.143-60.571-29.143-26.286 0-46.286 9.714-61.143 29.143-10.857 14.286-16 36-16 66.286v98.857c0 30.286 5.714 52.571 16.571 66.286 14.857 19.429 34.857 29.143 61.714 29.143s48-10.286 61.714-30.286c6.286-9.143 10.857-19.429 12-30.857 1.143-5.143 1.143-16.571 1.143-33.143zM451.429 300v-120c0-26.286-7.429-39.429-24.571-39.429-16.571 0-24.571 13.143-24.571 39.429v120c0 26.286 8 40 24.571 40 17.143 0 24.571-13.714 24.571-40zM862.286 729.143c0 65.714-0.571 136-14.857 200-10.857 45.143-47.429 78.286-91.429 82.857-105.143 12-211.429 12-317.143 12s-212 0-317.143-12c-44-4.571-81.143-37.714-91.429-82.857-14.857-64-14.857-134.286-14.857-200v0c0-66.286 0.571-136 14.857-200 10.857-45.143 47.429-78.286 92-83.429 104.571-11.429 210.857-11.429 316.571-11.429s212 0 317.143 11.429c44 5.143 81.143 38.286 91.429 83.429 14.857 64 14.857 133.714 14.857 200zM292 0h58.286l-69.143 228v154.857h-57.143v-154.857c-5.143-28-16.571-68-34.857-121.143-12.571-35.429-25.143-71.429-37.143-106.857h60.571l40.571 150.286zM503.429 190.286v100c0 30.286-5.143 53.143-16 67.429-14.286 19.429-34.286 29.143-60.571 29.143-25.714 0-45.714-9.714-60-29.143-10.857-14.857-16-37.143-16-67.429v-100c0-30.286 5.143-52.571 16-66.857 14.286-19.429 34.286-29.143 60-29.143 26.286 0 46.286 9.714 60.571 29.143 10.857 14.286 16 36.571 16 66.857zM694.857 97.714v285.143h-52v-31.429c-20.571 24-40 35.429-58.857 35.429-16.571 0-28.571-6.857-33.714-21.143-2.857-8.571-4.571-22.286-4.571-42.857v-225.143h52v209.714c0 12 0 18.857 0.571 20 1.143 8 5.143 12.571 12 12.571 10.286 0 21.143-8 32.571-24.571v-217.714h52z"],"width":877.7142857142857,"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["youtube"],"defaultCode":61799,"grid":14},"attrs":[],"properties":{"name":"youtube","id":9,"order":42,"prevSize":28,"code":61799},"setIdx":0,"setId":0,"iconIdx":9},{"icon":{"paths":["M738.286 364.571c4-82.857-26.857-124.571-92-126.857-88-2.857-147.429 46.857-178.286 149.143 16-6.857 31.429-10.857 46.857-10.857 32 0 46.286 18.286 42.286 54.857-1.714 21.714-16 53.714-42.286 95.429-26.857 42.286-46.857 62.857-60 62.857-17.143 0-32-32-46.857-96.571-4.571-19.429-13.143-67.429-25.714-145.714-11.429-72-41.714-105.714-91.429-101.143-20.571 2.286-52.571 20.571-93.714 57.143-30.857 26.857-61.143 54.857-92.571 82.286l29.714 38.286c28.571-19.429 45.143-29.714 49.714-29.714 21.714 0 42.286 34.286 61.143 102.286 17.143 62.857 34.286 125.143 51.429 188 25.714 68 56.571 102.286 93.714 102.286 59.429 0 132.571-56 218.857-168 83.429-107.429 126.857-192 129.143-253.714zM877.714 237.714v548.571c0 90.857-73.714 164.571-164.571 164.571h-548.571c-90.857 0-164.571-73.714-164.571-164.571v-548.571c0-90.857 73.714-164.571 164.571-164.571h548.571c90.857 0 164.571 73.714 164.571 164.571z"],"width":877.7142857142857,"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["vimeo-square"],"defaultCode":61844,"grid":14},"attrs":[],"properties":{"name":"vimeo-square","id":10,"order":38,"prevSize":28,"code":61844},"setIdx":0,"setId":0,"iconIdx":10},{"icon":{"paths":["M332.571 747.429c0 30.857-28 37.714-53.143 37.714-24.571 0-61.143-4-61.143-36 0-31.429 30.857-36.571 56-36.571 24 0 58.286 4 58.286 34.857zM312 481.143c0 28.571-11.429 48.571-42.286 48.571-31.429 0-44-18.286-44-48s11.429-51.429 44-51.429c29.143 0 42.286 24 42.286 50.857zM406.857 438.286v-71.429c-24.571 9.143-50.857 16.571-77.143 16.571-18.857-10.857-40.571-16.571-62.857-16.571-65.143 0-116.571 48-116.571 114.286 0 35.429 23.429 84.571 58.857 96.571v1.714c-18.286 8-21.714 30.286-21.714 48.571 0 18.857 6.857 34.286 23.429 44v1.714c-38.857 12.571-64.571 37.143-64.571 79.429 0 72.571 69.143 93.143 129.714 93.143 73.143 0 128-26.857 128-107.429 0-57.143-52-74.286-99.429-82.857-16-2.857-43.429-14.286-43.429-34.286 0-18.857 10.286-26.857 28-29.714 58.286-11.429 95.429-56.571 95.429-116.571 0-10.286-2.286-20-5.714-29.714 9.143-2.286 18.857-4.571 28-7.429zM440.571 677.714h78.286c-1.143-15.429-1.143-31.429-1.143-46.857v-221.143c0-13.143 0-26.286 1.143-39.429h-78.286c1.714 13.143 1.714 27.429 1.714 40.571v224c0 14.286 0 28.571-1.714 42.857zM731.429 668.571v-69.143c-11.429 8-25.143 12-38.857 12-25.714 0-30.286-25.714-30.286-46.857v-128.571h29.714c10.286 0 20 1.143 30.286 1.143v-66.857h-60c0-19.429-1.143-38.857 1.714-58.286h-80c1.714 10.286 2.286 20.571 2.286 31.429v26.857h-34.286v66.857c6.857-0.571 13.714-1.714 21.143-1.714 4 0 8.571 0.571 13.143 0.571v1.143h-1.143v124c0 61.714 9.143 121.143 84.571 121.143 21.143 0 42.857-3.429 61.714-13.714zM528 265.143c0-26.857-20-52-48-52s-48.571 24.571-48.571 52c0 26.857 21.143 50.857 48.571 50.857s48-24.571 48-50.857zM877.714 237.714v548.571c0 90.857-73.714 164.571-164.571 164.571h-548.571c-90.857 0-164.571-73.714-164.571-164.571v-548.571c0-90.857 73.714-164.571 164.571-164.571h548.571c90.857 0 164.571 73.714 164.571 164.571z"],"width":877.7142857142857,"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["git-square"],"defaultCode":61906,"grid":14},"attrs":[],"properties":{"name":"git-square","id":11,"order":39,"prevSize":28,"code":61906},"setIdx":0,"setId":0,"iconIdx":11},{"icon":{"paths":["M340 865.143c0-50.286-55.429-57.143-94.286-57.143-40.571 0-90.286 8.571-90.286 59.429 0 51.429 58.857 57.714 98.286 57.714 41.714 0 86.286-10.286 86.286-60zM306.286 433.714c0-42.857-20.571-81.714-68-81.714-52.571 0-70.857 34.857-70.857 82.857 0 47.429 20.571 77.143 70.857 77.143 49.714 0 68-32 68-78.286zM460 248.571v115.429c-14.857 5.143-29.714 9.143-45.143 12.571 5.714 15.429 9.143 31.429 9.143 48 0 96.571-59.429 170.286-154.286 188-28.571 5.714-45.143 17.714-45.143 48.571 0 87.429 230.857 28 230.857 189.143 0 130.857-88.571 173.714-207.429 173.714-97.714 0-209.143-32.571-209.143-150.286 0-68.571 41.714-108 104-128.571v-2.286c-26.286-16-38.286-41.143-38.286-72 0-29.143 6.286-65.143 36-78.286v-2.286c-57.714-19.429-95.429-98.857-95.429-156.571 0-106.857 82.857-185.143 188.571-185.143 35.429 0 70.857 9.143 101.714 26.857 42.857 0 85.143-11.429 124.571-26.857zM641.714 752h-126.857c2.286-25.714 2.286-50.857 2.286-76.571v-348c0-24.571 0.571-49.143-2.286-73.143h126.857c-2.857 23.429-2.286 47.429-2.286 70.857v350.286c0 25.714 0 50.857 2.286 76.571zM985.143 625.143v112c-30.286 16.571-65.143 22.286-99.429 22.286-122.286 0-136.571-96.571-136.571-196v-200.571h1.143v-2.286c-7.429 0-14.286-1.143-21.143-1.143-11.429 0-22.857 1.714-33.714 3.429v-108.571h54.857v-43.429c0-17.143-0.571-34.286-3.429-50.857h129.714c-4.571 31.429-3.429 62.857-3.429 94.286h97.714v108.571c-16.571 0-33.143-2.286-49.143-2.286h-48.571v208.571c0 33.714 7.429 74.857 49.714 74.857 22.286 0 44-6.286 62.286-18.857zM656 84c0 42.857-33.143 82.857-77.143 82.857-45.143 0-78.857-39.429-78.857-82.857 0-44 33.143-84 78.857-84 45.143 0 77.143 41.143 77.143 84z"],"width":1024,"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["git"],"defaultCode":61907,"grid":14},"attrs":[],"properties":{"name":"git","id":12,"order":40,"prevSize":28,"code":61907},"setIdx":0,"setId":0,"iconIdx":12},{"icon":{"paths":["M976.571 296c-4 90.286-67.429 214.286-189.714 372-126.857 164-233.143 246.286-321.143 246.286-54.286 0-100-50.286-137.143-150.286-25.143-91.429-50.286-183.429-75.429-275.429-27.429-100-57.714-149.714-89.714-149.714-6.857 0-30.857 14.286-72.571 43.429l-44-56c45.714-40.571 90.857-81.714 136-121.143 60.571-53.714 106.857-80.571 137.714-83.429 72.571-6.857 116.571 42.286 133.714 148 17.714 114.286 30.857 185.714 37.714 213.143 21.143 94.857 43.429 142.286 68.571 142.286 19.429 0 48.571-30.286 88-92 38.857-61.714 59.429-108.571 62.286-140.571 5.143-53.143-15.429-79.429-62.286-79.429-22.286 0-45.143 5.143-69.143 14.857 45.714-149.714 133.143-222.286 262.286-218.286 95.429 2.857 140.571 65.143 134.857 186.286z"],"width":1029.12,"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["vimeo"],"defaultCode":62077,"grid":14},"attrs":[],"properties":{"name":"vimeo","id":13,"order":46,"prevSize":28,"code":62077},"setIdx":0,"setId":0,"iconIdx":13}],"height":1024,"metadata":{"name":"icomoon"},"preferences":{"showGlyphs":true,"showQuickUse":true,"showQuickUse2":true,"showSVGs":true,"fontPref":{"prefix":"icon-","metadata":{"fontFamily":"icomoon"},"metrics":{"emSize":1024,"baseline":6.25,"whitespace":50},"embed":false},"imagePref":{"prefix":"icon-","png":true,"useClassSelector":true,"color":0,"bgColor":16777215,"classSelector":".icon"},"historySize":50,"showCodes":true,"gridSize":16}} \ No newline at end of file diff --git a/src/assets/scss/icons.scss b/src/assets/scss/icons.scss new file mode 100644 index 0000000..7483006 --- /dev/null +++ b/src/assets/scss/icons.scss @@ -0,0 +1,72 @@ +@font-face { + font-family: 'icomoon'; + src: url('../fonts/icomoon.eot?9ti7zb'); + src: url('../fonts/icomoon.eot?9ti7zb#iefix') format('embedded-opentype'), + url('../fonts/icomoon.ttf?9ti7zb') format('truetype'), + url('../fonts/icomoon.woff?9ti7zb') format('woff'), + url('../fonts/icomoon.svg?9ti7zb#icomoon') format('svg'); + font-weight: normal; + font-style: normal; + font-display: block; +} + +[class^="icon-"], [class*=" icon-"] { + /* use !important to prevent issues with browser extensions that change fonts */ + font-family: 'icomoon' !important; + speak: never; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + + /* Better Font Rendering =========== */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-envelope-o:before { + content: "\f003"; +} +.icon-twitter-square:before { + content: "\f081"; +} +.icon-facebook-square:before { + content: "\f082"; +} +.icon-phone:before { + content: "\f095"; +} +.icon-phone-square:before { + content: "\f098"; +} +.icon-twitter:before { + content: "\f099"; +} +.icon-facebook:before { + content: "\f09a"; +} +.icon-facebook-f:before { + content: "\f09a"; +} +.icon-envelope:before { + content: "\f0e0"; +} +.icon-youtube-square:before { + content: "\f166"; +} +.icon-youtube:before { + content: "\f167"; +} +.icon-vimeo-square:before { + content: "\f194"; +} +.icon-git-square:before { + content: "\f1d2"; +} +.icon-git:before { + content: "\f1d3"; +} +.icon-vimeo:before { + content: "\f27d"; +} diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss index a43e426..faf70d3 100644 --- a/src/assets/scss/main.scss +++ b/src/assets/scss/main.scss @@ -1,3 +1,7 @@ @import "./variables"; @import "./fonts"; +@import "./icons"; @import "./global"; + + +@import "node_modules/bootstrap/scss/bootstrap-grid"; diff --git a/src/assets/scss/variables.scss b/src/assets/scss/variables.scss index 3eab155..d4114e6 100644 --- a/src/assets/scss/variables.scss +++ b/src/assets/scss/variables.scss @@ -25,7 +25,7 @@ $white: #fff; $black: #111; $gray: #ccc; $light-gray: #eee; -$dark-gray: #666; +$dark-gray: #333; $yellow: #a2dc02; From b211b61a4988ca01d18bc103d89f25f3753011e1 Mon Sep 17 00:00:00 2001 From: Dslak Date: Wed, 2 Dec 2020 13:46:40 +0100 Subject: [PATCH 2/8] add particles --- package.json | 1 + src/app/about/about.component.html | 2 +- src/app/about/about.component.scss | 82 ++++++++++-------- src/app/app-layout/app-layout.component.html | 2 + src/app/app-layout/app-layout.component.ts | 87 +++++++++++++++++++- src/app/app.module.ts | 4 +- src/app/header/header.component.scss | 11 ++- src/app/header/header.component.ts | 3 +- src/assets/scss/global.scss | 12 +++ src/assets/scss/variables.scss | 7 +- 10 files changed, 165 insertions(+), 46 deletions(-) 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'; From ec2f5957e8f1ee3b88490bb0cf182248abbe8115 Mon Sep 17 00:00:00 2001 From: Dslak Date: Wed, 2 Dec 2020 13:56:29 +0100 Subject: [PATCH 3/8] enable/disable particles --- src/app/app-layout/app-layout.component.html | 2 +- src/app/app-layout/app-layout.component.ts | 6 ++++-- src/assets/scss/global.scss | 4 ++-- 3 files changed, 7 insertions(+), 5 deletions(-) diff --git a/src/app/app-layout/app-layout.component.html b/src/app/app-layout/app-layout.component.html index d132564..10a7dc1 100644 --- a/src/app/app-layout/app-layout.component.html +++ b/src/app/app-layout/app-layout.component.html @@ -1,4 +1,4 @@ - + diff --git a/src/app/app-layout/app-layout.component.ts b/src/app/app-layout/app-layout.component.ts index 8fea4ac..d041db1 100644 --- a/src/app/app-layout/app-layout.component.ts +++ b/src/app/app-layout/app-layout.component.ts @@ -8,8 +8,10 @@ import type { Container } from 'tsparticles' }) export class AppLayoutComponent implements OnInit { - id="tsparticles" - particlesOptions = { + public particlesEnabled: boolean = false + public id: string = 'tsparticles' + + public particlesOptions: any = { background: { color: { value: "transparent" diff --git a/src/assets/scss/global.scss b/src/assets/scss/global.scss index e028bef..581badd 100644 --- a/src/assets/scss/global.scss +++ b/src/assets/scss/global.scss @@ -6,6 +6,7 @@ body { font-family: $font-primary; font-size: $font-20; color: $black; + background: $yellow; &.no-scroll { overflow: hidden; @@ -19,7 +20,6 @@ body { 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; + background: radial-gradient(circle, transparent 0%, transparent 85%, rgba(255,255,255,0.2) 95%, rgba(255,255,255,0.3) 100%); z-index: -1; } From aea1dc71dbe85b2bbce4df8c3806354dc35600a3 Mon Sep 17 00:00:00 2001 From: Dslak Date: Wed, 2 Dec 2020 14:55:20 +0100 Subject: [PATCH 4/8] portfolio setup and add apis service --- src/app/app.module.ts | 4 +- src/app/portfolio/portfolio.component.html | 52 ++++------------------ src/app/portfolio/portfolio.component.scss | 7 +++ src/app/portfolio/portfolio.component.ts | 15 ++++++- src/app/services/apis.service.spec.ts | 16 +++++++ src/app/services/apis.service.ts | 26 +++++++++++ src/app/services/base-service.ts | 16 +++++++ src/app/services/parse-xml.ts | 13 ++++++ src/environments/environment.prod.ts | 6 ++- src/environments/environment.ts | 17 ++----- 10 files changed, 110 insertions(+), 62 deletions(-) create mode 100644 src/app/services/apis.service.spec.ts create mode 100644 src/app/services/apis.service.ts create mode 100644 src/app/services/base-service.ts create mode 100644 src/app/services/parse-xml.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index b84bd67..9ac77c7 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 { HttpClientModule } from '@angular/common/http'; import { NgParticlesModule } from "ng-particles"; import { AppRoutingModule } from './app-routing.module'; @@ -30,7 +31,8 @@ import { WorkshopsComponent } from './workshops/workshops.component'; imports: [ BrowserModule, AppRoutingModule, - NgParticlesModule + NgParticlesModule, + HttpClientModule ], providers: [], bootstrap: [AppComponent] diff --git a/src/app/portfolio/portfolio.component.html b/src/app/portfolio/portfolio.component.html index 616f657..24db7e7 100644 --- a/src/app/portfolio/portfolio.component.html +++ b/src/app/portfolio/portfolio.component.html @@ -1,43 +1,9 @@ -

portfolio works!

-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+ {{portfolioItems.title}} +
+
+
+
diff --git a/src/app/portfolio/portfolio.component.scss b/src/app/portfolio/portfolio.component.scss index e69de29..5ae1eae 100644 --- a/src/app/portfolio/portfolio.component.scss +++ b/src/app/portfolio/portfolio.component.scss @@ -0,0 +1,7 @@ +@import "../../assets/scss/variables"; + +.component-portfolio { + .box { + + } +} diff --git a/src/app/portfolio/portfolio.component.ts b/src/app/portfolio/portfolio.component.ts index f11071c..95cbf2b 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 { Component, OnInit } from '@angular/core' +import { ApisService } from '../services/apis.service' @Component({ selector: 'app-portfolio', @@ -7,9 +8,19 @@ import { Component, OnInit } from '@angular/core'; }) export class PortfolioComponent implements OnInit { - constructor() { } + public portfolioItems: any = [] + + constructor(private apisService: ApisService) { } ngOnInit(): void { + this.apisService.getPortfolio('portfolio').toPromise().then((response) => { + this.portfolioItems = response.items + },(error) => { + console.error('getPortfolio ERROR', error) + }).catch((e) => { + console.error('getPortfolio CATCH', e) + }) } + } diff --git a/src/app/services/apis.service.spec.ts b/src/app/services/apis.service.spec.ts new file mode 100644 index 0000000..a952a5c --- /dev/null +++ b/src/app/services/apis.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { ApisService } from './apis.service'; + +describe('ApisService', () => { + let service: ApisService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(ApisService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/src/app/services/apis.service.ts b/src/app/services/apis.service.ts new file mode 100644 index 0000000..48124b9 --- /dev/null +++ b/src/app/services/apis.service.ts @@ -0,0 +1,26 @@ +import { Injectable } from '@angular/core' +import { HttpClient, HttpHeaders, HttpParams, HttpRequest } from '@angular/common/http' +import { Observable, Subject, throwError } from 'rxjs' +import { catchError } from 'rxjs/operators' +import { BaseService } from './base-service' +import { environment } from '../../environments/environment' + +@Injectable({ + providedIn: 'root' +}) +export class ApisService extends BaseService { + + private restApi = `${environment.API_URL}` + + constructor(private http: HttpClient) { + super() + } + + getPortfolio(section): Observable { + let urlApi = `${this.restApi}?query=${section}` + return this.http.get(urlApi).pipe( + catchError(this.handleError) + ) + } + +} diff --git a/src/app/services/base-service.ts b/src/app/services/base-service.ts new file mode 100644 index 0000000..50813ce --- /dev/null +++ b/src/app/services/base-service.ts @@ -0,0 +1,16 @@ +import { HttpErrorResponse } from "@angular/common/http" +import { throwError } from "rxjs" +import { ParseXML } from "./parse-xml" + +export class BaseService { + + constructor() { } + + protected handleError(error: HttpErrorResponse) { + if(error.error instanceof ErrorEvent) { + console.error('An error occurred:', error.error.message) + } + + return throwError( ParseXML.getXMLResponseMessage(error.error) ) + } +} diff --git a/src/app/services/parse-xml.ts b/src/app/services/parse-xml.ts new file mode 100644 index 0000000..781bd33 --- /dev/null +++ b/src/app/services/parse-xml.ts @@ -0,0 +1,13 @@ +export class ParseXML { + constructor() {} + + public sanitize(str: string): string { + let sanitizeString = encodeURIComponent(str).replace(/%0A/g, '') + return decodeURIComponent(sanitizeString) + } + + public static getXMLResponseMessage(responseBody: string): string { + let parseXMLClass = new ParseXML() + return parseXMLClass.sanitize(responseBody).match(/(.*?)<\/Message>/g)[0].replace(/<[^>]+>/g, '') + } +} diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts index 3612073..a646658 100644 --- a/src/environments/environment.prod.ts +++ b/src/environments/environment.prod.ts @@ -1,3 +1,5 @@ export const environment = { - production: true -}; + production: true, + + API_URL: `https://apis.dslak.it/` +} diff --git a/src/environments/environment.ts b/src/environments/environment.ts index 7b4f817..2128c6d 100644 --- a/src/environments/environment.ts +++ b/src/environments/environment.ts @@ -1,16 +1,5 @@ -// This file can be replaced during build by using the `fileReplacements` array. -// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`. -// The list of file replacements can be found in `angular.json`. - export const environment = { - production: false -}; + production: false, -/* - * For easier debugging in development mode, you can import the following file - * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. - * - * This import should be commented out in production mode because it will have a negative impact - * on performance if an error is thrown. - */ -// import 'zone.js/dist/zone-error'; // Included with Angular CLI. + API_URL: `http://localhost/dslak_website/apis/` +} From 13bc26e587c6f0b1da87ef0fa5abe3316268775e Mon Sep 17 00:00:00 2001 From: Dslak Date: Wed, 2 Dec 2020 15:43:22 +0100 Subject: [PATCH 5/8] add items style --- .gitignore | 2 + src/app/portfolio/portfolio.component.html | 9 ++- src/app/portfolio/portfolio.component.scss | 69 ++++++++++++++++++++++ 3 files changed, 78 insertions(+), 2 deletions(-) diff --git a/.gitignore b/.gitignore index 27fa5eb..915068b 100644 --- a/.gitignore +++ b/.gitignore @@ -2,3 +2,5 @@ node_modules/ package-lock\.json + +src/assets/images/contents/ diff --git a/src/app/portfolio/portfolio.component.html b/src/app/portfolio/portfolio.component.html index 24db7e7..8efcc9d 100644 --- a/src/app/portfolio/portfolio.component.html +++ b/src/app/portfolio/portfolio.component.html @@ -1,8 +1,13 @@
-
- {{portfolioItems.title}} +
+ +
+ {{item.title}} + {{item.type}} + {{item.tags}} +
diff --git a/src/app/portfolio/portfolio.component.scss b/src/app/portfolio/portfolio.component.scss index 5ae1eae..df199b0 100644 --- a/src/app/portfolio/portfolio.component.scss +++ b/src/app/portfolio/portfolio.component.scss @@ -1,7 +1,76 @@ @import "../../assets/scss/variables"; .component-portfolio { + padding-top: 100px; + .box { + position: relative; + display: flex; + background: $black; + border-radius: 10px; + overflow: hidden; + margin: 40px; + padding: 20px; + cursor: pointer; + transition: transform .4s; + + .image { + position: absolute; + top: 50%; + left: 50%; + height: 100%; + width: 100%; + object-fit: cover; + transform: translate(-50%, -50%); + transition: transform .4s; + opacity: .5; + z-index: 0; + } + + .text { + display: block; + margin: auto; + text-align: center; + transform: translate(0%, 0%); + z-index: 1; + + .title { + display: block; + color: $white; + font-size: $font-24; + text-transform: uppercase; + font-weight: bold; + } + + .type { + display: block; + color: $white; + font-size: $font-18; + font-weight: bold; + } + + .tags { + display: block; + color: $white; + font-size: $font-14; + text-transform: uppercase; + font-weight: bold; + padding-top: 20px; + } + } + + @each $angle in 0,1,2,3,4,5,6 { + &.skew-#{$angle} {transform: skew(#{$angle - 3}deg, #{$angle - 3}deg) ;} + } + &:hover { + //transform: scale(1.4) skew(2deg, 2deg) rotate(2deg); + @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); + } + } } } From a8ca76ae17e3d3e3677d8c9c358560ea2943c6e5 Mon Sep 17 00:00:00 2001 From: Dslak Date: Wed, 2 Dec 2020 17:25:37 +0100 Subject: [PATCH 6/8] add details --- src/app/about/about.component.html | 2 + src/app/about/about.component.scss | 24 ++++++- src/app/about/about.component.ts | 10 ++- src/app/app-layout/app-layout.component.ts | 2 +- src/app/app-routing.module.ts | 25 +++---- src/app/app.module.ts | 12 +--- src/app/detail/detail.component.html | 9 +++ src/app/detail/detail.component.scss | 63 ++++++++++++++++++ .../detail.component.spec.ts} | 12 ++-- src/app/detail/detail.component.ts | 38 +++++++++++ .../entertainment.component.html | 1 - .../entertainment.component.scss | 0 .../entertainment.component.spec.ts | 25 ------- .../entertainment/entertainment.component.ts | 15 ----- .../exhibitions/exhibitions.component.html | 1 - .../exhibitions/exhibitions.component.scss | 0 src/app/exhibitions/exhibitions.component.ts | 15 ----- src/app/header/header.component.scss | 8 +-- .../installations.component.html | 1 - .../installations.component.scss | 0 .../installations.component.spec.ts | 25 ------- .../installations/installations.component.ts | 15 ----- .../performances/performances.component.html | 1 - .../performances/performances.component.scss | 0 .../performances.component.spec.ts | 25 ------- .../performances/performances.component.ts | 15 ----- src/app/portfolio/portfolio.component.html | 14 ++-- src/app/portfolio/portfolio.component.scss | 8 ++- src/app/portfolio/portfolio.component.ts | 11 ++- src/app/services/apis.service.ts | 7 ++ src/assets/fonts/icomoon.eot | Bin 5464 -> 5512 bytes src/assets/fonts/icomoon.svg | 1 + src/assets/fonts/icomoon.ttf | Bin 5300 -> 5348 bytes src/assets/fonts/icomoon.woff | Bin 5376 -> 5424 bytes src/assets/fonts/selection.json | 2 +- src/assets/scss/global.scss | 1 + src/assets/scss/icons.scss | 3 + 37 files changed, 204 insertions(+), 187 deletions(-) create mode 100644 src/app/detail/detail.component.html create mode 100644 src/app/detail/detail.component.scss rename src/app/{exhibitions/exhibitions.component.spec.ts => detail/detail.component.spec.ts} (53%) create mode 100644 src/app/detail/detail.component.ts delete mode 100644 src/app/entertainment/entertainment.component.html delete mode 100644 src/app/entertainment/entertainment.component.scss delete mode 100644 src/app/entertainment/entertainment.component.spec.ts delete mode 100644 src/app/entertainment/entertainment.component.ts delete mode 100644 src/app/exhibitions/exhibitions.component.html delete mode 100644 src/app/exhibitions/exhibitions.component.scss delete mode 100644 src/app/exhibitions/exhibitions.component.ts delete mode 100644 src/app/installations/installations.component.html delete mode 100644 src/app/installations/installations.component.scss delete mode 100644 src/app/installations/installations.component.spec.ts delete mode 100644 src/app/installations/installations.component.ts delete mode 100644 src/app/performances/performances.component.html delete mode 100644 src/app/performances/performances.component.scss delete mode 100644 src/app/performances/performances.component.spec.ts delete mode 100644 src/app/performances/performances.component.ts diff --git a/src/app/about/about.component.html b/src/app/about/about.component.html index 16f8f6c..980843a 100644 --- a/src/app/about/about.component.html +++ b/src/app/about/about.component.html @@ -1,6 +1,8 @@
+ +

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 @@ +
+
+
+ +

{{details.title}}

+
+ Tags: {{details.tags}} +
+
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; +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 @@ -

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: ComponentFixture; - - 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 @@ -

exhibitions 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: ComponentFixture; - - 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 @@ -

performances 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; - - 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 @@
-
- -
- {{item.title}} - {{item.type}} - {{item.tags}} +
+
+ +
+ {{item.title}} + {{item.type}} + {{item.tags}} +
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 { + 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 5824380a35eafe9d20ddccab6fe2bdb7af243f82..80e12dbd43409d270b9fdf8364ea878bce2e3512 100644 GIT binary patch delta 424 zcmcbi)uGMWA;0MY_L{th6`k)BhTcBP=|Gmw7(DBP2gnwTQ>Qz)H*LC6OvZMc&ODe2w8EymlD}a2Toc!cO$t`knK>imXUn4iMqJTj`kCB&wK^SDALSABS>P#=r z-$1?%(2}--{NfS@W}pm%$Pth{12c2UqirSwgOCDH-V7wbeu()7kRJi$ zt7PPsRG8Z`Yyt9XfP9af{NzO07D*)_{|Jz;mYY~nz#y;3$O{yB0~AomOUzB3>Bae* zfkBuDXh~Z^esKu{Gf;*>WC}>0ftfjLatdQLe+7^y1#}oQ0~Z4$gTmwwj53q?n54u6 z82MZHi}(xpwfUCuRq@&KP5~-mob1RXJvo-iW%E%cV*#0an{SxL^V@u7;AR1t%y9dy zqBxA6EFx?!C + diff --git a/src/assets/fonts/icomoon.ttf b/src/assets/fonts/icomoon.ttf index 1492972c54ff9c9c8dfdaaa8b572a256ed2c6f1a..ccc99c46565654ac321127d864d74a3c753b1f3c 100644 GIT binary patch delta 446 zcmdm@`9!mxfsuiMft#U$ftkU;KUm+0Ux;5CD6$8L6OwZi3$}5t>tkSGlmYVRq$d^^ z0BHdre+Q7}NYANEyHZf~8OT2X6z<7LO-zycDU{B@Amjs-H_HGDupeT+3FNl``6?N? zB^B1T47Y*&6+pgEPJXguqU07iIiSE7pnyhhVnqRi0wXU2gD}WKg}lVv)R|tKzkz%k zpe1bu`NbtbhXR4f5s*9sGjqwr1J!~JK#mO1UCazTK>sMbWSH#5C}Z-H;RExB#t&0J z%=qx&W7@|lA1{5X{r~s>e+I_?kHuL8nD|@yi}?%rb@-O^RrA^LP6cXboV-v(c=84j z7BF7V=%&QTpw1}6e3L1Vft7)QlTp!B(VTJRzdGhkf3p`e1^zpo(!BXIqp5(*i&rbI z#`D{JW#DE3I);Ja_S>|7FnY3!kh!QZL>w&1zyzd#eD%paLe9Dd46_)87`+(xG3hW( nW7@~8!!n8W5t|RY0{a6FH*ow2Gjaoc1_DeV2X5vUUdjjnyYF)I delta 371 zcmaE&xka;{fsuiMft#U$ftkU;KUm+0Ux;52D6$8L6OwZi3oh?nevpBIQ3lALlAc&x z0Hg(g{0%^wBR!`w&4#o3JdnQwD4daznwTQ>qirSwgOCDH-V7wbeu()7kRJi$t7PPs zRG8Z`Yyt9XfP9af{A9;O*%nD9puiEJfLd;1MFE36BQKEu2FO>)OUzB3>Bae*fkBuD zXh~Z^esKxVp+F!q1tibF%$zmxKsA2_kRt_j7c&DF&_4>3eHdjXXE92N2{7`v@E7qH z@N4re*$qr~KGjP9EinT!Qw?rpwd8qaU@m4TZDWH7_+w~FF0dUAn~ zxu6h494yJe1f(YK5pve;U}RvlU|ho_#ni&IhFOZGf%O8L6+0jMISvz`5>TKDF>*5i RT@3_GKpTZO+Y2vc1OUNNOp*Wq diff --git a/src/assets/fonts/icomoon.woff b/src/assets/fonts/icomoon.woff index 6deaa896ab58dbcb0073ddbf316b033602a6f22e..84f93b7b502e87e66daa3f32db8568f4c52a6563 100644 GIT binary patch delta 481 zcmZqB+Mp#;?(gQtz{mguq6Q4yAX?EztR0tN=g44}vy5Z=bQt}i{Y7%0ZX z0_1Z*u|RrGWg1Y7hk-$$2ZXN_RDI4!O-x~65Sjs0V+O)fKZVjWfPz4=3qZaK2(uqz zzL}9*QUMhE0_6LEu(d72?VS8%pgKQc2cUok2up5}lgmx409q^za*P5PD=_lrCFZ6A z#X5kFYy;t$UYx%R@{3D=J`sScV+OLAnM)?~FjmJl0NFAO0u0OyJU|~Sykz*m{GsW? z)DN>hJouRYamvTbpKAaA{r?}R3TO*hwh<^h11OsYl)VI%W&HnGoJD|%zm>n3zmQ*t zZ#iEzpB?Yi$@duLC;w)2Q(|OLXOv;S$rQ-I%D}+MsA#Ha&babl9rLEY*^8M1|D8^0 z-fYigDj@UX)rza}{5D@1xIw|mz;OF*+CLaQd4iC+s4zqvEXlwGq=0<&$v1?Yl?@nX nF$ytyG45m1VVcIYk6DLh66+&2A9e-y2ON;d6y9tne25VMtRR6g delta 427 zcmdm>)u1I(?(gQtz{mguq6`e&AX;S0Il~hCg&y=FfcG?041h?@a4VB z52hy;gT(#-`5aIzke*YS#=yYD!oVN^R4b5S!&!YkBQ-IFfk7w-sKyM0rGB){%m4}k z#g+j1Dj>{$i1|iFZb=1D>;#bS0mA0C3|n&YlY#2|gav>CY9K7zBB_*{SOK(H*aFB` z0AqPZ-n_)zRG?S{&_Qh=JkyKwcR_w}3D6@C;OdxxEN14c$vlkJ{6MQ1q!IZ$ z9#@z=gHgud1M`Q*4^uzP`0(Ik+Q%s$FMX>0|M&lY2FCx71sM5T_>1@p__g_#@m2BJ z@=gJ2WQ2qe>ttpox6Qds#sV_;Hs3If=ePOFzzqxmAh`WjQ5;53-Xml#C Date: Wed, 2 Dec 2020 19:04:40 +0100 Subject: [PATCH 7/8] new portfolio grid style add favicon --- angular.json | 2 +- src/app/about/about.component.scss | 2 +- src/app/app-layout/app-layout.component.ts | 2 +- src/app/detail/detail.component.scss | 2 +- src/app/portfolio/portfolio.component.html | 2 +- src/app/portfolio/portfolio.component.scss | 56 +++++++++++++++------ src/assets/images/favicon.png | Bin 0 -> 1488 bytes src/assets/scss/variables.scss | 4 +- src/favicon.ico | Bin 948 -> 0 bytes src/favicon.png | Bin 0 -> 1488 bytes src/index.html | 2 +- 11 files changed, 48 insertions(+), 24 deletions(-) create mode 100644 src/assets/images/favicon.png delete mode 100644 src/favicon.ico create mode 100644 src/favicon.png diff --git a/angular.json b/angular.json index 52df64f..48a4209 100644 --- a/angular.json +++ b/angular.json @@ -24,7 +24,7 @@ "tsConfig": "tsconfig.app.json", "aot": true, "assets": [ - "src/favicon.ico", + "src/assets/images/favicon.png", "src/assets" ], "styles": [ diff --git a/src/app/about/about.component.scss b/src/app/about/about.component.scss index 24c9086..a0eb681 100644 --- a/src/app/about/about.component.scss +++ b/src/app/about/about.component.scss @@ -64,7 +64,7 @@ border: none; padding: 0; font-size: $font-40; - color: $white-alpha; + color: $black-alpha; background: transparent; cursor: pointer; transition: transform .3s; diff --git a/src/app/app-layout/app-layout.component.ts b/src/app/app-layout/app-layout.component.ts index 83ed410..7174112 100644 --- a/src/app/app-layout/app-layout.component.ts +++ b/src/app/app-layout/app-layout.component.ts @@ -97,6 +97,6 @@ export class AppLayoutComponent implements OnInit { particlesLoaded(container: Container): void { - console.log('particlesLoaded', container) + //console.log('particlesLoaded', container) } } diff --git a/src/app/detail/detail.component.scss b/src/app/detail/detail.component.scss index 0df604d..6900e99 100644 --- a/src/app/detail/detail.component.scss +++ b/src/app/detail/detail.component.scss @@ -41,7 +41,7 @@ border: none; padding: 0; font-size: $font-40; - color: $white-alpha; + color: $black-alpha; background: transparent; cursor: pointer; transition: transform .3s; diff --git a/src/app/portfolio/portfolio.component.html b/src/app/portfolio/portfolio.component.html index 546cba5..3f9d61a 100644 --- a/src/app/portfolio/portfolio.component.html +++ b/src/app/portfolio/portfolio.component.html @@ -1,7 +1,7 @@
-
+
diff --git a/src/app/portfolio/portfolio.component.scss b/src/app/portfolio/portfolio.component.scss index 554c6d3..a0965c4 100644 --- a/src/app/portfolio/portfolio.component.scss +++ b/src/app/portfolio/portfolio.component.scss @@ -6,13 +6,15 @@ .box { position: relative; display: flex; - background: $black; + //background: $black-alpha; border-radius: 10px; overflow: hidden; - margin: 20px 0; - padding: 20px; + margin: 10px 0; + padding: 40px 20px; + min-height: 250px; cursor: pointer; - transition: transform .4s; + transition: transform .4s, background .4s; + -webkit-backface-visibility: hidden; .image { position: absolute; @@ -21,9 +23,11 @@ height: 100%; width: 100%; object-fit: cover; - transform: translate(-50%, -50%); - transition: transform .4s; + transform: translate(-50%, -50%) scale(1.2); opacity: .5; + filter: grayscale(100%) invert(100%); + transition: transform .4s, opacity .4s, filter .4s; + -webkit-backface-visibility: hidden; z-index: 0; } @@ -32,47 +36,67 @@ margin: auto; text-align: center; transform: translate(0%, 0%); + color: $black; + transition: color .4s; + -webkit-backface-visibility: hidden; z-index: 1; .title { display: block; - color: $white; - font-size: $font-24; + font-size: $font-20; text-transform: uppercase; font-weight: bold; } .type { display: block; - color: $white; - font-size: $font-18; + font-size: $font-16; font-weight: bold; } .tags { display: block; - color: $white; - font-size: $font-14; + font-size: $font-12; text-transform: uppercase; font-weight: bold; - padding-top: 20px; + padding-top: 10px; } } @each $angle in 0,1,2,3,4,5,6 { - &.skew-#{$angle} {transform: skew(#{$angle - 3}deg, #{$angle - 3}deg) ;} + &.skew-#{$angle} { + transform: skew(#{$angle - 3}deg, #{$angle - 3}deg); + /*animation: zoom#{$angle} #{$angle + 3}s ease-in infinite forwards; + @keyframes zoom#{$angle} { + 0% { transform: scale(1) skew(#{$angle - 3}deg, #{$angle - 3}deg); } + 50% { transform: scale(1.1) skew(#{$angle - 3}deg, #{$angle - 3}deg); } + 75% { transform: scale(.9) skew(#{$angle - 3}deg, #{$angle - 3}deg); } + 100% { transform: scale(1) skew(#{$angle - 3}deg, #{$angle - 3}deg); } + }*/ + } } &:hover { + background: $black; z-index: 50; + //animation-play-state: paused; + @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) ;} + &.skew-#{$angle} { + transform: scale(1.4) rotate(2deg) skew(#{3 - $angle}deg, #{3 - $angle}deg); } + } .image { - transform: translate(-50%, -50%) scale(1.4); + filter: grayscale(100%) invert(0%) brightness(.5); + opacity: .9; + transform: translate(-50%, -50%) scale(1.6); + } + .text { + color: $yellow; } } } } + diff --git a/src/assets/images/favicon.png b/src/assets/images/favicon.png new file mode 100644 index 0000000000000000000000000000000000000000..0d75435d056e6a1e937f63e0e7c67ceab3879cfd GIT binary patch literal 1488 zcmV;>1uy!EP)C5J*HI zDphKwN`0tQQC^CGhZczkKtb&b?Ms1Hg0v~BL=+MbNu0Ea6DPHuIN5dlk+t`8W=2Wou6vHe}KECxk;0d6;=MsXF#q@+j zcHANRABX92m+ZL1jf{#?ugIW=Si+! zaGASiqfzG{ZiJr>0oZY0fuK?)R4Ivx*_9^@u)m%2$l)G7d}9;ET&#Nr4S4dU2|#$` zz#VmV+tGUraQkYGClB@T{;ONojmR?o{??|Jb~hO<7$6U9Xk5%q+x+#ned|Wz{_oH6 zoo6#dq41micM+7OY0u{ErE}I2p(Y%Ee*4Xm$X)NK0<^`$&tKz9-&g?P>Uozx z{9@axd$;Z?60?kF6v+$q5{@4AZ}v5IX$!?R@r^GywVe=D1l#%vSn#mQYd8pi-yM*(2Sn zGca7>@n2p+mV^ld;mscpt{IPgJBq|?MHSzul9v_Ap8qu2HKBM)Nu=sy#YwE)WBP|n z0EpmONG;2Xixv~76I~N()!(FpQr5q_u(TP^k`;C6!f~H4=)M?6EfT4d=HI`&s*oz4 z5h1@kGK?PW?z)n_0m;pLQ)_*M0eRe@DpsPNXXRuhzj8(_dm1vxeb(IeY@Q-(D6?qw% zi)&Z=4Vx?Y>7e!v)H9Jv{#=XRHTkbNm8CHuiePrq;rBn^hBSm(ZrYIET;aP1vZ%s) zuk~+PG%2Kb=J=n}d)La6Pu}fi^k|Z)^DaBT(lD(E%ud-HetXroLQ5o4Ap>_e zC?xo1Va6F;%X#ul;%1Q>+*5x@{mj!j_U@a-iZx~qi>4ef_P-o-{Jo8wJXD*vqb_>i z&adYA`VVHC>?$0Rp`oG8$)4DiQo&lkm*6UJ{g4M9o#VmBXPVW4&ozu55rBP94gBQX zvE<9$K6^wUo(eUQiUQXU!nm)+L@F#Ll40KQqJ>0Hm{0drt`2=|@v?C>Cqho4Y$5YN zG172!aFSyWJw#3KhkrQm&H1eJaxUxa4g+zF6D=4=bH>)0n5}cRtut6;Vs>~v7L!Sh qG3CU$I&nfSj*MK)0=LjWYWOc$;1V8B_ltG_0000CBYU7IjCFmI-B}4sMJt3^s9NVg!P0 z6hDQy(L`XWMkB@zOLgN$4KYz;j0zZxq9KKdpZE#5@k0crP^5f9KO};h)ZDQ%ybhht z%t9#h|nu0K(bJ ztIkhEr!*UyrZWQ1k2+YkGqDi8Z<|mIN&$kzpKl{cNP=OQzXHz>vn+c)F)zO|Bou>E z2|-d_=qY#Y+yOu1a}XI?cU}%04)zz%anD(XZC{#~WreV!a$7k2Ug`?&CUEc0EtrkZ zL49MB)h!_K{H(*l_93D5tO0;BUnvYlo+;yss%n^&qjt6fZOa+}+FDO(~2>G z2dx@=JZ?DHP^;b7*Y1as5^uphBsh*s*z&MBd?e@I>-9kU>63PjP&^#5YTOb&x^6Cf z?674rmSHB5Fk!{Gv7rv!?qX#ei_L(XtwVqLX3L}$MI|kJ*w(rhx~tc&L&xP#?cQow zX_|gx$wMr3pRZIIr_;;O|8fAjd;1`nOeu5K(pCu7>^3E&D2OBBq?sYa(%S?GwG&_0-s%_v$L@R!5H_fc)lOb9ZoOO#p`Nn`KU z3LTTBtjwo`7(HA6 z7gmO$yTR!5L>Bsg!X8616{JUngg_@&85%>W=mChTR;x4`P=?PJ~oPuy5 zU-L`C@_!34D21{fD~Y8NVnR3t;aqZI3fIhmgmx}$oc-dKDC6Ap$Gy>a!`A*x2L1v0 WcZ@i?LyX}700001uy!EP)C5J*HI zDphKwN`0tQQC^CGhZczkKtb&b?Ms1Hg0v~BL=+MbNu0Ea6DPHuIN5dlk+t`8W=2Wou6vHe}KECxk;0d6;=MsXF#q@+j zcHANRABX92m+ZL1jf{#?ugIW=Si+! zaGASiqfzG{ZiJr>0oZY0fuK?)R4Ivx*_9^@u)m%2$l)G7d}9;ET&#Nr4S4dU2|#$` zz#VmV+tGUraQkYGClB@T{;ONojmR?o{??|Jb~hO<7$6U9Xk5%q+x+#ned|Wz{_oH6 zoo6#dq41micM+7OY0u{ErE}I2p(Y%Ee*4Xm$X)NK0<^`$&tKz9-&g?P>Uozx z{9@axd$;Z?60?kF6v+$q5{@4AZ}v5IX$!?R@r^GywVe=D1l#%vSn#mQYd8pi-yM*(2Sn zGca7>@n2p+mV^ld;mscpt{IPgJBq|?MHSzul9v_Ap8qu2HKBM)Nu=sy#YwE)WBP|n z0EpmONG;2Xixv~76I~N()!(FpQr5q_u(TP^k`;C6!f~H4=)M?6EfT4d=HI`&s*oz4 z5h1@kGK?PW?z)n_0m;pLQ)_*M0eRe@DpsPNXXRuhzj8(_dm1vxeb(IeY@Q-(D6?qw% zi)&Z=4Vx?Y>7e!v)H9Jv{#=XRHTkbNm8CHuiePrq;rBn^hBSm(ZrYIET;aP1vZ%s) zuk~+PG%2Kb=J=n}d)La6Pu}fi^k|Z)^DaBT(lD(E%ud-HetXroLQ5o4Ap>_e zC?xo1Va6F;%X#ul;%1Q>+*5x@{mj!j_U@a-iZx~qi>4ef_P-o-{Jo8wJXD*vqb_>i z&adYA`VVHC>?$0Rp`oG8$)4DiQo&lkm*6UJ{g4M9o#VmBXPVW4&ozu55rBP94gBQX zvE<9$K6^wUo(eUQiUQXU!nm)+L@F#Ll40KQqJ>0Hm{0drt`2=|@v?C>Cqho4Y$5YN zG172!aFSyWJw#3KhkrQm&H1eJaxUxa4g+zF6D=4=bH>)0n5}cRtut6;Vs>~v7L!Sh qG3CU$I&nfSj*MK)0=LjWYWOc$;1V8B_ltG_0000DslakWebsite - + From 0201c1b10f13824bbfe13bc1cd5f02609ff2316a Mon Sep 17 00:00:00 2001 From: Dslak Date: Thu, 3 Dec 2020 12:08:26 +0100 Subject: [PATCH 8/8] add apis and fix back navigation --- .gitignore | 2 + angular.json | 3 +- src/apis/conn.conn | 16 ++++ src/apis/index.php | 93 ++++++++++++++++++++++ src/app/app-layout/app-layout.component.ts | 2 +- src/app/app-routing.module.ts | 6 +- src/app/detail/detail.component.html | 16 +++- src/app/detail/detail.component.scss | 14 +++- src/app/detail/detail.component.ts | 28 +++++-- src/app/portfolio/portfolio.component.ts | 3 +- src/app/services/apis.service.ts | 4 +- src/environments/environment.ts | 2 +- 12 files changed, 170 insertions(+), 19 deletions(-) create mode 100755 src/apis/conn.conn create mode 100644 src/apis/index.php diff --git a/.gitignore b/.gitignore index 915068b..cd1b3c8 100644 --- a/.gitignore +++ b/.gitignore @@ -4,3 +4,5 @@ node_modules/ package-lock\.json src/assets/images/contents/ + +dist/ diff --git a/angular.json b/angular.json index 48a4209..be23e47 100644 --- a/angular.json +++ b/angular.json @@ -25,7 +25,8 @@ "aot": true, "assets": [ "src/assets/images/favicon.png", - "src/assets" + "src/assets", + "src/apis" ], "styles": [ "src/assets/scss/main.scss" diff --git a/src/apis/conn.conn b/src/apis/conn.conn new file mode 100755 index 0000000..877d806 --- /dev/null +++ b/src/apis/conn.conn @@ -0,0 +1,16 @@ + diff --git a/src/apis/index.php b/src/apis/index.php new file mode 100644 index 0000000..8adaa9a --- /dev/null +++ b/src/apis/index.php @@ -0,0 +1,93 @@ +items = array(); + +$filter = array("portfolio", "installations", "entertainment", "performances", "workshops"); + +switch($_GET['query']) { + case "portfolio": + case "installations": + case "entertainment": + case "performances": + case "workshops": + if($_GET['query'] == 'portfolio') {$filter = '';} else {$filter = "WHERE type='".$_GET['query']."'";} + $qe = mysqli_query($conn,"SELECT * FROM `works` $filter ORDER BY id DESC"); + if(mysqli_num_rows($qe) > 0) { + $content = null; + $content->items = array(); + while($re = mysqli_fetch_array($qe)) { + $item = null; + $item->id = $re['id']; + $item->title = $re['title']; + $item->type = $re['type']; + $item->tags = $re['tags']; + $item->image = $re['image']; + array_push($content->items, $item); + } + } + break; + case "exhibitions": + $qe = mysqli_query($conn,"SELECT * FROM `exhibitions` ORDER BY date_from DESC"); + if(mysqli_num_rows($qe) > 0) { + $content = null; + $content->items = array(); + while($re = mysqli_fetch_array($qe)) { + $item = null; + $item->id = $re['id']; + $item->title = $re['title']; + $item->date_from = $re['date_from']; + $item->date_to = $re['date_to']; + $item->tags = $re['tags']; + $item->image = $re['image']; + array_push($content->items, $item); + } + } + break; + case "detail": + $qe = mysqli_query($conn,"SELECT * FROM `".$_GET['type']."` WHERE id=".$_GET['id']); + if(mysqli_num_rows($qe)>0) { + $content = null; + $re = mysqli_fetch_array($qe); + $item = null; + $item->id = $re['id']; + $item->title = $re['title']; + $item->content = $re['content']; + $item->tags = $re['tags']; + $item->image = $re['image']; + if($_GET['type'] == 'exhibitions') { + $item->date_from = $re['date_from']; + $item->date_to = $re['date_to']; + $item->works = array(); + $qx = mysqli_query($conn,"SELECT id,title FROM `works` WHERE id IN (".$re['works'].")"); + while($re = mysqli_fetch_array($qx)) { + $ex = null; + $ex->id = $re['id']; + $ex->title = $re['title']; + array_push($item->works, $ex); + } + } else if($_GET['type'] == 'works') { + $item->type = $re['type']; + $item->exhibitions = array(); + $qx = mysqli_query($conn,"SELECT id,title FROM `exhibitions` WHERE id IN (".$re['exhibitions'].")"); + while($re = mysqli_fetch_array($qx)) { + $ex = null; + $ex->id = $re['id']; + $ex->title = $re['title']; + array_push($item->exhibitions, $ex); + } + } + $content->item = $item; + } + break; +} + + +header('Access-Control-Allow-Origin: *'); +header('Content-Type: application/json'); +echo json_encode($content); + +?> diff --git a/src/app/app-layout/app-layout.component.ts b/src/app/app-layout/app-layout.component.ts index 7174112..0b874c6 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 = true + public particlesEnabled: boolean = false public id: string = 'tsparticles' public particlesOptions: any = { diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 1b2066f..83b3dbc 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -21,7 +21,11 @@ const routes: Routes = [ { path: 'workshops', component: PortfolioComponent }, { path: 'detail', component: DetailComponent, children: [ - { path: '**', component: DetailComponent } + { path: '**', component: DetailComponent, + children: [ + { path: '**', component: DetailComponent } + ] + } ] } diff --git a/src/app/detail/detail.component.html b/src/app/detail/detail.component.html index 408cb39..f5aa256 100644 --- a/src/app/detail/detail.component.html +++ b/src/app/detail/detail.component.html @@ -3,7 +3,19 @@

{{details.title}}

-
- Tags: {{details.tags}} +
+ Tags: {{details.tags}} + + Exhibitions: + {{exhibition.title}} + + + Works: + {{work.title}} +
diff --git a/src/app/detail/detail.component.scss b/src/app/detail/detail.component.scss index 6900e99..aeeb2d8 100644 --- a/src/app/detail/detail.component.scss +++ b/src/app/detail/detail.component.scss @@ -22,13 +22,23 @@ .text { font-size: $font-18; text-align: justify; + padding-bottom: 40px; } - .tags { + .tags, + .links { display: block; font-size: $font-12; text-transform: uppercase; - padding-top: 40px; + padding: 5px 0; + + .link { + display: inline-block; + font-size: $font-12; + text-transform: uppercase; + padding: 0 5px; + cursor: pointer; + } } .back { diff --git a/src/app/detail/detail.component.ts b/src/app/detail/detail.component.ts index 760367f..9b5cf81 100644 --- a/src/app/detail/detail.component.ts +++ b/src/app/detail/detail.component.ts @@ -1,5 +1,5 @@ import { Component, OnInit } from '@angular/core' -import { Router, NavigationEnd } from '@angular/router' +import { Router, NavigationEnd, NavigationStart, ActivatedRoute } from '@angular/router' import { Location } from '@angular/common' import { ApisService } from '../services/apis.service' @@ -11,19 +11,24 @@ import { ApisService } from '../services/apis.service' export class DetailComponent implements OnInit { public details: any = {} + private history: string[] = [] constructor( private apisService: ApisService, private router: Router, - private location: Location - ){ } + private location: Location, + private activeRoute: ActivatedRoute + ) { } ngOnInit(): void { - this.showDetails(this.router.url.split('/')[2]) + this.showDetails(this.router.url.split('/')[2], this.router.url.split('/')[3]) } - showDetails(id): void { - this.apisService.getDetails(id).toPromise().then((response) => { + showDetails(section, id): void { + this.apisService.getDetails(section, id).toPromise().then((response) => { + if(this.history[this.history.length - 1] != `/detail/${section}/${id}`) { + this.history.push(`/detail/${section}/${id}`) + } this.details = response.item },(error) => { console.error('getPortfolio ERROR', error) @@ -32,7 +37,14 @@ export class DetailComponent implements OnInit { }) } - back() { - this.location.back() + back(): void { + this.history.pop() + if(this.history.length > 0) { + const last = this.history[this.history.length - 1] + this.showDetails(last.split('/')[2], last.split('/')[3]) + this.location.back() + } else { + this.location.back() + } } } diff --git a/src/app/portfolio/portfolio.component.ts b/src/app/portfolio/portfolio.component.ts index ecdf1e1..6bf8d0f 100644 --- a/src/app/portfolio/portfolio.component.ts +++ b/src/app/portfolio/portfolio.component.ts @@ -27,7 +27,8 @@ export class PortfolioComponent implements OnInit { } showDetails(id): void { - this.router.navigate([`/detail/${id}`]) + const section = this.router.url.split('/')[1] == 'exhibitions' ? 'exhibitions' : 'works' + this.router.navigate([`/detail/${section}/${id}`]) } } diff --git a/src/app/services/apis.service.ts b/src/app/services/apis.service.ts index 3df86b3..ce4e16d 100644 --- a/src/app/services/apis.service.ts +++ b/src/app/services/apis.service.ts @@ -23,8 +23,8 @@ export class ApisService extends BaseService { ) } - getDetails(id): Observable { - let urlApi = `${this.restApi}?query=single&id=${id}` + getDetails(section, id): Observable { + let urlApi = `${this.restApi}?query=detail&type=${section}&id=${id}` return this.http.get(urlApi).pipe( catchError(this.handleError) ) diff --git a/src/environments/environment.ts b/src/environments/environment.ts index 2128c6d..4e9ecb9 100644 --- a/src/environments/environment.ts +++ b/src/environments/environment.ts @@ -1,5 +1,5 @@ export const environment = { production: false, - API_URL: `http://localhost/dslak_website/apis/` + API_URL: `http://dslakng.local/apis/` }