diff --git a/src/app/about/about.component.html b/src/app/about/about.component.html new file mode 100644 index 0000000..6094aa9 --- /dev/null +++ b/src/app/about/about.component.html @@ -0,0 +1 @@ +

about works!

diff --git a/src/app/about/about.component.scss b/src/app/about/about.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/about/about.component.spec.ts b/src/app/about/about.component.spec.ts new file mode 100644 index 0000000..6b77344 --- /dev/null +++ b/src/app/about/about.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { AboutComponent } from './about.component'; + +describe('AboutComponent', () => { + let component: AboutComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ AboutComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(AboutComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/about/about.component.ts b/src/app/about/about.component.ts new file mode 100644 index 0000000..9898f7a --- /dev/null +++ b/src/app/about/about.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-about', + templateUrl: './about.component.html', + styleUrls: ['./about.component.scss'] +}) +export class AboutComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/app-layout/app-layout.component.html b/src/app/app-layout/app-layout.component.html index 04d51c8..a8b3c97 100644 --- a/src/app/app-layout/app-layout.component.html +++ b/src/app/app-layout/app-layout.component.html @@ -1,2 +1,54 @@ -

app-layout works!

+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 9f96b1f..c438ec1 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -1,13 +1,29 @@ import { NgModule } from '@angular/core' 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' const routes: Routes = [ { path: '', component: AppLayoutComponent, - children: [] + children: [ + { path: '', redirectTo: '/portfolio', pathMatch: 'full' }, + { 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 } + ] } ] diff --git a/src/app/app.module.ts b/src/app/app.module.ts index a10ec68..37e4b7f 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -5,12 +5,26 @@ import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; 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'; @NgModule({ declarations: [ AppComponent, HeaderComponent, - AppLayoutComponent + AppLayoutComponent, + AboutComponent, + PortfolioComponent, + ExhibitionsComponent, + InstallationsComponent, + EntertainmentComponent, + PerformancesComponent, + WorkshopsComponent ], imports: [ BrowserModule, diff --git a/src/app/entertainment/entertainment.component.html b/src/app/entertainment/entertainment.component.html new file mode 100644 index 0000000..64e075f --- /dev/null +++ b/src/app/entertainment/entertainment.component.html @@ -0,0 +1 @@ +

entertainment works!

diff --git a/src/app/entertainment/entertainment.component.scss b/src/app/entertainment/entertainment.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/entertainment/entertainment.component.spec.ts b/src/app/entertainment/entertainment.component.spec.ts new file mode 100644 index 0000000..416bfd2 --- /dev/null +++ b/src/app/entertainment/entertainment.component.spec.ts @@ -0,0 +1,25 @@ +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 new file mode 100644 index 0000000..c6b6381 --- /dev/null +++ b/src/app/entertainment/entertainment.component.ts @@ -0,0 +1,15 @@ +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 new file mode 100644 index 0000000..85a0021 --- /dev/null +++ b/src/app/exhibitions/exhibitions.component.html @@ -0,0 +1 @@ +

exhibitions works!

diff --git a/src/app/exhibitions/exhibitions.component.scss b/src/app/exhibitions/exhibitions.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/exhibitions/exhibitions.component.spec.ts b/src/app/exhibitions/exhibitions.component.spec.ts new file mode 100644 index 0000000..c655d74 --- /dev/null +++ b/src/app/exhibitions/exhibitions.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ExhibitionsComponent } from './exhibitions.component'; + +describe('ExhibitionsComponent', () => { + let component: ExhibitionsComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ExhibitionsComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ExhibitionsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/exhibitions/exhibitions.component.ts b/src/app/exhibitions/exhibitions.component.ts new file mode 100644 index 0000000..c2c1747 --- /dev/null +++ b/src/app/exhibitions/exhibitions.component.ts @@ -0,0 +1,15 @@ +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.html b/src/app/header/header.component.html index 3c43e57..dbba668 100644 --- a/src/app/header/header.component.html +++ b/src/app/header/header.component.html @@ -1,3 +1,21 @@ -
+
+
+ + +
+ +
+ +
diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss index 7281308..0c448c9 100644 --- a/src/app/header/header.component.scss +++ b/src/app/header/header.component.scss @@ -1,9 +1,155 @@ +@import "../../assets/scss/variables"; .component-header { position: fixed; + display: flex; top: 0; left: 0; - height: 5px; - width: 100%; - background: black; + height: 100vh; + width: 100vw; + background: $yellow; + transition: height .5s; + + .logo-container { + height: 200px; + width: 200px; + max-height: 50vh; + max-width: 90vw; + position: relative; + margin: auto; + padding-top: 20px; + transition: height .6s, width .6s; + z-index: 101; + + .logo { + display: flex; + height: 100%; + width: 100%; + margin: auto; + cursor: pointer; + object-fit: contain; + } + + .circles { + &:before, + &:after { + content: ' '; + position: absolute; + top: -12%; + left: -12%; + display: block; + height: 125%; + width: 125%; + background: $white-alpha; + border-radius: 5px; + z-index: -1; + opacity: .3; + transition: background .6s; + } + + &:after { + border-radius: 20px; + animation: circle2 13s linear infinite; + opacity: .4; + } + &:before { + border-radius: 20px; + animation: circle1 10s linear infinite; + } + } + } + + &.sticky { + height: 0px; + + .logo-container { + height: 80px; + width: 80px; + + .circles { + &:before, + &:after { + background: $yellow; + } + } + + &.menu-open { + height: 120px; + width: 120px; + .circles { + &:before, + &:after { + background: $white-alpha; + } + } + } + } + } + + .menu { + position: fixed; + top: 0; + left: 0; + height: 100%; + width: 100%; + background: $yellow; + border-radius: 100px; + transform: scale(0) skew(20deg, 20deg); + transition: transform .5s, border-radius .4s; + z-index: -1; + + .nav { + display: block; + text-align: center; + padding-top: 180px; + height: calc(100vh - 180px); + overflow: hidden; + overflow-y: auto; + + .items { + list-style: none; + padding: 0; + margin: 0; + + .item { + padding: 0; + margin: 10px 0; + font-weight: bold; + font-size: $font-30; + color: $black; + cursor: pointer; + transition: transform .4s; + + &:hover { + transform: scale(1.4); + } + + &.active { + text-decoration: underline; + } + } + } + } + + &.open { + border-radius: 0; + transform: scale(1) skew(0deg, 0deg); + z-index: 100; + } + } + +} + + +@keyframes circle1 { + 0% { transform: translate(-5%, 8%) rotate(10deg) scale(1) skew(20deg, 20deg); } + 75% { transform: translate(10%, -5%) rotate(20deg) scale(1.1) skew(-10deg, -20deg); } + 50% { transform: translate(5%, 0%) rotate(-16deg) scale(.6) skew(-40deg, -10deg); } + 100% { transform: translate(-5%, 8%) rotate(10deg) scale(1) skew(20deg, 20deg); } +} +@keyframes circle2 { + 0% { transform: translate(10%, 5%) rotate(-30deg) scale(1) skew(20deg, 20deg); } + 50% { transform: translate(-5%, 8%) rotate(-17deg) scale(.7) skew(-10deg, -20deg); } + 75% { transform: translate(0%, -10%) rotate(10deg) scale(1.2) skew(-10deg, -50deg); } + 100% { transform: translate(10%, 5%) rotate(-30deg) scale(1) skew(20deg, 20deg); } } diff --git a/src/app/header/header.component.ts b/src/app/header/header.component.ts index 7ab4cf7..5776f44 100644 --- a/src/app/header/header.component.ts +++ b/src/app/header/header.component.ts @@ -1,4 +1,6 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, HostListener, Inject } from '@angular/core' +import { Router, NavigationEnd } from '@angular/router' +import { DOCUMENT } from '@angular/common' @Component({ selector: 'app-header', @@ -7,9 +9,37 @@ import { Component, OnInit } from '@angular/core'; }) export class HeaderComponent implements OnInit { - constructor() { } + public isSticky: boolean = false + public isMenuOpen: boolean = false + + constructor(@Inject(DOCUMENT) private document: Document, private router: Router) { + router.events.subscribe((val) => { + this.isMenuOpen = false + this.isSticky = true + this.document.body.classList.remove('no-scroll') + }) + } ngOnInit(): void { } + @HostListener('window:scroll', ['$event']) + onScroll(event) { + const verticalOffset = window.pageYOffset + || document.documentElement.scrollTop + || document.body.scrollTop || 0 + + this.isSticky = this.isMenuOpen || verticalOffset > 10 + } + + toggleMenu(): void { + this.isMenuOpen = !this.isMenuOpen + if(this.isMenuOpen) { + this.isSticky = true + this.document.body.classList.add('no-scroll') + } else { + this.document.body.classList.remove('no-scroll') + } + } + } diff --git a/src/app/installations/installations.component.html b/src/app/installations/installations.component.html new file mode 100644 index 0000000..c142693 --- /dev/null +++ b/src/app/installations/installations.component.html @@ -0,0 +1 @@ +

installations works!

diff --git a/src/app/installations/installations.component.scss b/src/app/installations/installations.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/installations/installations.component.spec.ts b/src/app/installations/installations.component.spec.ts new file mode 100644 index 0000000..c50ae75 --- /dev/null +++ b/src/app/installations/installations.component.spec.ts @@ -0,0 +1,25 @@ +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 new file mode 100644 index 0000000..61102ea --- /dev/null +++ b/src/app/installations/installations.component.ts @@ -0,0 +1,15 @@ +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 new file mode 100644 index 0000000..7b9658d --- /dev/null +++ b/src/app/performances/performances.component.html @@ -0,0 +1 @@ +

performances works!

diff --git a/src/app/performances/performances.component.scss b/src/app/performances/performances.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/performances/performances.component.spec.ts b/src/app/performances/performances.component.spec.ts new file mode 100644 index 0000000..0ee44e3 --- /dev/null +++ b/src/app/performances/performances.component.spec.ts @@ -0,0 +1,25 @@ +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 new file mode 100644 index 0000000..97bbb04 --- /dev/null +++ b/src/app/performances/performances.component.ts @@ -0,0 +1,15 @@ +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 new file mode 100644 index 0000000..6944f6f --- /dev/null +++ b/src/app/portfolio/portfolio.component.html @@ -0,0 +1 @@ +

portfolio works!

diff --git a/src/app/portfolio/portfolio.component.scss b/src/app/portfolio/portfolio.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/portfolio/portfolio.component.spec.ts b/src/app/portfolio/portfolio.component.spec.ts new file mode 100644 index 0000000..d16d6bc --- /dev/null +++ b/src/app/portfolio/portfolio.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PortfolioComponent } from './portfolio.component'; + +describe('PortfolioComponent', () => { + let component: PortfolioComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ PortfolioComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(PortfolioComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/portfolio/portfolio.component.ts b/src/app/portfolio/portfolio.component.ts new file mode 100644 index 0000000..f11071c --- /dev/null +++ b/src/app/portfolio/portfolio.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-portfolio', + templateUrl: './portfolio.component.html', + styleUrls: ['./portfolio.component.scss'] +}) +export class PortfolioComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/workshops/workshops.component.html b/src/app/workshops/workshops.component.html new file mode 100644 index 0000000..d0e6442 --- /dev/null +++ b/src/app/workshops/workshops.component.html @@ -0,0 +1 @@ +

workshops works!

diff --git a/src/app/workshops/workshops.component.scss b/src/app/workshops/workshops.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/workshops/workshops.component.spec.ts b/src/app/workshops/workshops.component.spec.ts new file mode 100644 index 0000000..46e2e57 --- /dev/null +++ b/src/app/workshops/workshops.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { WorkshopsComponent } from './workshops.component'; + +describe('WorkshopsComponent', () => { + let component: WorkshopsComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ WorkshopsComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(WorkshopsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/workshops/workshops.component.ts b/src/app/workshops/workshops.component.ts new file mode 100644 index 0000000..af08b35 --- /dev/null +++ b/src/app/workshops/workshops.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-workshops', + templateUrl: './workshops.component.html', + styleUrls: ['./workshops.component.scss'] +}) +export class WorkshopsComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/assets/images/logo.svg b/src/assets/images/logo.svg new file mode 100644 index 0000000..c1073ec --- /dev/null +++ b/src/assets/images/logo.svg @@ -0,0 +1,109 @@ + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/scss/fonts.scss b/src/assets/scss/fonts.scss new file mode 100644 index 0000000..aba175e --- /dev/null +++ b/src/assets/scss/fonts.scss @@ -0,0 +1,10 @@ +@import url('https://fonts.googleapis.com/css2?family=Abel&display=swap'); + +.font-primary { font-family: $font-primary; } +.font-secondary { font-family: $font-secondary; } +.font-bold { font-weight: bold !important; } +.font-light { font-weight: ight !important; } + +@each $size in 8, 10, 12, 13, 14, 15, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 46, 48, 50, 52, 54, 60, 72 { + .font-#{$size} {font-size: #{$size/16}rem !important;} +} diff --git a/src/assets/scss/global.scss b/src/assets/scss/global.scss index 5b51c54..a8e6487 100644 --- a/src/assets/scss/global.scss +++ b/src/assets/scss/global.scss @@ -1,6 +1,13 @@ - body { padding: 0; margin: 0; + height: 100%; + font-family: $font-primary; + font-size: $font-20; + color: $black; + + &.no-scroll { + overflow: hidden; + } } diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss index 369a37a..a43e426 100644 --- a/src/assets/scss/main.scss +++ b/src/assets/scss/main.scss @@ -1,2 +1,3 @@ @import "./variables"; +@import "./fonts"; @import "./global"; diff --git a/src/assets/scss/variables.scss b/src/assets/scss/variables.scss index 7479928..3eab155 100644 --- a/src/assets/scss/variables.scss +++ b/src/assets/scss/variables.scss @@ -22,24 +22,19 @@ $breadcrumb-height: 60px; // Colors $white: #fff; -$black: #000; -$gray: #e8e8e8; -$gray2: #666; -$light-gray: #f5f5f5; -$light-gray2: #c3c3c3; -$dark-gray: #47464e; -$dark-gray2: #2c2c2c; -$gold: #f1c060; -$red: #ea2d31; -$green: #55aa2a; -$blue: #3785ff; +$black: #111; +$gray: #ccc; +$light-gray: #eee; +$dark-gray: #666; + +$yellow: #a2dc02; $white-alpha: rgba(255, 255, 255, 0.9); -$white-alpha-light: rgba(255, 255, 255, 0.2); +$black-alpha: rgba(0, 0, 0, 0.9); // Fonts -$font-primary: 'Akzidenz'; -$font-secondary: 'Akzidenz'; +$font-primary: 'Abel'; +$font-secondary: 'Abel'; $font-icon: 'icomoon'; // Font-size variables