Merge branch 'dev' into main

src/app/app.component.scss

@@ -26,6 +26,10 @@ $footer-height: 50px;
     height: $footer-height;
   }
 
+  jm-maintenance-message {
+    height: 100%;
+  }
+
   .page-contents {
     width: 100%;
   }

src/app/classes/Duration.ts

@@ -1,4 +1,8 @@
-import { SECONDS_IN_DAY, SECONDS_IN_MONTH, SECONDS_IN_YEAR } from '../constants/time';
+import {
+  SECONDS_IN_DAY,
+  SECONDS_IN_MONTH,
+  SECONDS_IN_YEAR,
+} from '../constants/time';
 import { TimeThreshold } from './TimeThreshold';
 
 const THRESHOLDS: TimeThreshold[] = [
@@ -10,14 +14,17 @@ const THRESHOLDS: TimeThreshold[] = [
 export class Duration {
   public lastTimeStr!: string;
 
-  public get start(): Date { return this._start; }
+  public get start(): Date {
+    return this._start;
+  }
 
   public set start(start: Date) {
-    this._start = start;
     this.updateTimeStr();
   }
 
-  public get end(): Date { return this._end; }
+  public get end(): Date {
+    return this._end;
+  }
 
   public set end(end: Date) {
     this._end = end;
@@ -29,26 +36,31 @@ export class Duration {
   }
 
   /** @returns Time between end and start, in milliseconds */
-  public msPassed() : number {
-    return this._end.getTime() - this._start.getTime();
+  public msPassed(): number {
+    return (this._end || new Date()).getTime() - this._start.getTime();
   }
 
   /** @returns approximate time passed during the duration */
   public asString(): string {
     const msPassed = this.msPassed();
     const secondsPassed = msPassed / 1000;
 
-    const matchedThreshold = THRESHOLDS.find((threshold: TimeThreshold) => threshold.durationIsAtLeastThreshold(secondsPassed)) || THRESHOLDS[THRESHOLDS.length - 1];
+    const matchedThreshold =
+      THRESHOLDS.find((threshold: TimeThreshold) =>
+        threshold.durationIsAtLeastThreshold(secondsPassed)
+      ) || THRESHOLDS[THRESHOLDS.length - 1];
 
-    const result: string = matchedThreshold.asString(secondsPassed, 'less than a day');
+    const result: string = matchedThreshold.asString(
+      secondsPassed,
+      'less than a day'
+    );
 
     return result;
   }
 
-  constructor(
-    private _start: Date,
-    private _end: Date,
-  ) {
+  constructor(private _start: Date, private _end: Date) {
+    if (_start) this._start = new Date(_start);
+    if (_end) this._end = new Date(_end);
     this.updateTimeStr();
   }
 }

src/app/classes/Employer.ts

@@ -1,16 +1,24 @@
+import { Job } from './Job';
+
 export interface IEmployerOpts {
+  id: number;
   name: string;
   website?: string;
   photoUrl?: string;
+  jobs: Job[];
 }
 
 export class Employer implements IEmployerOpts {
+  public id!: number;
+
   public name!: string;
 
   public website?: string | undefined;
 
   public photoUrl?: string | undefined;
 
+  public jobs: Job[] = [];
+
   constructor(opts: IEmployerOpts) {
     Object.assign(this, opts);
   }

src/app/classes/Job.ts

@@ -1,10 +1,28 @@
 import { Duration } from './Duration';
 import { Employer } from './Employer';
+import { Skill } from './Skill';
+
+export interface IResponsibilityOpts {
+  id: number;
+  text: string;
+}
+
+export class Responsibility implements IResponsibilityOpts {
+  public id!: number;
+
+  public text!: string;
+
+  constructor(opts: IResponsibilityOpts) {
+    Object.assign(this, opts);
+  }
+}
 
 export interface IJobOpts {
   title: string;
   timespan: Duration;
   employer: Employer;
+  skills: Skill[];
+  responsibilities: Responsibility[];
 }
 
 export class Job implements IJobOpts {
@@ -14,5 +32,11 @@ export class Job implements IJobOpts {
 
   public employer!: Employer;
 
-  constructor(opts: IJobOpts) { Object.assign(this, opts);}
+  public skills: Skill[] = [];
+
+  public responsibilities: Responsibility[] = [];
+
+  constructor(opts: IJobOpts) {
+    Object.assign(this, opts);
+  }
 }

src/app/classes/MaintenanceEvent.ts

@@ -1,7 +1,7 @@
 export interface IMaintenanceEventOpts {
   id: number;
   started_at: Date;
-  ended_at: Date;
+  ended_at?: Date;
   message?: string;
 }
 
@@ -10,7 +10,7 @@ export class MaintenanceEvent implements IMaintenanceEventOpts {
 
   public started_at!: Date;
 
-  public ended_at!: Date;
+  public ended_at?: Date;
 
   public message?: string;
 

src/app/classes/Skill.ts

@@ -2,19 +2,25 @@ import { IPicture } from '../interfaces/Picture';
 import { Duration } from './Duration';
 
 export interface ISkillOpts {
+  id: number;
   label: string;
   description?: string;
   picture?: IPicture;
   acquired_at: Date;
+  highlighted?: boolean;
+  classification?: ISkillClassificationOpts;
 }
 
 export interface ISkillClassificationOpts {
+  id: number;
   label: string;
   picture?: IPicture;
   skills: ISkillOpts[];
 }
 
 export class SkillClassification implements ISkillClassificationOpts {
+  public id!: number;
+
   public label!: string;
 
   public picture?: IPicture;
@@ -27,6 +33,8 @@ export class SkillClassification implements ISkillClassificationOpts {
 }
 
 export class Skill implements ISkillOpts {
+  public id!: number;
+
   public label!: string;
 
   public picture?: IPicture;
@@ -37,6 +45,10 @@ export class Skill implements ISkillOpts {
 
   public duration!: Duration;
 
+  public highlighted?: boolean;
+
+  public classification!: SkillClassification;
+
   constructor(opts: ISkillOpts) {
     Object.assign(this, opts);
     this.acquired_at = new Date(this.acquired_at);

src/app/modules/shared/shared.module.ts

@@ -54,6 +54,7 @@ import { MaintenanceMessageComponent } from './components/maintenance-message/ma
     ReactiveFormsModule,
     MatomoOptOutComponent,
     ToastModule,
+    TooltipModule,
     LoadingSpinnerComponent,
     ColorThemeTogglerComponent,
     AttributionComponent,

src/app/modules/splash/projects/projects.component.html

@@ -0,0 +1 @@
+<p>projects works!</p>

src/app/modules/splash/projects/projects.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProjectsComponent } from './projects.component';
+
+describe('ProjectsComponent', () => {
+  let component: ProjectsComponent;
+  let fixture: ComponentFixture<ProjectsComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [ProjectsComponent]
+    });
+    fixture = TestBed.createComponent(ProjectsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/modules/splash/projects/projects.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'jm-projects',
+  templateUrl: './projects.component.html',
+  styleUrls: ['./projects.component.scss'],
+})
+export class ProjectsComponent {}

src/app/modules/splash/resume/job-card/job-card.component.html

@@ -0,0 +1,61 @@
+<div class="job-container">
+  <div class="job-main-details job-flex-item">
+    <span class="job-title">{{ job.title }}</span>
+    <span class="job-employer">{{ job.employer.name }}</span>
+    <span class="job-time-period"
+      >{{ job.timespan.start | date : "MMM y" }} -
+      {{ (job.timespan.end | date : "MMM y") || "Present" }}
+      ({{ job.timespan.lastTimeStr }})</span
+    >
+    <ul *ngIf="job.responsibilities?.length">
+      <ng-container
+        *ngIf="job.responsibilities.length > abbreviatedJobDescriptionMaxLength"
+      >
+        <ng-container *ngIf="!showMore">
+          <li
+            *ngFor="
+              let responsibility of job.responsibilities
+                | slice : 0 : abbreviatedJobDescriptionMaxLength
+            "
+          >
+            {{ responsibility.text }}
+          </li>
+          <span class="job-description-length-toggler" (click)="showMore = true"
+            >Show more</span
+          >
+        </ng-container>
+      </ng-container>
+      <ng-container
+        *ngIf="
+          showMore ||
+          job.responsibilities.length <= abbreviatedJobDescriptionMaxLength
+        "
+      >
+        <li *ngFor="let responsibility of job.responsibilities">
+          {{ responsibility.text }}
+        </li>
+        <span
+          *ngIf="
+            job.responsibilities.length > abbreviatedJobDescriptionMaxLength
+          "
+          class="job-description-length-toggler"
+          (click)="showMore = false"
+          >Show less</span
+        >
+      </ng-container>
+    </ul>
+  </div>
+  <!--  <div class="job-skill-icons job-flex-item">
+    <div class="skill-icons-container">
+      <ng-container *ngFor="let skill of job.skills">
+        <img
+          *ngIf="skill.picture?.image?.file?.address"
+          class="skill-icon"
+          [src]="skill.picture?.image?.file?.address"
+          [alt]="skill.picture?.image?.alt_text"
+          [pTooltip]="skill.label"
+        />
+      </ng-container>
+    </div>
+  </div> -->
+</div>

src/app/modules/splash/resume/job-card/job-card.component.scss

@@ -0,0 +1,75 @@
+$job-item-padding: 0.1em;
+
+.job-container {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  align-items: stretch;
+  border: 1px solid var(--text-color-secondary);
+  border-radius: 6px;
+  padding: 0.4em;
+  gap: $job-item-padding;
+
+  @media screen and (max-width: 1050px) {
+    flex-flow: column nowrap;
+  }
+
+  .job-main-details {
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: flex-start;
+    align-items: flex-start;
+
+    .job-title {
+      font-size: 1.15em;
+    }
+    .job-employer {
+      font-size: 1.02em;
+    }
+    .job-time-period {
+      font-size: 0.95em;
+      color: var(--text-color-secondary);
+    }
+    .job-employer,
+    .job-time-period {
+      font-style: italic;
+    }
+    .job-description-length-toggler {
+      color: var(--primary-color);
+      &:hover {
+        text-decoration: underline;
+        cursor: pointer;
+        color: var(--primary-highlight);
+      }
+    }
+  }
+  .job-skill-icons {
+    @media screen and (min-width: 1051px) {
+      border-left: 1px dashed var(--surface-d);
+      padding-left: $job-item-padding;
+    }
+
+    @media screen and (max-width: 1050px) {
+      border-top: 1px dashed var(--surface-d);
+      padding-top: $job-item-padding;
+    }
+
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: center;
+
+    .skill-icons-container {
+      //height: 100%;
+      display: flex;
+      flex-flow: row wrap;
+      justify-content: center;
+      align-items: center;
+      gap: 0.3em;
+
+      img.skill-icon {
+        width: 25px;
+        height: auto;
+      }
+    }
+  }
+}