feat(profile): update description lines focusing on experience

use material symbols instead of emojis
davidlj95 · Sep 11, 2023 · c3f821c · c3f821c
1 parent 332f67d
commit c3f821c
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 13 deletions.
diff --git a/scripts/src/generate-font-subsets.mts b/scripts/src/generate-font-subsets.mts
@@ -12,6 +12,11 @@ async function generateFonts() {
   const glyphs = [
     'dark_mode',
     'light_mode',
+    'code',
+    'history',
+    'apps',
+    'api',
+    'build',
   ];
   Log.info("Glyphs to include in font")
   glyphs.forEach((glyph) => Log.item(glyph));

diff --git a/src/app/metadata.ts b/src/app/metadata.ts
@@ -5,23 +5,38 @@
  */
 const NICKNAME = 'davidlj95';
 const REAL_NAME = 'David LJ';
+// PoliceTranslator the earliest code found at 2023. But I started the project / did more things earlier!
+const FIRST_JOB_START_DATE = new Date('2014-06-19')
+const TIMESTAMP_DIFF = Date.now() - FIRST_JOB_START_DATE.getTime();
+const YEARS_OF_EXPERIENCE = Math.abs(
+  // Oh dear JavaScript, why you make things so difficult? https://stackoverflow.com/a/24181701/3263250
+  new Date(TIMESTAMP_DIFF).getUTCFullYear() - 1970,
+)
 const DESCRIPTION_LINES: ReadonlyArray<DescriptionLine> = [
   {
-    emoji: '👨‍💻',
-    text: '<code>/dev/random</code> software engineer',
+    symbol: 'code',
+    text: 'Full stack software engineer',
   },
   {
-    emoji: '🔌',
-    text: 'Connecting technology & RealLife™',
+    symbol: 'history',
+    text: `${YEARS_OF_EXPERIENCE}+ years of experience`,
   },
   {
-    emoji: '🎾',
-    text: 'Padel regular player',
+    symbol: 'apps',
+    text: 'Web apps & hybrid mobile apps',
+  },
+  {
+    symbol: 'api',
+    text: 'REST APIs backends',
+  },
+  {
+    symbol: 'build',
+    text: 'CI/CD, DevOps, Cloud',
   },
 ]
 
 export interface DescriptionLine {
-  emoji: string;
+  symbol: string;
   text: string;
 }
 

diff --git a/src/app/profile/profile.component.html b/src/app/profile/profile.component.html
@@ -14,6 +14,9 @@ <h1>
   <code>@{{ nickname }}</code>
 </h1>
 <div class="descriptions">
-  <h2 *ngFor="let descriptionLine of descriptionLines" [innerHtml]="descriptionLine"></h2>
+  <h2 *ngFor="let descriptionLine of descriptionLines">
+    <span class="material-symbols-outlined">{{ descriptionLine.symbol }}</span>
+    <span [innerHTML]="descriptionLine.text"></span>
+  </h2>
 </div>
 
diff --git a/src/app/profile/profile.component.scss b/src/app/profile/profile.component.scss
@@ -136,5 +136,12 @@
     font-size: 1.1em;
     text-align: left;
     width: fit-content;
+    display: flex;
+    align-items: center;
+    gap: margins.$s;
+
+    > span {
+      font-size: 1em;
+    }
   }
 }
diff --git a/src/app/profile/profile.component.ts b/src/app/profile/profile.component.ts
@@ -1,19 +1,21 @@
 import { Component, Inject } from '@angular/core';
-import { DomSanitizer, SafeHtml } from "@angular/platform-browser";
+import { DomSanitizer } from "@angular/platform-browser";
 import { METADATA } from '../common/injection-tokens';
 import { Metadata } from '../metadata';
 
 @Component({
   selector: 'app-profile',
   templateUrl: './profile.component.html',
-  styleUrls: ['./profile.component.scss']
+  styleUrls: ['./profile.component.scss'],
 })
 export class ProfileComponent {
   public realName = this.metadata.realName;
   public nickname = this.metadata.nickname;
-  public descriptionLines: ReadonlyArray<SafeHtml> = this.metadata.descriptionLines
-    .map((descriptionLine) =>
-      this.sanitizer.bypassSecurityTrustHtml(`${descriptionLine.emoji} ${descriptionLine.text}`),
+  public descriptionLines = this.metadata.descriptionLines
+    .map((descriptionLine) => ({
+        ...descriptionLine,
+        text: this.sanitizer.bypassSecurityTrustHtml(descriptionLine.text),
+      }),
     );
 
   constructor(