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}`;
+  }
+
+}

src/assets/i18n/de.json

@@ -5,7 +5,7 @@
   },
   "TOPBAR": {
     "ABOUT": "Über mich",
-    "CONTACT": "Kontakt",
+    "IMPRINT": "Impressum",
     "PROJECTS": "Projekte",
     "HOBBY": "Hobbies",
     "SETTINGS": "Einstellungen",
@@ -247,5 +247,11 @@
       "SHORT_DESCRIPTION": "Kollisionserkennung und Behandlung von komplexen Kleidungsstücken.",
       "INTRODUCTION": "Die Diplomarbeit handelt von der Erkennung und der Behandlung von Kollisionen zwischen, sowie innerhalb, einzelnen Kleidungsstücken in Echtzeit. Das ist gerade aufgrund der Flexibilität von Stoffen und deren unterschiedlichen Eigenschaften besonders herausfordernd."
     }
+  },
+  "IMPRINT": {
+    "TITLE" : "Impressum",
+    "PARAGRAPH": "Angaben gemäß § 5 DDG",
+    "COUNTRY": "Deutschland",
+    "CONTACT": "Kontakt"
   }
 }

src/assets/i18n/en.json

@@ -5,7 +5,7 @@
   },
   "TOPBAR": {
     "ABOUT": "About me",
-    "CONTACT": "Contact",
+    "IMPRINT": "Impressum",
     "PROJECTS": "Projects",
     "HOBBY": "Hobby's",
     "SETTINGS": "Settings",
@@ -247,5 +247,11 @@
       "SHORT_DESCRIPTION": "Collision detection and handling of complex garments.",
       "INTRODUCTION": "The thesis deals with the detection and handling of collisions between and within individual items of clothing in real time. This is particularly challenging due to the flexibility of fabrics and their varying properties."
     }
+  },
+  "IMPRINT": {
+    "TITLE" : "Imprint",
+    "PARAGRAPH": "Information pursuant to Section 5 DDG",
+    "COUNTRY": "Germany",
+    "CONTACT": "Contact"
   }
 }

src/assets/logos/github.svg

@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>

src/assets/logos/linkedIn.svg

@@ -0,0 +1 @@
+<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 50 50" width="50px" height="50px">    <path d="M41,4H9C6.24,4,4,6.24,4,9v32c0,2.76,2.24,5,5,5h32c2.76,0,5-2.24,5-5V9C46,6.24,43.76,4,41,4z M17,20v19h-6V20H17z M11,14.47c0-1.4,1.2-2.47,3-2.47s2.93,1.07,3,2.47c0,1.4-1.12,2.53-3,2.53C12.2,17,11,15.87,11,14.47z M39,39h-6c0,0,0-9.26,0-10 c0-2-1-4-3.5-4.04h-0.08C27,24.96,26,27.02,26,29c0,0.91,0,10,0,10h-6V20h6v2.56c0,0,1.93-2.56,5.81-2.56 c3.97,0,7.19,2.73,7.19,8.26V39z"/></svg>

src/styles.scss

@@ -23,6 +23,7 @@ $dark-theme: mat.define-theme((
 
 /* ---- Custom variables ---- */
 :root {
+  --app-topbar-bg: #{mat.get-theme-color($light-theme, surface)};
   --app-bg: #{mat.get-theme-color($light-theme, surface-container-low)};
   --app-fg: #{mat.get-theme-color($light-theme, on-surface)};
   --app-logo-bg: #313131;
@@ -43,7 +44,8 @@ $dark-theme: mat.define-theme((
   --link-color-hover: #66bfff;
 }
 .dark {
-  --app-bg: #{mat.get-theme-color($dark-theme, surface-container-low)};
+  --app-topbar-bg: #{mat.get-theme-color($dark-theme, surface-container-highest)};
+  --app-bg:  #{mat.get-theme-color($dark-theme,surface-variant)};
   --app-fg: #{mat.get-theme-color($dark-theme, on-surface)};
   --app-card-background: #313131;
   --app-logo-bg: #313131;