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.

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';