cziermann
/
ziermach-blog
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

replace Fontawesome css with libary

master
Christian Ziermann 4 years ago
parent
9bb89f6fda
commit
c7d170da1b
18 changed files with 255 additions and 123 deletions
Split View Show Diff Stats
  1. +0
    -8
      angular.json
  2. +6
    -1
      package.json
  3. +14
    -15
      src/app/app.component.ts
  4. +2
    -0
      src/app/app.module.ts
  5. +5
    -5
      src/app/pages/games-dashboard/games-dashboard.component.html
  6. +2
    -2
      src/app/pages/games-dashboard/games-dashboard.component.ts
  7. +1
    -1
      src/app/pages/music/music.component.html
  8. +2
    -1
      src/app/pages/music/music.component.ts
  9. +3
    -3
      src/app/pages/project-dashboard/project-dashboard.component.html
  10. +2
    -1
      src/app/pages/project-dashboard/project-dashboard.component.ts
  11. +52
    -22
      src/app/pages/resume/resume.component.html
  12. +80
    -42
      src/app/pages/resume/resume.component.ts
  13. +16
    -0
      src/app/service/icon-service.service.spec.ts
  14. +47
    -0
      src/app/service/icon-service.service.ts
  15. +1
    -1
      src/app/shared/footer/footer.component.html
  16. +2
    -2
      src/app/shared/footer/footer.component.ts
  17. +6
    -6
      src/app/shared/navbar/navbar.component.html
  18. +14
    -13
      src/app/shared/navbar/navbar.component.ts

+ 0
- 8
angular.json View File

@@ -22,16 +22,12 @@
"src/manifest.webmanifest"
],
"styles": [
"node_modules/@fortawesome/fontawesome-free/css/brands.min.css",
"node_modules/@fortawesome/fontawesome-free/css/solid.min.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/assets/sass/paper-kit.scss",
"src/assets/css/demo.css",
"src/assets/css/nucleo-icons.css"
],
"scripts": [
"node_modules/@fortawesome/fontawesome-free/js/brands.min.js",
"node_modules/@fortawesome/fontawesome-free/js/solid.min.js"
]
},
"configurations": {
@@ -75,13 +71,9 @@
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"scripts": [
"node_modules/@fortawesome/fontawesome-free/js/brands.min.js",
"node_modules/@fortawesome/fontawesome-free/js/solid.min.js"
],
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"node_modules/@fortawesome/fontawesome-free/css/brands.min.css",
"node_modules/@fortawesome/fontawesome-free/css/solid.min.css",
"src/assets/sass/paper-kit.scss",
"src/assets/css/demo.css",
"src/assets/css/nucleo-icons.css"

+ 6
- 1
package.json View File

@@ -22,7 +22,12 @@
"@angular/platform-browser-dynamic": "9.0.6",
"@angular/router": "9.0.6",
"@angular/service-worker": "9.0.6",
"@fortawesome/angular-fontawesome": "~0.6.1",
"@fortawesome/fontawesome-free": "^5.13.0",
"@fortawesome/fontawesome-svg-core": "^1.2.28",
"@fortawesome/free-brands-svg-icons": "^5.13.0",
"@fortawesome/free-regular-svg-icons": "^5.13.0",
"@fortawesome/free-solid-svg-icons": "^5.13.0",
"@ng-bootstrap/ng-bootstrap": "6.0.0",
"bootstrap": "^4.5.0",
"core-js": "3.6.4",
@@ -38,7 +43,7 @@
"zone.js": "0.10.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "0.900.6",
"@angular-devkit/build-angular": "^0.901.7",
"@angular/cli": "9.0.6",
"@angular/compiler-cli": "9.0.6",
"@angular/language-service": "9.0.6",

+ 14
- 15
src/app/app.component.ts View File

@@ -1,9 +1,8 @@
import { Component, OnInit, Inject, Renderer2, ElementRef, ViewChild } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { Subscription } from 'rxjs/Subscription';
import { DOCUMENT, Location } from '@angular/common';
import { Component, ElementRef, Inject, OnInit, Renderer2, ViewChild } from '@angular/core';
import { NavigationEnd, Router } from '@angular/router';
import 'rxjs/add/operator/filter';
import { DOCUMENT } from '@angular/common';
import { LocationStrategy, PlatformLocation, Location } from '@angular/common';
import { Subscription } from 'rxjs/Subscription';
import { NavbarComponent } from './shared/navbar/navbar.component';

@Component({
@@ -15,13 +14,13 @@ export class AppComponent implements OnInit {
private _router: Subscription;
@ViewChild(NavbarComponent) navbar: NavbarComponent;

constructor( private renderer : Renderer2, private router: Router, @Inject(DOCUMENT,) private document: any, private element : ElementRef, public location: Location) {}
constructor(private renderer: Renderer2, private router: Router, @Inject(DOCUMENT) private document: any, private element: ElementRef, public location: Location) { }
ngOnInit() {
var navbar : HTMLElement = this.element.nativeElement.children[0].children[0];
let navbar: HTMLElement = this.element.nativeElement.children[0].children[0];
this._router = this.router.events.filter(event => event instanceof NavigationEnd).subscribe((event: NavigationEnd) => {
if (window.outerWidth > 991) {
window.document.children[0].scrollTop = 0;
}else{
} else {
window.document.activeElement.scrollTop = 0;
}
this.navbar.sidebarClose();
@@ -36,24 +35,24 @@ export class AppComponent implements OnInit {
navbar.classList.add('navbar-transparent');
}
});
var ua = window.navigator.userAgent;
var trident = ua.indexOf('Trident/');
let ua = window.navigator.userAgent;
let trident = ua.indexOf('Trident/');
if (trident > 0) {
// IE 11 => return version number
var rv = ua.indexOf('rv:');
let rv = ua.indexOf('rv:');
var version = parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);
}
if (version) {
var body = document.getElementsByTagName('body')[0];
let body = document.getElementsByTagName('body')[0];
body.classList.add('ie-background');

}

}
removeFooter() {
var titlee = this.location.prepareExternalUrl(this.location.path());
titlee = titlee.slice( 1 );
if(titlee === 'signup' || titlee === 'nucleoicons'){
let titlee = this.location.prepareExternalUrl(this.location.path());
titlee = titlee.slice(1);
if (titlee === 'signup' || titlee === 'nucleoicons') {
return false;
}
else {

+ 2
- 0
src/app/app.module.ts View File

@@ -26,6 +26,7 @@ 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';
import { ServiceWorkerModule } from '@angular/service-worker';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';


@NgModule({
@@ -57,6 +58,7 @@ import { ServiceWorkerModule } from '@angular/service-worker';
ComponentsModule,
PageHeaderModule,
ServiceWorkerModule.register('ngsw-worker.js', { enabled: true }),
FontAwesomeModule,
],
providers: [],
bootstrap: [AppComponent]

+ 5
- 5
src/app/pages/games-dashboard/games-dashboard.component.html View File

@@ -7,7 +7,7 @@
<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>
<fa-icon [icon]="icons.faItchIo" ></fa-icon>
</div>
<div class="description">
<h4 class="info-title">Mini Beans Jam Games</h4>
@@ -45,7 +45,7 @@
>Play Now!</a
>
<a href="https://karotofel.itch.io/mrq" class="btn btn-primary">
Check out on <i class="fab fa-itch-io"></i>
Check out on <fa-icon [icon]="icons.faItchIo" ></fa-icon>
</a>
</div>
</div>
@@ -73,7 +73,7 @@
href="https://karotofel.itch.io/wtfungi"
class="btn btn-primary"
>
Check out on <i class="fab fa-itch-io"></i>
Check out on <fa-icon [icon]="icons.faItchIo" ></fa-icon>
</a>
</div>
</div>
@@ -110,7 +110,7 @@
href="https://karotofel.itch.io/laser-blues"
class="btn btn-primary"
>
Check out on <i class="fab fa-itch-io"></i>
Check out on <fa-icon [icon]="icons.faItchIo" ></fa-icon>
</a>
</div>
</div>
@@ -137,7 +137,7 @@
href="https://karotofel.itch.io/salty-piranha"
class="btn btn-primary"
>
Check out on <i class="fab fa-itch-io"></i>
Check out on <fa-icon [icon]="icons.faItchIo" ></fa-icon>
</a>
</div>
</div>

+ 2
- 2
src/app/pages/games-dashboard/games-dashboard.component.ts View File

@@ -1,12 +1,12 @@
import { Component, OnInit } from '@angular/core';
import { IconServiceService } from 'app/service/icon-service.service';
@Component({
selector: 'app-games-dashboard',
templateUrl: './games-dashboard.component.html',
styleUrls: ['./games-dashboard.component.css']
})
export class GamesDashboardComponent implements OnInit {
public icons = IconServiceService;
constructor() { }

ngOnInit(): void {

+ 1
- 1
src/app/pages/music/music.component.html View File

@@ -7,7 +7,7 @@
<div class="col-sm-12">
<div class="info text-center">
<div class="icon icon-danger">
<i class="fas fa-music"></i>
<fa-icon [icon]="icons.faMusic"></fa-icon>
</div>
<h4 class="info-title">My favorite Music</h4>
<div class="info-separator separator"></div>

+ 2
- 1
src/app/pages/music/music.component.ts View File

@@ -1,4 +1,5 @@
import { Component, OnInit } from '@angular/core';
import { IconServiceService } from 'app/service/icon-service.service';

@Component({
selector: 'app-music',
@@ -6,7 +7,7 @@ import { Component, OnInit } from '@angular/core';
styleUrls: ['./music.component.css']
})
export class MusicComponent implements OnInit {
public icons = IconServiceService;
constructor() { }

ngOnInit(): void {

+ 3
- 3
src/app/pages/project-dashboard/project-dashboard.component.html View File

@@ -6,7 +6,7 @@
<div class="row text-center title">
<div class="col-sm-4 offset-md-4">
<div class="info text-center logo">
<i class="fas fa-globe"></i>
<fa-icon [icon]="icons.faGlobe"></fa-icon>
</div>
<div class="description">
<h4 class="info-title">Web Projects</h4>
@@ -76,7 +76,7 @@
<div class="col-sm-6">
<div class="info text-center">
<div class="icon icon-danger">
<i class="fab fa-github"></i>
<fa-icon [icon]="icons.faGithub" ></fa-icon>
</div>
<div class="description">
<h4 class="info-title">
@@ -90,7 +90,7 @@
<div class="col-sm-6">
<div class="info text-center">
<div class="icon icon-danger">
<i class="fab fa-npm"></i>
<fa-icon [icon]="icons.faNpm" ></fa-icon>
</div>
<div class="description">
<h4 class="info-title">

+ 2
- 1
src/app/pages/project-dashboard/project-dashboard.component.ts View File

@@ -1,4 +1,5 @@
import { Component, OnInit } from '@angular/core';
import { IconServiceService } from 'app/service/icon-service.service';

@Component({
selector: 'app-project-dashboard',
@@ -6,7 +7,7 @@ import { Component, OnInit } from '@angular/core';
styleUrls: ['./project-dashboard.component.css']
})
export class ProjectDashboardComponent implements OnInit {
public icons = IconServiceService;
constructor() { }

ngOnInit(): void {

+ 52
- 22
src/app/pages/resume/resume.component.html View File

@@ -123,17 +123,23 @@
class="text-center skill col-sm-3"
>
<div class="text-center skill-logo">
<div [innerHTML]="skill.iconHtml"></div>
<fa-icon
*ngIf="skill.isFaIcon; else noIcon"
[icon]="skill.icon"
></fa-icon>
<ng-template #noIcon>
<div [innerHTML]="skill.icon"></div>
</ng-template>
</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>
<fa-icon [icon]="getStarIcon(skill.starCount, 0)"></fa-icon>
<fa-icon [icon]="getStarIcon(skill.starCount, 1)"></fa-icon>
<fa-icon [icon]="getStarIcon(skill.starCount, 2)"></fa-icon>
<fa-icon [icon]="getStarIcon(skill.starCount, 3)"></fa-icon>
<fa-icon [icon]="getStarIcon(skill.starCount, 4)"></fa-icon>
</div>
</div>
</div>
@@ -158,17 +164,23 @@
class="text-center skill col-sm-6"
>
<div class="text-center skill-logo">
<div [innerHTML]="skill.iconHtml"></div>
<fa-icon
*ngIf="skill.isFaIcon; else noIcon"
[icon]="skill.icon"
></fa-icon>
<ng-template #noIcon>
<div [innerHTML]="skill.icon"></div>
</ng-template>
</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>
<fa-icon [icon]="getStarIcon(skill.starCount, 0)"></fa-icon>
<fa-icon [icon]="getStarIcon(skill.starCount, 1)"></fa-icon>
<fa-icon [icon]="getStarIcon(skill.starCount, 2)"></fa-icon>
<fa-icon [icon]="getStarIcon(skill.starCount, 3)"></fa-icon>
<fa-icon [icon]="getStarIcon(skill.starCount, 4)"></fa-icon>
</div>
</div>
</div>
@@ -187,17 +199,23 @@
class="text-center skill col-sm-6"
>
<div class="text-center skill-logo">
<div [innerHTML]="skill.iconHtml"></div>
<fa-icon
*ngIf="skill.isFaIcon; else noIcon"
[icon]="skill.icon"
></fa-icon>
<ng-template #noIcon>
<div [innerHTML]="skill.icon"></div>
</ng-template>
</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>
<fa-icon [icon]="getStarIcon(skill.starCount, 0)"></fa-icon>
<fa-icon [icon]="getStarIcon(skill.starCount, 1)"></fa-icon>
<fa-icon [icon]="getStarIcon(skill.starCount, 2)"></fa-icon>
<fa-icon [icon]="getStarIcon(skill.starCount, 3)"></fa-icon>
<fa-icon [icon]="getStarIcon(skill.starCount, 4)"></fa-icon>
</div>
</div>
</div>
@@ -217,7 +235,13 @@
class="text-center skill col-sm-6"
>
<div class="text-center skill-logo">
<div [innerHTML]="skill.iconHtml"></div>
<fa-icon
*ngIf="skill.isFaIcon; else noIcon"
[icon]="skill.icon"
></fa-icon>
<ng-template #noIcon>
<div [innerHTML]="skill.icon"></div>
</ng-template>
</div>
<div class="text-center">
{{ skill.name }}
@@ -237,7 +261,7 @@
<div class="col-md-6 text-center">
<div class="info">
<div class="icon icon-danger">
<i class="fas fa-gamepad"></i>
<fa-icon [icon]="icons.faGamepad"></fa-icon>
</div>
<div class="description">
<h4 class="info-title">Games</h4>
@@ -253,7 +277,7 @@
<div class="col-md-6 text-center">
<div class="info">
<div class="icon icon-danger">
<i class="fas fa-code"></i>
<fa-icon [icon]="icons.faCode"></fa-icon>
</div>
<div class="description">
<h4 class="info-title">Projects</h4>
@@ -279,7 +303,13 @@
<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>
<fa-icon
*ngIf="skill.isFaIcon; else noIcon"
[icon]="skill.icon"
></fa-icon>
<ng-template #noIcon>
<div [innerHTML]="skill.icon"></div>
</ng-template>
</div>
<div class="text-center">
{{ skill.name }}

+ 80
- 42
src/app/pages/resume/resume.component.ts View File

@@ -1,10 +1,11 @@
import { Component, OnInit } from '@angular/core';
import { IconServiceService } from 'app/service/icon-service.service';

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',
0: IconServiceService.farStar,
0.5: IconServiceService.faStarHalfAlt,
1: IconServiceService.fasStar,
}
export const MAX_STARS = 5;

@@ -14,8 +15,9 @@ export interface Link {
}
export interface Skill {
name: string;
iconHtml: string;
icon: any;
starCount?: Star;
isFaIcon: boolean;
description?: {
text?: string;
links?: Link[];
@@ -44,12 +46,14 @@ export class ResumeComponent implements OnInit {
public softSkills: Skill[] = [
{
name: 'Teamwork',
iconHtml: '<i class="fas fa-users"></i>',
icon: IconServiceService.faUsers,
isFaIcon: true,
starCount: 4
},
{
name: 'Communication',
iconHtml: '<i class="fas fa-comments"></i>',
icon: IconServiceService.faComments,
isFaIcon: true,
starCount: 4.5
},
];
@@ -57,19 +61,23 @@ export class ResumeComponent implements OnInit {
public likeToLearn: Skill[] = [
{
name: 'IoT',
iconHtml: '<i class="fas fa-microchip"></i>',
icon: IconServiceService.faMicrochip,
isFaIcon: true,
},
{
name: 'Deep Learning',
iconHtml: '<i class="fas fa-cogs"></i>',
icon: IconServiceService.faCogs,
isFaIcon: true,
},
{
name: 'Game Development',
iconHtml: '<i class="fas fa-gamepad"></i>',
icon: IconServiceService.faGamepad,
isFaIcon: true,
},
{
name: 'Vuejs',
iconHtml: '<i class="fab fa-vuejs"></i>',
icon: IconServiceService.faVuejs,
isFaIcon: true,
},
];

@@ -79,11 +87,13 @@ export class ResumeComponent implements OnInit {
public hobbys: Skill[] = [
{
name: 'Gaming',
iconHtml: '<i class="fas fa-gamepad"></i>',
icon: IconServiceService.faGamepad,
isFaIcon: true,
},
{
name: 'Music',
iconHtml: '<i class="fas fa-music"></i>',
icon: IconServiceService.faMusic,
isFaIcon: true,
description: {
links: [
{
@@ -95,31 +105,37 @@ export class ResumeComponent implements OnInit {
},
{
name: 'Programming',
iconHtml: '<i class="fas fa-code"></i>',
icon: IconServiceService.faCode,
isFaIcon: true,
},
{
name: 'Cooking',
iconHtml: '<i class="fas fa-utensils"></i>',
icon: IconServiceService.faUtensils,
isFaIcon: true,
},
{
name: 'Skating',
iconHtml: '<i class="fas fa-snowboarding"></i>',
icon: IconServiceService.faSnowboarding,
isFaIcon: true,
},
{
name: 'Pen & Paper',
iconHtml: '<i class="far fa-edit"></i>',
icon: IconServiceService.faEdit,
isFaIcon: true,
},
];

public languages: Skill[] = [
{
name: 'German (native language)',
iconHtml: '<img height="30" src="/assets/icons/flags/german.png" alt="German">',
icon: '<img height="30" src="/assets/icons/flags/german.png" alt="German">',
isFaIcon: false,
starCount: 5
},
{
name: 'English',
iconHtml: '<img height="30" src="/assets/icons/flags/english.png" alt="English">',
icon: '<img height="30" src="/assets/icons/flags/english.png" alt="English">',
isFaIcon: false,
starCount: 3.5
},
];
@@ -127,127 +143,149 @@ export class ResumeComponent implements OnInit {
public skills: Skill[] = [
{
name: 'Unit-testing',
iconHtml: '<i class="fas fa-vial"></i>',
icon: IconServiceService.faVial,
isFaIcon: true,
starCount: 3
},
{
name: 'Jira',
iconHtml: '<i class="fab fa-jira"></i> ',
icon: IconServiceService.faJira,
isFaIcon: true,
starCount: 4
},
{
name: 'Apache',
iconHtml: '<img height="30" src="/assets/icons/apache.png" alt="Apache">',
icon: '<img height="30" src="/assets/icons/apache.png" alt="Apache">',
isFaIcon: false,
starCount: 2.5
},
{
name: 'Nginx',
iconHtml: '<img height="30" src="/assets/icons/nginx.svg" alt="Nginx">',
icon: '<img height="30" src="/assets/icons/nginx.svg" alt="Nginx">',
isFaIcon: false,
starCount: 4.5
},
{
name: 'Jenkins',
iconHtml: '<i class="fab fa-jenkins"></i>',
icon: IconServiceService.faJenkins,
isFaIcon: true,
starCount: 3
},
{
name: 'SQL',
iconHtml: '<i class="fas fa-database"></i>',
icon: IconServiceService.faDatabase,
isFaIcon: true,
starCount: 3.5
},
{
name: 'Python',
iconHtml: '<i class="fab fa-python"></i>',
icon: IconServiceService.faPython,
isFaIcon: true,
starCount: 2
},
{
name: 'PHP',
iconHtml: '<i class="fab fa-php"></i>',
icon: IconServiceService.faPhp,
isFaIcon: true,
starCount: 4
},
{
name: 'HTML & CSS',
iconHtml: '<i class="fab fa-html5"></i>',
icon: IconServiceService.faHtml5,
isFaIcon: true,
starCount: 4.5
},
{
name: 'Angular 2+ & AngularJS',
iconHtml: '<i class="fab fa-angular"></i>',
icon: IconServiceService.faAngular,
isFaIcon: true,
starCount: 4.5
},

{
name: 'NestJs',
iconHtml: '<img height="30" src="/assets/icons/nestjs.svg" alt="NestJs">',
icon: '<img height="30" src="/assets/icons/nestjs.svg" alt="NestJs">',
isFaIcon: false,
starCount: 4
},
{
name: 'Twig',
iconHtml: '<img height="30" src="/assets/icons/twig.svg" alt="Twig">',
icon: '<img height="30" src="/assets/icons/twig.svg" alt="Twig">',
isFaIcon: false,
starCount: 4.5
},
{
name: 'Electron',
iconHtml: '<i class="fas fa-atom"></i>',
icon: IconServiceService.faAtom,
isFaIcon: true,
starCount: 4
},
{
name: 'Typescript',
iconHtml: '<img height="30" color="white" class="skill-logo" src="/assets/icons/typescript.svg" alt="Typescript">',
icon: '<img height="30" color="white" class="skill-logo" src="/assets/icons/typescript.svg" alt="Typescript">',
isFaIcon: false,
starCount: 4
},
{
name: 'Ubuntu',
iconHtml: '<i class="fab fa-ubuntu"></i>',
icon: IconServiceService.faUbuntu,
isFaIcon: true,
starCount: 4
},
{
name: 'Docker',
iconHtml: '<i class="fab fa-docker"></i>',
icon: IconServiceService.faDocker,
isFaIcon: true,
starCount: 3
},
{
name: 'Kubernetes',
iconHtml: '<img height="30" src="/assets/icons/kubernetes.png" alt="Kubernetes">',
icon: '<img height="30" src="/assets/icons/kubernetes.png" alt="Kubernetes">',
isFaIcon: false,
starCount: 2
},
{
name: 'Git',
iconHtml: '<i class="fab fa-git"></i>',
icon: IconServiceService.faGit,
isFaIcon: true,
starCount: 4.5
},
{
name: 'NPM',
iconHtml: '<i class="fab fa-npm"></i>',
icon: IconServiceService.faNpm,
isFaIcon: true,
starCount: 5
},

{
name: 'Unity',
iconHtml: '<i class="fab fa-unity"></i>',
icon: IconServiceService.faUnity,
isFaIcon: true,
starCount: 2
},

{
name: 'Godot',
iconHtml: '<img height="30" src="/assets/icons/kubernetes.png" alt="Godot">',
icon: '<img height="30" src="/assets/icons/kubernetes.png" alt="Godot">',
isFaIcon: false,
starCount: 4.5
},
{
name: 'C#',
iconHtml: '<div height="30">C#</div>',
icon: '<div height="30">C#</div>',
isFaIcon: false,
starCount: 4.5
},

];
public icons = IconServiceService;
constructor() { }

ngOnInit(): void {
}


getStarClass(starCount: Star, starIndex: number) {
getStarIcon(starCount: Star, starIndex: number) {
const starSizes: number[] = [];
let starCountWorker = starCount;
for (let starIterator = 1; starIterator <= MAX_STARS; starIterator++) {

+ 16
- 0
src/app/service/icon-service.service.spec.ts View File

@@ -0,0 +1,16 @@
import { TestBed } from '@angular/core/testing';

import { IconServiceService } from './icon-service.service';

describe('IconServiceService', () => {
let service: IconServiceService;

beforeEach(() => {
TestBed.configureTestingModule({});
service = TestBed.inject(IconServiceService);
});

it('should be created', () => {
expect(service).toBeTruthy();
});
});

+ 47
- 0
src/app/service/icon-service.service.ts View File

@@ -0,0 +1,47 @@
import { Injectable } from '@angular/core';
import { faStar as farStar } from '@fortawesome/free-regular-svg-icons';
import { faEdit, faHeart, faStar as fasStar, faStarHalfAlt, faMusic, faGlobe, faGamepad, faCode, faUsers, faComments, faCogs, faUtensils, faSnowboarding, faVial, faDatabase, faAtom, faMicrochip, faAddressCard } from '@fortawesome/free-solid-svg-icons';
import { faItchIo, faVuejs, faJira, faJenkins, faPython, faPhp, faHtml5, faAngular, faUbuntu, faDocker, faGit, faNpm, faUnity, faGithub, faXing } from '@fortawesome/free-brands-svg-icons';

@Injectable({
providedIn: 'root'
})
export class IconServiceService {
static faEdit = faEdit;
static farStar = farStar;
static fasStar = fasStar;
static faStarHalfAlt = faStarHalfAlt;
static faHeart = faHeart;
static faItchIo = faItchIo;
static faMusic = faMusic;
static faGlobe = faGlobe;
static faGamepad = faGamepad;
static faCode = faCode;
static faUsers = faUsers;
static faComments = faComments;
static faCogs = faCogs;
static faUtensils = faUtensils;
static faSnowboarding = faSnowboarding;
static faVial = faVial;
static faDatabase = faDatabase;
static faAtom = faAtom;
static faMicrochip = faMicrochip;
static faAddressCard = faAddressCard;
static faVuejs = faVuejs;
static faJira = faJira;
static faJenkins = faJenkins;
static faPython = faPython;
static faPhp = faPhp;
static faHtml5 = faHtml5;
static faAngular = faAngular;
static faUbuntu = faUbuntu;
static faDocker = faDocker;
static faGit = faGit;
static faNpm = faNpm;
static faUnity = faUnity;
static faGithub = faGithub;
static faXing = faXing;


constructor() { }
}

+ 1
- 1
src/app/shared/footer/footer.component.html View File

@@ -8,7 +8,7 @@
</nav>
<div class="credits ml-auto">
<span class="copyright">
made with <i class="fa fa-heart heart"></i> by cziermann with help of
made with <fa-icon [icon]="icons.faHeart"></fa-icon> by cziermann with help of
<a href="https://www.creative-tim.com/product/paper-kit-2-angular"
>paper-kit-2</a
>

+ 2
- 2
src/app/shared/footer/footer.component.ts View File

@@ -1,4 +1,5 @@
import { Component, OnInit } from '@angular/core';
import { IconServiceService } from 'app/service/icon-service.service';

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

public icons = IconServiceService;
constructor() { }

ngOnInit() {}

+ 6
- 6
src/app/shared/navbar/navbar.component.html View File

@@ -31,7 +31,7 @@
href="https://github.com/JackWolfskind"
target="_blank"
>
<i class="fab fa-github"></i>
<fa-icon [icon]="icons.faGithub" ></fa-icon>
<p class="d-lg-none">GitHub</p>
</a>
</li>
@@ -44,7 +44,7 @@
href="https://www.npmjs.com/~cziermann"
target="_blank"
>
<i class="fab fa-npm"></i>
<fa-icon [icon]="icons.faNpm" ></fa-icon>
<p class="d-lg-none">NPM</p>
</a>
</li>
@@ -57,7 +57,7 @@
href="https://www.xing.com/profile/Christian_Ziermann3"
target="_blank"
>
<i class="fab fa-xing"></i>
<fa-icon [icon]="icons.faXing" ></fa-icon>
<p class="d-lg-none">Xing</p>
</a>
</li>
@@ -70,7 +70,7 @@
data-placement="bottom"
[routerLink]="['/resume']"
>
<i class="fas fa-address-card"></i>
<fa-icon [icon]="icons.faAddressCard"></fa-icon>
<p class="d-lg-none">About Me</p>
</a>
</li>
@@ -83,7 +83,7 @@
data-placement="bottom"
[routerLink]="['/games']"
>
<i class="fas fa-gamepad"></i>
<fa-icon [icon]="icons.faGamepad"></fa-icon>
<p class="d-lg-none">Games</p>
</a>
</li>
@@ -96,7 +96,7 @@
data-placement="bottom"
[routerLink]="['/projects']"
>
<i class="fas fa-code"></i>
<fa-icon [icon]="icons.faCode"></fa-icon>
<p class="d-lg-none">Projects</p>
</a>
</li>

+ 14
- 13
src/app/shared/navbar/navbar.component.ts View File

@@ -1,5 +1,6 @@
import { Component, OnInit, ElementRef } from '@angular/core';
import { Location, LocationStrategy, PathLocationStrategy } from '@angular/common';
import { IconServiceService } from 'app/service/icon-service.service';

@Component({
selector: 'app-navbar',
@@ -9,8 +10,8 @@ import { Location, LocationStrategy, PathLocationStrategy } from '@angular/commo
export class NavbarComponent implements OnInit {
private toggleButton: any;
private sidebarVisible: boolean;
constructor(public location: Location, private element : ElementRef) {
public icons = IconServiceService;
constructor(public location: Location, private element: ElementRef, ) {
this.sidebarVisible = false;
}

@@ -24,7 +25,7 @@ export class NavbarComponent implements OnInit {
// console.log(html);
// console.log(toggleButton, 'toggle');

setTimeout(function(){
setTimeout(function () {
toggleButton.classList.add('toggled');
}, 500);
html.classList.add('nav-open');
@@ -48,11 +49,11 @@ export class NavbarComponent implements OnInit {
}
};
isHome() {
var titlee = this.location.prepareExternalUrl(this.location.path());
if(titlee.charAt(0) === '#'){
titlee = titlee.slice( 1 );
}
if( titlee === '/home' ) {
let titlee = this.location.prepareExternalUrl(this.location.path());
if (titlee.charAt(0) === '#') {
titlee = titlee.slice(1);
}
if (titlee === '/home') {
return true;
}
else {
@@ -60,11 +61,11 @@ export class NavbarComponent implements OnInit {
}
}
isDocumentation() {
var titlee = this.location.prepareExternalUrl(this.location.path());
if(titlee.charAt(0) === '#'){
titlee = titlee.slice( 1 );
}
if( titlee === '/documentation' ) {
let titlee = this.location.prepareExternalUrl(this.location.path());
if (titlee.charAt(0) === '#') {
titlee = titlee.slice(1);
}
if (titlee === '/documentation') {
return true;
}
else {

Write Preview
Loading…
Cancel
Save