optimized ui a little bit and added impressum

src/app/app.config.ts

@@ -1,4 +1,4 @@
-import {ApplicationConfig, provideBrowserGlobalErrorListeners, provideZonelessChangeDetection} from '@angular/core';
+import {ApplicationConfig, inject, provideAppInitializer, provideBrowserGlobalErrorListeners, provideZonelessChangeDetection} from '@angular/core';
 import { provideRouter } from '@angular/router';
 
 import { routes } from './app.routes';
@@ -7,6 +7,8 @@ import {provideHttpClient} from '@angular/common/http';
 import {provideTranslateService} from '@ngx-translate/core';
 import {provideTranslateHttpLoader} from '@ngx-translate/http-loader';
 import {LocalStoreConstants} from './constants/LocalStoreConstants';
+import {MatIconRegistry} from '@angular/material/icon';
+import {DomSanitizer} from '@angular/platform-browser';
 
 
 const INITIAL_LANG = getInitialLang();
@@ -26,6 +28,20 @@ export const appConfig: ApplicationConfig = {
         suffix: '.json'
       })
     }),
+    provideAppInitializer(() => {
+      const iconRegistry = inject(MatIconRegistry);
+      const sanitizer = inject(DomSanitizer);
+
+      iconRegistry.addSvgIcon(
+        'github',
+        sanitizer.bypassSecurityTrustResourceUrl('assets/logos/github.svg')
+      );
+
+      iconRegistry.addSvgIcon(
+        'linkedin',
+         sanitizer.bypassSecurityTrustResourceUrl('assets/logos/linkedIn.svg')
+      );
+    }),
   ]
 };
 

src/app/app.routes.ts

@@ -2,11 +2,13 @@ import { Routes } from '@angular/router';
 import {AboutComponent} from './pages/about/about.component';
 import {ProjectsComponent} from './pages/projects/projects.component';
 import {HobbiesComponent} from './pages/hobbies/hobbies.component';
+import {ImprintComponent} from './pages/imprint/imprint.component';
 
 export const routes: Routes = [
   { path: '', component: AboutComponent },
   { path: 'about', component: AboutComponent},
   { path: 'projects', component: ProjectsComponent},
   { path: 'hobbies', component: HobbiesComponent},
+  { path: 'imprint', component: ImprintComponent},
 ];
 

src/app/layout/topbar/topbar.component.html

@@ -13,7 +13,7 @@
     <a routerLink="/about" mat-button>{{ 'TOPBAR.ABOUT' | translate }}</a>
     <a routerLink="/projects" mat-button>{{ 'TOPBAR.PROJECTS' | translate }}</a>
     <a routerLink="/hobbies" mat-button>{{ 'TOPBAR.HOBBY' | translate }}</a>
-    <a routerLink="/projects" mat-button>{{ 'TOPBAR.CONTACT' | translate }}</a>
+    <a routerLink="/imprint" mat-button>{{ 'TOPBAR.IMPRINT' | translate }}</a>
   </nav>
 
   <!-- Mobile nav menu button -->
@@ -38,8 +38,8 @@
     <button mat-menu-item routerLink="/hobbys">
       {{ 'TOPBAR.HOBBY' | translate }}
     </button>
-    <button mat-menu-item routerLink="/contact">
-      {{ 'TOPBAR.CONTACT' | translate }}
+    <button mat-menu-item routerLink="/imprint">
+      {{ 'TOPBAR.IMPRINT' | translate }}
     </button>
   </mat-menu>
 

src/app/layout/topbar/topbar.component.scss

@@ -2,7 +2,7 @@
   position: sticky; top: 0; z-index: 100;
   backdrop-filter: saturate(1.1) blur(8px);
   background:
-    color-mix(in oklab, var(--app-bg) 80%, transparent);
+    color-mix(in oklab, var(--app-topbar-bg) 80%, transparent);
   border-bottom: 1px solid rgba(0,0,0,.08);
 
   .brand {

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

@@ -27,14 +27,15 @@
         </div>
         <div class="row">
             <mat-icon aria-hidden="true">email</mat-icon>
-            <a href="" (click)="openMail($event)">
+            <a href="" (click)="SharedFunctions.openMail($event)">
               {{ 'ABOUT.CONTACT_ME' | translate }}
             </a>
         </div>
         <div class="row">
-          <mat-icon aria-hidden="true">link</mat-icon>
+          <mat-icon svgIcon="github"></mat-icon>
           <a href="{{UrlConstants.GIT_HUB}}" target="_blank" rel="noopener">GitHub</a>
           <span>·</span>
+          <mat-icon svgIcon="linkedin"></mat-icon>
           <a href="{{UrlConstants.LINKED_IN}}" target="_blank" rel="noopener">LinkedIn</a>
         </div>
       </div>

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

@@ -9,6 +9,7 @@ import { TranslateModule } from '@ngx-translate/core';
 import {UrlConstants} from '../../constants/UrlConstants';
 import {AssetsConstants} from '../../constants/AssetsConstants';
 import {RouterLink} from '@angular/router';
+import {SharedFunctions} from '../../shared/SharedFunctions';
 
 
 @Component({
@@ -151,4 +152,5 @@ export class AboutComponent {
 
   protected readonly UrlConstants = UrlConstants;
   protected readonly AssetsConstants = AssetsConstants;
+  protected readonly SharedFunctions = SharedFunctions;
 }

src/app/pages/imprint/imprint.component.html

@@ -0,0 +1,26 @@
+<section class="imprint">
+  <mat-card class="imprint-card">
+    <h2 class="imprint-title">{{ 'IMPRINT.TITLE' | translate }}</h2>
+
+    <div class="imprint-section">
+      <p class="imprint-label">{{ 'IMPRINT.PARAGRAPH' | translate }}</p>
+
+      <p>
+        Andreas Dahm<br />
+        Bgm.-Germeier-Str. 2<br />
+        85586 Poing<br />
+        {{ 'IMPRINT.COUNTRY' | translate }}
+      </p>
+    </div>
+
+    <div class="imprint-section">
+      <p class="imprint-label">{{ 'IMPRINT.CONTACT' | translate }}</p>
+      <p>
+        E-Mail:
+        <a href="mailto:andreas&#46;dahm&#64;gmail&#46;com">
+          andreas&#46;dahm&#64;gmail&#46;com
+        </a>
+      </p>
+    </div>
+  </mat-card>
+</section>

src/app/pages/imprint/imprint.component.scss

@@ -0,0 +1,40 @@
+.imprint {
+  display: grid;
+  gap: 1rem;
+}
+
+.imprint-card {
+  padding: 1.25rem 1.5rem;
+}
+
+.imprint-title {
+  margin: 0 0 1rem;
+  font-size: 1.1rem;
+  font-weight: 600;
+}
+
+.imprint-section {
+  display: grid;
+  gap: 0.25rem;
+
+  &:not(:last-child) {
+    margin-bottom: 1rem;
+  }
+}
+
+.imprint-label {
+  font-size: 0.75rem;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  opacity: 0.7;
+  margin: 0;
+}
+
+a {
+  color: var(--mat-primary);
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}

src/app/pages/imprint/imprint.component.ts

@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+import {MatCard} from '@angular/material/card';
+import {TranslatePipe} from '@ngx-translate/core';
+import {MatIcon} from '@angular/material/icon';
+import {SharedFunctions} from '../../shared/SharedFunctions';
+
+@Component({
+  selector: 'app-imprint',
+  imports: [
+    MatCard,
+    TranslatePipe,
+    MatIcon
+  ],
+  templateUrl: './imprint.component.html',
+  styleUrl: './imprint.component.scss',
+})
+export class ImprintComponent {
+
+  protected readonly SharedFunctions = SharedFunctions;
+}

src/app/shared/SharedFunctions.ts

@@ -0,0 +1,10 @@
+
+export class SharedFunctions {
+  static openMail(event?: Event) {
+    event?.preventDefault();
+    const user = 'andreas.dahm';
+    const domain = 'gmail.com';
+    globalThis.location.href = `mailto:${user}@${domain}`;
+  }
+
+}