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.
2025-11-29 11:56:30 +01:00
parent 5969e66872
commit 664aed47a6
14 changed files with 736 additions and 318 deletions
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/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",
--- a/src/app/constants/AssetsConstants.ts
+++ b/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';
 }
--- a/src/app/pages/about/about.component.html
+++ b/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">
--- a/src/app/pages/about/about.component.scss
+++ b/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;
+  }
+}
--- a/src/app/pages/about/about.component.ts
+++ b/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';
--- a/src/assets/i18n/de.json
+++ b/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 Kollisionserkennung.",
+          "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."
        }
      }
    }
--- a/src/assets/i18n/en.json
+++ b/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."
        }
      }
    }
--- a/src/assets/logos/assyst_gmbh_logo.jpg
+++ b/src/assets/logos/assyst_gmbh_logo.jpg
--- a/src/assets/logos/bingen-logo-white.svg
+++ b/src/assets/logos/bingen-logo-white.svg
--- a/src/assets/logos/dmixcloud_logo.jpg
+++ b/src/assets/logos/dmixcloud_logo.jpg
--- a/src/assets/logos/teraport_gmbh_logo.jpg
+++ b/src/assets/logos/teraport_gmbh_logo.jpg
--- a/src/index.html
+++ b/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">
--- a/src/styles.scss
+++ b/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 ---- */