Initial Commit

.gitignore

+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+/tmp
+/out-tsc
+
+# dependencies
+/node_modules
+package-lock.json
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+testem.log
+/typings
+
+# e2e
+/e2e/*.js
+/e2e/*.map
+
+# System Files
+.DS_Store
+Thumbs.db

ISSUE_TEMPLATE.md

+<!--
+ IMPORTANT: Please use the following link to create a new issue:
+
+  https://www.creative-tim.com/new-issue/paper-kit-2-angular
+
+**If your issue was not created using the app above, it will be closed immediately.**
+-->
+
+<!--
+Love Creative Tim? Do you need Angular, React, Vuejs or HTML? You can visit:
+👉  https://www.creative-tim.com/bundles
+👉  https://www.creative-tim.com
+-->

README.md

+based on: https://github.com/creativetimofficial/pk2-angular.git

angular.json

+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "pk2-angular": {
+      "root": "",
+      "sourceRoot": "src",
+      "projectType": "application",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "tsConfig": "src/tsconfig.app.json",
+            "polyfills": "src/polyfills.ts",
+            "assets": [
+              "src/assets",
+              "src/favicon.ico"
+            ],
+            "styles": [
+              "node_modules/bootstrap/dist/css/bootstrap.min.css",
+              "node_modules/@fortawesome/fontawesome-free/css/all.css",
+              "src/assets/sass/paper-kit.scss",
+              "src/assets/css/demo.css",
+              "src/assets/css/nucleo-icons.css"
+            ],
+            "scripts": [
+              "node_modules/@fortawesome/fontawesome-free/js/all.js",
+            ]
+          },
+          "configurations": {
+            "production": {
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "fileReplacements": [{
+                "replace": "src/environments/environment.ts",
+                "with": "src/environments/environment.prod.ts"
+              }]
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "pk2-angular:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "pk2-angular:build:production"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "pk2-angular:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "karmaConfig": "./karma.conf.js",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/tsconfig.spec.json",
+            "scripts": [
+              "node_modules/@fortawesome/fontawesome-free/js/all.js"
+            ],
+            "styles": [
+              "node_modules/bootstrap/dist/css/bootstrap.min.css",
+              "node_modules/@fortawesome/fontawesome-free/css/all.css",
+              "src/assets/sass/paper-kit.scss",
+              "src/assets/css/demo.css",
+              "src/assets/css/nucleo-icons.css"
+            ],
+            "assets": [
+              "src/assets",
+              "src/favicon.ico"
+            ]
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "src/tsconfig.app.json",
+              "src/tsconfig.spec.json"
+            ],
+            "exclude": []
+          }
+        }
+      }
+    },
+    "pk2-angular-e2e": {
+      "root": "e2e",
+      "sourceRoot": "e2e",
+      "projectType": "application",
+      "architect": {
+        "e2e": {
+          "builder": "@angular-devkit/build-angular:protractor",
+          "options": {
+            "protractorConfig": "./protractor.conf.js",
+            "devServerTarget": "pk2-angular:serve"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "e2e/tsconfig.e2e.json"
+            ],
+            "exclude": []
+          }
+        }
+      }
+    }
+  },
+  "defaultProject": "pk2-angular",
+  "schematics": {
+    "@schematics/angular:component": {
+      "prefix": "app",
+      "styleext": "scss"
+    },
+    "@schematics/angular:directive": {
+      "prefix": "app"
+    }
+  },
+  "cli": {
+    "analytics": false
+  }
+}

e2e/app.e2e-spec.ts

+import { Pk2AngularCliFreePage } from './app.po';
+
+describe('pk2-angular-cli-free App', () => {
+  let page: Pk2AngularCliFreePage;
+
+  beforeEach(() => {
+    page = new Pk2AngularCliFreePage();
+  });
+
+  it('should display welcome message', () => {
+    page.navigateTo();
+    expect(page.getParagraphText()).toEqual('Welcome to app!!');
+  });
+});

e2e/app.po.ts

+import { browser, by, element } from 'protractor';
+
+export class Pk2AngularCliFreePage {
+  navigateTo() {
+    return browser.get('/');
+  }
+
+  getParagraphText() {
+    return element(by.css('app-root h1')).getText();
+  }
+}

e2e/tsconfig.e2e.json

+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/e2e",
+    "module": "commonjs",
+    "target": "es5",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  }
+}

karma.conf.js

+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/0.13/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client:{
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, 'coverage'), reports: [ 'html', 'lcovonly' ],
+      fixWebpackSourcePaths: true
+    },
+    
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false
+  });
+};

package.json

+{
+  "name": "ziermach.de",
+  "version": "1.3.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "test": "ng test",
+    "lint": "ng lint",
+    "e2e": "ng e2e",
+    "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start"
+  },
+  "dependencies": {
+    "@angular/animations": "9.0.6",
+    "@angular/common": "9.0.6",
+    "@angular/compiler": "9.0.6",
+    "@angular/core": "9.0.6",
+    "@angular/forms": "9.0.6",
+    "@angular/http": "7.2.16",
+    "@angular/localize": "^9.0.6",
+    "@angular/platform-browser": "9.0.6",
+    "@angular/platform-browser-dynamic": "9.0.6",
+    "@angular/router": "9.0.6",
+    "@fortawesome/fontawesome-free": "^5.13.0",
+    "@ng-bootstrap/ng-bootstrap": "6.0.0",
+    "bootstrap": "4.1.2",
+    "core-js": "3.6.4",
+    "jquery": "3.2.1",
+    "jw-bootstrap-switch-ng2": "2.0.1",
+    "ng2-nouislider": "1.7.12",
+    "nouislider": "9.2.0",
+    "popper.js": "1.14.4",
+    "rxjs": "6.5.4",
+    "rxjs-compat": "6.5.4",
+    "zone.js": "0.10.2"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "0.900.6",
+    "@angular/cli": "9.0.6",
+    "@angular/compiler-cli": "9.0.6",
+    "@angular/language-service": "9.0.6",
+    "@types/jasmine": "3.5.9",
+    "@types/node": "13.9.1",
+    "codelyzer": "5.2.1",
+    "jasmine-core": "3.5.0",
+    "jasmine-spec-reporter": "4.2.1",
+    "karma": "4.4.1",
+    "karma-chrome-launcher": "3.1.0",
+    "karma-cli": "2.0.0",
+    "karma-coverage-istanbul-reporter": "2.1.1",
+    "karma-jasmine": "3.1.1",
+    "karma-jasmine-html-reporter": "1.5.2",
+    "protractor": "5.4.3",
+    "ts-node": "3.0.4",
+    "tslint": "6.1.0",
+    "typescript": "3.7.5"
+  }
+}

protractor.conf.js

+// Protractor configuration file, see link for more information
+// https://github.com/angular/protractor/blob/master/lib/config.ts
+
+const { SpecReporter } = require('jasmine-spec-reporter');
+
+exports.config = {
+  allScriptsTimeout: 11000,
+  specs: [
+    './e2e/**/*.e2e-spec.ts'
+  ],
+  capabilities: {
+    'browserName': 'chrome'
+  },
+  directConnect: true,
+  baseUrl: 'http://localhost:4200/',
+  framework: 'jasmine',
+  jasmineNodeOpts: {
+    showColors: true,
+    defaultTimeoutInterval: 30000,
+    print: function() {}
+  },
+  onPrepare() {
+    require('ts-node').register({
+      project: 'e2e/tsconfig.e2e.json'
+    });
+    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
+  }
+};

src/app/app-routing.module.ts

+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { environment } from 'environments/environment';
+import { AboutComponent } from 'app/pages/about/about.component';
+import { NotFoundComponent } from 'app/pages/not-found/not-found.component';
+import { ResumeComponent } from './pages/resume/resume.component';
+import { GamesDashboardComponent } from './pages/games-dashboard/games-dashboard.component';
+import { ProjectDashboardComponent } from './pages/project-dashboard/project-dashboard.component';
+import { MagneticRecyclingQueenComponent } from './pages/game-dashboard/magnetic-recycling-queen/magnetic-recycling-queen.component';
+import { SaltyPiranhaComponent } from './pages/game-dashboard/salty-piranha/salty-piranha.component';
+import { LaserBluesComponent } from './pages/game-dashboard/laser-blues/laser-blues.component';
+import { WhatTheFungiComponent } from './pages/game-dashboard/what-the-fungi/what-the-fungi.component';
+import { ImpressumComponent } from './shared/impressum/impressum.component';
+
+
+const routes: Routes = [
+    {
+        path: 'resume',
+        component: ResumeComponent,
+    },
+    {
+        path: 'games',
+        children: [
+
+            {
+                path: 'magnetic-recycling-queen',
+                component: MagneticRecyclingQueenComponent
+            },
+            {
+                path: 'salty-piranha',
+                component: SaltyPiranhaComponent
+            },
+            {
+                path: 'laser-blues',
+                component: LaserBluesComponent
+            },
+            {
+                path: 'what-the-fungi',
+                component: WhatTheFungiComponent
+            },
+            {
+                path: '',
+                component: GamesDashboardComponent
+            }
+        ]
+    },
+    {
+        path: 'projects',
+        component: ProjectDashboardComponent,
+    },
+    {
+        path: 'about',
+        component: AboutComponent,
+    },
+    {
+        path: 'legal',
+        component: ImpressumComponent,
+    },
+    {
+        path: '',
+        redirectTo: 'about',
+        pathMatch: 'full'
+    },
+    {
+        path: '**',
+        component: NotFoundComponent,
+    }
+
+];
+
+@NgModule({
+    imports: [
+        RouterModule.forRoot(routes, {
+            enableTracing: !environment.production
+        }),
+    ],
+    exports: [RouterModule]
+})
+export class AppRoutingModule { }

src/app/app.component.html

+<app-navbar></app-navbar>
+<router-outlet></router-outlet>
+<app-footer *ngIf="removeFooter()"></app-footer>

src/app/app.component.spec.ts

+import { TestBed, async } from '@angular/core/testing';
+
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+  }));
+
+  it('should create the app', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  }));
+
+  it(`should have as title 'app'`, async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app.title).toEqual('app');
+  }));
+
+  it('should render title in a h1 tag', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.debugElement.nativeElement;
+    expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!!');
+  }));
+});

src/app/app.component.ts

+import { Component, OnInit, Inject, Renderer2, ElementRef, ViewChild } from '@angular/core';
+import { Router, NavigationEnd } from '@angular/router';
+import { Subscription } from 'rxjs/Subscription';
+import 'rxjs/add/operator/filter';
+import { DOCUMENT } from '@angular/common';
+import { LocationStrategy, PlatformLocation, Location } from '@angular/common';
+import { NavbarComponent } from './shared/navbar/navbar.component';
+
+@Component({
+    selector: 'app-root',
+    templateUrl: './app.component.html',
+    styleUrls: ['./app.component.scss']
+})
+export class AppComponent implements OnInit {
+    private _router: Subscription;
+    @ViewChild(NavbarComponent) navbar: NavbarComponent;
+
+    constructor( private renderer : Renderer2, private router: Router, @Inject(DOCUMENT,) private document: any, private element : ElementRef, public location: Location) {}
+    ngOnInit() {
+        var navbar : HTMLElement = this.element.nativeElement.children[0].children[0];
+        this._router = this.router.events.filter(event => event instanceof NavigationEnd).subscribe((event: NavigationEnd) => {
+            if (window.outerWidth > 991) {
+                window.document.children[0].scrollTop = 0;
+            }else{
+                window.document.activeElement.scrollTop = 0;
+            }
+            this.navbar.sidebarClose();
+        });
+        this.renderer.listen('window', 'scroll', (event) => {
+            const number = window.scrollY;
+            if (number > 150 || window.pageYOffset > 150) {
+                // add logic
+                navbar.classList.remove('navbar-transparent');
+            } else {
+                // remove logic
+                navbar.classList.add('navbar-transparent');
+            }
+        });
+        var ua = window.navigator.userAgent;
+        var trident = ua.indexOf('Trident/');
+        if (trident > 0) {
+            // IE 11 => return version number
+            var rv = ua.indexOf('rv:');
+            var version = parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);
+        }
+        if (version) {
+            var body = document.getElementsByTagName('body')[0];
+            body.classList.add('ie-background');
+
+        }
+
+    }
+    removeFooter() {
+        var titlee = this.location.prepareExternalUrl(this.location.path());
+        titlee = titlee.slice( 1 );
+        if(titlee === 'signup' || titlee === 'nucleoicons'){
+            return false;
+        }
+        else {
+            return true;
+        }
+    }
+}

src/app/app.module.ts

+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { RouterModule } from '@angular/router';
+
+import { AppComponent } from './app.component';
+import { NavbarComponent } from './shared/navbar/navbar.component';
+import { FooterComponent } from './shared/footer/footer.component';
+
+import { ComponentsModule } from './components/components.module';
+import { NotFoundComponent } from './pages/not-found/not-found.component';
+import { AppRoutingModule } from './app-routing.module';
+import { ResumeComponent } from './pages/resume/resume.component';
+import { GamesDashboardComponent } from './pages/games-dashboard/games-dashboard.component';
+import { ProjectDashboardComponent } from './pages/project-dashboard/project-dashboard.component';
+import { PageHeaderModule } from './page-header/page-header.module';
+import { MagneticRecyclingQueenComponent } from './pages/game-dashboard/magnetic-recycling-queen/magnetic-recycling-queen.component';
+import { WhatTheFungiComponent } from './pages/game-dashboard/what-the-fungi/what-the-fungi.component';
+import { LaserBluesComponent } from './pages/game-dashboard/laser-blues/laser-blues.component';
+import { SaltyPiranhaComponent } from './pages/game-dashboard/salty-piranha/salty-piranha.component';
+import { KeepInTouchComponent } from './pages/keep-in-touch/keep-in-touch.component';
+import { ImpressumComponent } from './shared/impressum/impressum.component';
+
+
+@NgModule({
+  declarations: [
+    AppComponent,
+    NavbarComponent,
+    FooterComponent,
+    NotFoundComponent,
+    ResumeComponent,
+    GamesDashboardComponent,
+    ProjectDashboardComponent,
+    MagneticRecyclingQueenComponent,
+    WhatTheFungiComponent,
+    LaserBluesComponent,
+    SaltyPiranhaComponent,
+    KeepInTouchComponent,
+    ImpressumComponent,
+  ],
+  imports: [
+    BrowserModule,
+    NgbModule,
+    FormsModule,
+    RouterModule,
+    AppRoutingModule,
+    ComponentsModule,
+    PageHeaderModule,
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }

src/app/components/components.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { FormsModule } from '@angular/forms';
+import { NouisliderModule } from 'ng2-nouislider';
+import { JwBootstrapSwitchNg2Module } from 'jw-bootstrap-switch-ng2';
+import { RouterModule, Router } from '@angular/router';
+
+import { NotificationComponent } from './notification/notification.component';
+import { AboutComponent } from 'app/pages/about/about.component';
+import { PageHeaderModule } from 'app/page-header/page-header.module';
+
+@NgModule({
+    imports: [
+        PageHeaderModule,
+        CommonModule,
+        FormsModule,
+        NgbModule,
+        NouisliderModule,
+        RouterModule,
+        JwBootstrapSwitchNg2Module,
+    ],
+    declarations: [
+        AboutComponent,
+        NotificationComponent,
+    ],
+    entryComponents: [],
+    exports: [ AboutComponent, NotificationComponent]
+})
+export class ComponentsModule { }

src/app/components/notification/notification.component.html

+<p *ngFor="let alert of alerts">
+    <ngb-alert [type]="alert.type"  [dismissible]="false">
+        <div class="container">
+            <ng-container *ngIf="alert.icon">
+                <i class="nc-icon {{alert.icon}}"></i>
+            </ng-container>
+
+            {{ alert.message }}
+            <button type="button" name="button" class="close" (click)="closeAlert(alert)">
+                <i class="nc-icon nc-simple-remove"></i>
+            </button>
+        </div>
+    </ngb-alert>
+</p>

src/app/components/notification/notification.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NotificationComponent } from './notification.component';
+
+describe('NotificationComponent', () => {
+  let component: NotificationComponent;
+  let fixture: ComponentFixture<NotificationComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NotificationComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NotificationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/notification/notification.component.ts

+import { Input, Component } from '@angular/core';
+
+@Component({
+    selector: 'app-notification',
+    templateUrl: './notification.component.html',
+    styleUrls: ['./notification.component.scss']
+})
+
+export class NotificationComponent {
+    @Input()
+    public alerts: Array<IAlert> = [];
+    private backup: Array<IAlert>;
+
+    constructor() {
+        this.alerts.push({
+            id: 1,
+            type: 'success',
+            message: 'This is an success alert',
+        }, {
+            id: 2,
+            type: 'info',
+            message: 'This is an info alert',
+        }, {
+            id: 3,
+            type: 'warning',
+            message: 'This is a warning alert',
+            icon: 'nc-bell-55'
+        }, {
+            id: 4,
+            type: 'danger',
+            message: 'This is a danger alert',
+            icon: 'nc-bell-55'
+        });
+        this.backup = this.alerts.map((alert: IAlert) => Object.assign({}, alert));
+    }
+
+    public closeAlert(alert: IAlert) {
+        const index: number = this.alerts.indexOf(alert);
+        this.alerts.splice(index, 1);
+    }
+}
+
+export interface IAlert {
+    id: number;
+    type: string;
+    message: string;
+    icon?: string;
+}

src/app/game/magnetic-recycling-queen/magnetic-recycling-queen.component.html

+<p>magnetic-recycling-queen works!</p>

src/app/game/magnetic-recycling-queen/magnetic-recycling-queen.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MagneticRecyclingQueenComponent } from './magnetic-recycling-queen.component';
+
+describe('MagneticRecyclingQueenComponent', () => {
+  let component: MagneticRecyclingQueenComponent;
+  let fixture: ComponentFixture<MagneticRecyclingQueenComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MagneticRecyclingQueenComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MagneticRecyclingQueenComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/game/magnetic-recycling-queen/magnetic-recycling-queen.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-magnetic-recycling-queen',
+  templateUrl: './magnetic-recycling-queen.component.html',
+  styleUrls: ['./magnetic-recycling-queen.component.css']
+})
+export class MagneticRecyclingQueenComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/page-header/default-page-header/default-page-header.component.html

+<div class="page-header section-dark" style="background-image: url('assets/img/dark-fog-forest-haze.jpg')">
+    <div class="filter"></div>
+    <div class="content-center">
+        <div class="container">
+            <div class="title-brand">
+                <div class="logo">
+                </div>
+                <h1 class="presentation-title">ZIERMACH³</h1>
+            </div>
+
+            <h2 class="presentation-subtitle text-center"></h2>
+        </div>
+    </div>
+    <div class="moving-clouds" style="background-image: url('assets/img/clouds.png'); "></div>
+</div>

src/app/page-header/default-page-header/default-page-header.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DefaultPageHeaderComponent } from './default-page-header.component';
+
+describe('DefaultPageHeaderComponent', () => {
+  let component: DefaultPageHeaderComponent;
+  let fixture: ComponentFixture<DefaultPageHeaderComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DefaultPageHeaderComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DefaultPageHeaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/page-header/default-page-header/default-page-header.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-default-page-header',
+  templateUrl: './default-page-header.component.html',
+  styleUrls: ['./default-page-header.component.css']
+})
+export class DefaultPageHeaderComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/page-header/game-header/game-header.component.html

+<div class="page-header section-dark  page-header-xs" style="background-image: url('assets/img/gaming-thumbnail.jpg')">
+    <div class="filter"></div>
+    <div class="content-center">
+        <div class="container">
+            <div class="title-brand">
+                <h1 class="presentation-title">Games</h1>
+            </div>
+        </div>
+    </div>
+</div>

src/app/page-header/game-header/game-header.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GameHeaderComponent } from './game-header.component';
+
+describe('GameHeaderComponent', () => {
+  let component: GameHeaderComponent;
+  let fixture: ComponentFixture<GameHeaderComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ GameHeaderComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(GameHeaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/page-header/game-header/game-header.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-game-header',
+  templateUrl: './game-header.component.html',
+  styleUrls: ['./game-header.component.css']
+})
+export class GameHeaderComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/page-header/page-header.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DefaultPageHeaderComponent } from './default-page-header/default-page-header.component';
+import { GameHeaderComponent } from './game-header/game-header.component';
+import { ProjectHeaderComponent } from './project-header/project-header.component';
+import { ResumeHeaderComponent } from './resume-header/resume-header.component';
+
+
+
+@NgModule({
+  declarations: [
+    DefaultPageHeaderComponent,
+    GameHeaderComponent,
+    ProjectHeaderComponent,
+    ResumeHeaderComponent
+  ],
+  imports: [
+    CommonModule
+  ],
+  exports: [
+    DefaultPageHeaderComponent,
+    GameHeaderComponent,
+    ResumeHeaderComponent,
+    ProjectHeaderComponent
+  ]
+})
+export class PageHeaderModule { }

src/app/page-header/project-header/project-header.component.html

+<div class="page-header section-dark  page-header-xs" style="background-image: url('assets/img/internet-technology-computer-display.jpg')">
+    <div class="filter"></div>
+    <div class="content-center">
+        <div class="container">
+            <div class="title-brand">
+                <h1 class="presentation-title">Projects</h1>
+            </div>
+        </div>
+    </div>
+</div>

src/app/page-header/project-header/project-header.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProjectHeaderComponent } from './project-header.component';
+
+describe('ProjectHeaderComponent', () => {
+  let component: ProjectHeaderComponent;
+  let fixture: ComponentFixture<ProjectHeaderComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ProjectHeaderComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ProjectHeaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/page-header/project-header/project-header.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-project-header',
+  templateUrl: './project-header.component.html',
+  styleUrls: ['./project-header.component.css']
+})
+export class ProjectHeaderComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/page-header/resume-header/resume-header.component.html

+<div class="page-header section-dark page-header-small" style="background-image: url('assets/img/about-thumbnail.jpg')">
+    <div class="filter"></div>
+    <div class="content-center">
+        <div class="container">
+            <div class="title-brand">
+                <h1 class="presentation-title">About me</h1>
+            </div>
+        </div>
+    </div>
+</div>

src/app/page-header/resume-header/resume-header.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ResumeHeaderComponent } from './resume-header.component';
+
+describe('ResumeHeaderComponent', () => {
+  let component: ResumeHeaderComponent;
+  let fixture: ComponentFixture<ResumeHeaderComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ResumeHeaderComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ResumeHeaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/page-header/resume-header/resume-header.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-resume-header',
+  templateUrl: './resume-header.component.html',
+  styleUrls: ['./resume-header.component.css']
+})
+export class ResumeHeaderComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/pages/about/about.component.html

+<div class="wrapper">
+  <app-default-page-header></app-default-page-header>
+  <div class="main">
+    <div class="section section-gray profile-content">
+      <div class="container">
+        <div class="owner">
+          <div class="avatar">
+            <img
+              src="./assets/img/avatar/profilbild.jpg"
+              alt="Circle Image"
+              class="img-circle img-no-padding img-responsive"
+            />
+          </div>
+          <div class="name">
+            <h4 class="title">Christian Ziermann<br /></h4>
+            <h6 class="description">Web Developer</h6>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-md-6 ml-auto mr-auto text-center">
+            <a
+              [routerLink]="['/resume']"
+              class="btn btn-link btn-danger"
+              >See more</a
+            >
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="section section-dark text-center">
+      <div class="container">
+        <div class="row">
+          <div class="col-md-6">
+            <div class="info">
+              <div class="icon icon-danger">
+                <i class="fas fa-gamepad"></i>
+              </div>
+              <div class="description">
+                <h4 class="info-title">Games</h4>
+                <p class="description">
+                  some small Games i made with some friends.
+                </p>
+                <a
+                  [routerLink]="['/games']"
+                  class="btn btn-link btn-danger"
+                  >See more</a
+                >
+              </div>
+            </div>
+          </div>
+          <div class="col-md-6">
+            <div class="info">
+              <div class="icon icon-danger">
+                <i class="fas fa-code"></i>
+              </div>
+              <div class="description">
+                <h4 class="info-title">Projects</h4>
+                <p>from simple Script to bigger Web-Projects.</p>
+                <a
+                  [routerLink]="['/projects']"
+                  class="btn btn-link btn-danger"
+                  >See more</a
+                >
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/pages/about/about.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AboutComponent } from './about.component';
+
+describe('AboutComponent', () => {
+  let component: AboutComponent;
+  let fixture: ComponentFixture<AboutComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AboutComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AboutComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/about/about.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+    selector: 'app-about',
+    templateUrl: './about.component.html',
+    styleUrls: ['./about.component.scss']
+})
+
+export class AboutComponent implements OnInit {
+  focus = true;
+  focus1 = true;
+  constructor() { }
+
+  ngOnInit() {}
+
+}

src/app/pages/game-dashboard/laser-blues/laser-blues.component.html

+<iframe
+  frameborder="0"
+  src="https://itch.io/embed-upload/1093367?color=010144"
+  allowfullscreen=""
+  class="game"
+  [width]="innerWidth"
+  [height]="innerHeight"
+></iframe>

src/app/pages/game-dashboard/laser-blues/laser-blues.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LaserBluesComponent } from './laser-blues.component';
+
+describe('LaserBluesComponent', () => {
+  let component: LaserBluesComponent;
+  let fixture: ComponentFixture<LaserBluesComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LaserBluesComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LaserBluesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/game-dashboard/laser-blues/laser-blues.component.ts

+import { Component, OnInit, HostListener } from '@angular/core';
+
+@Component({
+  selector: 'app-laser-blues',
+  templateUrl: './laser-blues.component.html',
+  styleUrls: ['./laser-blues.component.css']
+})
+export class LaserBluesComponent implements OnInit {
+
+  public innerHeight: any;
+  public innerWidth: any;
+
+  ngOnInit() {
+    this.innerHeight = window.innerHeight;
+    this.innerWidth = window.innerWidth;
+  }
+  constructor() { }
+
+  @HostListener('window:resize', ['$event'])
+  onResize(event) {
+    this.innerHeight = window.innerHeight;
+    this.innerWidth = window.innerWidth;
+  }
+}

src/app/pages/game-dashboard/magnetic-recycling-queen/magnetic-recycling-queen.component.html

+<iframe
+  frameborder="0"
+  src="https://itch.io/embed-upload/1120192?color=181a1b"
+  allowfullscreen=""
+  class="game"
+  [width]="innerWidth"
+  [height]="innerHeight"
+></iframe>

src/app/pages/game-dashboard/magnetic-recycling-queen/magnetic-recycling-queen.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MagneticRecyclingQueenComponent } from './magnetic-recycling-queen.component';
+
+describe('MagneticRecyclingQueenComponent', () => {
+  let component: MagneticRecyclingQueenComponent;
+  let fixture: ComponentFixture<MagneticRecyclingQueenComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MagneticRecyclingQueenComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MagneticRecyclingQueenComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/game-dashboard/magnetic-recycling-queen/magnetic-recycling-queen.component.ts

+import { Component, OnInit, HostListener } from '@angular/core';
+
+@Component({
+  selector: 'app-magnetic-recycling-queen',
+  templateUrl: './magnetic-recycling-queen.component.html',
+  styleUrls: ['./magnetic-recycling-queen.component.css']
+})
+export class MagneticRecyclingQueenComponent implements OnInit {
+
+  public innerHeight: any;
+  public innerWidth: any;
+  
+  ngOnInit() {
+    this.innerHeight = window.innerHeight;
+    this.innerWidth = window.innerWidth;
+  }
+  constructor() { }
+
+  @HostListener('window:resize', ['$event'])
+  onResize(event) {
+    this.innerHeight = window.innerHeight;
+    this.innerWidth = window.innerWidth;
+  }
+}

src/app/pages/game-dashboard/salty-piranha/salty-piranha.component.html

+<iframe
+  frameborder="0"
+  src="https://itch.io/embed-upload/1292627?color=2196f3"
+  allowfullscreen=""
+  class="game"
+  [width]="innerWidth"
+  [height]="innerHeight"
+></iframe>

src/app/pages/game-dashboard/salty-piranha/salty-piranha.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SaltyPiranhaComponent } from './salty-piranha.component';
+
+describe('SaltyPiranhaComponent', () => {
+  let component: SaltyPiranhaComponent;
+  let fixture: ComponentFixture<SaltyPiranhaComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SaltyPiranhaComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SaltyPiranhaComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/game-dashboard/salty-piranha/salty-piranha.component.ts

+import { Component, OnInit, HostListener } from '@angular/core';
+
+@Component({
+  selector: 'app-salty-piranha',
+  templateUrl: './salty-piranha.component.html',
+  styleUrls: ['./salty-piranha.component.css']
+})
+export class SaltyPiranhaComponent implements OnInit {
+
+  public innerHeight: any;
+  public innerWidth: any;
+
+  ngOnInit() {
+    this.innerHeight = window.innerHeight;
+    this.innerWidth = window.innerWidth;
+  }
+  constructor() { }
+
+  @HostListener('window:resize', ['$event'])
+  onResize(event) {
+    this.innerHeight = window.innerHeight;
+    this.innerWidth = window.innerWidth;
+  }
+}

src/app/pages/game-dashboard/what-the-fungi/what-the-fungi.component.html

+<iframe
+  class="game"
+  frameborder="0"
+  src="https://itch.io/embed-upload/1062906?color=4B7F52"
+  allowfullscreen=""
+  [width]="innerWidth"
+  [height]="innerHeight"
+  >
+  ></iframe
+>

src/app/pages/game-dashboard/what-the-fungi/what-the-fungi.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { WhatTheFungiComponent } from './what-the-fungi.component';
+
+describe('WhatTheFungiComponent', () => {
+  let component: WhatTheFungiComponent;
+  let fixture: ComponentFixture<WhatTheFungiComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ WhatTheFungiComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(WhatTheFungiComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/game-dashboard/what-the-fungi/what-the-fungi.component.ts

+import { Component, OnInit, HostListener } from '@angular/core';
+
+@Component({
+  selector: 'app-what-the-fungi',
+  templateUrl: './what-the-fungi.component.html',
+  styleUrls: ['./what-the-fungi.component.css']
+})
+export class WhatTheFungiComponent implements OnInit {
+
+  public innerHeight: any;
+  public innerWidth: any;
+
+  ngOnInit() {
+    this.innerHeight = window.innerHeight;
+    this.innerWidth = window.innerWidth;
+  }
+  constructor() { }
+
+  @HostListener('window:resize', ['$event'])
+  onResize(event) {
+    this.innerHeight = window.innerHeight;
+    this.innerWidth = window.innerWidth;
+  }
+}

src/app/pages/games-dashboard/games-dashboard.component.css

+#disco-gif {
+    position: absolute;
+}
+
+#disco-thumbnail {
+    min-height: 485px;
+}

src/app/pages/games-dashboard/games-dashboard.component.html

+<div class="wrapper">
+  <app-game-header></app-game-header>
+  <div class="main">
+    <div class="section section-dark">
+      <div class="container">
+        <div class="row">
+          <div class="col-sm-4 offset-md-4">
+            <div class="info text-center">
+              <div class="icon icon-danger">
+                <i class="fab fa-itch-io"></i>
+              </div>
+              <div class="description">
+                <h4 class="info-title">Mini Beans Jam Games</h4>
+                <p class="description">
+                  All these games bellow where made for an GameJam called Mini
+                  Beans Jam. The Challange was to create an game for an motto
+                  given by 3 random words in 42 Hours (Friday - Sunday). I made
+                  this Games with an small Hobby Team called WhyMonkeys.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="section section-gray">
+      <div class="container">
+        <div class="row">
+          <div class="col-md-6">
+            <div class="card">
+              <img
+                class="card-img-top"
+                src="/assets/img/mrq-thumbnail.png"
+                alt="Card image cap"
+              />
+              <div class="card-body">
+                <h4 class="card-title">Magnetic Recycling Queen</h4>
+                <p class="card-text">
+                  The first game i helped to Develop.
+                  Made with Unity.
+                </p>
+                <a
+                  routerLink="/games/magnetic-recycling-queen"
+                  class="btn btn-primary"
+                  >Play Now!</a
+                >
+                <a href="https://karotofel.itch.io/mrq" class="btn btn-primary">
+                  Check out on <i class="fab fa-itch-io"></i>
+                </a>
+              </div>
+            </div>
+          </div>
+          <div class="col-md-6">
+            <div class="card">
+              <img
+                class="card-img-top"
+                src="/assets/img/wtf-thumbnail.png"
+                alt="Card image cap"
+              />
+              <div class="card-body">
+                <h4 class="card-title">What the fungi</h4>
+                <p class="card-text">
+                  In this game i tried my self at an A* search algorithm It went
+                  okay ...
+                </p>
+                <p>
+                  Made with Unity.
+                </p>
+                <a routerLink="/games/what-the-fungi" class="btn btn-primary"
+                  >Play Now!</a
+                >
+                <a
+                  href="https://karotofel.itch.io/wtfungi"
+                  class="btn btn-primary"
+                >
+                  Check out on <i class="fab fa-itch-io"></i>
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-md-6">
+            <div class="card">
+              <img
+                class="card-img-top"
+                id="disco-thumbnail"
+                src="/assets/img/disco-blues-thumbnail.png"
+                alt="Card image cap"
+              />
+              <img
+                class="card-img-top"
+                id="disco-gif"
+                src="/assets/img/disco-blues.gif"
+                alt="Card image cap"
+              />
+              <div class="card-body">
+                <h4 class="card-title">Disc(o) Blues</h4>
+                <p class="card-text">
+                  This is game was far the most Complex i helped with. It's
+                  Primary made for Mobile so the UI is in web a bit messy. The
+                  idea and the Style is great but i was to much for the size of
+                  team and the given time. 
+                   Made with Unity.
+                </p>
+                <a routerLink="/games/laser-blues" class="btn btn-primary"
+                  >Play Now!</a
+                >
+                <a
+                  href="https://karotofel.itch.io/laser-blues"
+                  class="btn btn-primary"
+                >
+                  Check out on <i class="fab fa-itch-io"></i>
+                </a>
+              </div>
+            </div>
+          </div>
+          <div class="col-md-6">
+            <div class="card">
+              <img
+                class="card-img-top"
+                src="/assets/img/salty-piranha-thumbnail.png"
+                alt="Card image cap"
+              />
+              <div class="card-body">
+                <h4 class="card-title">Salty Prianha</h4>
+                <p class="card-text">
+                  First game where i did 100% of the coding. A small but nice
+                  project only done by 2 people in less than 42 hours. Also my
+                  first experience with the Godot Engine. 
+                  Made with Godot.
+                </p>
+                <a routerLink="/games/salty-piranha" class="btn btn-primary"
+                  >Play Now!</a
+                >
+                <a
+                  href="https://karotofel.itch.io/salty-piranha"
+                  class="btn btn-primary"
+                >
+                  Check out on <i class="fab fa-itch-io"></i>
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/pages/games-dashboard/games-dashboard.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GamesDashboardComponent } from './games-dashboard.component';
+
+describe('GamesDashboardComponent', () => {
+  let component: GamesDashboardComponent;
+  let fixture: ComponentFixture<GamesDashboardComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ GamesDashboardComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(GamesDashboardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/games-dashboard/games-dashboard.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-games-dashboard',
+  templateUrl: './games-dashboard.component.html',
+  styleUrls: ['./games-dashboard.component.css']
+})
+export class GamesDashboardComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/pages/keep-in-touch/keep-in-touch.component.html

+<div class="section landing-section">
+    <div class="container">
+      <div class="row">
+        <div class="col-md-8 mr-auto ml-auto">
+          <h2 class="text-center">Keep in touch?</h2>
+          <form class="contact-form">
+            <div class="row">
+              <div class="col-md-6">
+                <label>Name</label>
+                <div
+                  class="input-group"
+                  [ngClass]="{ 'input-group-focus': focus === true }"
+                >
+                  <div class="input-group-prepend">
+                    <span class="input-group-text"
+                      ><i class="nc-icon nc-single-02"></i
+                    ></span>
+                  </div>
+                  <input
+                    type="text"
+                    class="form-control"
+                    placeholder="Name"
+                    (focus)="focus = true"
+                    (blur)="focus = false"
+                  />
+                </div>
+              </div>
+              <div class="col-md-6">
+                <label>Email</label>
+                <div
+                  class="input-group"
+                  [ngClass]="{ 'input-group-focus': focus1 === true }"
+                >
+                  <div class="input-group-prepend">
+                    <span class="input-group-text">
+                      <i class="nc-icon nc-email-85"></i
+                    ></span>
+                  </div>
+                  <input
+                    type="text"
+                    class="form-control"
+                    placeholder="Email"
+                    (focus)="focus1 = true"
+                    (blur)="focus1 = false"
+                  />
+                </div>
+              </div>
+            </div>
+            <label>Message</label>
+            <textarea
+              class="form-control"
+              rows="4"
+              placeholder="Tell us your thoughts and feelings..."
+            ></textarea>
+            <div class="row">
+              <div class="col-md-4 mr-auto ml-auto">
+                <button class="btn btn-danger btn-lg btn-fill">
+                  Send Message
+                </button>
+              </div>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  </div>

src/app/pages/keep-in-touch/keep-in-touch.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { KeepInTouchComponent } from './keep-in-touch.component';
+
+describe('KeepInTouchComponent', () => {
+  let component: KeepInTouchComponent;
+  let fixture: ComponentFixture<KeepInTouchComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ KeepInTouchComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(KeepInTouchComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/keep-in-touch/keep-in-touch.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-keep-in-touch',
+  templateUrl: './keep-in-touch.component.html',
+  styleUrls: ['./keep-in-touch.component.css']
+})
+export class KeepInTouchComponent implements OnInit {
+  focus = true;
+  focus1 = true;
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/pages/not-found/not-found.component.html

+<body class="bg-purple">
+  <div class="stars">
+    <div class="central-body">
+      <img
+        class="image-404"
+        src="http://salehriaz.com/404Page/img/404.svg"
+        width="300px"
+      />
+      <a
+        class="nav-item nav-link-edit pointer"
+        [routerLink]="['']"
+        class="btn-go-home"
+        >GO BACK HOME</a
+      >
+    </div>
+    <div class="objects">
+      <img
+        class="object_rocket"
+        src="http://salehriaz.com/404Page/img/rocket.svg"
+        width="40px"
+      />
+      <div class="earth-moon">
+        <img
+          class="object_earth"
+          src="http://salehriaz.com/404Page/img/earth.svg"
+          width="100px"
+        />
+        <img
+          class="object_moon"
+          src="http://salehriaz.com/404Page/img/moon.svg"
+          width="80px"
+        />
+      </div>
+      <div class="box_astronaut">
+        <img
+          class="object_astronaut"
+          src="http://salehriaz.com/404Page/img/astronaut.svg"
+          width="140px"
+        />
+      </div>
+    </div>
+    <div class="glowing_stars">
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+    </div>
+  </div>
+</body>

src/app/pages/not-found/not-found.component.scss

+/*
+VIEW IN FULL SCREEN MODE
+FULL SCREEN MODE: http://salehriaz.com/404Page/404.html
+
+DRIBBBLE: https://dribbble.com/shots/4330167-404-Page-Lost-In-Space
+*/
+
+@import url('https://fonts.googleapis.com/css?family=Dosis:300,400,500');
+
+@-moz-keyframes rocket-movement { 100% {-moz-transform: translate(1200px,-600px);} }
+@-webkit-keyframes rocket-movement {100% {-webkit-transform: translate(1200px,-600px); } }
+@keyframes rocket-movement { 100% {transform: translate(1200px,-600px);} }
+@-moz-keyframes spin-earth { 100% { -moz-transform: rotate(-360deg); transition: transform 20s;  } }
+@-webkit-keyframes spin-earth { 100% { -webkit-transform: rotate(-360deg); transition: transform 20s;  } }
+@keyframes spin-earth{ 100% { -webkit-transform: rotate(-360deg); transform:rotate(-360deg); transition: transform 20s; } }
+
+@-moz-keyframes move-astronaut {
+    100% { -moz-transform: translate(-160px, -160px);}
+}
+@-webkit-keyframes move-astronaut {
+    100% { -webkit-transform: translate(-160px, -160px);}
+}
+@keyframes move-astronaut{
+    100% { -webkit-transform: translate(-160px, -160px); transform:translate(-160px, -160px); }
+}
+@-moz-keyframes rotate-astronaut {
+    100% { -moz-transform: rotate(-720deg);}
+}
+@-webkit-keyframes rotate-astronaut {
+    100% { -webkit-transform: rotate(-720deg);}
+}
+@keyframes rotate-astronaut{
+    100% { -webkit-transform: rotate(-720deg); transform:rotate(-720deg); }
+}
+
+@-moz-keyframes glow-star {
+    40% { -moz-opacity: 0.3;}
+    90%,100% { -moz-opacity: 1; -moz-transform: scale(1.2);}
+}
+@-webkit-keyframes glow-star {
+    40% { -webkit-opacity: 0.3;}
+    90%,100% { -webkit-opacity: 1; -webkit-transform: scale(1.2);}
+}
+@keyframes glow-star{
+    40% { -webkit-opacity: 0.3; opacity: 0.3;  }
+    90%,100% { -webkit-opacity: 1; opacity: 1; -webkit-transform: scale(1.2); transform: scale(1.2); border-radius: 999999px;}
+}
+
+.spin-earth-on-hover{
+
+    transition: ease 200s !important;
+    transform: rotate(-3600deg) !important;
+}
+
+html, body{
+    margin: 0;
+    width: 100%;
+    height: 100%;
+    font-family: 'Dosis', sans-serif;
+    font-weight: 300;
+    -webkit-user-select: none; /* Safari 3.1+ */
+    -moz-user-select: none; /* Firefox 2+ */
+    -ms-user-select: none; /* IE 10+ */
+    user-select: none; /* Standard syntax */
+}
+
+.bg-purple{
+    background: url(http://salehriaz.com/404Page/img/bg_purple.png);
+    background-repeat: repeat-x;
+    background-size: cover;
+    background-position: left top;
+    height: 100%;
+    overflow: hidden;
+
+}
+
+.custom-navbar{
+    padding-top: 15px;
+}
+
+.brand-logo{
+    margin-left: 25px;
+    margin-top: 5px;
+    display: inline-block;
+}
+
+.navbar-links{
+    display: inline-block;
+    float: right;
+    margin-right: 15px;
+    text-transform: uppercase;
+
+
+}
+
+ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+/*    overflow: hidden;*/
+    display: flex;
+    align-items: center;
+}
+
+li {
+    float: left;
+    padding: 0px 15px;
+}
+
+li a {
+    display: block;
+    color: white;
+    text-align: center;
+    text-decoration: none;
+    letter-spacing : 2px;
+    font-size: 12px;
+
+    -webkit-transition: all 0.3s ease-in;
+    -moz-transition: all 0.3s ease-in;
+    -ms-transition: all 0.3s ease-in;
+    -o-transition: all 0.3s ease-in;
+    transition: all 0.3s ease-in;
+}
+
+li a:hover {
+    color: #ffcb39;
+}
+
+.btn-request{
+    padding: 10px 25px;
+    border: 1px solid #FFCB39;
+    border-radius: 100px;
+    font-weight: 400;
+}
+
+.btn-request:hover{
+    background-color: #FFCB39;
+    color: #fff;
+    transform: scale(1.05);
+    box-shadow: 0px 20px 20px rgba(0,0,0,0.1);
+}
+
+.btn-go-home{
+    position: relative;
+    z-index: 200;
+    margin: 15px auto;
+    width: 100px;
+    padding: 10px 15px;
+    border: 1px solid #FFCB39;
+    border-radius: 100px;
+    font-weight: 400;
+    display: block;
+    color: white;
+    text-align: center;
+    text-decoration: none;
+    letter-spacing : 2px;
+    font-size: 11px;
+
+    -webkit-transition: all 0.3s ease-in;
+    -moz-transition: all 0.3s ease-in;
+    -ms-transition: all 0.3s ease-in;
+    -o-transition: all 0.3s ease-in;
+    transition: all 0.3s ease-in;
+}
+
+.btn-go-home:hover{
+    background-color: #FFCB39;
+    color: #fff;
+    transform: scale(1.05);
+    box-shadow: 0px 20px 20px rgba(0,0,0,0.1);
+}
+
+.central-body{
+/*    width: 100%;*/
+    padding: 17% 5% 10% 5%;
+    text-align: center;
+}
+
+.objects img{
+    z-index: 90;
+    pointer-events: none;
+}
+
+.object_rocket{
+    z-index: 95;
+    position: absolute;
+    transform: translateX(-50px);
+    top: 75%;
+    pointer-events: none;
+    animation: rocket-movement 200s linear infinite both running;
+}
+
+.object_earth{
+    position: absolute;
+    top: 20%;
+    left: 15%;
+    z-index: 90;
+/*    animation: spin-earth 100s infinite linear both;*/
+}
+
+.object_moon{
+    position: absolute;
+    top: 12%;
+    left: 25%;
+/*
+    transform: rotate(0deg);
+    transition: transform ease-in 99999999999s;
+*/
+}
+
+.earth-moon{
+
+}
+
+.object_astronaut{
+    animation: rotate-astronaut 200s infinite linear both alternate;
+}
+
+.box_astronaut{
+    z-index: 110 !important;
+    position: absolute;
+    top: 60%;
+    right: 20%;
+    will-change: transform;
+    animation: move-astronaut 50s infinite linear both alternate;
+}
+
+.image-404{
+    position: relative;
+    z-index: 100;
+    pointer-events: none;
+}
+
+.stars{
+    background: url(http://salehriaz.com/404Page/img/overlay_stars.svg);
+    background-repeat: repeat;
+    background-size: contain;
+    background-position: left top;
+}
+
+.glowing_stars .star{
+    position: absolute;
+    border-radius: 100%;
+    background-color: #fff;
+    width: 3px;
+    height: 3px;
+    opacity: 0.3;
+    will-change: opacity;
+}
+
+.glowing_stars .star:nth-child(1){
+    top: 80%;
+    left: 25%;
+    animation: glow-star 2s infinite ease-in-out alternate 1s;
+}
+.glowing_stars .star:nth-child(2){
+    top: 20%;
+    left: 40%;
+    animation: glow-star 2s infinite ease-in-out alternate 3s;
+}
+.glowing_stars .star:nth-child(3){
+    top: 25%;
+    left: 25%;
+    animation: glow-star 2s infinite ease-in-out alternate 5s;
+}
+.glowing_stars .star:nth-child(4){
+    top: 75%;
+    left: 80%;
+    animation: glow-star 2s infinite ease-in-out alternate 7s;
+}
+.glowing_stars .star:nth-child(5){
+    top: 90%;
+    left: 50%;
+    animation: glow-star 2s infinite ease-in-out alternate 9s;
+}
+
+@media only screen and (max-width: 600px){
+    .navbar-links{
+        display: none;
+    }
+
+    .custom-navbar{
+        text-align: center;
+    }
+
+    .brand-logo img{
+        width: 120px;
+    }
+
+    .box_astronaut{
+        top: 70%;
+    }
+
+    .central-body{
+        padding-top: 25%;
+    }
+}

src/app/pages/not-found/not-found.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NotFoundComponent } from './not-found.component';
+
+describe('NotFoundComponent', () => {
+  let component: NotFoundComponent;
+  let fixture: ComponentFixture<NotFoundComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NotFoundComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NotFoundComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/not-found/not-found.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-not-found',
+  templateUrl: './not-found.component.html',
+  styleUrls: ['./not-found.component.scss']
+})
+export class NotFoundComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/pages/project-dashboard/project-dashboard.component.html

+<div class="wrapper">
+  <app-project-header></app-project-header>
+  <div class="main">
+    <div class="section section-dark">
+      <div class="container">
+        <div class="row">
+          <div class="col-sm-4 offset-md-4">
+            <div class="info text-center">
+              <div class="icon icon-danger">
+                <i class="fab"></i>
+              </div>
+              <div class="description">
+                <h4 class="info-title">Web Projects</h4>
+                <p class="description">
+                  mainly created with Angular 2+
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="section section-gray">
+      <div class="container">
+        <div class="row">
+          <div class="col-md-6">
+            <div class="card">
+              <img
+                class="card-img-top"
+                src="/assets/img/ziermach-blog.jpg"
+                alt="Card image cap"
+              />
+              <div class="card-body">
+                <h4 class="card-title">This Blog</h4>
+                <p class="card-text">
+                  This Blog was made with angular 2+ and bootstrap. with help of
+                  the template
+                  <a
+                    href="https://www.creative-tim.com/product/paper-kit-2-angular"
+                    >paper-kit-2-angular</a
+                  >
+                </p>
+              </div>
+            </div>
+          </div>
+          <div class="col-md-6">
+            <div class="card">
+              <img
+                class="card-img-top"
+                src="/assets/img/pub-quiz-club.png"
+                alt="Card image cap"
+              />
+              <div class="card-body">
+                <h4 class="card-title">Pub Quiz Club (WIP)</h4>
+                <p class="card-text">
+                  I made an Only Quiz App for Pubs. It's created with Angular 2+
+                  and
+                  <a href="https://material.angular.io/">Angular-Material</a>
+                </p>
+                <a href="https://pub-quiz.club" class="btn btn-primary"
+                  >Checkout</a
+                >
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="section section-dark">
+      <div class="container">
+        <div class="row">
+          <div class="col-sm-6">
+            <div class="info text-center">
+              <div class="icon icon-danger">
+                <i class="fab fa-github"></i>
+              </div>
+              <div class="description">
+                <h4 class="info-title">
+                  <a class="btn" href="https://github.com/JackWolfskind">My Github Site</a>
+                </h4>
+              </div>
+            </div>
+          </div>
+          <div class="col-sm-6">
+            <div class="info text-center">
+              <div class="icon icon-danger">
+                <i class="fab fa-npm"></i>
+              </div>
+              <div class="description">
+                <h4 class="info-title">
+                  <a class="btn" href="https://www.npmjs.com/~cziermann">My NPM Site</a>
+                </h4>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/pages/project-dashboard/project-dashboard.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProjectDashboardComponent } from './project-dashboard.component';
+
+describe('ProjectDashboardComponent', () => {
+  let component: ProjectDashboardComponent;
+  let fixture: ComponentFixture<ProjectDashboardComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ProjectDashboardComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ProjectDashboardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/project-dashboard/project-dashboard.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-project-dashboard',
+  templateUrl: './project-dashboard.component.html',
+  styleUrls: ['./project-dashboard.component.css']
+})
+export class ProjectDashboardComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/pages/resume/resume.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ResumeComponent } from './resume.component';
+
+describe('ResumeComponent', () => {
+  let component: ResumeComponent;
+  let fixture: ComponentFixture<ResumeComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ResumeComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ResumeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/resume/resume.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-resume',
+  templateUrl: './resume.component.html',
+  styleUrls: ['./resume.component.css']
+})
+export class ResumeComponent implements OnInit {
+  displayedPersonalColumns = [
+    'name',
+    'birthdate',
+    'location'
+  ];
+  personalData = {
+    name: 'Christian Ziermann',
+    birthdate: new Date('September 3, 1996'),
+    location: 'Aachner Straße 545 Cologne 50933',
+  }
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/shared/footer/footer.component.html

+<footer class="footer">
+  <div class="container">
+    <div class="row">
+      <nav class="footer-nav">
+        <ul>
+          <li><a href="/legal">Impressum</a></li>
+        </ul>
+      </nav>
+      <div class="credits ml-auto">
+        <span class="copyright">
+          made with <i class="fa fa-heart heart"></i> by cziermann with help of
+          <a href="https://www.creative-tim.com/product/paper-kit-2-angular"
+            >paper-kit-2</a
+          >
+          for angular
+        </span>
+      </div>
+    </div>
+  </div>
+</footer>

src/app/shared/footer/footer.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FooterComponent } from './footer.component';
+
+describe('FooterComponent', () => {
+  let component: FooterComponent;
+  let fixture: ComponentFixture<FooterComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FooterComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FooterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared/footer/footer.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+    selector: 'app-footer',
+    templateUrl: './footer.component.html',
+    styleUrls: ['./footer.component.scss']
+})
+export class FooterComponent implements OnInit {
+    test : Date = new Date();
+
+    constructor() { }
+
+    ngOnInit() {}
+}

src/app/shared/impressum/impressum.component.html

+<div class="wrapper">
+  <div class="main">
+    <div class="section section-gray text-center">
+      <div class="">
+        <div class="">
+
+          <h3>Angaben gem&auml;&szlig; &sect; 5 TMG</h3>
+          <p>
+            Christian Ziermann<br />
+            Aachner Stra&szlig;e 545<br />
+            50933 K&ouml;ln
+          </p>
+
+          <h2>Kontakt</h2>
+          <p>
+            E-Mail: cziermann@mailbox.org
+          </p>
+
+          <h3>Haftung f&uuml;r Inhalte</h3>
+          <p>
+            Als Diensteanbieter sind wir gem&auml;&szlig; &sect; 7 Abs.1 TMG
+            f&uuml;r eigene Inhalte auf diesen Seiten nach den allgemeinen
+            Gesetzen verantwortlich. Nach &sect;&sect; 8 bis 10 TMG sind wir als
+            Diensteanbieter jedoch nicht verpflichtet, &uuml;bermittelte oder
+            gespeicherte fremde Informationen zu &uuml;berwachen oder nach
+            Umst&auml;nden zu forschen, die auf eine rechtswidrige
+            T&auml;tigkeit hinweisen.
+          </p>
+          <p>
+            Verpflichtungen zur Entfernung oder Sperrung der Nutzung von
+            Informationen nach den allgemeinen Gesetzen bleiben hiervon
+            unber&uuml;hrt. Eine diesbez&uuml;gliche Haftung ist jedoch erst ab
+            dem Zeitpunkt der Kenntnis einer konkreten Rechtsverletzung
+            m&ouml;glich. Bei Bekanntwerden von entsprechenden
+            Rechtsverletzungen werden wir diese Inhalte umgehend entfernen.
+          </p>
+          <h3>Haftung f&uuml;r Links</h3>
+          <p>
+            Unser Angebot enth&auml;lt Links zu externen Websites Dritter, auf
+            deren Inhalte wir keinen Einfluss haben. Deshalb k&ouml;nnen wir
+            f&uuml;r diese fremden Inhalte auch keine Gew&auml;hr
+            &uuml;bernehmen. F&uuml;r die Inhalte der verlinkten Seiten ist
+            stets der jeweilige Anbieter oder Betreiber der Seiten
+            verantwortlich. Die verlinkten Seiten wurden zum Zeitpunkt der
+            Verlinkung auf m&ouml;gliche Rechtsverst&ouml;&szlig;e
+            &uuml;berpr&uuml;ft. Rechtswidrige Inhalte waren zum Zeitpunkt der
+            Verlinkung nicht erkennbar.
+          </p>
+          <p>
+            Eine permanente inhaltliche Kontrolle der verlinkten Seiten ist
+            jedoch ohne konkrete Anhaltspunkte einer Rechtsverletzung nicht
+            zumutbar. Bei Bekanntwerden von Rechtsverletzungen werden wir
+            derartige Links umgehend entfernen.
+          </p>
+          <h3>Urheberrecht</h3>
+          <p>
+            Die durch die Seitenbetreiber erstellten Inhalte und Werke auf
+            diesen Seiten unterliegen dem deutschen Urheberrecht. Die
+            Vervielf&auml;ltigung, Bearbeitung, Verbreitung und jede Art der
+            Verwertung au&szlig;erhalb der Grenzen des Urheberrechtes
+            bed&uuml;rfen der schriftlichen Zustimmung des jeweiligen Autors
+            bzw. Erstellers. Downloads und Kopien dieser Seite sind nur f&uuml;r
+            den privaten, nicht kommerziellen Gebrauch gestattet.
+          </p>
+          <p>
+            Soweit die Inhalte auf dieser Seite nicht vom Betreiber erstellt
+            wurden, werden die Urheberrechte Dritter beachtet. Insbesondere
+            werden Inhalte Dritter als solche gekennzeichnet. Sollten Sie
+            trotzdem auf eine Urheberrechtsverletzung aufmerksam werden, bitten
+            wir um einen entsprechenden Hinweis. Bei Bekanntwerden von
+            Rechtsverletzungen werden wir derartige Inhalte umgehend entfernen.
+          </p>
+          <h3>Nutzung personenbezogener Daten</h3>
+          <h4>Erhobene Daten durch Google Anmeldung</h4>
+          <p>
+            Wenn der Nuter sich über den Google Service anmeldet, werden nur
+            Vor-/Nachname und Technische Daten zu zurordnung gespeichert. Es
+            können und werden keinerlei Passwörter gespeichert.
+          </p>
+          <h4>Weiteres</h4>
+          <p>
+            Desweitern werden nur Daten gespeichert und genutzt die für die
+            Funktionalitäten der Seite erforderlich sind.
+          </p>
+
+          <p>Quelle: <a href="https://www.e-recht24.de">eRecht24</a></p>
+        </div>
+      </div>
+    </div>
+
+    <div class="section section-gray text-center">
+      <div class="">
+        <div class="">
+          <h2>1. Datenschutz auf einen Blick</h2>
+          <h3>Allgemeine Hinweise</h3>
+          <p>
+            Die folgenden Hinweise geben einen einfachen &Uuml;berblick
+            dar&uuml;ber, was mit Ihren personenbezogenen Daten passiert, wenn
+            Sie diese Website besuchen. Personenbezogene Daten sind alle Daten,
+            mit denen Sie pers&ouml;nlich identifiziert werden k&ouml;nnen.
+            Ausf&uuml;hrliche Informationen zum Thema Datenschutz entnehmen Sie
+            unserer unter diesem Text aufgef&uuml;hrten
+            Datenschutzerkl&auml;rung.
+          </p>
+          <h3>Datenerfassung auf dieser Website</h3>
+          <p>
+            <strong
+              >Wer ist verantwortlich f&uuml;r die Datenerfassung auf dieser
+              Website?</strong
+            >
+          </p>
+          <p>
+            Die Datenverarbeitung auf dieser Website erfolgt durch den
+            Websitebetreiber. Dessen Kontaktdaten k&ouml;nnen Sie dem Impressum
+            dieser Website entnehmen.
+          </p>
+          <p><strong>Wie erfassen wir Ihre Daten?</strong></p>
+          <p>
+            Ihre Daten werden zum einen dadurch erhoben, dass Sie uns diese
+            mitteilen. Hierbei kann es sich z.&nbsp;B. um Daten handeln, die Sie
+            in ein Kontaktformular eingeben.
+          </p>
+          <p>
+            Andere Daten werden automatisch oder nach Ihrer Einwilligung beim
+            Besuch der Website durch unsere IT-Systeme erfasst. Das sind vor
+            allem technische Daten (z.&nbsp;B. Internetbrowser, Betriebssystem
+            oder Uhrzeit des Seitenaufrufs). Die Erfassung dieser Daten erfolgt
+            automatisch, sobald Sie diese Website betreten.
+          </p>
+          <p><strong>Wof&uuml;r nutzen wir Ihre Daten?</strong></p>
+          <p>
+            Ein Teil der Daten wird erhoben, um eine fehlerfreie Bereitstellung
+            der Website zu gew&auml;hrleisten. Andere Daten k&ouml;nnen zur
+            Analyse Ihres Nutzerverhaltens verwendet werden.
+          </p>
+          <p>
+            <strong>Welche Rechte haben Sie bez&uuml;glich Ihrer Daten?</strong>
+          </p>
+          <p>
+            Sie haben jederzeit das Recht, unentgeltlich Auskunft &uuml;ber
+            Herkunft, Empf&auml;nger und Zweck Ihrer gespeicherten
+            personenbezogenen Daten zu erhalten. Sie haben au&szlig;erdem ein
+            Recht, die Berichtigung oder L&ouml;schung dieser Daten zu
+            verlangen. Wenn Sie eine Einwilligung zur Datenverarbeitung erteilt
+            haben, k&ouml;nnen Sie diese Einwilligung jederzeit f&uuml;r die
+            Zukunft widerrufen. Au&szlig;erdem haben Sie das Recht, unter
+            bestimmten Umst&auml;nden die Einschr&auml;nkung der Verarbeitung
+            Ihrer personenbezogenen Daten zu verlangen. Des Weiteren steht Ihnen
+            ein Beschwerderecht bei der zust&auml;ndigen Aufsichtsbeh&ouml;rde
+            zu.
+          </p>
+          <p>
+            Hierzu sowie zu weiteren Fragen zum Thema Datenschutz k&ouml;nnen
+            Sie sich jederzeit unter der im Impressum angegebenen Adresse an uns
+            wenden.
+          </p>
+          <h2>2. Hosting und Content Delivery Networks (CDN)</h2>
+          <h3>Externes Hosting</h3>
+          <p>
+            Diese Website wird bei einem externen Dienstleister gehostet
+            (Hoster). Die personenbezogenen Daten, die auf dieser Website
+            erfasst werden, werden auf den Servern des Hosters gespeichert.
+            Hierbei kann es sich v. a. um IP-Adressen, Kontaktanfragen, Meta-
+            und Kommunikationsdaten, Vertragsdaten, Kontaktdaten, Namen,
+            Webseitenzugriffe und sonstige Daten, die &uuml;ber eine Website
+            generiert werden, handeln.
+          </p>
+          <p>
+            Der Einsatz des Hosters erfolgt zum Zwecke der
+            Vertragserf&uuml;llung gegen&uuml;ber unseren potenziellen und
+            bestehenden Kunden (Art. 6 Abs. 1 lit. b DSGVO) und im Interesse
+            einer sicheren, schnellen und effizienten Bereitstellung unseres
+            Online-Angebots durch einen professionellen Anbieter (Art. 6 Abs. 1
+            lit. f DSGVO).
+          </p>
+          <p>
+            Unser Hoster wird Ihre Daten nur insoweit verarbeiten, wie dies zur
+            Erf&uuml;llung seiner Leistungspflichten erforderlich ist und unsere
+            Weisungen in Bezug auf diese Daten befolgen.
+          </p>
+          <p>
+            <strong
+              >Abschluss eines Vertrages &uuml;ber Auftragsverarbeitung</strong
+            >
+          </p>
+          <p>
+            Um die datenschutzkonforme Verarbeitung zu gew&auml;hrleisten, haben
+            wir einen Vertrag &uuml;ber Auftragsverarbeitung mit unserem Hoster
+            geschlossen.
+          </p>
+          <h2>3. Allgemeine Hinweise und Pflichtinformationen</h2>
+          <h3>Datenschutz</h3>
+          <p>
+            Die Betreiber dieser Seiten nehmen den Schutz Ihrer
+            pers&ouml;nlichen Daten sehr ernst. Wir behandeln Ihre
+            personenbezogenen Daten vertraulich und entsprechend der
+            gesetzlichen Datenschutzvorschriften sowie dieser
+            Datenschutzerkl&auml;rung.
+          </p>
+          <p>
+            Wenn Sie diese Website benutzen, werden verschiedene
+            personenbezogene Daten erhoben. Personenbezogene Daten sind Daten,
+            mit denen Sie pers&ouml;nlich identifiziert werden k&ouml;nnen. Die
+            vorliegende Datenschutzerkl&auml;rung erl&auml;utert, welche Daten
+            wir erheben und wof&uuml;r wir sie nutzen. Sie erl&auml;utert auch,
+            wie und zu welchem Zweck das geschieht.
+          </p>
+          <p>
+            Wir weisen darauf hin, dass die Daten&uuml;bertragung im Internet
+            (z.&nbsp;B. bei der Kommunikation per E-Mail) Sicherheitsl&uuml;cken
+            aufweisen kann. Ein l&uuml;ckenloser Schutz der Daten vor dem
+            Zugriff durch Dritte ist nicht m&ouml;glich.
+          </p>
+          <h3>Hinweis zur verantwortlichen Stelle</h3>
+          <p>
+            Die verantwortliche Stelle f&uuml;r die Datenverarbeitung auf dieser
+            Website ist:
+          </p>
+          <p>
+            Christian Ziermann<br />
+            Aachener Stra&szlig;e 545<br />
+            50944 K&ouml;ln
+          </p>
+
+          <p>
+            Telefon: 01742046742<br />
+            E-Mail: cziermann@mailbox.org
+          </p>
+          <p>
+            Verantwortliche Stelle ist die nat&uuml;rliche oder juristische
+            Person, die allein oder gemeinsam mit anderen &uuml;ber die Zwecke
+            und Mittel der Verarbeitung von personenbezogenen Daten (z.&nbsp;B.
+            Namen, E-Mail-Adressen o. &Auml;.) entscheidet.
+          </p>
+          <h3>Widerruf Ihrer Einwilligung zur Datenverarbeitung</h3>
+          <p>
+            Viele Datenverarbeitungsvorg&auml;nge sind nur mit Ihrer
+            ausdr&uuml;cklichen Einwilligung m&ouml;glich. Sie k&ouml;nnen eine
+            bereits erteilte Einwilligung jederzeit widerrufen. Dazu reicht eine
+            formlose Mitteilung per E-Mail an uns. Die Rechtm&auml;&szlig;igkeit
+            der bis zum Widerruf erfolgten Datenverarbeitung bleibt vom Widerruf
+            unber&uuml;hrt.
+          </p>
+          <h3>
+            Widerspruchsrecht gegen die Datenerhebung in besonderen F&auml;llen
+            sowie gegen Direktwerbung (Art. 21 DSGVO)
+          </h3>
+          <p>
+            WENN DIE DATENVERARBEITUNG AUF GRUNDLAGE VON ART. 6 ABS. 1 LIT. E
+            ODER F DSGVO ERFOLGT, HABEN SIE JEDERZEIT DAS RECHT, AUS
+            GR&Uuml;NDEN, DIE SICH AUS IHRER BESONDEREN SITUATION ERGEBEN, GEGEN
+            DIE VERARBEITUNG IHRER PERSONENBEZOGENEN DATEN WIDERSPRUCH
+            EINZULEGEN; DIES GILT AUCH F&Uuml;R EIN AUF DIESE BESTIMMUNGEN
+            GEST&Uuml;TZTES PROFILING. DIE JEWEILIGE RECHTSGRUNDLAGE, AUF DENEN
+            EINE VERARBEITUNG BERUHT, ENTNEHMEN SIE DIESER
+            DATENSCHUTZERKL&Auml;RUNG. WENN SIE WIDERSPRUCH EINLEGEN, WERDEN WIR
+            IHRE BETROFFENEN PERSONENBEZOGENEN DATEN NICHT MEHR VERARBEITEN, ES
+            SEI DENN, WIR K&Ouml;NNEN ZWINGENDE SCHUTZW&Uuml;RDIGE GR&Uuml;NDE
+            F&Uuml;R DIE VERARBEITUNG NACHWEISEN, DIE IHRE INTERESSEN, RECHTE
+            UND FREIHEITEN &Uuml;BERWIEGEN ODER DIE VERARBEITUNG DIENT DER
+            GELTENDMACHUNG, AUS&Uuml;BUNG ODER VERTEIDIGUNG VON
+            RECHTSANSPR&Uuml;CHEN (WIDERSPRUCH NACH ART. 21 ABS. 1 DSGVO).
+          </p>
+          <p>
+            WERDEN IHRE PERSONENBEZOGENEN DATEN VERARBEITET, UM DIREKTWERBUNG ZU
+            BETREIBEN, SO HABEN SIE DAS RECHT, JEDERZEIT WIDERSPRUCH GEGEN DIE
+            VERARBEITUNG SIE BETREFFENDER PERSONENBEZOGENER DATEN ZUM ZWECKE
+            DERARTIGER WERBUNG EINZULEGEN; DIES GILT AUCH F&Uuml;R DAS
+            PROFILING, SOWEIT ES MIT SOLCHER DIREKTWERBUNG IN VERBINDUNG STEHT.
+            WENN SIE WIDERSPRECHEN, WERDEN IHRE PERSONENBEZOGENEN DATEN
+            ANSCHLIESSEND NICHT MEHR ZUM ZWECKE DER DIREKTWERBUNG VERWENDET
+            (WIDERSPRUCH NACH ART. 21 ABS. 2 DSGVO).
+          </p>
+          <h3>
+            Beschwerderecht bei der zust&auml;ndigen Aufsichtsbeh&ouml;rde
+          </h3>
+          <p>
+            Im Falle von Verst&ouml;&szlig;en gegen die DSGVO steht den
+            Betroffenen ein Beschwerderecht bei einer Aufsichtsbeh&ouml;rde,
+            insbesondere in dem Mitgliedstaat ihres gew&ouml;hnlichen
+            Aufenthalts, ihres Arbeitsplatzes oder des Orts des
+            mutma&szlig;lichen Versto&szlig;es zu. Das Beschwerderecht besteht
+            unbeschadet anderweitiger verwaltungsrechtlicher oder gerichtlicher
+            Rechtsbehelfe.
+          </p>
+          <h3>Recht auf Daten&uuml;bertragbarkeit</h3>
+          <p>
+            Sie haben das Recht, Daten, die wir auf Grundlage Ihrer Einwilligung
+            oder in Erf&uuml;llung eines Vertrags automatisiert verarbeiten, an
+            sich oder an einen Dritten in einem g&auml;ngigen, maschinenlesbaren
+            Format aush&auml;ndigen zu lassen. Sofern Sie die direkte
+            &Uuml;bertragung der Daten an einen anderen Verantwortlichen
+            verlangen, erfolgt dies nur, soweit es technisch machbar ist.
+          </p>
+          <h3>SSL- bzw. TLS-Verschl&uuml;sselung</h3>
+          <p>
+            Diese Seite nutzt aus Sicherheitsgr&uuml;nden und zum Schutz der
+            &Uuml;bertragung vertraulicher Inhalte, wie zum Beispiel
+            Bestellungen oder Anfragen, die Sie an uns als Seitenbetreiber
+            senden, eine SSL- bzw. TLS-Verschl&uuml;sselung. Eine
+            verschl&uuml;sselte Verbindung erkennen Sie daran, dass die
+            Adresszeile des Browsers von &bdquo;http://&ldquo; auf
+            &bdquo;https://&ldquo; wechselt und an dem Schloss-Symbol in Ihrer
+            Browserzeile.
+          </p>
+          <p>
+            Wenn die SSL- bzw. TLS-Verschl&uuml;sselung aktiviert ist,
+            k&ouml;nnen die Daten, die Sie an uns &uuml;bermitteln, nicht von
+            Dritten mitgelesen werden.
+          </p>
+          <h3>Auskunft, L&ouml;schung und Berichtigung</h3>
+          <p>
+            Sie haben im Rahmen der geltenden gesetzlichen Bestimmungen
+            jederzeit das Recht auf unentgeltliche Auskunft &uuml;ber Ihre
+            gespeicherten personenbezogenen Daten, deren Herkunft und
+            Empf&auml;nger und den Zweck der Datenverarbeitung und ggf. ein
+            Recht auf Berichtigung oder L&ouml;schung dieser Daten. Hierzu sowie
+            zu weiteren Fragen zum Thema personenbezogene Daten k&ouml;nnen Sie
+            sich jederzeit unter der im Impressum angegebenen Adresse an uns
+            wenden.
+          </p>
+          <h3>Recht auf Einschr&auml;nkung der Verarbeitung</h3>
+          <p>
+            Sie haben das Recht, die Einschr&auml;nkung der Verarbeitung Ihrer
+            personenbezogenen Daten zu verlangen. Hierzu k&ouml;nnen Sie sich
+            jederzeit unter der im Impressum angegebenen Adresse an uns wenden.
+            Das Recht auf Einschr&auml;nkung der Verarbeitung besteht in
+            folgenden F&auml;llen:
+          </p>
+          <ul>
+            <li>
+              Wenn Sie die Richtigkeit Ihrer bei uns gespeicherten
+              personenbezogenen Daten bestreiten, ben&ouml;tigen wir in der
+              Regel Zeit, um dies zu &uuml;berpr&uuml;fen. F&uuml;r die Dauer
+              der Pr&uuml;fung haben Sie das Recht, die Einschr&auml;nkung der
+              Verarbeitung Ihrer personenbezogenen Daten zu verlangen.
+            </li>
+            <li>
+              Wenn die Verarbeitung Ihrer personenbezogenen Daten
+              unrechtm&auml;&szlig;ig geschah/geschieht, k&ouml;nnen Sie statt
+              der L&ouml;schung die Einschr&auml;nkung der Datenverarbeitung
+              verlangen.
+            </li>
+            <li>
+              Wenn wir Ihre personenbezogenen Daten nicht mehr ben&ouml;tigen,
+              Sie sie jedoch zur Aus&uuml;bung, Verteidigung oder Geltendmachung
+              von Rechtsanspr&uuml;chen ben&ouml;tigen, haben Sie das Recht,
+              statt der L&ouml;schung die Einschr&auml;nkung der Verarbeitung
+              Ihrer personenbezogenen Daten zu verlangen.
+            </li>
+            <li>
+              Wenn Sie einen Widerspruch nach Art. 21 Abs. 1 DSGVO eingelegt
+              haben, muss eine Abw&auml;gung zwischen Ihren und unseren
+              Interessen vorgenommen werden. Solange noch nicht feststeht,
+              wessen Interessen &uuml;berwiegen, haben Sie das Recht, die
+              Einschr&auml;nkung der Verarbeitung Ihrer personenbezogenen Daten
+              zu verlangen.
+            </li>
+          </ul>
+          <p>
+            Wenn Sie die Verarbeitung Ihrer personenbezogenen Daten
+            eingeschr&auml;nkt haben, d&uuml;rfen diese Daten &ndash; von ihrer
+            Speicherung abgesehen &ndash; nur mit Ihrer Einwilligung oder zur
+            Geltendmachung, Aus&uuml;bung oder Verteidigung von
+            Rechtsanspr&uuml;chen oder zum Schutz der Rechte einer anderen
+            nat&uuml;rlichen oder juristischen Person oder aus Gr&uuml;nden
+            eines wichtigen &ouml;ffentlichen Interesses der Europ&auml;ischen
+            Union oder eines Mitgliedstaats verarbeitet werden.
+          </p>
+          <h2>4. Datenerfassung auf dieser Website</h2>
+          <h3>Cookies</h3>
+          <p>
+            Unsere Internetseiten verwenden so genannte &bdquo;Cookies&ldquo;.
+            Cookies sind kleine Textdateien und richten auf Ihrem Endger&auml;t
+            keinen Schaden an. Sie werden entweder vor&uuml;bergehend f&uuml;r
+            die Dauer einer Sitzung (Session-Cookies) oder dauerhaft (permanente
+            Cookies) auf Ihrem Endger&auml;t gespeichert. Session-Cookies werden
+            nach Ende Ihres Besuchs automatisch gel&ouml;scht. Permanente
+            Cookies bleiben auf Ihrem Endger&auml;t gespeichert, bis Sie diese
+            selbst l&ouml;schen&nbsp;oder eine automatische L&ouml;schung durch
+            Ihren Webbrowser erfolgt.
+          </p>
+          <p>
+            Teilweise k&ouml;nnen auch Cookies von Drittunternehmen auf Ihrem
+            Endger&auml;t gespeichert werden, wenn Sie unsere Seite betreten
+            (Third-Party-Cookies). Diese erm&ouml;glichen uns oder Ihnen die
+            Nutzung bestimmter Dienstleistungen des Drittunternehmens (z.B.
+            Cookies zur Abwicklung von Zahlungsdienstleistungen).
+          </p>
+          <p>
+            Cookies haben verschiedene Funktionen. Zahlreiche Cookies sind
+            technisch notwendig, da bestimmte Webseitenfunktionen ohne diese
+            nicht funktionieren w&uuml;rden (z.B. die Warenkorbfunktion oder die
+            Anzeige von Videos). Andere Cookies dienen dazu, das Nutzerverhalten
+            auszuwerten&nbsp;oder Werbung anzuzeigen.
+          </p>
+          <p>
+            Cookies, die zur Durchf&uuml;hrung des elektronischen
+            Kommunikationsvorgangs (notwendige Cookies) oder zur Bereitstellung
+            bestimmter, von Ihnen erw&uuml;nschter Funktionen (funktionale
+            Cookies, z. B. f&uuml;r die Warenkorbfunktion) oder zur Optimierung
+            der Webseite (z.B. Cookies zur Messung des Webpublikums)
+            erforderlich sind, werden auf Grundlage von Art. 6 Abs. 1 lit. f
+            DSGVO gespeichert, sofern keine andere Rechtsgrundlage angegeben
+            wird. Der Websitebetreiber hat ein berechtigtes Interesse an der
+            Speicherung von Cookies zur technisch fehlerfreien und optimierten
+            Bereitstellung seiner Dienste. Sofern eine Einwilligung zur
+            Speicherung von Cookies abgefragt wurde, erfolgt die Speicherung der
+            betreffenden Cookies ausschlie&szlig;lich auf Grundlage dieser
+            Einwilligung (Art. 6 Abs. 1 lit. a DSGVO); die Einwilligung ist
+            jederzeit widerrufbar.
+          </p>
+          <p>
+            Sie k&ouml;nnen Ihren Browser so einstellen, dass Sie &uuml;ber das
+            Setzen von Cookies informiert werden und Cookies nur im Einzelfall
+            erlauben, die Annahme von Cookies f&uuml;r bestimmte F&auml;lle oder
+            generell ausschlie&szlig;en sowie das automatische L&ouml;schen der
+            Cookies beim Schlie&szlig;en des Browsers aktivieren. Bei der
+            Deaktivierung von Cookies kann die Funktionalit&auml;t dieser
+            Website eingeschr&auml;nkt sein.
+          </p>
+          <p>
+            Soweit Cookies von Drittunternehmen oder zu Analysezwecken
+            eingesetzt werden, werden wir Sie hier&uuml;ber im Rahmen dieser
+            Datenschutzerkl&auml;rung gesondert informieren und ggf. eine
+            Einwilligung abfragen.
+          </p>
+          <h3>Server-Log-Dateien</h3>
+          <p>
+            Der Provider der Seiten erhebt und speichert automatisch
+            Informationen in so genannten Server-Log-Dateien, die Ihr Browser
+            automatisch an uns &uuml;bermittelt. Dies sind:
+          </p>
+          <ul>
+            <li>Browsertyp und Browserversion</li>
+            <li>verwendetes Betriebssystem</li>
+            <li>Referrer URL</li>
+            <li>Hostname des zugreifenden Rechners</li>
+            <li>Uhrzeit der Serveranfrage</li>
+            <li>IP-Adresse</li>
+          </ul>
+          <p>
+            Eine Zusammenf&uuml;hrung dieser Daten mit anderen Datenquellen wird
+            nicht vorgenommen.
+          </p>
+          <p>
+            Die Erfassung dieser Daten erfolgt auf Grundlage von Art. 6 Abs. 1
+            lit. f DSGVO. Der Websitebetreiber hat ein berechtigtes Interesse an
+            der technisch fehlerfreien Darstellung und der Optimierung seiner
+            Website &ndash; hierzu m&uuml;ssen die Server-Log-Files erfasst
+            werden.
+          </p>
+          <h3>Kontaktformular</h3>
+          <p>
+            Wenn Sie uns per Kontaktformular Anfragen zukommen lassen, werden
+            Ihre Angaben aus dem Anfrageformular inklusive der von Ihnen dort
+            angegebenen Kontaktdaten zwecks Bearbeitung der Anfrage und f&uuml;r
+            den Fall von Anschlussfragen bei uns gespeichert. Diese Daten geben
+            wir nicht ohne Ihre Einwilligung weiter.
+          </p>
+          <p>
+            Die Verarbeitung dieser Daten erfolgt auf Grundlage von Art. 6 Abs.
+            1 lit. b DSGVO, sofern Ihre Anfrage mit der Erf&uuml;llung eines
+            Vertrags zusammenh&auml;ngt oder zur Durchf&uuml;hrung
+            vorvertraglicher Ma&szlig;nahmen erforderlich ist. In allen
+            &uuml;brigen F&auml;llen beruht die Verarbeitung auf unserem
+            berechtigten Interesse an der effektiven Bearbeitung der an uns
+            gerichteten Anfragen (Art. 6 Abs. 1 lit. f DSGVO) oder auf Ihrer
+            Einwilligung (Art. 6 Abs. 1 lit. a DSGVO) sofern diese abgefragt
+            wurde.
+          </p>
+          <p>
+            Die von Ihnen im Kontaktformular eingegebenen Daten verbleiben bei
+            uns, bis Sie uns zur L&ouml;schung auffordern, Ihre Einwilligung zur
+            Speicherung widerrufen oder der Zweck f&uuml;r die Datenspeicherung
+            entf&auml;llt (z.&nbsp;B. nach abgeschlossener Bearbeitung Ihrer
+            Anfrage). Zwingende gesetzliche Bestimmungen &ndash; insbesondere
+            Aufbewahrungsfristen &ndash; bleiben unber&uuml;hrt.
+          </p>
+          <h2>5. Plugins und Tools</h2>
+          <h3>Google Web Fonts</h3>
+          <p>
+            Diese Seite nutzt zur einheitlichen Darstellung von Schriftarten so
+            genannte Web Fonts, die von Google bereitgestellt werden. Beim
+            Aufruf einer Seite l&auml;dt Ihr Browser die ben&ouml;tigten Web
+            Fonts in ihren Browsercache, um Texte und Schriftarten korrekt
+            anzuzeigen.
+          </p>
+          <p>
+            Zu diesem Zweck muss der von Ihnen verwendete Browser Verbindung zu
+            den Servern von Google aufnehmen. Hierdurch erlangt Google Kenntnis
+            dar&uuml;ber, dass &uuml;ber Ihre IP-Adresse diese Website
+            aufgerufen wurde. Die Nutzung von Google WebFonts erfolgt auf
+            Grundlage von Art. 6 Abs. 1 lit. f DSGVO. Der Webseitenbetreiber hat
+            ein berechtigtes Interesse an der einheitlichen Darstellung des
+            Schriftbildes auf seiner Webseite. Sofern eine entsprechende
+            Einwilligung abgefragt wurde (z. B. eine Einwilligung zur
+            Speicherung von Cookies), erfolgt die Verarbeitung
+            ausschlie&szlig;lich auf Grundlage von Art. 6 Abs. 1 lit. a DSGVO;
+            die Einwilligung ist jederzeit widerrufbar.
+          </p>
+          <p>
+            Wenn Ihr Browser Web Fonts nicht unterst&uuml;tzt, wird eine
+            Standardschrift von Ihrem Computer genutzt.
+          </p>
+          <p>
+            Weitere Informationen zu Google Web Fonts finden Sie unter
+            <a
+              href="https://developers.google.com/fonts/faq"
+              target="_blank"
+              rel="noopener noreferrer"
+              >https://developers.google.com/fonts/faq</a
+            >
+            und in der Datenschutzerkl&auml;rung von Google:
+            <a
+              href="https://policies.google.com/privacy?hl=de"
+              target="_blank"
+              rel="noopener noreferrer"
+              >https://policies.google.com/privacy?hl=de</a
+            >.
+          </p>
+          <p>
+            Quelle:
+            <a href="https://www.e-recht24.de/muster-datenschutzerklaerung.html"
+              >https://www.e-recht24.de/muster-datenschutzerklaerung.html</a
+            >
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/shared/impressum/impressum.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ImpressumComponent } from './impressum.component';
+
+describe('ImpressumComponent', () => {
+  let component: ImpressumComponent;
+  let fixture: ComponentFixture<ImpressumComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ImpressumComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ImpressumComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared/impressum/impressum.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-impressum',
+  templateUrl: './impressum.component.html',
+  styleUrls: ['./impressum.component.css']
+})
+export class ImpressumComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/shared/navbar/navbar.component.html

+<nav class="navbar navbar-expand-lg fixed-top navbar-transparent" color-on-scroll="500">
+    <div class="container">
+        <div class="navbar-translate">
+            <a class="navbar-brand" href="">ziermach³</a>
+            <button class="navbar-toggler navbar-burger" type="button" data-toggle="collapse" data-target="#navbarToggler" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation" (click)="sidebarToggle()">
+                <span class="navbar-toggler-bar"></span>
+                <span class="navbar-toggler-bar"></span>
+                <span class="navbar-toggler-bar"></span>
+            </button>
+        </div>
+        <div class="navbar-collapse" id="navbarToggler">
+            <ul class="navbar-nav ml-auto">
+                <li class="nav-item" *ngIf="!isDocumentation()">
+                    <a class="nav-link" rel="tooltip" title="Star on GitHub" data-placement="bottom" href="https://github.com/JackWolfskind" target="_blank">
+                        <i class="fab fa-github"></i>
+                        <p class="d-lg-none">GitHub</p>
+                    </a>
+                </li>
+                <li class="nav-item" *ngIf="!isDocumentation()">
+                    <a class="nav-link" rel="tooltip" title="my NPM Stuff" data-placement="bottom" href="https://www.npmjs.com/~cziermann" target="_blank">
+                        <i class="fab fa-npm"></i>
+                        <p class="d-lg-none">NPM</p>
+                    </a>
+                </li>
+                <li class="nav-item" *ngIf="!isDocumentation()">
+                    <a class="nav-link" rel="tooltip" title="My Xing" data-placement="bottom" href="https://www.xing.com/profile/Christian_Ziermann3" target="_blank">
+                        <i class="fab fa-xing"></i>
+                        <p class="d-lg-none">Xing</p>
+                    </a>
+                </li>
+            </ul>
+        </div>
+    </div>
+</nav>

src/app/shared/navbar/navbar.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NavbarComponent } from './navbar.component';
+
+describe('NavbarComponent', () => {
+  let component: NavbarComponent;
+  let fixture: ComponentFixture<NavbarComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NavbarComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NavbarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared/navbar/navbar.component.ts

+import { Component, OnInit, ElementRef } from '@angular/core';
+import { Location, LocationStrategy, PathLocationStrategy } from '@angular/common';
+
+@Component({
+    selector: 'app-navbar',
+    templateUrl: './navbar.component.html',
+    styleUrls: ['./navbar.component.scss']
+})
+export class NavbarComponent implements OnInit {
+    private toggleButton: any;
+    private sidebarVisible: boolean;
+
+    constructor(public location: Location, private element : ElementRef) {
+        this.sidebarVisible = false;
+    }
+
+    ngOnInit() {
+        const navbar: HTMLElement = this.element.nativeElement;
+        this.toggleButton = navbar.getElementsByClassName('navbar-toggler')[0];
+    }
+    sidebarOpen() {
+        const toggleButton = this.toggleButton;
+        const html = document.getElementsByTagName('html')[0];
+        // console.log(html);
+        // console.log(toggleButton, 'toggle');
+
+        setTimeout(function(){
+            toggleButton.classList.add('toggled');
+        }, 500);
+        html.classList.add('nav-open');
+
+        this.sidebarVisible = true;
+    };
+    sidebarClose() {
+        const html = document.getElementsByTagName('html')[0];
+        // console.log(html);
+        this.toggleButton.classList.remove('toggled');
+        this.sidebarVisible = false;
+        html.classList.remove('nav-open');
+    };
+    sidebarToggle() {
+        // const toggleButton = this.toggleButton;
+        // const body = document.getElementsByTagName('body')[0];
+        if (this.sidebarVisible === false) {
+            this.sidebarOpen();
+        } else {
+            this.sidebarClose();
+        }
+    };
+    isHome() {
+      var titlee = this.location.prepareExternalUrl(this.location.path());
+      if(titlee.charAt(0) === '#'){
+          titlee = titlee.slice( 1 );
+      }
+        if( titlee === '/home' ) {
+            return true;
+        }
+        else {
+            return false;
+        }
+    }
+    isDocumentation() {
+      var titlee = this.location.prepareExternalUrl(this.location.path());
+      if(titlee.charAt(0) === '#'){
+          titlee = titlee.slice( 1 );
+      }
+        if( titlee === '/documentation' ) {
+            return true;
+        }
+        else {
+            return false;
+        }
+    }
+}

src/assets/css/nucleo-icons.css

+/*--------------------------------
+
+nucleo-icons Web Font - built using nucleoapp.com
+License - nucleoapp.com/license/
+
+-------------------------------- */
+@font-face {
+  font-family: 'nucleo-icons';
+  src: url('../fonts/nucleo-icons.eot');
+  src: url('../fonts/nucleo-icons.eot') format('embedded-opentype'), url('../fonts/nucleo-icons.woff2') format('woff2'), url('../fonts/nucleo-icons.woff') format('woff'), url('../fonts/nucleo-icons.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+/*------------------------
+	base class definition
+-------------------------*/
+.nc-icon {
+  display: inline-block;
+  font: normal normal normal 14px/1 'nucleo-icons';
+  font-size: inherit;
+  speak: none;
+  text-transform: none;
+  /* Better Font Rendering */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+/*------------------------
+  change icon size
+-------------------------*/
+.nc-icon.lg {
+  font-size: 1.33333333em;
+  vertical-align: -16%;
+}
+.nc-icon.x2 {
+  font-size: 2em;
+}
+.nc-icon.x3 {
+  font-size: 3em;
+}
+/*----------------------------------
+  add a square/circle background
+-----------------------------------*/
+.nc-icon.square,
+.nc-icon.circle {
+  padding: 0.33333333em;
+  vertical-align: -16%;
+  background-color: #eee;
+}
+.nc-icon.circle {
+  border-radius: 50%;
+}
+/*------------------------
+  list icons
+-------------------------*/
+.nc-icon-ul {
+  padding-left: 0;
+  margin-left: 2.14285714em;
+  list-style-type: none;
+}
+.nc-icon-ul > li {
+  position: relative;
+}
+.nc-icon-ul > li > .nc-icon {
+  position: absolute;
+  left: -1.57142857em;
+  top: 0.14285714em;
+  text-align: center;
+}
+.nc-icon-ul > li > .nc-icon.lg {
+  top: 0;
+  left: -1.35714286em;
+}
+.nc-icon-ul > li > .nc-icon.circle,
+.nc-icon-ul > li > .nc-icon.square {
+  top: -0.19047619em;
+  left: -1.9047619em;
+}
+/*------------------------
+  spinning icons
+-------------------------*/
+.nc-icon.spin {
+  -webkit-animation: nc-icon-spin 2s infinite linear;
+  -moz-animation: nc-icon-spin 2s infinite linear;
+  animation: nc-icon-spin 2s infinite linear;
+}
+@-webkit-keyframes nc-icon-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+  }
+}
+@-moz-keyframes nc-icon-spin {
+  0% {
+    -moz-transform: rotate(0deg);
+  }
+  100% {
+    -moz-transform: rotate(360deg);
+  }
+}
+@keyframes nc-icon-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+/*------------------------
+  rotated/flipped icons
+-------------------------*/
+.nc-icon.rotate-90 {
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
+  -webkit-transform: rotate(90deg);
+  -moz-transform: rotate(90deg);
+  -ms-transform: rotate(90deg);
+  -o-transform: rotate(90deg);
+  transform: rotate(90deg);
+}
+.nc-icon.rotate-180 {
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
+  -webkit-transform: rotate(180deg);
+  -moz-transform: rotate(180deg);
+  -ms-transform: rotate(180deg);
+  -o-transform: rotate(180deg);
+  transform: rotate(180deg);
+}
+.nc-icon.rotate-270 {
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
+  -webkit-transform: rotate(270deg);
+  -moz-transform: rotate(270deg);
+  -ms-transform: rotate(270deg);
+  -o-transform: rotate(270deg);
+  transform: rotate(270deg);
+}
+.nc-icon.flip-y {
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);
+  -webkit-transform: scale(-1, 1);
+  -moz-transform: scale(-1, 1);
+  -ms-transform: scale(-1, 1);
+  -o-transform: scale(-1, 1);
+  transform: scale(-1, 1);
+}
+.nc-icon.flip-x {
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
+  -webkit-transform: scale(1, -1);
+  -moz-transform: scale(1, -1);
+  -ms-transform: scale(1, -1);
+  -o-transform: scale(1, -1);
+  transform: scale(1, -1);
+}
+/*------------------------
+	font icons
+-------------------------*/
+
+.nc-air-baloon::before {
+    content: "\ea01";
+}
+
+.nc-album-2::before {
+    content: "\ea02";
+}
+
+.nc-alert-circle-i::before {
+    content: "\ea04";
+}
+
+.nc-align-center::before {
+    content: "\ea03";
+}
+
+.nc-align-left-2::before {
+    content: "\ea05";
+}
+
+.nc-ambulance::before {
+    content: "\ea06";
+}
+
+.nc-app::before {
+    content: "\ea07";
+}
+
+.nc-atom::before {
+    content: "\ea08";
+}
+
+.nc-badge::before {
+    content: "\ea09";
+}
+
+.nc-bag-16::before {
+    content: "\ea0a";
+}
+
+.nc-bank::before {
+    content: "\ea0b";
+}
+
+.nc-basket::before {
+    content: "\ea0c";
+}
+
+.nc-bell-55::before {
+    content: "\ea0d";
+}
+
+.nc-bold::before {
+    content: "\ea0e";
+}
+
+.nc-book-bookmark::before {
+    content: "\ea0f";
+}
+
+.nc-bookmark-2::before {
+    content: "\ea10";
+}
+
+.nc-box-2::before {
+    content: "\ea11";
+}
+
+.nc-box::before {
+    content: "\ea12";
+}
+
+.nc-briefcase-24::before {
+    content: "\ea13";
+}
+
+.nc-bulb-63::before {
+    content: "\ea14";
+}
+
+.nc-bullet-list-67::before {
+    content: "\ea15";
+}
+
+.nc-bus-front-12::before {
+    content: "\ea16";
+}
+
+.nc-button-pause::before {
+    content: "\ea17";
+}
+
+.nc-button-play::before {
+    content: "\ea18";
+}
+
+.nc-button-power::before {
+    content: "\ea19";
+}
+
+.nc-calendar-60::before {
+    content: "\ea1a";
+}
+
+.nc-camera-compact::before {
+    content: "\ea1b";
+}
+
+.nc-caps-small::before {
+    content: "\ea1c";
+}
+
+.nc-cart-simple::before {
+    content: "\ea1d";
+}
+
+.nc-chart-bar-32::before {
+    content: "\ea1e";
+}
+
+.nc-chart-pie-36::before {
+    content: "\ea1f";
+}
+
+.nc-chat-33::before {
+    content: "\ea20";
+}
+
+.nc-check-2::before {
+    content: "\ea21";
+}
+
+.nc-circle-10::before {
+    content: "\ea22";
+}
+
+.nc-cloud-download-93::before {
+    content: "\ea23";
+}
+
+.nc-cloud-upload-94::before {
+    content: "\ea24";
+}
+
+.nc-compass-05::before {
+    content: "\ea25";
+}
+
+.nc-controller-modern::before {
+    content: "\ea26";
+}
+
+.nc-credit-card::before {
+    content: "\ea27";
+}
+
+.nc-delivery-fast::before {
+    content: "\ea28";
+}
+
+.nc-diamond::before {
+    content: "\ea29";
+}
+
+.nc-email-85::before {
+    content: "\ea2a";
+}
+
+.nc-favourite-28::before {
+    content: "\ea2b";
+}
+
+.nc-glasses-2::before {
+    content: "\ea2c";
+}
+
+.nc-globe-2::before {
+    content: "\ea2d";
+}
+
+.nc-globe::before {
+    content: "\ea2e";
+}
+
+.nc-hat-3::before {
+    content: "\ea2f";
+}
+
+.nc-headphones::before {
+    content: "\ea30";
+}
+
+.nc-html5::before {
+    content: "\ea31";
+}
+
+.nc-image::before {
+    content: "\ea32";
+}
+
+.nc-istanbul::before {
+    content: "\ea33";
+}
+
+.nc-key-25::before {
+    content: "\ea34";
+}
+
+.nc-laptop::before {
+    content: "\ea35";
+}
+
+.nc-layout-11::before {
+    content: "\ea36";
+}
+
+.nc-lock-circle-open::before {
+    content: "\ea37";
+}
+
+.nc-map-big::before {
+    content: "\ea38";
+}
+
+.nc-minimal-down::before {
+    content: "\ea39";
+}
+
+.nc-minimal-left::before {
+    content: "\ea3a";
+}
+
+.nc-minimal-right::before {
+    content: "\ea3b";
+}
+
+.nc-minimal-up::before {
+    content: "\ea3c";
+}
+
+.nc-mobile::before {
+    content: "\ea3d";
+}
+
+.nc-money-coins::before {
+    content: "\ea3e";
+}
+
+.nc-note-03::before {
+    content: "\ea3f";
+}
+
+.nc-palette::before {
+    content: "\ea40";
+}
+
+.nc-paper::before {
+    content: "\ea41";
+}
+
+.nc-pin-3::before {
+    content: "\ea42";
+}
+
+.nc-planet::before {
+    content: "\ea43";
+}
+
+.nc-refresh-69::before {
+    content: "\ea44";
+}
+
+.nc-ruler-pencil::before {
+    content: "\ea45";
+}
+
+.nc-satisfied::before {
+    content: "\ea46";
+}
+
+.nc-scissors::before {
+    content: "\ea47";
+}
+
+.nc-send::before {
+    content: "\ea48";
+}
+
+.nc-settings-gear-65::before {
+    content: "\ea49";
+}
+
+.nc-settings::before {
+    content: "\ea4a";
+}
+
+.nc-share-66::before {
+    content: "\ea4b";
+}
+
+.nc-shop::before {
+    content: "\ea4c";
+}
+
+.nc-simple-add::before {
+    content: "\ea4d";
+}
+
+.nc-simple-delete::before {
+    content: "\ea4e";
+}
+
+.nc-simple-remove::before {
+    content: "\ea4f";
+}
+
+.nc-single-02::before {
+    content: "\ea50";
+}
+
+.nc-single-copy-04::before {
+    content: "\ea51";
+}
+
+.nc-sound-wave::before {
+    content: "\ea52";
+}
+
+.nc-spaceship::before {
+    content: "\ea53";
+}
+
+.nc-sun-fog-29::before {
+    content: "\ea54";
+}
+
+.nc-support-17::before {
+    content: "\ea55";
+}
+
+.nc-tablet-2::before {
+    content: "\ea56";
+}
+
+.nc-tag-content::before {
+    content: "\ea57";
+}
+
+.nc-tap-01::before {
+    content: "\ea58";
+}
+
+.nc-tie-bow::before {
+    content: "\ea59";
+}
+
+.nc-tile-56::before {
+    content: "\ea5a";
+}
+
+.nc-time-alarm::before {
+    content: "\ea5b";
+}
+
+.nc-touch-id::before {
+    content: "\ea5c";
+}
+
+.nc-trophy::before {
+    content: "\ea5d";
+}
+
+.nc-tv-2::before {
+    content: "\ea5e";
+}
+
+.nc-umbrella-13::before {
+    content: "\ea5f";
+}
+
+.nc-user-run::before {
+    content: "\ea60";
+}
+
+.nc-vector::before {
+    content: "\ea61";
+}
+
+.nc-watch-time::before {
+    content: "\ea62";
+}
+
+.nc-world-2::before {
+    content: "\ea63";
+}
+
+.nc-zoom-split::before {
+    content: "\ea64";
+}
+
+
+/* all icon font classes list here */