Update Angular and dependencies, add sponsor logos

Upgraded Angular packages and related dependencies to version 20.3.14 and updated several @inquirer and other dependencies. Added new sponsor logos to the assets folder and updated the About page to display them, including changes to constants, HTML, SCSS, TypeScript, and i18n files. Minor style and content adjustments were made to the About page.

package.json

@@ -10,26 +10,26 @@
   },
   "private": true,
   "dependencies": {
-    "@angular-devkit/build-angular": "~20.3.9",
-    "@angular/animations": "20.3.10",
+    "@angular-devkit/build-angular": "~20.3.12",
+    "@angular/animations": "20.3.14",
     "@angular/cdk": "20.2.11",
-    "@angular/common": "20.3.10",
-    "@angular/compiler": "20.3.10",
-    "@angular/core": "20.3.10",
-    "@angular/forms": "20.3.10",
+    "@angular/common": "~20.3.14",
+    "@angular/compiler": "20.3.14",
+    "@angular/core": "20.3.14",
+    "@angular/forms": "~20.3.14",
     "@angular/material": "20.2.11",
-    "@angular/platform-browser": "20.3.10",
-    "@angular/router": "20.3.10",
+    "@angular/platform-browser": "~20.3.14",
+    "@angular/router": "~20.3.14",
     "@ngx-translate/core": "~17.0.0",
     "@ngx-translate/http-loader": "~17.0.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0"
   },
   "devDependencies": {
-    "@angular/build": "20.3.9",
-    "@angular/cli": "20.3.9",
-    "@angular/compiler-cli": "20.3.10",
-    "@angular/platform-browser-dynamic": "20.3.10",
+    "@angular/build": "20.3.12",
+    "@angular/cli": "20.3.12",
+    "@angular/compiler-cli": "20.3.14",
+    "@angular/platform-browser-dynamic": "~20.3.14",
     "@types/jasmine": "~5.1.0",
     "jasmine-core": "~5.9.0",
     "karma": "~6.4.0",

src/app/constants/AssetsConstants.ts

@@ -4,4 +4,12 @@
   static readonly LOGO  = '/assets/favicon.ico';
   static readonly FLAG_DE  = '/assets/flags/de.svg';
   static readonly FLAG_EN  = '/assets/flags/gb.svg';
+
+  //logos
+  static readonly TH_BINGEN_LOGO = '/assets/logos/assyst_gmbh_logo.jpg';
+  static readonly ASSYST_LOG = '/assets/logos/bingen-logo-white.svg';
+  static readonly COLORDIGITAL_LOGO = '/assets/logos/dmixcloud_logo.jpg';
+  static readonly TERAPORT_LOGO = '/assets/logos/teraport_gmbh_logo.jpg';
+
+  static readonly CV: 'assets/cv/andreas-dahm-cv.pdf';
 }

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

@@ -78,6 +78,84 @@
   <mat-card class="experience">
     <h2>{{ 'ABOUT.SECTION.EXPERIENCE' | translate }}</h2>
 
+
+    <div class="xp-list">
+      @for (entry of xpKeys; track entry) {
+        <div class="xp-item">
+          <div class="xp-head-grid">
+            <div class="logo-wrap">
+              <img
+                src="{{entry.logo}}"
+                alt=""
+                class="company-logo"
+                aria-hidden="true"
+              />
+            </div>
+            <div class="head-row">
+              <strong>{{ (entry.key + '.ROLE') | translate }}</strong>
+              <span class="time">{{ (entry.key + '.TIME') | translate }}</span>
+              <div class="company-row">
+                {{ (entry.key + '.COMPANY') | translate }}
+              </div>
+            </div>
+
+            <div class="company-row">
+              {{ (entry.key + '.COMPANY') | translate }}
+            </div>
+
+          </div>
+          <div class="highlights">
+            <ul>
+              <li>{{ entry.key + '.HIGHLIGHTS.P1' | translate }}</li>
+              <li>{{ entry.key + '.HIGHLIGHTS.P2' | translate }}</li>
+              <li>{{ entry.key + '.HIGHLIGHTS.P3' | translate }}</li>
+            </ul>
+          </div>
+        </div>
+
+        @if(entry.key !== xpKeys.at(xpKeys.length-1)?.key)
+        {
+          <mat-divider></mat-divider>
+        }
+      }
+    </div>
+  </mat-card>
+  <mat-card class="projects">
+    <h2>{{ 'ABOUT.SECTION.PROJECTS' | translate }}</h2>
+
+    <div class="xp-list">
+      <div class="xp-item">
+        <div class="xp-head">
+          <strong>{{ 'ABOUT.XP.T1.ROLE' | translate }}</strong>
+          <span class="time">{{ 'ABOUT.XP.T1.TIME' | translate }}</span>
+        </div>
+        <div class="xp-sub">{{ 'ABOUT.XP.T1.COMPANY' | translate }}</div>
+        <ul>
+          <li>{{ 'ABOUT.XP.T1.P1' | translate }}</li>
+          <li>{{ 'ABOUT.XP.T1.P2' | translate }}</li>
+          <li>{{ 'ABOUT.XP.T1.P3' | translate }}</li>
+        </ul>
+      </div>
+
+      <mat-divider></mat-divider>
+
+      <div class="xp-item">
+        <div class="xp-head">
+          <strong>{{ 'ABOUT.XP.T2.ROLE' | translate }}</strong>
+          <span class="time">{{ 'ABOUT.XP.T2.TIME' | translate }}</span>
+        </div>
+        <div class="xp-sub">{{ 'ABOUT.XP.T2.COMPANY' | translate }}</div>
+        <ul>
+          <li>{{ 'ABOUT.XP.T2.P1' | translate }}</li>
+          <li>{{ 'ABOUT.XP.T2.P2' | translate }}</li>
+        </ul>
+      </div>
+    </div>
+  </mat-card>
+
+  <mat-card class="education">
+    <h2>{{ 'ABOUT.SECTION.EDUCATION' | translate }}</h2>
+
     <div class="xp-list">
       <div class="xp-item">
         <div class="xp-head">

src/app/pages/about/about.component.scss

@@ -37,7 +37,7 @@
     }
 
     .actions {
-      display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.5rem;  margin-bottom: .25rem;
+      display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.5rem;  margin-bottom: 1rem;
       .mat-icon { margin-right:.25rem; }
     }
   }
@@ -46,6 +46,7 @@
 /* Skills block */
 .skills {
   border-radius: 16px;
+  padding: 5px;
   background: var(--app-card-background);
   h2 { margin-top: .25rem; margin-left: .25rem; }
   .chip-groups {
@@ -62,6 +63,47 @@
 /* Experience block */
 .experience {
   border-radius: 16px;
+  padding: 5px;
+  background: var(--app-card-background);
+  h2 { margin-top: .25rem;margin-left: .25rem; }
+  .xp-list {
+    margin-left: .25rem;
+    display: grid; gap: .75rem;
+  }
+  .xp-item {
+    .xp-head {
+      display:flex; align-items:baseline; gap:.5rem;
+      .time { opacity:.75; font-size:.9rem; }
+    }
+    .xp-sub { opacity:.9; margin-bottom:.25rem; }
+    ul { margin: .25rem 0 .5rem 1.15rem; }
+  }
+}
+
+/* Experience block */
+.projects {
+  border-radius: 16px;
+  padding: 5px;
+  background: var(--app-card-background);
+  h2 { margin-top: .25rem;margin-left: .25rem; }
+  .xp-list {
+    margin-left: .25rem;
+    display: grid; gap: .75rem;
+  }
+  .xp-item {
+    .xp-head {
+      display:flex; align-items:baseline; gap:.5rem;
+      .time { opacity:.75; font-size:.9rem; }
+    }
+    .xp-sub { opacity:.9; margin-bottom:.25rem; }
+    ul { margin: .25rem 0 .5rem 1.15rem; }
+  }
+}
+
+/* Experience block */
+.education {
+  border-radius: 16px;
+  padding: 5px;
   background: var(--app-card-background);
   h2 { margin-top: .25rem;margin-left: .25rem; }
   .xp-list {
@@ -84,3 +126,59 @@
   .hero .photo { justify-content: flex-start; }
   .skills .chip-groups { grid-template-columns: 1fr; }
 }
+
+.xp-head-grid {
+  display: grid;
+  grid-template-columns: calc(48px + .75rem) 1fr; /* 1: Logo, 2: Text */
+  grid-template-rows: auto auto;   /* 1: Role/Time, 2: Company */
+  column-gap: .75rem;
+}
+
+.logo-wrap {
+  grid-row: 1 / span 2;
+  grid-column: 1;
+  display: flex;
+  align-items: center;
+}
+
+.company-logo {
+  width: 48px;
+  height: 48px;
+  object-fit: contain;
+  opacity: .9;
+  background-color: var(--app-logo-bg);
+}
+
+
+.head-row {
+  grid-row: 1;
+  grid-column: 2;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: .5rem 1rem;
+
+  strong {
+    font-size: 1rem;
+  }
+  .time  {
+    opacity: .75; font-size: .9rem;
+  }
+}
+
+.company-row {
+  grid-row: 2;
+  grid-column: 2;
+  margin-top: .1rem;
+  opacity: .85;
+}
+
+.highlights {
+  margin-top: .4rem;
+  margin-left: .75rem;
+  padding-left: 1.2rem;
+
+  li {
+    margin: .2rem 0;
+  }
+}

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

@@ -1,4 +1,4 @@
-import { Component, inject } from '@angular/core';
+import { Component} from '@angular/core';
 import { CommonModule, NgOptimizedImage } from '@angular/common';
 import { MatCardModule } from '@angular/material/card';
 import { MatChipsModule } from '@angular/material/chips';
@@ -23,7 +23,42 @@ import {AssetsConstants} from '../../constants/AssetsConstants';
   styleUrl: './about.component.scss'
 })
 export class AboutComponent {
-  cvHref = 'assets/cv/andreas-dahm-cv.pdf';
+  cvHref = AssetsConstants.CV;
+
+  xpKeys = [
+    {
+      key: 'ABOUT.XP.COMPANY7',
+      logo: AssetsConstants.TERAPORT_LOGO
+    },
+    {
+      key: 'ABOUT.XP.COMPANY6',
+      logo: AssetsConstants.COLORDIGITAL_LOGO
+    },
+    {
+      key: 'ABOUT.XP.COMPANY5',
+      logo: AssetsConstants.COLORDIGITAL_LOGO
+    },
+    {
+      key: 'ABOUT.XP.COMPANY4',
+      logo: AssetsConstants.ASSYST_LOG
+    },
+    {
+      key: 'ABOUT.XP.COMPANY3',
+      logo: AssetsConstants.ASSYST_LOG
+    },
+    {
+      key: 'ABOUT.XP.COMPANY2',
+      logo: AssetsConstants.ASSYST_LOG
+    },
+    {
+      key: 'ABOUT.XP.COMPANY1',
+      logo: AssetsConstants.TH_BINGEN_LOGO
+    },
+    {
+      key: 'ABOUT.XP.COMPANY0',
+      logo: AssetsConstants.TH_BINGEN_LOGO
+    }
+  ];
 
   primarySkills = [
     'ABOUT.SKILLS.JAVA',
@@ -46,8 +81,6 @@ export class AboutComponent {
     'ABOUT.TOOLS.GRAFANA',
   ];
 
-
-
   openMail(event: Event) {
     event.preventDefault();
     const user = 'andreas.dahm';

src/assets/i18n/de.json

@@ -49,13 +49,84 @@
       "GRAFANA": "Grafana/Prometheus"
     },
     "XP": {
-      "T1": {
+      "COMPANY7": {
         "COMPANY": "Teraport GmbH",
         "ROLE": "Senior Software Developer / Architect",
         "TIME": "Feb. 2024 – heute",
         "HIGHLIGHTS": {
-          "P1": "Architecture and implementation of database connectivity using Hibernate 6.x.",
-          "P2": "Design and development of a full-stack web application for collision analysis (Angular + Spring Boot + Docker)."
+          "P1": "Architektur und Implementierung der Datenbankanbindung mit Hibernate 6.x.",
+          "P2": "Konzeption und Entwicklung einer Full-Stack-Webanwendung für Kollisionsanalysen (Angular + Spring Boot + Docker).",
+          "P3": "Entwicklung eines Kostenanalysetools mit dem Namen MIDO."
+        }
+      },
+      "COMPANY6": {
+        "COMPANY": "ColorDigital GmbH",
+        "ROLE": "Lead Software Developer",
+        "TIME": "März 2023 – Dez. 2023",
+        "HIGHLIGHTS": {
+          "P1": "Planung einer neuen Cloud-Architektur zur Migration eines umfangreichen Legacy-Monolithen in eine moderne Microservice-Plattform.",
+          "P2": "Leitung eines Teams von drei bis vier Backend-Entwickler:innen.",
+          "P3": "Zusammenarbeit mit Partnern und Kund:innen bei der Integration ihrer Systeme in die DMIx-Cloud."
+        }
+      },
+      "COMPANY5": {
+        "COMPANY": "ColorDigital GmbH",
+        "ROLE": "Senior Software Developer",
+        "TIME": "März 2021 – März 2023",
+        "HIGHLIGHTS": {
+          "P1": "Arbeit an der DMIx-Core-Cloud, darunter die Implementierung einer Elasticsearch-basierten Echtzeit-Suchfunktion.",
+          "P2": "Implementierung des neuen Browser-Tools „Moodboard“ (Node.js + Vue.js).",
+          "P3": "Entwicklung von „PAX“, einem Tool für den Datenaustausch zwischen der DMIx-Cloud und PLM/ERP-Systemen, inkl. CI/CD-Integration."
+        }
+      },
+      "COMPANY4": {
+        "COMPANY": "Assyst GmbH",
+        "ROLE": "Teamleitung",
+        "TIME": "Sep. 2015 – Feb. 2021",
+        "HIGHLIGHTS": {
+          "P1": "Teamleitung der Vidya-Softwareabteilung, inkl. Personalverantwortung und Bewerbungsprozesse.",
+          "P2": "Leitung mehrerer Projekte mit externen Partnern und Freelancer:innen.",
+          "P3": "Steuerung strategischer Initiativen im Bereich 3D-Softwareentwicklung."
+        }
+      },
+      "COMPANY3": {
+        "COMPANY": "Assyst GmbH",
+        "ROLE": "Software Engineer",
+        "TIME": "Apr. 2010 – Feb. 2021",
+        "HIGHLIGHTS": {
+          "P1": "Arbeit an Kerntechnologien wie Algorithmen, Simulation, Rendering und Kollisions­erkennung.",
+          "P2": "Einsatz verschiedener Technologien, u. a. Java, OpenCL, OpenGL, GLSL-Shader, C++ und REST-Schnittstellen.",
+          "P3": "Mitarbeit an nationalen und internationalen Forschungsprojekten (EU7 und ZIM)."
+        }
+      },
+      "COMPANY2": {
+        "COMPANY": "Assyst GmbH",
+        "ROLE": "Praktikum und Diplomarbeit",
+        "TIME": "Apr. 2009 – Apr. 2010",
+        "HIGHLIGHTS": {
+          "P1": "Implementierung produktiver Funktionen in der Echtzeit-Kleidersimulationssoftware Vidya.",
+          "P2": "Durchführung von Recherchen und Literaturstudien für die Diplomarbeit.",
+          "P3": "Erfolgreiche Umsetzung des Diplomthemas in Vidya."
+        }
+      },
+      "COMPANY1": {
+        "COMPANY": "TH Bingen (University of Applied Sciences)",
+        "ROLE": "Tutor für Grundlagen der Java-Programmierung",
+        "TIME": "Apr. 2008 – Aug. 2008",
+        "HIGHLIGHTS": {
+          "P1": "Erstellung praktischer und theoretischer Lehrmaterialien.",
+          "P2": "Durchführung einer 20-stündigen Vorlesungsreihe für den Bioinformatik-Studiengang.",
+          "P3": "Unterstützung bei praktischen Programmierübungen."
+        }
+      },
+      "COMPANY0": {
+        "COMPANY": "TH Bingen (University of Applied Sciences)",
+        "ROLE": "Wissenschaftliche Hilfskraft",
+        "TIME": "Okt. 2007 – Apr. 2008",
+        "HIGHLIGHTS": {
+          "P1": "Evaluation verschiedener Web-2.0-Technologien.",
+          "P2": "Implementierung einer Java-basierten Schnittstelle zu Microsoft Excel.",
+          "P3": "Integration des MIT-Exhibit-Frameworks und Vorbereitung für die CeBIT 2008."
         }
       }
     }

src/assets/i18n/en.json

@@ -48,13 +48,84 @@
       "GRAFANA": "Grafana/Prometheus"
     },
     "XP": {
-      "T1": {
+      "COMPANY7": {
         "COMPANY": "Teraport GmbH",
         "ROLE": "Senior Software Developer / Architect",
-        "TIME": "Feb. 2024 – heute",
+        "TIME": "Feb. 2024 – now",
         "HIGHLIGHTS": {
           "P1": "Architecture and implementation of database connectivity using Hibernate 6.x.",
-          "P2": "Design and development of a full-stack web application for collision analysis (Angular + Spring Boot + Docker)."
+          "P2": "Design and development of a full-stack web application for collision analysis (Angular + Spring Boot + Docker).",
+          "P3": "Development of a cost analysis tool called MIDO."
+        }
+      },
+      "COMPANY6": {
+        "COMPANY": "ColorDigital GmbH",
+        "ROLE": "Lead Software Developer",
+        "TIME": "Mar. 2023 – Dec. 2023",
+        "HIGHLIGHTS": {
+          "P1": "Planning a new cloud architecture to migrate a large legacy monolith to a modern microservice-based platform.",
+          "P2": "Led the development team of three to four backend engineers.",
+          "P3": "Collaborated with partners and customers on integrating their systems with the DMIx"
+        }
+      },
+      "COMPANY5": {
+        "COMPANY": "ColorDigital GmbH",
+        "ROLE": "Senior Software Developer",
+        "TIME": "Mar. 2021 – Mar. 2023",
+        "HIGHLIGHTS": {
+          "P1": "Worked on the DMIx core cloud, including the implementation of an Elasticsearch-based real-time search module.",
+          "P2": "Implementation of a new browser tool called 'Moodboard' (Node.js + Vue.js).",
+          "P3": "Development of 'PAX', a tool for data exchange between the DMIx cloud and customer PLM/ERP systems, including CI/CD integration."
+        }
+      },
+      "COMPANY4": {
+        "COMPANY": "Assyst GmbH",
+        "ROLE": "Team leadership",
+        "TIME": "Sep. 2015 – Feb. 2021",
+        "HIGHLIGHTS": {
+          "P1": "Team lead of the Vidya software department, including disciplinary responsibility and interviews.",
+          "P2": "Led several projects with external partners and freelancers.",
+          "P3": "Managed strategic initiatives in 3D software development."
+        }
+      },
+      "COMPANY3": {
+        "COMPANY": "Assyst GmbH",
+        "ROLE": "Software engineer",
+        "TIME": "Apr. 2010 – Feb. 2021",
+        "HIGHLIGHTS": {
+          "P1": "Worked on core technologies such as algorithms, simulation, rendering, and collision detection.",
+          "P2": "Used technologies including Java, OpenCL, OpenGL, GLSL shaders, C++, and REST interfaces.",
+          "P3": "Participated in national and international research projects (EU7 and ZIM)."
+        }
+      },
+      "COMPANY2": {
+        "COMPANY": "Assyst GmbH",
+        "ROLE": "Internship and Diploma",
+        "TIME": "Apr. 2009 – Apr. 2010",
+        "HIGHLIGHTS": {
+          "P1": "Implemented production features in the real-time cloth simulation software Vidya.",
+          "P2": "Conducted research and literature review for the diploma thesis.",
+          "P3": "Successfully implemented the diploma topic in Vidya."
+        }
+      },
+      "COMPANY1": {
+        "COMPANY": "TH bingen (University of Applied Sciences)",
+        "ROLE": "Tutorial for fundamentals of Java programming",
+        "TIME": "Apr. 2008 – Aug. 2008",
+        "HIGHLIGHTS": {
+          "P1": "Preparation of practical and theoretical course material.",
+          "P2": "Held a 20-hour lecture series for the bioinformatics programme.",
+          "P3": "Provided assistance during practical programming exercises."
+        }
+      },
+      "COMPANY0": {
+        "COMPANY": "TH bingen (University of Applied Sciences)",
+        "ROLE": "Research Asssitent",
+        "TIME": "Oct. 2007 – Apr. 2008",
+        "HIGHLIGHTS": {
+          "P1": "Evaluation of various Web 2.0 technologies.",
+          "P2": "Implementation of a Java-based interface for Microsoft Excel.",
+          "P3": "Integration of the MIT Exhibit framework and preparation for CeBIT 2008."
         }
       }
     }

src/assets/logos/bingen-logo-white.svg

@@ -0,0 +1,19 @@
+<svg width="167" height="56" viewBox="0 0 167 56" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+    <g clip-path="url(#clip0_1140_148)">
+        <path d="M126.544 13.3578H166.645L161.975 0.308258L126.544 13.3578Z" fill="white" />
+        <path
+            d="M9.2383 53.3798C8.37538 53.3798 8.07082 52.7633 8.07082 51.7871V48.4991H6.9541V52.1468C6.9541 53.6881 7.81702 54.3046 9.2383 54.3046C10.6596 54.3046 11.5225 53.6881 11.5225 52.1468V48.4991H10.4058V51.7871C10.4058 52.7633 10.1012 53.3798 9.2383 53.3798ZM12.7915 49.989V54.2018H13.8574V52.1468C13.8574 51.633 14.0097 50.7596 14.8219 50.7596C15.5325 50.7596 15.5325 51.4789 15.5325 51.9926V54.2532H16.5985V51.5816C16.5985 50.6569 16.1924 49.9376 15.1772 49.9376C14.6188 49.9376 14.162 50.1431 13.8067 50.6055V50.0404H12.7915V49.989ZM17.8167 49.989H18.8827V54.2018H17.8167V49.989ZM17.8167 48.1394H18.8827V49.167H17.8167V48.1394ZM23.9079 49.989H22.7912L21.8267 53.0202H21.776L20.7608 49.989H19.5933L21.1669 54.2018H22.3851L23.9079 49.989ZM26.1413 49.8862C24.8723 49.8862 24.2125 50.9137 24.2125 52.0954C24.2125 53.4826 25.0246 54.2532 26.3951 54.2532C26.9535 54.2532 27.4103 54.1504 27.8164 53.8936V53.0202C27.4103 53.2257 26.9535 53.4312 26.4459 53.4312C25.786 53.4312 25.3292 53.0715 25.2784 52.3523H28.1717C28.121 50.9651 27.7149 49.8862 26.1413 49.8862ZM25.2784 51.6844C25.3292 51.1193 25.6337 50.7082 26.2429 50.7082C26.852 50.7082 27.1058 51.1706 27.1058 51.6844H25.2784ZM29.0854 49.989V54.2018H30.1514V52.6605C30.1514 52.044 30.1514 50.9651 31.0143 50.9651C31.2173 50.9651 31.4204 51.0165 31.5219 51.0679V49.989C31.4204 49.9376 31.3188 49.9376 31.1666 49.9376C30.5067 49.9376 30.1006 50.6055 30.0498 51.0165V50.0404H29.0854V49.989ZM33.9076 50.6569C34.3137 50.6569 34.5675 50.7082 34.872 50.8624L34.9228 50.0404C34.5675 49.989 34.2629 49.8862 33.7553 49.8862C32.8924 49.8862 32.131 50.2972 32.131 51.1706C32.131 52.7119 34.0091 52.1468 34.0091 52.9688C34.0091 53.3798 33.5523 53.4826 33.2985 53.4826C32.9432 53.4826 32.5878 53.3798 32.2325 53.2257L32.1818 54.1504C32.5878 54.2532 32.9939 54.3046 33.4 54.3046C34.2629 54.3046 35.1258 53.8936 35.1258 52.9174C35.1258 51.3761 33.2477 51.8385 33.2477 51.1706C33.2477 50.811 33.603 50.6569 33.9076 50.6569ZM36.0903 49.989H37.1562V54.2018H36.0903V49.989ZM36.0903 48.1394H37.1562V49.167H36.0903V48.1394Z"
+            fill="white" />
+        <path
+            d="M38.679 52.9174C38.679 53.7394 39.1359 54.3046 39.9988 54.3046C40.3034 54.3046 40.5572 54.2532 40.811 54.2018L40.7602 53.3284C40.6587 53.3798 40.4556 53.4312 40.2526 53.4312C39.8465 53.4312 39.745 53.0715 39.745 52.7119V50.7596H40.7094V49.9376H39.745V48.756L38.679 49.1156V49.9376H37.8669V50.7596H38.679V52.9174ZM44.0088 54.1504L45.5824 49.989H44.4657L43.4505 53.0715L42.4353 49.989H41.217L42.7906 54.4073C42.7906 54.8697 42.5368 55.178 42.08 55.178C41.8262 55.178 41.6739 55.178 41.5216 55.1266L41.4708 55.9486C41.5724 56 41.7246 56 41.8262 56.0514H42.486C43.4505 55.8459 43.7043 54.9725 44.0088 54.1504Z"
+            fill="white" />
+        <path
+            d="M48.1711 52.0954C48.1711 53.3284 48.9833 54.2532 50.3538 54.2532C51.7243 54.2532 52.5365 53.2771 52.5365 52.0954C52.5365 50.7083 51.572 49.8862 50.3538 49.8862C49.1356 49.8862 48.1711 50.7083 48.1711 52.0954ZM51.4198 51.9927C51.4198 52.7119 51.2167 53.4312 50.3538 53.4312C49.5416 53.4312 49.2878 52.6606 49.2878 51.9927C49.2878 51.3761 49.6432 50.7596 50.3538 50.7596C51.0644 50.7083 51.4198 51.3248 51.4198 51.9927ZM55.379 48.8073C55.6328 48.8073 55.7343 48.9101 55.8359 48.9615L55.9374 48.0367C55.7343 47.9853 55.4298 47.9339 55.1252 47.9339C54.2623 47.9339 53.8055 48.4991 53.8055 49.3725V49.9376H52.9933V50.7596H53.8055V54.1505H54.8714V50.7596H55.8359V49.9376H54.8714V49.4239C54.9222 49.1156 55.0237 48.8073 55.379 48.8073ZM60.5058 48.4991L58.3231 54.2018H59.4906L59.9982 52.9174H62.2824L62.79 54.2018H64.059L61.8255 48.4991H60.5058ZM60.3027 51.9927L61.1149 49.6294L61.9271 51.9927H60.3027ZM64.7696 49.989V55.8973H65.8356V53.6881C66.1909 54.1505 66.597 54.2532 67.0538 54.2532C68.3736 54.2532 68.8304 53.1743 68.8304 52.044C68.8304 50.8624 68.3736 49.8349 67.1046 49.8349C66.4447 49.8349 66.0386 50.1431 65.8356 50.5541V49.9376H64.7696V49.989ZM66.8508 50.7083C67.5614 50.7083 67.7644 51.4789 67.7644 52.044C67.7644 52.6092 67.5614 53.4312 66.8508 53.4312C66.1401 53.4312 65.8863 52.6606 65.8863 52.044C65.8356 51.4789 66.1401 50.7083 66.8508 50.7083ZM72.1298 54.3046C73.4496 54.3046 73.9064 53.2257 73.9064 52.0954C73.9064 50.9138 73.4495 49.8862 72.1805 49.8862C71.5207 49.8862 71.1146 50.1945 70.9116 50.6055V49.989H69.8964V55.8973H70.9623V53.6881C71.2669 54.1505 71.673 54.3046 72.1298 54.3046ZM71.876 50.7083C72.5866 50.7083 72.7897 51.4789 72.7897 52.044C72.7897 52.6092 72.5866 53.4312 71.876 53.4312C71.1654 53.4312 70.9116 52.6606 70.9116 52.044C70.9116 51.4789 71.1654 50.7083 71.876 50.7083ZM74.8708 48.0367V54.2018H75.9368V48.0367H74.8708ZM77.155 49.989H78.221V54.2018H77.155V49.989ZM77.155 48.1395H78.221V49.167H77.155V48.1395ZM81.1143 49.8862C79.8453 49.8862 79.1854 50.9138 79.1854 52.0954C79.1854 53.4826 79.9976 54.2532 81.3681 54.2532C81.9265 54.2532 82.3833 54.1505 82.7894 53.8936V53.0202C82.3833 53.2257 81.9264 53.4312 81.4188 53.4312C80.759 53.4312 80.3021 53.0716 80.2514 52.3523H83.1447C83.0939 50.9651 82.6879 49.8862 81.1143 49.8862ZM80.2514 51.6844C80.3021 51.1193 80.6067 50.7083 81.2158 50.7083C81.8249 50.7083 82.0787 51.1706 82.0787 51.6844H80.2514ZM87.9161 54.2018V48.0881H86.7994V50.5028C86.4948 50.0917 86.0888 49.9376 85.5812 49.9376C84.3122 49.9376 83.8553 50.9651 83.8553 52.1468C83.8553 53.2771 84.3122 54.356 85.5812 54.356C86.0888 54.356 86.5456 54.2018 86.8502 53.7908V54.2532H87.9161V54.2018ZM85.8857 53.4312C85.1751 53.4312 84.972 52.6606 84.972 52.044C84.972 51.4789 85.1751 50.7083 85.8857 50.7083C86.5964 50.7083 86.8502 51.4789 86.8502 52.044C86.7994 52.6606 86.5964 53.4312 85.8857 53.4312ZM92.6368 53.3798C92.1799 53.3798 91.7231 53.2257 91.3678 53.0202L91.2663 54.0477C91.8246 54.2018 92.0784 54.2532 92.6875 54.2532C93.8043 54.2532 94.8195 53.7908 94.8195 52.5064C94.8195 50.6055 92.3322 51.0165 92.3322 50.0404C92.3322 49.4239 92.8398 49.2697 93.1951 49.2697C93.6012 49.2697 94.0073 49.3725 94.3626 49.5266L94.4641 48.6018C94.0581 48.4477 93.6012 48.3963 93.0936 48.3963C92.0784 48.3963 91.114 48.8587 91.114 50.1431C91.114 52.044 93.6012 51.5817 93.6012 52.6606C93.652 53.1743 93.0936 53.3798 92.6368 53.3798ZM97.8143 50.7083C98.1696 50.7083 98.3727 50.7596 98.5249 50.8624L98.6264 49.989C98.3219 49.8862 98.0173 49.8349 97.5605 49.8349C96.2407 49.8349 95.5301 50.811 95.5301 51.9927C95.5301 53.2771 96.2407 54.2018 97.5605 54.2018C98.0173 54.2018 98.3219 54.1505 98.6264 54.0477L98.5757 53.1229C98.3727 53.2257 98.0681 53.3284 97.7635 53.3284C97.0021 53.3284 96.6468 52.7119 96.6468 51.9413C96.6976 51.2734 97.1544 50.7083 97.8143 50.7083ZM99.5909 49.989H100.657V54.2018H99.5909V49.989ZM99.5909 48.1395H100.657V49.167H99.5909V48.1395ZM103.55 49.8862C102.281 49.8862 101.621 50.9138 101.621 52.0954C101.621 53.4826 102.433 54.2532 103.804 54.2532C104.362 54.2532 104.819 54.1505 105.225 53.8936V53.0202C104.819 53.2257 104.362 53.4312 103.855 53.4312C103.195 53.4312 102.738 53.0716 102.687 52.3523H105.581C105.53 50.9651 105.073 49.8862 103.55 49.8862ZM102.636 51.6844C102.687 51.1193 102.992 50.7083 103.601 50.7083C104.21 50.7083 104.464 51.1706 104.464 51.6844H102.636ZM110.301 54.2018V51.5303C110.301 50.6055 109.895 49.8862 108.88 49.8862C108.322 49.8862 107.865 50.0917 107.509 50.5541V49.989H106.494V54.2018H107.56V52.1468C107.56 51.633 107.712 50.7596 108.525 50.7596C109.235 50.7596 109.235 51.4789 109.235 51.9927V54.2532H110.301V54.2018ZM113.448 50.7083C113.804 50.7083 114.007 50.7596 114.159 50.8624L114.26 49.989C113.956 49.8862 113.651 49.8349 113.195 49.8349C111.875 49.8349 111.164 50.811 111.164 51.9927C111.164 53.2771 111.875 54.2018 113.195 54.2018C113.651 54.2018 113.956 54.1505 114.26 54.0477L114.21 53.1229C114.007 53.2257 113.702 53.3284 113.398 53.3284C112.636 53.3284 112.281 52.7119 112.281 51.94Line truncated
+            fill="white" />
+    </g>
+    <defs>
+        <clipPath id="clip0_1140_148">
+            <rect width="167" height="56" fill="white" />
+        </clipPath>
+    </defs>
+</svg>

src/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>PlaygroundFrontend</title>
+  <title>Andreas Dahm - Playground</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="assets/favicon.ico">

src/styles.scss

@@ -26,11 +26,13 @@ $dark-theme: mat.define-theme((
   --app-bg: #{mat.get-theme-color($light-theme, surface-container-low)};
   --app-fg: #{mat.get-theme-color($light-theme, on-surface)};
   --app-card-background: #fafafa;
+  --app-logo-bg: #313131;
 }
 .dark {
   --app-bg: #{mat.get-theme-color($dark-theme, surface-container-low)};
   --app-fg: #{mat.get-theme-color($dark-theme, on-surface)};
   --app-card-background: #313131;
+  --app-logo-bg: #313131;
 }
 
 /* ---- global background and tests ---- */