Display multiple positions per job - refs #15

Co-authored-by: Sebastian Schreck <[email protected]> Co-authored-by: Sebastian Schreck <[email protected]> Co-authored-by: Sebastian Schreck <[email protected]> Co-authored-by: Sebastian Schreck <[email protected]>
StegSchreck · Oct 1, 2023 · 635eb00 · 635eb00
1 parent 403e257
commit 635eb00
Show file tree

Hide file tree

Showing 24 changed files with 6,414 additions and 4 deletions.
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -31,6 +31,7 @@ import { FeatureToggleService }     from './feature-toggle/feature-toggle.servic
 import { LocalizationService }      from './l10n/l10n.service';
 import { LocalizationComponent }    from './l10n/l10n.component';
 import {MatLineModule} from '@angular/material/core';
+import {MatBadgeModule} from '@angular/material/badge';
 
 @NgModule({
     imports: [
@@ -41,6 +42,7 @@ import {MatLineModule} from '@angular/material/core';
         BrowserAnimationsModule,
         MaterialModule,
         MatLineModule,
+        MatBadgeModule,
     ],
     declarations: [
         AppComponent,

diff --git a/src/app/cv-item/cv-item.component.css b/src/app/cv-item/cv-item.component.css
@@ -38,6 +38,10 @@ mat-card-content {
   padding-right: 16px;
 }
 
+mat-card.opened mat-card-content {
+  max-height: 1000px !important;
+}
+
 mat-card-subtitle {
   font-size: 1.2em;
 }
@@ -182,3 +186,94 @@ a[mat-button] {
 .tag-icon:before {
   color: unset;
 }
+
+.cv-item__positions {
+  margin: 24px 0 0 0;
+}
+
+.cv-item__positions span {
+  font-family: "Roboto Slab", serif;
+  font-size: 1.3em;
+  text-transform: uppercase;
+}
+
+.cv-item__position img {
+  display: block;
+  left: 80px;
+  position: absolute;
+}
+
+@media screen and (max-width: 600px) {
+  .cv-item__position {
+    margin-top: 12px;
+  }
+  .cv-item__position img {
+    display: none;
+  }
+}
+
+.cv-item__position__marker {
+  position: relative;
+  left: -16px;
+  top: 20px;
+  color: #888;
+  margin-right: 6px;
+}
+
+@media screen and (max-width: 600px) {
+  .cv-item__position__marker {
+    left: -13px;
+  }
+}
+
+@media screen and (max-width: 400px) {
+  .cv-item__position__marker {
+    left: -3px;
+  }
+}
+.cv-item__position__headline {
+  padding-right: 150px;
+  padding-left: 12px;
+  margin-bottom: 0;
+}
+.cv-item__position__title {
+  font-weight: bold;
+  box-decoration-break: clone;
+}
+.cv-item__position__subtitle {
+  color: #888;
+  box-decoration-break: clone;
+}
+
+.cv-item__position__timespan {
+  color: #888;
+  position: absolute;
+  right: 24px;
+  font-size: 0.9em;
+  display: block;
+}
+@media screen and (max-width: 600px) {
+  .cv-item__position__timespan {
+    position: relative;
+    left: -12px;
+    display: unset;
+  }
+  .cv-item__position__headline {
+    padding-right: unset;
+  }
+}
+
+@media screen and (max-width: 400px) {
+  .cv-item__position__timespan {
+    left: -6px;
+  }
+  .cv-item__position__headline {
+    padding-left: 18px;
+  }
+}
+.cv-item__position__timespan mat-icon {
+  position: relative;
+  top: 0;
+  font-size: 1.3em;
+  margin-right: 0.25em;
+}
diff --git a/src/app/cv-item/cv-item.component.html b/src/app/cv-item/cv-item.component.html
@@ -25,14 +25,46 @@
         {{tag}}
       </mat-chip>
     </mat-chip-set>
+    <div *ngIf="cvItem.positions !== undefined && cvItem.positions.length > 0" class="cv-item__positions">
+      <span>{{l10n.cv_item.positions}}</span>
+    </div>
+    <div *ngFor="let position of cvItem.positions" class="cv-item__position">
+      <span class="cv-item__position__marker">⬤</span>
+<!--      TODO: make thumbnail a feature toggle?-->
+<!--      <img src="assets/img/item-thumbnails/{{position.thumbnail}}" width="40px" alt="" *ngIf="position.thumbnail !== undefined && position.thumbnail !== ''">-->
+      <span class="cv-item__position__timespan">
+        <span class="cv-item__position__timespan-begin" *ngIf="position.begin !== undefined && position.begin !== ''">
+          {{position.begin}}
+          <mat-icon>arrow_forward</mat-icon>
+        </span>
+        <span class="cv-item__position__timespan-end" *ngIf="position.end !== undefined && position.end !== ''">{{position.end}}</span>
+        <span class="cv-item__position__timespan-end" *ngIf="!(position.end !== undefined && position.end !== '')">{{l10n.cv_item.now}} <mat-icon>access_time</mat-icon></span>
+      </span>
+      <p class="cv-item__position__headline">
+        <span class="cv-item__position__title">{{position.title}}</span><br>
+        <span class="cv-item__position__subtitle">{{position.subtitle}}</span>
+      </p>
+<!--      TODO: description -> click on info-i -> open modal? -->
+<!--      <p *ngIf="position.description !== undefined && position.description !== ''">-->
+<!--        {{position.description}}-->
+<!--      </p>-->
+
+<!--      TODO: tags -->
+<!--      <mat-chip-set *ngIf="position.tags !== undefined && position.tags.length > 0">-->
+<!--        <mat-chip *ngFor="let tag of position.tags">-->
+<!--          <i matListItemIcon class="tag-icon icon-{{tag.toLowerCase()}}" *ngIf="tag !== undefined && tag !== ''"></i>-->
+<!--          {{tag}}-->
+<!--        </mat-chip>-->
+<!--      </mat-chip-set>-->
+    </div>
   </mat-card-content>
 
   <button mat-icon-button class="toggle-details" color="primary" (click)="toggleDetails($event)"
           *ngIf="(cvItem.description !== undefined && cvItem.description !== '')
            || (cvItem.tags !== undefined && cvItem.tags.length > 0)
            || cvItem.link !== undefined && cvItem.link !== ''
            || cvItem.attachment !== undefined && cvItem.attachment !== ''">
-    <mat-icon aria-label="toggle details"></mat-icon>
+    <mat-icon aria-label="toggle details" [matBadge]="cvItem.positions ? cvItem.positions.length : 0" matBadgeColor="primary" [matBadgeHidden]="!featureToggles.cvitem_show_position_count_badge || cvItem.positions === undefined || cvItem.positions.length == 0"></mat-icon>
   </button>
   <mat-card-actions>
     <a mat-button color="primary" href="{{cvItem.link}}" target="_blank" rel="noopener" *ngIf="cvItem.link !== undefined && cvItem.link !== ''">

diff --git a/src/app/cv-item/cv-item.component.ts b/src/app/cv-item/cv-item.component.ts
@@ -3,6 +3,7 @@ import { AfterViewInit, Component, Input, OnInit, ViewChild } from '@angular/cor
 import { CvItemDirective } from './cv-item.directive';
 import { LocalizationService } from '../l10n/l10n.service';
 import { CvItem } from './cv-item';
+import {FeatureToggleService} from '../feature-toggle/feature-toggle.service';
 
 @Component({
   selector: 'app-cv-item',
@@ -12,11 +13,13 @@ import { CvItem } from './cv-item';
 
 export class CvItemComponent implements OnInit, AfterViewInit {
   public l10n;
+  public featureToggles;
   @Input() public cvItem: CvItem;
   @ViewChild(CvItemDirective) public cvThumbnail: CvItemDirective;
 
   constructor(
     private localizationService: LocalizationService,
+    private featureToggleService: FeatureToggleService,
   ) {
     this.localizationService.languageChanged.subscribe((data) => { this.l10n = data; });
   }
@@ -25,8 +28,13 @@ export class CvItemComponent implements OnInit, AfterViewInit {
     this.l10n = this.localizationService.getDefault();
   }
 
+  private getFeatureToggles(): void {
+    this.featureToggles = this.featureToggleService.getFeatureToggles();
+  }
+
   ngOnInit(): void {
     this.getLocalization();
+    this.getFeatureToggles();
   }
 
   ngAfterViewInit() {
@@ -53,7 +61,7 @@ export class CvItemComponent implements OnInit, AfterViewInit {
     }
   }
 
-  private toggleDetails(event) {
+  private toggleDetails(event): void {
     const card = event.target.closest('mat-card');
     if (card.classList.contains('opened')) {
       card.classList.add('closed');

diff --git a/src/app/cv-item/cv-item.ts b/src/app/cv-item/cv-item.ts
@@ -8,4 +8,5 @@ export class CvItem {
   link?: string;
   thumbnail?: string;
   attachment?: string;
+  positions?: CvItem[];
 }
diff --git a/src/app/cv-item/data/cv-items.data.de.ts b/src/app/cv-item/data/cv-items.data.de.ts
@@ -23,6 +23,49 @@ export const CVITEMS: CvItem[] = [
       'Docker', 'Jira', 'Bamboo', 'Scrum', 'AWS', 'Confluence', 'TeamCity', 'Jenkins', 'BitBucket', 'bash', 'Tech Lead', 'Product Owner'],
     link: 'https://www.netlight.com',
     thumbnail: 'Netlight_Consulting_logo.svg',
+    positions: [
+      {
+        title: 'Automotive Innovation Lab',
+        subtitle: 'Expert Software Engineer',
+        begin: '2023-08',
+        end: '',
+        description: '',
+        tags: ['Python', 'Django', 'Git', 'KanBan', 'IntelliJ', 'Gitlab CI', 'Docker', 'Jira', 'Scrum', 'AWS', 'Confluence', 'Jenkins', 'bash'],
+      },
+      {
+        title: 'Führende globale Wirtschaftsprüfungsgesellschaft',
+        subtitle: 'Tech Lead & Technical Product Owner',
+        begin: '2022-07',
+        end: '2023-06',
+        description: '',
+        tags: ['Python', 'Kubernetes', 'Git', 'KanBan', 'IntelliJ', 'Azure DevOps', 'Docker', 'Scrum', 'AWS', 'Confluence', 'Jenkins', 'bash'],
+      },
+      {
+        title: 'Automotive Mobilitätsanbieter',
+        subtitle: 'Tech Lead & Product Owner',
+        begin: '2021-01',
+        end: '2022-06',
+        description: '',
+        tags: ['React', 'Python', 'FastAPI', 'PostgreSQL', 'Kubernetes', 'Git', 'KanBan', 'IntelliJ', 'Docker', 'Jira', 'Scrum',
+          'Confluence', 'GitHub Actions'],
+      },
+      {
+        title: 'Führende deutsche Preisvergleichsseite',
+        subtitle: 'Senior Lead Software Engineer & Architect',
+        begin: '2019-08',
+        end: '2020-12',
+        description: '',
+        tags: ['Java', 'SpringBoot', 'React', 'Kafka', 'MongoDB', 'Kubernetes', 'Git', 'IntelliJ', 'Docker', 'Jira', 'Scrum', 'AWS', 'Confluence', 'Jenkins', 'bash'],
+      },
+      {
+        title: 'Führende deutsche Immobilienplattform',
+        subtitle: 'Software Engineer & Cloud Architekt',
+        begin: '2019-01',
+        end: '2019-07',
+        description: '',
+        tags: ['Java', 'SpringBoot', 'Git', 'IntelliJ', 'Docker', 'Jira', 'Scrum', 'AWS', 'Confluence', 'TeamCity', 'Jenkins', 'BitBucket', 'bash'],
+      },
+    ],
   },
   {
     title: 'Mister Spex GmbH',

diff --git a/src/app/cv-item/data/cv-items.data.en.ts b/src/app/cv-item/data/cv-items.data.en.ts
@@ -23,10 +23,83 @@ export const CVITEMS: CvItem[] = [
       'players & people with drive to join the Netlight team of inspiring, knowledgeable and emphatic talents. Currently we have offices ' +
       'in Stockholm, Oslo, Munich, Helsinki, Berlin, Hamburg, Copenhagen, Zurich, Frankfurt, Amsterdam, and Cologne. ' +
       'We are rapidly expanding on the European market.',
-    tags: ['Java', 'SpringBoot', 'React', 'Python', 'FastAPI', 'Kafka', 'MongoDB', 'PostgreSQL', 'Kubernetes', 'Git', 'KanBan', 'IntelliJ',
-      'Docker', 'Jira', 'Bamboo', 'Scrum', 'AWS', 'Confluence', 'TeamCity', 'Jenkins', 'BitBucket', 'bash', 'Tech Lead', 'Product Owner'],
+    tags: ['Staff Engineer', 'Tech Leadership', 'Product Owner', 'Mentoring', 'Coaching'],
     link: 'https://www.netlight.com',
     thumbnail: 'Netlight_Consulting_logo.svg',
+    positions: [
+      {
+        title: 'Automotive Innovation Lab',
+        subtitle: 'Expert Software Engineer',
+        begin: '2023-08',
+        end: '',
+        description: '',
+        tags: ['Python', 'Django', 'Git', 'KanBan', 'IntelliJ', 'Gitlab CI', 'Docker', 'Jira', 'Scrum', 'AWS', 'Confluence', 'Jenkins', 'bash'],
+      },
+      {
+        title: 'Leading Global Audit Firm',
+        subtitle: 'Tech Lead & Technical Product Owner',
+        begin: '2022-07',
+        end: '2023-06',
+        description: 'Sebastian lead an engineering team which worked on the digitalization of audit workflows to make the audit process ' +
+          'easier, faster, more thorough, and less error-prone for the auditors. This is part of the global digitalization initiatives of the audit company.',
+        tags: ['Python', 'Kubernetes', 'Git', 'KanBan', 'IntelliJ', 'Azure DevOps', 'Docker', 'Scrum', 'AWS', 'Confluence', 'Jenkins', 'bash'],
+      },
+      {
+        title: 'Automotive Mobility Provider',
+        subtitle: 'Tech Lead & Product Owner',
+        begin: '2021-01',
+        end: '2022-06',
+        description: 'Sebastian joined the team as a successor of two senior engineers to take over the role as a tech lead from them. In ' +
+          'this role, Sebastian was not only fulfilling the responsibilities of a full-stack developer for the Python/React-based ' +
+          'application but also took care of cross-team collaboration topics. Furthermore, Sebastian was actively driving the connection ' +
+          'between the tech leads of the development teams with the CTO as well as with the group of product owners in order to align and ' +
+          'discuss the overall IT strategy. Additionally, Sebastian took the role of the team\'s interim PO for two months.',
+        tags: ['React', 'Python', 'FastAPI', 'PostgreSQL', 'Kubernetes', 'Git', 'KanBan', 'IntelliJ', 'Docker', 'Jira', 'Scrum',
+          'Confluence', 'GitHub Actions'],
+      },
+      {
+        title: 'Leading German Price Comparison Website',
+        subtitle: 'Senior Lead Software Engineer & Architect',
+        begin: '2019-08',
+        end: '2020-12',
+        description: 'Sebastian joined a team which was running a monolithic application that relied on a shared Oracle database. The team ' +
+          'decided to have a dedicated MongoDB database which would not be shared with other teams or departments anymore. The database ' +
+          'would be filled by consuming Kafka message topics offered by other teams. Furthermore, Sebastian helped with the team\'s agile ' +
+          'routines and team culture by re-introducing things like pair-programming and team retrospectives.\n\n' +
+          'After taking part in a successful migration project and establishing himself as a valuable engineer and architect, Sebastian was ' +
+          'asked to join the team responsible for replacing the legacy product page variants with a modern implementation using React and ' +
+          'Kubernetes. As this was a fairly new tech setup for the client, Sebastian was brought in to evaluate the architecture decisions ' +
+          'made so far together with the team. Sebastian also supported the frontend engineers in implementing the required features using ' +
+          'React.  Additionally, Sebastian helped to evaluate the team\'s routines and practices for collaboration and helped them improve ' +
+          'themselves for the future. Furthermore, Sebastian helped in the hiring process to find the best fit for an open senior backend ' +
+          'engineer position in the team.\n\n' +
+          'With the experience of conducting an architecture review in another team at the same client already, Sebastian was asked to join ' +
+          'a team which was planning to do a complete rewrite of their main applications. This includes, for example, a service responsible ' +
+          'for calculating the cart which is not only used by the team checkout themselves, but also the mobile apps and the product page. ' +
+          'Sebastian joined the team with the focus on the architecture design for the new checkout, which based on a modern tech stack ' +
+          'including Java 14, Kafka, SpringBoot, React and Openshift (Kubernetes). During this process, the team also needed to maintain ' +
+          'the existing services and partly enhance their functionality to be compatible with the new checkout application. Sebastian also ' +
+          'encouraged more automatisation, e.g. in regards to regular dependency updates jobs by Jenkins. Similar to the other team, ' +
+          'Sebastian also supported the recently joined team lead with the hiring process and conducting full-day remote team workshops.',
+        tags: ['Java', 'SpringBoot', 'React', 'Kafka', 'MongoDB', 'Kubernetes', 'Git', 'IntelliJ', 'Docker', 'Jira', 'Scrum', 'AWS', 'Confluence', 'Jenkins', 'bash'],
+      },
+      {
+        title: 'Leading German Real Estate Platform',
+        subtitle: 'Software Engineer & Cloud Architect',
+        begin: '2019-01',
+        end: '2019-07',
+        description: 'Sebastian was part of the Team responsible for the search result list and expose view of the real estate entries. ' +
+          'Both of these major components are based on Maven, Java, Spring Boot, ElasticSearch, and React. The components are running as ' +
+          'independent Docker containers on AWS ECS (via a client-specific middle-layer), deployed using TeamCity. In addition to feature ' +
+          'development for the mentioned parts, Sebastian also supported the team to migrate services still running in the on-premise ' +
+          'datacenter to AWS.\n\n' +
+          'Sebastian became part of a newly formed team to automate a PoC solution which relied heavily on manual efforts. In this team, ' +
+          'he took responsibility to architect and implement the new, automated solution and its AWS cloud infrastructure. Multiple APIs ' +
+          'were to be connected to gather the required data, among those were REST APIs, as well as SNS/SQS message topics. The entire ' +
+          'setup was build using infrastructure as code as well as serverless technologies.',
+        tags: ['Java', 'SpringBoot', 'Git', 'IntelliJ', 'Docker', 'Jira', 'Scrum', 'AWS', 'Confluence', 'TeamCity', 'Jenkins', 'BitBucket', 'bash'],
+      },
+    ],
   },
   {
     title: 'Mister Spex GmbH',

diff --git a/src/app/feature-toggle/feature-toggles.data.ts b/src/app/feature-toggle/feature-toggles.data.ts
@@ -9,4 +9,5 @@ export const FEATURE_TOGGLES = {
   contact_email_remove_at_sign: false,
   default_language: 'EN', // please make sure your language is added to ../l10n/l10n.data.ts
   localization: true,
+  cvitem_show_position_count_badge: false,
 };