rework resume page, add pdf

angular.json

               "extractCss": true,
               "namedChunks": false,
               "aot": true,
-              "extractLicenses": true,
+              "extractLicenses": false,
               "vendorChunk": false,
               "buildOptimizer": true,
               "fileReplacements": [{

package.json

     "@angular/router": "9.0.6",
     "@fortawesome/fontawesome-free": "^5.13.0",
     "@ng-bootstrap/ng-bootstrap": "6.0.0",
-    "bootstrap": "4.1.2",
+    "bootstrap": "^4.5.0",
     "core-js": "3.6.4",
-    "jquery": "3.2.1",
+    "html2canvas": "^1.0.0-rc.5",
+    "jquery": "^3.5.1",
+    "jspdf": "^1.5.3",
     "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",
+    "spotify-web-api-node": "^4.0.0",
     "zone.js": "0.10.2"
   },
   "devDependencies": {
     "@angular/compiler-cli": "9.0.6",
     "@angular/language-service": "9.0.6",
     "@types/jasmine": "3.5.9",
-    "@types/node": "13.9.1",
+    "@types/spotify-web-api-node": "^4.0.1",
     "codelyzer": "5.2.1",
     "jasmine-core": "3.5.0",
     "jasmine-spec-reporter": "4.2.1",

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';
         path: 'projects',
         component: ProjectDashboardComponent,
     },
-    {
-        path: 'about',
-        component: AboutComponent,
-    },
     {
         path: 'legal',
         component: ImpressumComponent,
     },
     {
         path: '',
-        redirectTo: 'about',
+        redirectTo: 'resume',
         pathMatch: 'full'
     },
     {

src/app/app.module.ts

 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';
+import { HobbyDashboardComponent } from './pages/hobby-dashboard/hobby-dashboard.component';
 
 
 @NgModule({
     SaltyPiranhaComponent,
     KeepInTouchComponent,
     ImpressumComponent,
+    HobbyDashboardComponent,
   ],
   imports: [
     BrowserModule,

src/app/components/components.module.ts

 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({
         JwBootstrapSwitchNg2Module,
     ],
     declarations: [
-        AboutComponent,
         NotificationComponent,
     ],
     entryComponents: [],
-    exports: [ AboutComponent, NotificationComponent]
+    exports: [ NotificationComponent]
 })
 export class ComponentsModule { }

src/app/helper/service-helper.ts

+
+export namespace ServiceHelper {
+    export class GenericHelper {
+        public static deepClone(obj: Object) {
+            return JSON.parse(JSON.stringify(obj));
+        }
+    }
+    export const SPOTIFY_STAUS_CODES = {
+        OK: 200,
+        CREATED: 201,
+        ACCEPTED: 202,
+        NO_CONTENT: 204,
+        NOT_MODIFIED: 304,
+        BAD_REQUEST: 400,
+        UNAUTHORIZED: 401,
+        FORBIDDEN: 403,
+        NOT_FOUND: 404,
+        TOO_MANY: 429,
+        INTERNAL: 500,
+        BAD_GATEWAY: 502,
+        SERVICE_UNAVAILABLE: 503,
+    }
+    export class PaginationOptions { limit: number; offset: number; total: number; current: number; };
+    export class OfssetHelper {
+        /**
+         * Exptract Offset from URL.
+         * 
+         * @param url url with offset GET Param
+         * @returns offset if found if not -1
+         */
+        public getNextOffsetFromUrl(url: string): number {
+            const extractOffsetRegex = /(?:offset=)(\d+)/;
+            const offset = extractOffsetRegex.exec(url);
+            if (offset[1]) {
+                return parseInt(offset[1]);
+            }
+            return -1
+
+        }
+        public getNextOffset(responseBody: PaginationOptions) {
+            const maxOffset = responseBody.total - responseBody.limit;
+            if (
+                responseBody.total <= responseBody.limit ||
+                responseBody.offset >= responseBody.limit ||
+                responseBody.offset >= maxOffset
+            ) {
+                return -1;
+            }
+            if (responseBody.offset < 0) {
+                throw new Error("offset can't be smaller than 0!");
+            }
+            // if limit + current offset not overflows maxOffset return
+            if ((responseBody.limit + responseBody.offset) <= maxOffset) {
+                return responseBody.limit + responseBody.offset;
+            }
+            // return the rest
+            return responseBody.limit % responseBody.total;
+        }
+    }
+}
+

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-small.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
+  class="page-header section-dark"
+  style="background-image: url('assets/img/dark-fog-forest-haze-small.jpg');"
+>
+  <div class="filter"></div>
+  <div class="container-left slide-in-right">
+    <div class="title-brand text-left">
+      <h1 class="presentation-title">Christian Ziermann</h1>
+      <h1>Web Developer</h1>
     </div>
-    <div class="moving-clouds" style="background-image: url('assets/img/clouds.png'); "></div>
-</div>
+  </div>
+  <div
+    class="moving-clouds"
+    style="background-image: url('assets/img/clouds.png');"
+  ></div>
+
+  <div
+  class="avatar-head"
+  style="background-image: url('assets/img/avatar-transparent.png');"
+></div>
+</div>

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

 import { GameHeaderComponent } from './game-header/game-header.component';
 import { ProjectHeaderComponent } from './project-header/project-header.component';
 import { ResumeHeaderComponent } from './resume-header/resume-header.component';
+import { RouterModule } from '@angular/router';
 
 
 
     ResumeHeaderComponent
   ],
   imports: [
-    CommonModule
+    CommonModule,
+    RouterModule
   ],
   exports: [
     DefaultPageHeaderComponent,

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="page-header section-dark page-header-small" style="background-image: url('assets/img/dark-fog-forest-haze-small.jpg')">
     <div class="filter"></div>
     <div class="content-center">
         <div class="container">
             <div class="title-brand">
                 <h1 class="presentation-title">About me</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/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/hobby-dashboard/hobby-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/hobby-dashboard/hobby-dashboard.component.spec.ts

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

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

+import { Component, OnInit } from '@angular/core';
+import { SpotifyService } from './spotify.service';
+
+@Component({
+  selector: 'app-hobby-dashboard',
+  templateUrl: './hobby-dashboard.component.html',
+  styleUrls: ['./hobby-dashboard.component.css']
+})
+export class HobbyDashboardComponent implements OnInit {
+
+  constructor(public spotifyService: SpotifyService) { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/pages/hobby-dashboard/spotify.service.spec.ts

+import { TestBed } from '@angular/core/testing';
+
+import { SpotifyService } from './spotify.service';
+
+describe('SpotifyService', () => {
+  let service: SpotifyService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(SpotifyService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/pages/hobby-dashboard/spotify.service.ts

+import { Injectable } from '@angular/core';
+import { ServiceHelper } from 'app/helper/service-helper';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SpotifyService {
+
+  // protected _playlists: Array<Object> = [];
+  // protected spotifyWebApi = require('spotify-web-api-node');
+  // constructor(
+  //   protected offsetHelper: ServiceHelper.OfssetHelper,
+  // ) { }
+  // public async setUserPlaylists(): Promise<Object[]> {
+  //   return new Promise<Object[]>(
+  //     (resolve, reject) => {
+  //       // get All Playlists of user
+
+  //       this.getAllUserPlaylists().then(
+  //         (playlists) => {
+  //           this.resolvePlaylists(playlists).then(resolvedPlaylists => {
+  //             this._playlists = resolvedPlaylists as Object[];
+  //             resolve(this._playlists);
+  //           });
+
+  //         },
+  //         (err) => {
+  //           reject(err);
+  //         });
+
+  //     });
+
+  // }
+
+
+  // public get playlists(): Array<Object> {
+  //   return this._playlists;
+  // }
+  // public getPlaylistById(playlistId: string): Object | null {
+  //   return this._playlists.find((playlist) => {
+  //     return playlist['id'] === playlistId;
+  //   });
+  // }
+
+  // protected enlistPlaylistInQueue(playlist: Object) {
+  //   console.debug(`Too many Requests save ${playlist} in Queue`);
+  //   // TODO enlist Playlist in DB
+  // }
+
+  // protected async getAllUserPlaylists(pagingObject?: Object): Promise<Array<Object>> {
+  //   return new Promise<Array<Object>>(async (resolve, reject) => {
+  //     let playlists = new Array<Object>();
+  //     this.spotifyWebApi.getUserPlaylists({ offset: !!pagingObject ? pagingObject['offset'] : 0 }).then(
+  //       async (paginatePlaylistsResponse) => {
+  //         if (!paginatePlaylistsResponse) {
+  //           reject(`Can't get Playlists of current user, response empty.`);
+  //         }
+  //         playlists = paginatePlaylistsResponse.body.items;
+  //         pagingObject = paginatePlaylistsResponse.body;
+  //         if (paginatePlaylistsResponse.body.next) {
+  //           const offset = this.offsetHelper.getNextOffsetFromUrl(paginatePlaylistsResponse.body.next);
+  //           if (offset === -1) {
+  //             resolve(playlists);
+  //           }
+  //           pagingObject['offset'] = offset;
+  //           this.getAllUserPlaylists(pagingObject).then((paginatePlaylists) => {
+  //             playlists = playlists.concat(paginatePlaylists);
+  //             resolve(playlists);
+  //           },
+  //             (err) => {
+  //               reject(err);
+  //             });
+  //           return;
+  //         }
+  //         resolve(playlists);
+  //       },
+  //       (err) => {
+  //         if (err.statusCode === ServiceHelper.SPOTIFY_STAUS_CODES.TOO_MANY) {
+  //           playlists.forEach(playlist => {
+  //             this.enlistPlaylistInQueue(playlist)
+  //           });
+  //           resolve();
+  //           return;
+  //         }
+  //         reject(`Can't get Playlists of current user ${err}`);
+  //       }
+  //     );
+  //   });
+  // }
+
+  // protected async resolvePlaylists(playlists: Array<Object>): Promise<Object> {
+  //   const getPlaylistTracksPromises = Array<Promise<Object>>();
+  //   for (const playlist of playlists) {
+  //     getPlaylistTracksPromises.push(
+  //       this.resolvePlaylist(playlist)
+  //     );
+  //   }
+  //   return Promise.all(getPlaylistTracksPromises);
+  // }
+
+  // protected resolvePlaylist(
+  //   playlist,
+  //   pagingObject?
+  // ): Promise<Object> {
+  //   return new Promise<Object>(async (resolve, reject) => {
+  //     this.spotifyWebApi.getPlaylistTracks(playlist.id, { offset: !!pagingObject ? pagingObject.offset : 0 }).then(
+  //       (tracksResponse) => {
+  //         const fullPlaylist = ServiceHelper.GenericHelper.deepClone(playlist);
+  //         if (!playlist) {
+  //           resolve(fullPlaylist);
+  //           return;
+  //         }
+  //         fullPlaylist.tracks = tracksResponse.body;
+  //         pagingObject = tracksResponse.body;
+  //         if (tracksResponse.body.next) {
+  //           const offset = this.offsetHelper.getNextOffsetFromUrl(tracksResponse.body.next);
+  //           if (offset === -1) {
+  //             resolve(fullPlaylist);
+  //             return;
+  //           }
+  //           pagingObject.offset = offset;
+  //           this.resolvePlaylist(fullPlaylist, pagingObject).then(
+  //             (fullTracksResponse) => {
+  //               if (fullTracksResponse) {
+  //                 fullPlaylist.tracks.items = fullPlaylist.tracks.items.concat(fullTracksResponse['tracks'].items);
+  //               }
+  //               resolve(fullPlaylist);
+  //             },
+  //             (err) => {
+  //               reject(err);
+  //             });
+  //           return;
+  //         }
+  //         resolve(fullPlaylist);
+  //       }, (err) => {
+  //         if (err.statusCode === ServiceHelper.SPOTIFY_STAUS_CODES.TOO_MANY) {
+  //           this.enlistPlaylistInQueue(playlist)
+  //           resolve();
+  //           return;
+  //         }
+  //         reject(`Can't get Playlist: ${playlist.name}. ${err}`);
+  //       })
+  //   });
+  // }
+
+
+}

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

   <div class="main">
     <div class="section section-dark">
       <div class="container">
-        <div class="row">
+        <div class="row text-center title">
           <div class="col-sm-4 offset-md-4">
-            <div class="info text-center">
+            <div class="info text-center logo">
               <i class="fas fa-globe"></i>
             </div>
             <div class="description">
             </div>
             <div class="description">
               <h4 class="info-title">
-                <a class="btn" href="https://github.com/JackWolfskind"
+                <a class="btn btn-link" href="https://github.com/JackWolfskind"
                   >My Github Site</a
                 >
               </h4>
             </div>
             <div class="description">
               <h4 class="info-title">
-                <a class="btn" href="https://www.npmjs.com/~cziermann"
+                <a class="btn btn-link" href="https://www.npmjs.com/~cziermann"
                   >My NPM Site</a
                 >
               </h4>

src/app/pages/resume/resume.component.scss

+.no-border {
+    border: none;
+}
+
+.skill-logo {
+    font-size: 30px;
+    min-height: 1em !important;
+    min-width: 0.875em !important;
+}
+
+.skill-logo > div > img {
+    background-color: white;
+}
+
+.skill {
+    padding-left: 2%;
+    padding-right: 2%;
+    padding-bottom: 2%;
+    padding-top: 2%;
+}
+
+
+table {
+    color: white;
+}
+
+.section-experience {
+    background-image: url("/assets/img/pexels-photo-370799.jpeg");
+}
+
+.section-soft-skills {
+    background-image: url("/assets/img/pexels-photo-1629236.jpeg");
+}
+
+.section-transparent {
+    border-bottom: 1px solid transparent;
+    box-shadow: none;
+    background: transparent !important;
+}
+
+
+
+html, .main {
+    background-image: url("/assets/img/pexels-photo-1252890.jpeg");
+    background-position: center center;
+    background-size: cover;
+    background-attachment: fixed;
+    margin-top: 0;
+}
+

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

 import { Component, OnInit } from '@angular/core';
+import * as jspdf from 'jspdf';
+import html2canvas from 'html2canvas';
 
+export type Star = 0 | 0.5 | 1 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 4.5 | 5;
+export const STAR_CLASS_MAP = {
+  0: 'far fa-star',
+  0.5: 'fas fa-star-half',
+  1: 'fas fa-star',
+}
+export const MAX_STARS = 5;
+export interface Skill {
+  name: string;
+  iconHtml: string;
+  starCount: Star;
+}
 @Component({
   selector: 'app-resume',
   templateUrl: './resume.component.html',
-  styleUrls: ['./resume.component.css']
+  styleUrls: ['./resume.component.scss']
 })
 export class ResumeComponent implements OnInit {
+
+  public focus = false;
+  public focus1 = false;
+
   displayedPersonalColumns = [
     'name',
     'birthdate',
     birthdate: new Date('September 3, 1996'),
     location: 'Aachner Straße 545 Cologne 50933',
   }
+  public softSkills: Skill[] = [
+    {
+      name: 'Teamwork',
+      iconHtml: '<i class="fas fa-users"></i>',
+      starCount: 4
+    },
+    {
+      name: 'Communication',
+      iconHtml: '<i class="fas fa-comments"></i>',
+      starCount: 4.5
+    },
+  ];
+
+  public likeToLearn: Skill[] = [
+    {
+      name: 'IoT',
+      iconHtml: 'fas fa-microchip',
+      starCount: 0
+    },
+    {
+      name: 'Deep Learning',
+      iconHtml: 'fas fa-cogs',
+      starCount: 0
+    },
+    {
+      name: 'Game Development',
+      iconHtml: 'fas fa-gamepad',
+      starCount: 2
+    },
+    {
+      name: 'Vuejs',
+      iconHtml: 'fab fa-vuejs',
+      starCount: 0
+    },
+  ];
+
+  public languages: Skill[] = [
+    {
+      name: 'German (native language)',
+      iconHtml: '<img height="30" src="/assets/icons/flags/german.png" alt="German">',
+      starCount: 5
+    },
+    {
+      name: 'English',
+      iconHtml: '<img height="30" src="/assets/icons/flags/english.png" alt="English">',
+      starCount: 3.5
+    },
+  ];
+
+  public skills: Skill[] = [
+    {
+      name: 'Unit-testing',
+      iconHtml: '<i class="fas fa-vial"></i>',
+      starCount: 3
+    },
+    {
+      name: 'Jira',
+      iconHtml: '<i class="fab fa-jira"></i> ',
+      starCount: 4
+    },
+    {
+      name: 'Apache',
+      iconHtml: '<img height="30" src="/assets/icons/apache.png" alt="Apache">',
+      starCount: 2.5
+    },
+    {
+      name: 'Nginx',
+      iconHtml: '<img height="30" src="/assets/icons/nginx.svg" alt="Nginx">',
+      starCount: 4.5
+    },
+    {
+      name: 'Jenkins',
+      iconHtml: '<i class="fab fa-jenkins"></i>',
+      starCount: 3
+    },
+    {
+      name: 'SQL',
+      iconHtml: '<i class="fas fa-database"></i>',
+      starCount: 3.5
+    },
+    {
+      name: 'Python',
+      iconHtml: '<i class="fab fa-python"></i>',
+      starCount: 2
+    },
+    {
+      name: 'PHP',
+      iconHtml: '<i class="fab fa-php"></i>',
+      starCount: 4
+    },
+    {
+      name: 'HTML & CSS',
+      iconHtml: '<i class="fab fa-html5"></i>',
+      starCount: 4.5
+    },
+    {
+      name: 'Angular 2+ & AngularJS',
+      iconHtml: '<i class="fab fa-angular"></i>',
+      starCount: 4.5
+    },
+
+    {
+      name: 'NestJs',
+      iconHtml: '<img height="30" src="/assets/icons/nestjs.svg" alt="NestJs">',
+      starCount: 4
+    },
+    {
+      name: 'Twig',
+      iconHtml: '<img height="30" src="/assets/icons/twig.png" alt="NestJs">',
+      starCount: 4.5
+    },
+    {
+      name: 'Electron',
+      iconHtml: '<i class="fas fa-atom"></i>',
+      starCount: 4
+    },
+    {
+      name: 'Typescript',
+      iconHtml: '<img height="30" color="white" class="skill-logo" src="/assets/icons/typescript.svg" alt="Typescript">',
+      starCount: 4
+    },
+    {
+      name: 'Ubuntu',
+      iconHtml: '<i class="fab fa-ubuntu"></i>',
+      starCount: 4
+    },
+    {
+      name: 'Docker',
+      iconHtml: '<i class="fab fa-docker"></i>',
+      starCount: 3
+    },
+    {
+      name: 'Kubernetes',
+      iconHtml: '<img height="30" src="/assets/icons/kubernetes.png" alt="Kubernetes">',
+      starCount: 2
+    },
+    {
+      name: 'Git',
+      iconHtml: '<i class="fab fa-git"></i>',
+      starCount: 4.5
+    },
+    {
+      name: 'NPM',
+      iconHtml: '<i class="fab fa-npm"></i>',
+      starCount: 5
+    },
+
+    {
+      name: 'Unity',
+      iconHtml: '<i class="fab fa-unity"></i>',
+      starCount: 2
+    },
+
+    {
+      name: 'Godot',
+      iconHtml: '<img height="30" src="/assets/icons/kubernetes.png" alt="Godot">',
+      starCount: 4.5
+    },
+    {
+      name: 'C#',
+      iconHtml: '<div height="30">C#</div>',
+      starCount: 4.5
+    },
+
+  ];
+  
   constructor() { }
 
   ngOnInit(): void {
   }
 
+  public captureScreen() {
+    debugger;
+    let data = document.getElementById('contentToConvert');
+    html2canvas(data).then(canvas => {
+      // Few necessary setting options  
+      let imgWidth = 208;
+      let pageHeight = 295;
+      let imgHeight = canvas.height * imgWidth / canvas.width;
+      let heightLeft = imgHeight;
+
+      const contentDataURL = canvas.toDataURL('image/png')
+      let pdf = new jspdf('p', 'mm', 'a4'); // A4 size page of PDF  
+      let position = 0;
+      pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight)
+      pdf.save('MYPdf.pdf'); // Generated PDF   
+    });
+  }
+
+  getStarClass(starCount: Star, starIndex: number) {
+    const starSizes: number[] = [];
+    let starCountWorker = starCount;
+    for (let starIterator = 1; starIterator <= MAX_STARS; starIterator++) {
+      if (starCountWorker >= 1) {
+        starCountWorker = (starCountWorker - 1) as Star;
+        starSizes.push(1);
+      } else {
+        if (starCountWorker === 0) {
+          starSizes.push(starCountWorker);
+          continue;
+        }
+        starSizes.push(starCountWorker);
+        starCountWorker = 0;
+      }
+    }
+    return STAR_CLASS_MAP[starSizes[starIndex]];
+  }
+
 }

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>
+<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" [routerLink]="['/resume']"
+          >Resume</span
+        >
+        <span class="navbar-toggler-bar" [routerLink]="['/games']">Games</span>
+        <span class="navbar-toggler-bar" [routerLink]="['/projects']"
+          >Projects</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>
+
+        <li class="nav-item" *ngIf="!isDocumentation()">
+          <a
+            class="nav-link"
+            rel="tooltip"
+            title="About Me"
+            data-placement="bottom"
+            [routerLink]="['/resume']"
+          >
+            <i class="fas fa-address-card"></i>
+            <p class="d-lg-none">About Me</p>
+          </a>
+        </li>
+
+        <li class="nav-item" *ngIf="!isDocumentation()">
+          <a
+            class="nav-link"
+            rel="tooltip"
+            title="Games"
+            data-placement="bottom"
+            [routerLink]="['/games']"
+          >
+            <i class="fas fa-gamepad"></i>
+            <p class="d-lg-none">Games</p>
+          </a>
+        </li>
+
+        <li class="nav-item" *ngIf="!isDocumentation()">
+          <a
+            class="nav-link"
+            rel="tooltip"
+            title="Projects"
+            data-placement="bottom"
+            [routerLink]="['/projects']"
+          >
+            <i class="fas fa-code"></i>
+            <p class="d-lg-none">Projects</p>
+          </a>
+        </li>
+      </ul>
+    </div>
+  </div>
 </nav>

src/assets/icons/godot_icon.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="1024"
+   height="1024"
+   id="svg3030"
+   version="1.1"
+   inkscape:version="0.92.1 r15371"
+   sodipodi:docname="icon.svg"
+   inkscape:export-filename="/home/akien/Projects/godot/godot.git/icon.png"
+   inkscape:export-xdpi="24"
+   inkscape:export-ydpi="24">
+  <defs
+     id="defs3032" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.35"
+     inkscape:cx="707.24666"
+     inkscape:cy="14.063809"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:window-width="1920"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata3035">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-98.519719)">
+    <g
+       id="g78"
+       transform="matrix(4.162611,0,0,-4.162611,919.24059,771.67186)"
+       style="stroke-width:0.32031175">
+      <path
+         d="m 0,0 c 0,0 -0.325,1.994 -0.515,1.976 l -36.182,-3.491 c -2.879,-0.278 -5.115,-2.574 -5.317,-5.459 l -0.994,-14.247 -27.992,-1.997 -1.904,12.912 c -0.424,2.872 -2.932,5.037 -5.835,5.037 h -38.188 c -2.902,0 -5.41,-2.165 -5.834,-5.037 l -1.905,-12.912 -27.992,1.997 -0.994,14.247 c -0.202,2.886 -2.438,5.182 -5.317,5.46 l -36.2,3.49 c -0.187,0.018 -0.324,-1.978 -0.511,-1.978 l -0.049,-7.83 30.658,-4.944 1.004,-14.374 c 0.203,-2.91 2.551,-5.263 5.463,-5.472 l 38.551,-2.75 c 0.146,-0.01 0.29,-0.016 0.434,-0.016 2.897,0 5.401,2.166 5.825,5.038 l 1.959,13.286 h 28.005 l 1.959,-13.286 c 0.423,-2.871 2.93,-5.037 5.831,-5.037 0.142,0 0.284,0.005 0.423,0.015 l 38.556,2.75 c 2.911,0.209 5.26,2.562 5.463,5.472 l 1.003,14.374 30.645,4.966 z"
+         style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.32031175"
+         id="path80"
+         inkscape:connector-curvature="0" />
+    </g>
+    <g
+       id="g82-3"
+       transform="matrix(4.162611,0,0,-4.162611,104.69892,525.90697)"
+       style="stroke-width:0.32031175">
+      <path
+         d="m 0,0 v -47.514 -6.035 -5.492 c 0.108,-0.001 0.216,-0.005 0.323,-0.015 l 36.196,-3.49 c 1.896,-0.183 3.382,-1.709 3.514,-3.609 l 1.116,-15.978 31.574,-2.253 2.175,14.747 c 0.282,1.912 1.922,3.329 3.856,3.329 h 38.188 c 1.933,0 3.573,-1.417 3.855,-3.329 l 2.175,-14.747 31.575,2.253 1.115,15.978 c 0.133,1.9 1.618,3.425 3.514,3.609 l 36.182,3.49 c 0.107,0.01 0.214,0.014 0.322,0.015 v 4.711 l 0.015,0.005 V 0 h 0.134 c 4.795,6.12 9.232,12.569 13.487,19.449 -5.651,9.62 -12.575,18.217 -19.976,26.182 -6.864,-3.455 -13.531,-7.369 -19.828,-11.534 -3.151,3.132 -6.7,5.694 -10.186,8.372 -3.425,2.751 -7.285,4.768 -10.946,7.118 1.09,8.117 1.629,16.108 1.846,24.448 -9.446,4.754 -19.519,7.906 -29.708,10.17 -4.068,-6.837 -7.788,-14.241 -11.028,-21.479 -3.842,0.642 -7.702,0.88 -11.567,0.926 v 0.006 c -0.027,0 -0.052,-0.006 -0.075,-0.006 -0.024,0 -0.049,0.006 -0.073,0.006 V 63.652 C 93.903,63.606 90.046,63.368 86.203,62.726 82.965,69.964 79.247,77.368 75.173,84.205 64.989,81.941 54.915,78.789 45.47,74.035 45.686,65.695 46.225,57.704 47.318,49.587 43.65,47.237 39.795,45.22 36.369,42.469 32.888,39.791 29.333,37.229 26.181,34.097 19.884,38.262 13.219,42.176 6.353,45.631 -1.048,37.666 -7.968,29.069 -13.621,19.449 -9.368,12.569 -4.928,6.12 -0.134,0 Z"
+         style="fill:#478cbf;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.32031175"
+         id="path84-6"
+         inkscape:connector-curvature="0" />
+    </g>
+    <g
+       id="g86-7"
+       transform="matrix(4.162611,0,0,-4.162611,784.07144,817.24284)"
+       style="stroke-width:0.32031175">
+      <path
+         d="m 0,0 -1.121,-16.063 c -0.135,-1.936 -1.675,-3.477 -3.611,-3.616 l -38.555,-2.751 c -0.094,-0.007 -0.188,-0.01 -0.281,-0.01 -1.916,0 -3.569,1.406 -3.852,3.33 l -2.211,14.994 H -81.09 l -2.211,-14.994 c -0.297,-2.018 -2.101,-3.469 -4.133,-3.32 l -38.555,2.751 c -1.936,0.139 -3.476,1.68 -3.611,3.616 L -130.721,0 -163.268,3.138 c 0.015,-3.498 0.06,-7.33 0.06,-8.093 0,-34.374 43.605,-50.896 97.781,-51.086 h 0.066 0.067 c 54.176,0.19 97.766,16.712 97.766,51.086 0,0.777 0.047,4.593 0.063,8.093 z"
+         style="fill:#478cbf;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.32031175"
+         id="path88-5"
+         inkscape:connector-curvature="0" />
+    </g>
+    <g
+       id="g90-3"
+       transform="matrix(4.162611,0,0,-4.162611,389.21484,625.67104)"
+       style="stroke-width:0.32031175">
+      <path
+         d="m 0,0 c 0,-12.052 -9.765,-21.815 -21.813,-21.815 -12.042,0 -21.81,9.763 -21.81,21.815 0,12.044 9.768,21.802 21.81,21.802 C -9.765,21.802 0,12.044 0,0"
+         style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.32031175"
+         id="path92-5"
+         inkscape:connector-curvature="0" />
+    </g>
+    <g
+       id="g94-6"
+       transform="matrix(4.162611,0,0,-4.162611,367.36686,631.05679)"
+       style="stroke-width:0.32031175">
+      <path
+         d="m 0,0 c 0,-7.994 -6.479,-14.473 -14.479,-14.473 -7.996,0 -14.479,6.479 -14.479,14.473 0,7.994 6.483,14.479 14.479,14.479 C -6.479,14.479 0,7.994 0,0"
+         style="fill:#414042;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.32031175"
+         id="path96-2"
+         inkscape:connector-curvature="0" />
+    </g>
+    <g
+       id="g98-9"
+       transform="matrix(4.162611,0,0,-4.162611,511.99336,724.73954)"
+       style="stroke-width:0.32031175">
+      <path
+         d="m 0,0 c -3.878,0 -7.021,2.858 -7.021,6.381 v 20.081 c 0,3.52 3.143,6.381 7.021,6.381 3.878,0 7.028,-2.861 7.028,-6.381 V 6.381 C 7.028,2.858 3.878,0 0,0"
+         style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.32031175"
+         id="path100-1"
+         inkscape:connector-curvature="0" />
+    </g>
+    <g
+       id="g102-2"
+       transform="matrix(4.162611,0,0,-4.162611,634.78706,625.67104)"
+       style="stroke-width:0.32031175">
+      <path
+         d="m 0,0 c 0,-12.052 9.765,-21.815 21.815,-21.815 12.041,0 21.808,9.763 21.808,21.815 0,12.044 -9.767,21.802 -21.808,21.802 C 9.765,21.802 0,12.044 0,0"
+         style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.32031175"
+         id="path104-7"
+         inkscape:connector-curvature="0" />
+    </g>
+    <g
+       id="g106-0"
+       transform="matrix(4.162611,0,0,-4.162611,656.64056,631.05679)"
+       style="stroke-width:0.32031175">
+      <path
+         d="m 0,0 c 0,-7.994 6.477,-14.473 14.471,-14.473 8.002,0 14.479,6.479 14.479,14.473 0,7.994 -6.477,14.479 -14.479,14.479 C 6.477,14.479 0,7.994 0,0"
+         style="fill:#414042;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.32031175"
+         id="path108-9"
+         inkscape:connector-curvature="0" />
+    </g>
+  </g>
+</svg>

src/assets/icons/nginx.svg

+<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 128 128"><path d="M127.08009,57.4463A4.50927,4.50927,0,0,0,122.67479,54H50.63619a10.00287,10.00287,0,1,0,0,20h51.6275L87.75289,99.4404a5.81432,5.81432,0,0,1-4.3803,2.4912H46.06349a5.813,5.813,0,0,1-4.3804-2.4912L22.9004,66.5107a5.88865,5.88865,0,0,1-.0005-5.0185l18.7842-32.9336a5.80915,5.80915,0,0,1,4.3794-2.4902h37.3091a5.8125,5.8125,0,0,1,4.3798,2.4912l8.4698,14.8486a5.83,5.83,0,0,0,4.7959,2.7588h14.5561a3.2128,3.2128,0,0,0,2.9024-1.5274,3.15525,3.15525,0,0,0-.1245-3.2197l-17.961-30.9101A9.67814,9.67814,0,0,0,92.53609,6H36.89889a9.67976,9.67976,0,0,0-7.855,4.5088L1.0952,59.5098a9.75557,9.75557,0,0,0,0,8.9824l27.9483,48.999A9.68175,9.68175,0,0,0,36.89889,122h55.6372a9.68745,9.68745,0,0,0,7.8706-4.5371l26.9029-48.9717C128.564,66.2939,127.877,61.2725,127.08009,57.4463Z"/></svg>

src/assets/icons/star-regular.svg

+<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="star" class="svg-inline--fa fa-star fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M528.1 171.5L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6zM388.6 312.3l23.7 138.4L288 385.4l-124.3 65.3 23.7-138.4-100.6-98 139-20.2 62.2-126 62.2 126 139 20.2-100.6 98z"></path></svg>

src/assets/icons/star-solid.svg

+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="star" class="svg-inline--fa fa-star fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path></svg>

src/assets/icons/typescript.svg

+<svg fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="50px" height="50px"><rect width="40" height="40" x="5" y="5" fill="none" stroke="#000000" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/><polygon points="15,26.445 20,26.445 20,42 24,42 24,26.445 29,26.445 29,23 15,23"/><path d="M34.209,28.15c0-1.083,0.769-2.096,2.9-2.096s4.018,1.258,4.018,1.258l0.14-3.704c0,0-11.25-3.075-11.25,4.717 c0,5.73,7.721,5.73,7.721,8.315c0,0.245,0.105,2.026-2.62,2.026c-2.725,0-4.996-1.712-4.996-1.712v4.158 c0,0,11.879,3.843,11.879-4.822C42,30.665,34.209,30.945,34.209,28.15z"/></svg>

src/assets/sass/paper-kit.scss

 @import "paper-kit/responsive";
 @import "paper-kit/plugins/datetimepicker";
 @import "paper-kit/social-buttons";
+@import "paper-kit/animations";
 @import "paper-kit/ziermach";

src/assets/sass/paper-kit/_animations.scss

+.slide-in-right {
+    -webkit-animation: slide-in-right 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
+    animation: slide-in-right 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
+}
+
+/* ----------------------------------------------
+ * Generated by Animista on 2020-5-14 23:22:38
+ * Licensed under FreeBSD License.
+ * See http://animista.net/license for more info. 
+ * w: http://animista.net, t: @cssanimista
+ * ---------------------------------------------- */
+
+/**
+ * ----------------------------------------
+ * animation slide-in-right
+ * ----------------------------------------
+ */
+@-webkit-keyframes slide-in-right {
+    0% {
+        -webkit-transform: translateX(1000px);
+        transform: translateX(1000px);
+        opacity: 0;
+    }
+    100% {
+        -webkit-transform: translateX(0);
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+@keyframes slide-in-right {
+    0% {
+        -webkit-transform: translateX(1000px);
+        transform: translateX(1000px);
+        opacity: 0;
+    }
+    100% {
+        -webkit-transform: translateX(0);
+        transform: translateX(0);
+        opacity: 1;
+    }
+}

src/assets/sass/paper-kit/_icons.scss

-
-.section-nucleo-icons{
+.section-nucleo-icons {
     padding: 100px 0;
 
-    .icons-container{
+    .icons-container {
         position: relative;
         max-width: 450px;
         height: 300px;
         max-height: 300px;
         margin: 0 auto;
 
-        i{
+        i {
             font-size: 34px;
             position: absolute;
             top: 0;
             left: 0;
 
-            &:nth-child(1){
+            &:nth-child(1) {
                 top: 5%;
                 left: 7%;
             }
-            &:nth-child(2){
+            &:nth-child(2) {
                 top: 28%;
                 left: 24%;
             }
-            &:nth-child(3){
+            &:nth-child(3) {
                 top: 40%;
             }
-            &:nth-child(4){
+            &:nth-child(4) {
                 top: 18%;
                 left: 62%;
             }
-            &:nth-child(5){
+            &:nth-child(5) {
                 top: 74%;
                 left: 3%;
             }
-            &:nth-child(6){
+            &:nth-child(6) {
                 top: 36%;
                 left: 44%;
                 font-size: 65px;
                 color: $danger-color;
                 padding: 1px;
             }
-            &:nth-child(7){
+            &:nth-child(7) {
                 top: 59%;
                 left: 26%;
             }
-            &:nth-child(8){
+            &:nth-child(8) {
                 top: 60%;
                 left: 69%;
             }
-            &:nth-child(9){
+            &:nth-child(9) {
                 top: 72%;
                 left: 47%;
             }
-            &:nth-child(10){
+            &:nth-child(10) {
                 top: 88%;
                 left: 27%;
             }
-            &:nth-child(11){
+            &:nth-child(11) {
                 top: 31%;
                 left: 80%;
             }
-            &:nth-child(12){
+            &:nth-child(12) {
                 top: 88%;
                 left: 68%;
             }
-            &:nth-child(13){
+            &:nth-child(13) {
                 top: 5%;
                 left: 81%;
             }
-            &:nth-child(14){
+            &:nth-child(14) {
                 top: 58%;
                 left: 90%;
             }
-            &:nth-child(15){
+            &:nth-child(15) {
                 top: 6%;
                 left: 40%;
             }
         }
     }
 }
-.section-dark{
-    .icons-container{
+.section-dark {
+    .icons-container {
         color: $white-color;
     }
 }
-.info{
-    .icon{
+.info {
+    .icon {
         margin-top: 0;
         font-size: 3.4em;
     }
 }
-.icon-primary{
+.icon-primary {
     color: $primary-color;
 }
-.icon-info{
+.icon-info {
     color: $info-color;
 }
-.icon-success{
+.icon-success {
     color: $success-color;
 }
-.icon-warning{
+.icon-warning {
     color: $warning-color;
 }
-.icon-danger{
+.icon-danger {
     color: $danger-color;
 }
-.icon-neutral{
+.icon-neutral {
     color: $white-color;
 }

src/assets/sass/paper-kit/_sections.scss

     .description,
     .card-plain .card-description,
     .card-plain .card-category{
-        color: rgba($white-color, .7);
+        color: $white-color;
     }
     hr{
         border-color: rgba(255, 255, 255, 0.19);

src/assets/sass/paper-kit/_typography.scss

 
     &,
     a{
-        color: $card-black-color;
+        color: $card-muted-color;
         text-decoration: none;
     }
 }
     text-transform: uppercase;
 }
 .description{
-    color: $dark-gray;
+    color: $white-color;
 }
 blockquote small{
     font-style: normal;

src/assets/sass/paper-kit/_variables.scss

-$font-color:                 #66615b !default;
+$font-color:                 white !default;
 $fill-font-color:            rgba(255, 255, 255, 0.8);
 $font-family-sans-serif:     'Montserrat', "Helvetica", Arial, sans-serif;
 
 $default-gray:               #181a1b !default;
 $light-gray:                 #423e3e !default;
 $medium-gray:                #DDDDDD !default;
-$dark-gray:                  #9A9A9A !default;
+$dark-gray:                  rgb(202, 202, 202) !default;
 
 $placeholder-gray:           rgba(210, 210, 210, 1)  !default;
 
 
 $default-color:              #66615B !default;
 $default-bg:                 #66615B !default;
-$default-states-color:       #403D39 !default;
+$default-states-color:       white !default;
 
 $primary-color:              #51cbce !default;
 $primary-states-color:       darken($primary-color, 10%) !default;
 
 $height-base:                  40px !default;
 
-$font-size-base:               14px !default;
-$font-size-small:              12px !default;
+$font-size-base:               16px !default;
+$font-size-small:              14px !default;
 $font-size-medium:             16px !default;
 $font-size-large:              20px !default;
 $font-size-large-navbar:       22px !default;
 
 //variables used in cards
 $card-black-color:           #333333 !default;
-$card-muted-color:           #ccc !default;
+$card-muted-color:           white !default;
 
 $card-background-blue:      #b8d8d8 !default;
 $card-font-blue:            #506568 !default;

src/assets/sass/paper-kit/_ziermach.scss

 #register-navbar a {
     color: #fff;
 }
+
+.container-left {
+    padding-right: 25%;
+}
+
 .register-background .container {
     margin-top: 11%;
     position: relative;
         //margin-top: 85px;
     }
 }
+
+.avatar-head {
+    position: absolute;
+    z-index: -1;
+    bottom: 0;
+    left: 31%;
+    width: 100%;
+    height: 100%;
+    background-repeat: no-repeat;
+    background-size: contain;
+}
+
 .moving-clouds {
     position: absolute;
     z-index: 1;

src/index.html

 <html lang="en">
 <head>
     <meta charset="utf-8">
-    <title>ZIERMACH³</title>
+    <title>ZIERMACH</title>
     <base href="/">
 
     <link rel="icon" type="image/png" href="assets/img/favicon.ico">

src/tsconfig.app.json

 {
   "extends": "../tsconfig.json",
   "compilerOptions": {
+    "importHelpers": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
     "outDir": "../out-tsc/app",
     "module": "es2015",
     "baseUrl": "",

tsconfig.json

     "baseUrl": "src",
     "sourceMap": true,
     "declaration": false,
+    "allowSyntheticDefaultImports": true,
     "moduleResolution": "node",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "target": "es5",
-    "typeRoots": [
-      "node_modules/@types"
-    ],
-    "lib": [
-      "es2016",
-      "dom"
-    ],
+    "typeRoots": ["node_modules/@types"],
+    "lib": ["es2016", "dom"],
     "module": "es2015"
   }
-}
+}