Add Page for PDF Export, Add Music page

.vscode/settings.json

+{
+    "deno.enable": false
+}

src/app/app-routing.module.ts

 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';
+import { MusicComponent } from './pages/music/music.component.ts';
+import { ResumePdfComponent } from './pages/resume-pdf/resume-pdf.component.ts';
 
 
 const routes: Routes = [
         path: 'resume',
         component: ResumeComponent,
     },
+    {
+        path: 'pdf',
+        component: ResumePdfComponent,
+    },
     {
         path: 'games',
         children: [
         path: 'projects',
         component: ProjectDashboardComponent,
     },
+    {
+        path: 'music',
+        component: MusicComponent,
+    },
     {
         path: 'legal',
         component: ImpressumComponent,

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';
+import { MusicComponent } from './pages/music/music.component';
+import { ResumePdfComponent } from './pages/resume-pdf/resume-pdf.component';
+import { PdfHeaderComponent } from './page-header/pdf-header/pdf-header.component';
+import { MusicHeaderComponent } from './page-header/music-header/music-header.component';
 
 
 @NgModule({
     SaltyPiranhaComponent,
     KeepInTouchComponent,
     ImpressumComponent,
-    HobbyDashboardComponent,
+    MusicComponent,
+    MusicHeaderComponent,
+    ResumePdfComponent,
+    PdfHeaderComponent,
   ],
   imports: [
     BrowserModule,

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

+<div class="page-header section-dark  page-header-xs" style="background-image: url('assets/img/black-and-silver-headphones-on-black-surface.jpg')">
+    <div class="filter"></div>
+    <div class="content-center">
+        <div class="container">
+            <div class="title-brand">
+                <h1 class="presentation-title">Music</h1>
+            </div>
+        </div>
+    </div>
+</div>

src/app/pages/hobby-dashboard/hobby-dashboard.component.spec.ts → src/app/page-header/music-header/music-header.component.spec.ts

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

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

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

src/app/page-header/pdf-header/pdf-header.component.css

+.default-header {
+    background-image: url('assets/img/dark-fog-forest-haze.jpg'); 
+}

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

+<div
+  class="page-header section-dark default-header"
+>
+  <div class="slide-in-right">
+    <div class="title-brand text-left">
+      <h1>Christian Ziermann</h1>
+      <h2>Web Developer</h2>
+      <h3>ziermach.de</h3>
+    </div>
+  </div>
+</div>

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

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

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

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

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.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/music/music.component.html

+<div class="wrapper">
+  <app-music-header></app-music-header>
+  <div class="main">
+    <div class="section section-dark">
+      <div class="container">
+        <div class="row">
+          <div class="col-sm-12">
+            <div class="info text-center">
+              <div class="icon icon-danger">
+                <i class="fas fa-music"></i>
+              </div>
+              <h4 class="info-title">My favorite Music</h4>
+              <div class="info-separator separator"></div>
+              <div class="description">
+                <iframe
+                  src="https://open.spotify.com/embed/playlist/2ocjal6YJG4DOObS2AhGmP"
+                  width="100%"
+                  height="900px"
+                  frameborder="0"
+                  allowtransparency="true"
+                  allow="encrypted-media"
+                ></iframe>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

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

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

src/app/pages/music/music.component.ts

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

src/app/pages/resume-pdf/resume-pdf.component.html

+<div class="wrapper">
+  <app-pdf-header></app-pdf-header>
+  <div class="main">
+    <div class="section section-transparent">
+      <div class="container">
+        <div class="owner">
+          <div class="avatar">
+            <img
+              src="/assets/img/avatar/profilbild.jpg"
+              alt="Circle Image"
+              class="img-circle img-responsive"
+            />
+          </div>
+          <div class="name">
+            <h4 class="title">Christian Ziermann</h4>
+            <h6 class="description">Web Developer</h6>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-md-6">
+            <div class="personal">
+              <h4 class="title">Personal</h4>
+              <div class="description">
+                <table class="">
+                  <tr *ngFor="let personalColumn of displayedPersonalColumns">
+                    <th>{{ personalColumn | uppercase }}</th>
+                    <td>
+                      {{
+                        personalColumn == "birthdate"
+                          ? (personalData[personalColumn]
+                            | date: "dd. MMMM yyyy")
+                          : personalData[personalColumn]
+                      }}
+                    </td>
+                  </tr>
+                </table>
+              </div>
+            </div>
+          </div>
+          <div class="col-md-6">
+            <div class="personal">
+              <h4 class="title">Jobs</h4>
+              <table class="description">
+                <tr>
+                  <td class="job-date">
+                    July 2018 - Today
+                  </td>
+                  <td class="job-company">
+                    PlusServer
+                  </td>
+                  <td class="job-postion description">
+                    Web-Developer
+                  </td>
+                </tr>
+                <tr>
+                  <td class="job-date">
+                    August 2015 - July 2018
+                  </td>
+                  <td class="job-company">
+                    PlusServer
+                  </td>
+                  <td class="job-postion description">
+                    Trainee application development
+                  </td>
+                </tr>
+              </table>
+            </div>
+          </div>
+          <div class="col-md-12">
+            <div class="personal">
+              <h4 class="title">Education</h4>
+              <table class="description ta">
+                <tr>
+                  <th>Date</th>
+                  <th>School</th>
+                  <th>Graduation</th>
+                </tr>
+                <tr></tr>
+                <tr class="job-date">
+                  <td>
+                    August 2015 - July 2018
+                  </td>
+                  <td>
+                    Georg-Simon-Ohm-Berufskolleg Köln
+                  </td>
+                  <td>
+                    IT specialist application development
+                  </td>
+                </tr>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="section-transparent">
+      <div class="container">
+        <div class="row">
+          <h1 class="text-center col-md-12">
+            Experience & Interests
+          </h1>
+
+          <div class="col-md-12">
+            <div class="row">
+              <div
+                *ngFor="let skill of skills"
+                class="text-center skill col-sm-3"
+              >
+                <div class="text-center skill-logo">
+                  <div [innerHTML]="skill.iconHtml"></div>
+                </div>
+                <div class="text-center">
+                  {{ skill.name }}
+                </div>
+                <div class="text-center">
+                  <i class="{{ getStarClass(skill.starCount, 0) }}"></i>
+                  <i class="{{ getStarClass(skill.starCount, 1) }}"></i>
+                  <i class="{{ getStarClass(skill.starCount, 2) }}"></i>
+                  <i class="{{ getStarClass(skill.starCount, 3) }}"></i>
+                  <i class="{{ getStarClass(skill.starCount, 4) }}"></i>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="section-transparent">
+      <div class="container">
+        <div class="row">
+          <div class="col-md-4">
+            <div class="row">
+              <h2 class="col-sm-12 title text-center">
+                Soft Skills
+              </h2>
+            </div>
+
+            <div class="row">
+              <div
+                *ngFor="let skill of softSkills"
+                class="text-center skill col-sm-6"
+              >
+                <div class="text-center skill-logo">
+                  <div [innerHTML]="skill.iconHtml"></div>
+                </div>
+                <div class="text-center">
+                  {{ skill.name }}
+                </div>
+                <div class="text-center">
+                  <i class="{{ getStarClass(skill.starCount, 0) }}"></i>
+                  <i class="{{ getStarClass(skill.starCount, 1) }}"></i>
+                  <i class="{{ getStarClass(skill.starCount, 2) }}"></i>
+                  <i class="{{ getStarClass(skill.starCount, 3) }}"></i>
+                  <i class="{{ getStarClass(skill.starCount, 4) }}"></i>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="col-sm-4">
+            <div class="row">
+              <h2 class="col-sm-12 title text-center">
+                Languages
+              </h2>
+            </div>
+
+            <div class="row">
+              <div
+                *ngFor="let skill of languages"
+                class="text-center skill col-sm-6"
+              >
+                <div class="text-center skill-logo">
+                  <div [innerHTML]="skill.iconHtml"></div>
+                </div>
+                <div class="text-center">
+                  {{ skill.name }}
+                </div>
+                <div class="text-center">
+                  <i class="{{ getStarClass(skill.starCount, 0) }}"></i>
+                  <i class="{{ getStarClass(skill.starCount, 1) }}"></i>
+                  <i class="{{ getStarClass(skill.starCount, 2) }}"></i>
+                  <i class="{{ getStarClass(skill.starCount, 3) }}"></i>
+                  <i class="{{ getStarClass(skill.starCount, 4) }}"></i>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="col-sm-4">
+            <div class="row">
+              <div class="col-sm-12">
+                <div class="row">
+                  <h2 class="col-sm-12 title text-center">
+                    Like to Learn
+                  </h2>
+                </div>
+
+                <div class="row">
+                  <div
+                    *ngFor="let skill of likeToLearn"
+                    class="text-center skill col-sm-6"
+                  >
+                    <div class="text-center skill-logo">
+                      <div [innerHTML]="skill.iconHtml"></div>
+                    </div>
+                    <div class="text-center">
+                      {{ skill.name }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="section-transparent">
+      <div class="container">
+        <div class="row">
+          <div class="col-md-8 mr-auto ml-auto">
+            <h1 class="text-center">Hobbys</h1>
+          </div>
+        </div>
+        <div class="row">
+          <div *ngFor="let skill of hobbys" class="text-center skill col-sm-6">
+            <div class="text-center skill-logo">
+              <div [innerHTML]="skill.iconHtml"></div>
+            </div>
+            <div class="text-center">
+              {{ skill.name }}
+            </div>
+            <div *ngIf="skill.description" class="text-center description">
+              <div class="text-center">
+                {{ skill.description.text }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="section-transparent">
+      <div class="container">
+        <div class="row">
+          <div class="col-md-8 mr-auto ml-auto text-center">
+            <h1 class="">Keep in touch?</h1>
+            <div>Mail: cziermann@mailbox.org</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="section section-transparent"></div>
+  </div>
+</div>

src/app/pages/resume-pdf/resume-pdf.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;
+}
+
+.default-header {
+    background-image: url("assets/img/dark-fog-forest-haze.jpg") !important;
+}
+
+.section-experience {
+    background-image: url("/assets/img/pexels-photo-1629236.jpeg");
+}
+
+.section-profile-content {
+    background-image: url("/assets/img/pexels-photo-1629236.jpeg");
+}
+
+.section-soft-skills {
+    background-image: url("/assets/img/pexels-photo-1629236.jpeg");
+}
+
+.section-hobbys {
+    background-image: url("/assets/img/pexels-photo-1629236.jpeg");
+}
+
+.section-transparent {
+    border-bottom: 1px solid transparent;
+    box-shadow: none;
+    background: transparent !important;
+}
+
+* {
+    background: white;
+    color: black !important;
+}
+
+html,
+.main {
+    background: white;
+    color: black !important;
+    background-position: center center;
+    background-size: cover;
+    background-attachment: fixed;
+    margin-top: 0;
+}
+
+td {
+    padding-left: 2%;
+}

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

+import { Component, OnInit } from '@angular/core';
+
+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 Link {
+  href: string;
+  name: string;
+}
+export interface Skill {
+  name: string;
+  iconHtml: string;
+  starCount?: Star;
+  description?: {
+    text?: string;
+    links?: Link[];
+  };
+}
+@Component({
+  selector: 'app-resume-pdf',
+  templateUrl: './resume-pdf.component.html',
+  styleUrls: ['./resume-pdf.component.scss']
+})
+export class ResumePdfComponent implements OnInit {
+
+  public focus = false;
+  public focus1 = false;
+
+  displayedPersonalColumns = [
+    'name',
+    'birthdate',
+    'location'
+  ];
+  personalData = {
+    name: 'Christian Ziermann',
+    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: '<i class="fas fa-microchip"></i>',
+    },
+    {
+      name: 'Deep Learning',
+      iconHtml: '<i class="fas fa-cogs"></i>',
+    },
+    {
+      name: 'Game Development',
+      iconHtml: '<i class="fas fa-gamepad"></i>',
+    },
+    {
+      name: 'Vuejs',
+      iconHtml: '<i class="fab fa-vuejs"></i>',
+    },
+  ];
+
+
+
+
+  public hobbys: Skill[] = [
+    {
+      name: 'Gaming',
+      iconHtml: '<i class="fas fa-gamepad"></i>',
+    },
+    {
+      name: 'Music',
+      iconHtml: '<i class="fas fa-music"></i>',
+      description: {
+        links: [
+          {
+            href: '/music',
+            name: 'Checkout'
+          }
+        ]
+      }
+    },
+    {
+      name: 'Programming',
+      iconHtml: '<i class="fas fa-code"></i>',
+    },
+    {
+      name: 'Cooking',
+      iconHtml: '<i class="fas fa-utensils"></i>',
+    },
+    {
+      name: 'Skating',
+      iconHtml: '<i class="fas fa-snowboarding"></i>',
+    },
+    {
+      name: 'Pen & Paper',
+      iconHtml: '<i class="far fa-edit"></i>',
+    },
+  ];
+
+  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 {
+  }
+
+
+  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/pages/resume/resume.component.html

                 </div>
 
                 <div class="row">
-                  <div class="text-center skill col-sm-3">
-                    <div class="text-center skill-logo">
-                      <i class="fas fa-microchip"></i>
-                    </div>
-                    <div class="text-center">
-                      IoT
-                    </div>
-                  </div>
-
-                  <div class="text-center skill col-sm-3">
-                    <div class="text-center skill-logo">
-                      <i class="fas fa-cogs"></i>
-                    </div>
-                    <div class="text-center">
-                      Deep Learning
-                    </div>
-                  </div>
-
-                  <div class="text-center skill col-sm-3">
-                    <div class="text-center skill-logo">
-                      <i class="fas fa-gamepad"></i>
-                    </div>
-                    <div class="text-center">
-                      Game Development
-                    </div>
-                  </div>
-
-                  <div class="text-center skill col-sm-3">
+                  <div
+                    *ngFor="let skill of likeToLearn"
+                    class="text-center skill col-sm-6"
+                  >
                     <div class="text-center skill-logo">
-                      <i class="fab fa-vuejs"></i>
+                      <div [innerHTML]="skill.iconHtml"></div>
                     </div>
                     <div class="text-center">
-                      Vuejs
+                      {{ skill.name }}
                     </div>
                   </div>
                 </div>
         </div>
       </div>
     </div>
+
+    <div class="section section-transparent"></div>
+    <div class="section section-image section-hobbys">
+      <div class="container">
+        <div class="row">
+          <div class="col-md-8 mr-auto ml-auto">
+            <h1 class="text-center">Hobbys</h1>
+          </div>
+        </div>
+        <div class="row">
+          <div *ngFor="let skill of hobbys" class="text-center skill col-sm-6">
+            <div class="text-center skill-logo">
+              <div [innerHTML]="skill.iconHtml"></div>
+            </div>
+            <div class="text-center">
+              {{ skill.name }}
+            </div>
+            <div *ngIf="skill.description" class="text-center description">
+              <div class="text-center">
+                {{ skill.description.text }}
+              </div>
+              <div *ngFor="let link of skill.description.links">
+                <a class="btn btn-primary btn-fill btn-sm" [href]="link.href">
+                  {{ link.name }}
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
     <div class="section section-transparent">
       <div class="container">
         <div class="row">

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

     padding-top: 2%;
 }
 
-
 table {
     color: white;
 }
     background-image: url("/assets/img/pexels-photo-1629236.jpeg");
 }
 
+.section-hobbys {
+    background-image: url("/assets/img/pexels-photo-1629236.jpeg");
+}
+
 .section-transparent {
     border-bottom: 1px solid transparent;
     box-shadow: none;
     background: transparent !important;
 }
 
-
-
-html, .main {
+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

   1: 'fas fa-star',
 }
 export const MAX_STARS = 5;
+
+export interface Link {
+  href: string;
+  name: string;
+}
 export interface Skill {
   name: string;
   iconHtml: string;
-  starCount: Star;
+  starCount?: Star;
+  description?: {
+    text?: string;
+    links?: Link[];
+  };
 }
 @Component({
   selector: 'app-resume',
   public likeToLearn: Skill[] = [
     {
       name: 'IoT',
-      iconHtml: 'fas fa-microchip',
-      starCount: 0
+      iconHtml: '<i class="fas fa-microchip"></i>',
     },
     {
       name: 'Deep Learning',
-      iconHtml: 'fas fa-cogs',
-      starCount: 0
+      iconHtml: '<i class="fas fa-cogs"></i>',
     },
     {
       name: 'Game Development',
-      iconHtml: 'fas fa-gamepad',
-      starCount: 2
+      iconHtml: '<i class="fas fa-gamepad"></i>',
     },
     {
       name: 'Vuejs',
-      iconHtml: 'fab fa-vuejs',
-      starCount: 0
+      iconHtml: '<i class="fab fa-vuejs"></i>',
+    },
+  ];
+
+
+
+
+  public hobbys: Skill[] = [
+    {
+      name: 'Gaming',
+      iconHtml: '<i class="fas fa-gamepad"></i>',
+    },
+    {
+      name: 'Music',
+      iconHtml: '<i class="fas fa-music"></i>',
+      description: {
+        links: [
+          {
+            href: '/music',
+            name: 'Checkout'
+          }
+        ]
+      }
+    },
+    {
+      name: 'Programming',
+      iconHtml: '<i class="fas fa-code"></i>',
+    },
+    {
+      name: 'Cooking',
+      iconHtml: '<i class="fas fa-utensils"></i>',
+    },
+    {
+      name: 'Skating',
+      iconHtml: '<i class="fas fa-snowboarding"></i>',
+    },
+    {
+      name: 'Pen & Paper',
+      iconHtml: '<i class="far fa-edit"></i>',
     },
   ];