feat(profile): update description lines

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

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

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>
 

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;
+    }
   }
 }

src/app/profile/profile.component.spec.ts

@@ -1,6 +1,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { MockProvider } from 'ng-mocks';
+import { MATERIAL_SYMBOLS_CLASS_SELECTOR } from '../../test/constants';
 import { METADATA } from '../common/injection-tokens';
 import { Metadata } from '../metadata';
 
@@ -13,8 +14,8 @@ describe('ProfileComponent', () => {
     nickname: 'bar',
     realName: 'Foo',
     descriptionLines: [
-      {emoji: '🧪', text: 'Foo bar'},
-      {emoji: '👁️‍🗨️', text: 'Bar foo'},
+      {symbol: 'code', text: 'Foo bar'},
+      {symbol: 'code', text: 'Bar foo'},
     ],
   } as Pick<Metadata, 'nickname' | 'realName' | 'descriptionLines'>) as Metadata;
 
@@ -61,11 +62,21 @@ describe('ProfileComponent', () => {
     expect(h1.nativeElement.textContent).toContain(`@${fakeMetadata.nickname}`);
   })
 
-  it('should contain description lines as secondary headers', () => {
+  it('should contain description lines with symbol as a Material Symbol', () => {
     const h2s = fixture.debugElement.queryAll(By.css('h2'));
     h2s.forEach((h2, index) => {
       const descriptionLine = fakeMetadata.descriptionLines[index];
-      expect(h2.nativeElement.textContent).toEqual(`${descriptionLine.emoji} ${descriptionLine.text}`)
+      const materialSymbolSpan = h2.query(MATERIAL_SYMBOLS_CLASS_SELECTOR)
+      expect(materialSymbolSpan.nativeElement.textContent).toEqual(descriptionLine.symbol)
+    });
+  })
+
+  it('should contain description lines with text', () => {
+    const h2s = fixture.debugElement.queryAll(By.css('h2'));
+    h2s.forEach((h2, index) => {
+      const descriptionLine = fakeMetadata.descriptionLines[index];
+      const textSpan = h2.query(By.css('span:nth-child(2)'))
+      expect(textSpan.nativeElement.textContent).toEqual(descriptionLine.text)
     });
   })
 });

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(

src/humans.txt

@@ -1,9 +1,11 @@
 Hi, I'm David LJ. Also known as davidlj95 in the cyberspace. I happen to be the author of my own site too.
 Would you have guessed that? Well if you knew I'm a software engineer, maybe you did! Some things about me:
 
-* 👨‍💻 <code>/dev/random</code> software engineer
-* 🔌 Connecting technology & RealLife™
-* 🎾 Padel regular player
+*  Full stack software engineer
+*  9+ years of experience
+*  Web apps & hybrid mobile apps
+*  REST APIs backends
+*  CI/CD, DevOps, Cloud
 
 Visit the website for more info!
 

src/site.webmanifest

@@ -1,7 +1,7 @@
 {
   "name": "David LJ 🔗 @davidlj95",
   "short_name": "davidlj95",
-  "description": "/dev/random software engineer. Connecting technology & RealLife™. Padel regular player. Get to know me better here",
+  "description": "Full stack software engineer. 9+ years of experience. Web apps & hybrid mobile apps. REST APIs backends. CI/CD, DevOps, Cloud. Get to know me better here",
   "display": "browser",
   "background_color": "#202023",
   "theme_color": "#202023",

src/test/constants.ts

@@ -0,0 +1,4 @@
+import { By } from '@angular/platform-browser';
+
+const MATERIAL_SYMBOLS_CLASS = 'material-symbols-outlined'
+export const MATERIAL_SYMBOLS_CLASS_SELECTOR = By.css(`.${MATERIAL_SYMBOLS_CLASS}`)