diff --git a/src/app/about/_about-theme.scss b/src/app/about/_about-theme.scss
index 09c99725..101516f5 100644
--- a/src/app/about/_about-theme.scss
+++ b/src/app/about/_about-theme.scss
@@ -2,12 +2,14 @@
 @use "profile-picture/profile-picture-theme";
 @use "contact-social-icons/contact-social-icons-theme";
 @use "contact-traditional-icons/contact-traditional-icons-theme";
+@use "description/description-theme";
 
 @mixin color($theme) {
   app-about {
     @include profile-picture-theme.color($theme);
     @include contact-traditional-icons-theme.color($theme);
     @include contact-social-icons-theme.color($theme);
+    @include description-theme.color($theme);
   }
 }
 
diff --git a/src/app/about/about.component.html b/src/app/about/about.component.html
index dc6575b5..20212823 100644
--- a/src/app/about/about.component.html
+++ b/src/app/about/about.component.html
@@ -1,9 +1,9 @@
-<section class="about">
+<section>
   <div class="profile">
     <app-profile-picture></app-profile-picture>
     <h1>
-      <span aria-hidden="true">
-        <span>{{ realName }}</span>
+      <span class="visible-header" aria-hidden="true">
+        <span class="real-name">{{ realName }}</span>
         <code>@{{ nickname }}</code>
       </span>
       <!-- Duplicated for accessibility
@@ -13,10 +13,11 @@ <h1>
         {{ realName }} @{{ nickname }}
       </span>
     </h1>
+    <h2>{{ title }}</h2>
     <div class="contacts">
       <app-contact-traditional-icons></app-contact-traditional-icons>
       <app-contact-social-icons></app-contact-social-icons>
     </div>
   </div>
-  <app-description></app-description>
+  <app-description [line]="rootLine"></app-description>
 </section>
diff --git a/src/app/about/about.component.scss b/src/app/about/about.component.scss
index 9c15d16f..54af26fa 100644
--- a/src/app/about/about.component.scss
+++ b/src/app/about/about.component.scss
@@ -4,52 +4,49 @@
 @use "breakpoints";
 
 :host {
+  position: absolute;
+  width: 100%;
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
   section {
-    position: absolute;
-    width: 100%;
-    min-height: 100%;
     display: flex;
-    flex-direction: row;
-    justify-content: center;
-
-    @include breakpoints.xs {
-      flex-direction: column;
-      align-items: center;
-    }
-
-    > * {
-      padding: paddings.$m;
-    }
+    flex-direction: column;
+    gap: margins.$l;
+    padding: paddings.$m paddings.$l;
 
     .profile {
       display: flex;
       flex-direction: column;
       flex-wrap: wrap;
-      justify-content: center;
-      gap: margins.$m;
+      gap: margins.$s;
 
-      @include breakpoints.xs {
-        flex-direction: row;
-        align-items: center;
+      h1 > span.visible-header {
+        display: flex;
+        flex-direction: column;
+
+        .real-name {
+          font-size: 1.75rem;
+          font-weight: bold;
+        }
+        code {
+          font-size: 1.5rem;
+        }
       }
 
-      h1 > span {
+      h2 {
         font-size: 1.5rem;
-        display: flex;
-        flex-direction: column;
       }
 
       .contacts {
         display: flex;
         gap: margins.$m;
         flex-wrap: wrap;
-        flex-direction: column;
-
-        @include breakpoints.xs {
-          flex-basis: 100%;
-          justify-content: center;
-          flex-direction: row;
-        }
+        flex-direction: row;
+        margin-top: margins.$s;
       }
     }
   }
diff --git a/src/app/about/about.component.spec.ts b/src/app/about/about.component.spec.ts
index 546af5e5..c510b34a 100644
--- a/src/app/about/about.component.spec.ts
+++ b/src/app/about/about.component.spec.ts
@@ -15,9 +15,10 @@ describe('AboutComponent', () => {
   let component: AboutComponent;
   let fixture: ComponentFixture<AboutComponent>;
   const fakeMetadata: Metadata = ({
-    nickname: 'bar',
-    realName: 'Foo',
-  } as Pick<Metadata, 'nickname' | 'realName'>) as Metadata;
+    nickname: 'Fake nickname',
+    realName: 'Fake real name',
+    title: 'Fake title',
+  } as Pick<Metadata, 'nickname' | 'realName' | 'title'>) as Metadata;
 
   beforeEach(() => {
     TestBed.configureTestingModule({
@@ -43,16 +44,21 @@ describe('AboutComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  it('should display real name in header', () => {
+  it('should display real name in primary header', () => {
     const h1 = fixture.debugElement.query(By.css('h1'));
     expect(h1.nativeElement.textContent).toContain(fakeMetadata.realName);
   })
 
-  it('should display nickname preceded by \'@\' in header', () => {
+  it('should display nickname preceded by \'@\' in primary header', () => {
     const h1 = fixture.debugElement.query(By.css('h1'));
     expect(h1.nativeElement.textContent).toContain(`@${fakeMetadata.nickname}`);
   })
 
+  it('should display title in secondary header', () => {
+    const h2 = fixture.debugElement.query(By.css('h2'));
+    expect(h2.nativeElement.textContent).toEqual(fakeMetadata.title);
+  })
+
   ensureHasComponents(() => fixture,
     ProfilePictureComponent,
     ContactTraditionalIconsComponent,
diff --git a/src/app/about/about.component.ts b/src/app/about/about.component.ts
index df9a9f06..95651301 100644
--- a/src/app/about/about.component.ts
+++ b/src/app/about/about.component.ts
@@ -1,6 +1,6 @@
 import { Component, Inject } from '@angular/core';
 import { METADATA } from '../common/injection-tokens';
-import { Metadata } from '../metadata';
+import { DescriptionLine, Metadata } from '../metadata';
 
 @Component({
   selector: 'app-about',
@@ -8,8 +8,13 @@ import { Metadata } from '../metadata';
   styleUrls: ['./about.component.scss'],
 })
 export class AboutComponent {
-  public realName = this.metadata.realName;
-  public nickname = this.metadata.nickname;
+  public readonly realName = this.metadata.realName
+  public readonly nickname = this.metadata.nickname
+  public readonly title = this.metadata.title
+  public readonly rootLine = new DescriptionLine(
+    undefined,
+    this.metadata.descriptionLines
+  )
 
   constructor(
     @Inject(METADATA) private metadata: Metadata,
diff --git a/src/app/about/description/_description-theme.scss b/src/app/about/description/_description-theme.scss
new file mode 100644
index 00000000..d6637825
--- /dev/null
+++ b/src/app/about/description/_description-theme.scss
@@ -0,0 +1,13 @@
+@use "sass:color";
+@use "sass:map";
+
+@mixin color($theme) {
+  $text-palette: map.get($theme, text);
+  $primary: map.get($text-palette, primary);
+
+  app-description {
+    a {
+      text-decoration-color: color.adjust($primary, $alpha: -0.75);
+    }
+  }
+}
diff --git a/src/app/about/description/description.component.html b/src/app/about/description/description.component.html
index 1d03350f..d5582be5 100644
--- a/src/app/about/description/description.component.html
+++ b/src/app/about/description/description.component.html
@@ -1,7 +1,23 @@
-<h2 *ngFor="let descriptionLine of descriptionLines">
-  <span aria-hidden="true">
-    <span class="material-symbols-outlined">{{ descriptionLine.symbol }}</span>
-    <span [innerHTML]="descriptionLine.text"></span>
-  </span>
-  <span class="sr-only" [innerHtml]="descriptionLine.text"></span>
-</h2>
+<ng-container *ngIf="!isCollapsible; else collapsibleTemplate">
+  <div class="data" *ngIf="line.data">
+    <ng-container [ngTemplateOutlet]="dataTemplate"></ng-container>
+  </div>
+</ng-container>
+<ng-template #collapsibleTemplate>
+  <button class="data" type="button" [attr.aria-expanded]="isExpanded" [attr.aria-controls]="sluggedId"
+          (click)="isExpanded ? this.collapse() : this.expand()"
+  >
+    <span class="caret displayNoneIfNoScript" aria-hidden="true">{{ isExpanded ? config.expandedIcon : config.collapsedIcon }}</span>
+    <ng-container [ngTemplateOutlet]="dataTemplate"></ng-container>
+  </button>
+</ng-template>
+<ng-template #dataTemplate>
+  <span class="symbol material-symbols-outlined" aria-hidden="true" *ngIf="line.data">{{ line.data.symbol }}</span>
+  <span class="content" [innerHtml]="sanitizer.bypassSecurityTrustHtml(line.data?.html ?? '')"></span>
+</ng-template>
+<ul *ngIf="line.children.length" [attr.id]="sluggedId" [@expanded]="isCollapsible ? isExpanded : true">
+  <li *ngFor="let line of line.children">
+    <app-description [line]="line" [depth]="depth+1">
+    </app-description>
+  </li>
+</ul>
diff --git a/src/app/about/description/description.component.scss b/src/app/about/description/description.component.scss
index b6a3b2b5..fd8379fa 100644
--- a/src/app/about/description/description.component.scss
+++ b/src/app/about/description/description.component.scss
@@ -1,21 +1,74 @@
 @use "margins";
+@use "paddings";
 
 :host {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  gap: margins.$s;
+  &.hidden {
+    visibility: hidden;
+  }
 
-  h2 > span {
-    font-size: 1.1rem;
-    text-align: left;
-    width: fit-content;
+  ul {
     display: flex;
+    flex-direction: column;
+    gap: margins.$m;
+  }
+
+  // Indentation for nested lists
+  ul ul {
+    margin-left: margins.$l;
+  }
+
+  ul ul > li:first-child {
+    margin-top: margins.$m;
+  }
+
+  .data {
+    display: flex;
+    flex-direction: row;
     align-items: center;
+    word-break: break-word;
+    font-size: 1.5rem;
     gap: margins.$s;
+    text-align: left;
 
-    > span {
-      font-size: 1em;
+    // If we move it outside this selector, conflicts with root <a> styles
+    ::ng-deep a {
+      text-decoration-line: underline;
+      text-decoration-thickness: 1px;
     }
   }
+
+  .material-symbols-outlined {
+    font-size: 1em;
+    font-variation-settings: 'FILL' 1,
+    'wght' 700,
+    'GRAD' 200,
+    'opsz' 24
+  }
+
+  button {
+    cursor: pointer;
+    background-color: transparent;
+    border: none;
+    color: inherit;
+    font-family: inherit;
+  }
+
+  .caret {
+    font-size: .5em;
+    width: .75em;
+  }
+
+  // Content-specific customizations
+  ::ng-deep a.craft {
+    text-decoration-line: underline;
+    text-decoration-color: currentColor;
+  }
+
+  .data[aria-expanded="false"] + ul {
+    overflow: hidden;
+  }
+
+  .data[aria-expanded] + ul .data {
+    font-size: 1.25rem;
+  }
 }
diff --git a/src/app/about/description/description.component.spec.ts b/src/app/about/description/description.component.spec.ts
index 0bd0965b..fb4f0730 100644
--- a/src/app/about/description/description.component.spec.ts
+++ b/src/app/about/description/description.component.spec.ts
@@ -1,53 +1,322 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { DebugElement, PLATFORM_ID } from '@angular/core';
+import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { MockProvider } from 'ng-mocks';
-import { MATERIAL_SYMBOLS_CLASS_SELECTOR } from '../../../test/constants';
-import { METADATA } from '../../common/injection-tokens';
-import { Metadata } from '../../metadata';
+import { getComponentSelector } from '../../../test/helpers/component-testers';
+import { MATERIAL_SYMBOLS_SELECTOR } from '../../../test/helpers/material-symbols';
+import { PLATFORM_BROWSER_ID, PLATFORM_SERVER_ID } from '../../../test/helpers/platform-ids';
+import { expectIsHidden, expectIsVisible } from '../../../test/helpers/visibility';
+import { DescriptionLine } from '../../metadata';
 
-import { DescriptionComponent } from './description.component';
+import { COLLAPSIBLE_CONFIG, CollapsibleConfiguration, DescriptionComponent } from './description.component';
 
 describe('DescriptionComponent', () => {
   let component: DescriptionComponent;
   let fixture: ComponentFixture<DescriptionComponent>;
-  const fakeMetadata: Metadata = ({
-    descriptionLines: [
-      {symbol: 'code', text: 'Foo bar'},
-      {symbol: 'build', text: 'Bar foo'},
-    ],
-  } as Pick<Metadata, 'descriptionLines'>) as Metadata;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      declarations: [DescriptionComponent],
-      providers: [
-        MockProvider(METADATA, fakeMetadata)
-      ]
-    });
-    fixture = TestBed.createComponent(DescriptionComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
+  const DATA_CLASS_SELECTOR = By.css('.data')
+  const LIST_SELECTOR = By.css('ul')
+  const CARET_SELECTOR = By.css('.caret')
 
   it('should create', () => {
+    [fixture, component] = makeSut()
     expect(component).toBeTruthy();
   });
 
-  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];
-      const materialSymbolSpan = h2.query(MATERIAL_SYMBOLS_CLASS_SELECTOR)
-      expect(materialSymbolSpan.nativeElement.textContent).toEqual(descriptionLine.symbol)
-    });
+  function testShouldDisplaySymbolAndHtmlContent(fakeLine: DescriptionLine) {
+    it('should display the symbol and html content', () => {
+      const lineElement = fixture.debugElement.query(DATA_CLASS_SELECTOR);
+
+      const materialSymbolSpan = lineElement.query(MATERIAL_SYMBOLS_SELECTOR)
+      expect(materialSymbolSpan.nativeElement.textContent).withContext('symbol').toEqual(fakeLine.data!.symbol)
+      expect(materialSymbolSpan.attributes['aria-hidden'])
+        .withContext('symbol is hidden from screen readers')
+        .toBe(true.toString())
+
+      const htmlSpan = lineElement.query(By.css('.content'))
+      expect(htmlSpan.nativeElement.innerHTML).withContext('html').toEqual(fakeLine.data!.html)
+    })
+  }
+
+  describe('data', () => {
+    beforeEach(() => {
+      [fixture, component] = makeSut()
+    })
+
+    describe('when line does not have data', () => {
+      beforeEach(() => {
+        component.line = new DescriptionLine(undefined)
+        fixture.detectChanges()
+      })
+      it('should not add the data element', () => {
+        expect(fixture.debugElement.query(DATA_CLASS_SELECTOR)).toBeNull()
+      })
+    })
+    describe('when line has data', () => {
+      const fakeLine: DescriptionLine = DescriptionLine.fromData({
+        symbol: 'foo', text: 'Fake text', html: 'Fake html',
+      })
+      beforeEach(() => {
+        component.line = fakeLine
+        fixture.detectChanges()
+      })
+      testShouldDisplaySymbolAndHtmlContent(fakeLine)
+    })
   })
 
-  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)
-    });
+  describe('children', () => {
+    beforeEach(() => {
+      [fixture, component] = makeSut()
+    })
+
+    describe('when does not have children', () => {
+      const fakeLine: DescriptionLine = new DescriptionLine(undefined, [])
+
+      beforeEach(() => {
+        component.line = fakeLine
+        fixture.detectChanges()
+      })
+
+      it('should not include the list element', () => {
+        expect(fixture.debugElement.query(LIST_SELECTOR)).toBeNull()
+      })
+    })
+    describe('when has children', () => {
+      const fakeLineWithChildren: DescriptionLine = new DescriptionLine(undefined, [
+        DescriptionLine.fromData({symbol: '', html: 'Child line 1'}),
+        DescriptionLine.fromData({symbol: '', html: 'Child line 2'}),
+        DescriptionLine.fromData({symbol: '', html: 'Child line 3'}),
+      ])
+      const fakeDepth = 2
+
+      beforeEach(() => {
+        component.line = fakeLineWithChildren
+        component.depth = fakeDepth
+        fixture.detectChanges()
+      })
+
+      it('should include the list element with all children lines', () => {
+        const listElement = fixture.debugElement.query(LIST_SELECTOR)
+        expect(listElement).toBeTruthy()
+
+        const childrenElements = listElement.queryAll(By.css('li'))
+        expect(childrenElements.length).toBe(fakeLineWithChildren.children.length)
+
+        childrenElements.forEach((childElement, index) => {
+          // Contains line element
+          const childLineElement = childElement.query(By.css(getComponentSelector(DescriptionComponent)))
+          expect(childLineElement)
+            .withContext(`child ${index} line element`).toBeTruthy()
+
+          // Line passed is the child one
+          expect(childLineElement.nativeElement.textContent).withContext(`child ${index} line`)
+            .toContain(fakeLineWithChildren.children[index].data!.html)
+
+          // Depth is increased by one
+          expect(childLineElement.attributes['ng-reflect-depth']).withContext(`child ${index} depth`)
+            .toBe((fakeDepth + 1).toString())
+        })
+      })
+    })
   })
-});
+
+  function testShouldNotDisplayCollapsibleControls() {
+    it('should not display collapsible controls', () => {
+      const lineElement = fixture.debugElement.query(DATA_CLASS_SELECTOR)
+      expect(lineElement).toBeTruthy()
+      expect(lineElement.name).not.toBe('button')
+
+      const caretElement = lineElement.query(CARET_SELECTOR)
+      expect(caretElement).toBeNull()
+    })
+  }
+
+  describe('collapsible', () => {
+    describe('when line has no children', () => {
+      const fakeLine: DescriptionLine = DescriptionLine.fromData({
+        symbol: 'foo', text: 'Fake text', html: 'Fake html',
+      })
+      beforeEach(() => {
+        [fixture, component] = makeSut()
+        component.line = fakeLine
+        fixture.detectChanges()
+      })
+      testShouldNotDisplayCollapsibleControls()
+      testShouldDisplaySymbolAndHtmlContent(fakeLine)
+    })
+    describe('when line has children', () => {
+      const fakeLine: DescriptionLine = DescriptionLine.fromData({
+        symbol: 'foo', text: 'Fake text', html: 'Fake html',
+      }, [
+        new DescriptionLine(),
+      ])
+
+      describe('when depth is below configured depth to start a collapsible', () => {
+        beforeEach(() => {
+          [fixture, component] = makeSut()
+          component.depth = fakeConfig.collapsibleStartAtDepth - 1
+          component.line = fakeLine
+          fixture.detectChanges()
+        })
+        testShouldNotDisplayCollapsibleControls()
+        testShouldDisplaySymbolAndHtmlContent(fakeLine)
+        it('should not add id to list', () => {
+          const listElement = fixture.debugElement.query(LIST_SELECTOR)
+          expect(Object.keys(listElement.attributes)).not.toContain('id')
+        })
+      })
+      describe('when depth is set to configured depth to start a collapsible', () => {
+
+        function configureToBeCollapsible(component: DescriptionComponent) {
+          component.depth = fakeConfig.collapsibleStartAtDepth
+          component.line = fakeLine
+        }
+
+        describe('data', () => {
+          let dataElement: DebugElement
+          let caretElement: DebugElement
+
+          beforeEach(() => {
+            [fixture, component] = makeSut()
+            configureToBeCollapsible(component)
+
+            fixture.detectChanges()
+
+            dataElement = fixture.debugElement.query(DATA_CLASS_SELECTOR)
+            caretElement = dataElement.query(CARET_SELECTOR)
+          })
+          it('should display collapsible controls', () => {
+            expect(dataElement).toBeTruthy()
+            expect(dataElement.name).toBe('button')
+            expect(Object.keys(dataElement.attributes)).toContain('aria-expanded')
+
+            expect(caretElement).toBeTruthy()
+            expect(caretElement.attributes['aria-hidden'])
+              .withContext('caret is hidden from screen readers')
+              .toBe(true.toString())
+          })
+          testShouldDisplaySymbolAndHtmlContent(fakeLine)
+          it('should add slug id to list', () => {
+            const listElement = fixture.debugElement.query(LIST_SELECTOR)
+            expect(Object.keys(listElement.attributes)).toContain('id')
+
+            const expectedId = `${fakeConfig.listIdPrefix}fake-text`
+            expect(listElement.attributes['id']).toBe(expectedId)
+          })
+        })
+        describe('expand / collapse', () => {
+          let dataElement: DebugElement
+          let caretElement: DebugElement
+          let listElement: DebugElement
+
+          function testShouldBeExpanded(checkVisibility: boolean = true) {
+            it('should be expanded', () => {
+              expect(dataElement).toBeTruthy()
+              expect(dataElement.attributes['aria-expanded']).toBe(true.toString())
+
+              expect(caretElement.nativeElement.textContent).toBe(fakeConfig.expandedIcon)
+
+              if (checkVisibility) {
+                expectIsVisible(listElement.nativeElement)
+              }
+            })
+          }
+
+          function testShouldBeCollapsed() {
+            it('should be collapsed', () => {
+              expect(dataElement).toBeTruthy()
+              expect(dataElement.attributes['aria-expanded']).toBe(false.toString())
+
+              expect(caretElement.nativeElement.textContent).toBe(fakeConfig.collapsedIcon)
+
+              expectIsHidden(listElement.nativeElement)
+            })
+          }
+
+          describe('when rendering on server', () => {
+            beforeEach(() => {
+              [fixture, component] = makeSut({platformId: PLATFORM_SERVER_ID})
+              configureToBeCollapsible(component)
+
+              fixture.detectChanges()
+
+              dataElement = fixture.debugElement.query(DATA_CLASS_SELECTOR)
+              caretElement = dataElement.query(CARET_SELECTOR)
+              listElement = fixture.debugElement.query(LIST_SELECTOR)
+            })
+            testShouldBeExpanded(false)
+
+            // to avoid layout shifts
+            it('should be hidden', () => {
+              expectIsHidden(fixture.debugElement.nativeElement)
+            })
+          })
+
+          describe('when rendering on client', () => {
+            beforeEach(() => {
+              [fixture, component] = makeSut()
+              configureToBeCollapsible(component)
+
+              fixture.detectChanges()
+
+              dataElement = fixture.debugElement.query(DATA_CLASS_SELECTOR)
+              caretElement = dataElement.query(CARET_SELECTOR)
+              listElement = fixture.debugElement.query(LIST_SELECTOR)
+            })
+            describe('by default', () => {
+              testShouldBeCollapsed()
+              it('should make the component visible', () => {
+                expectIsVisible(fixture.debugElement.nativeElement)
+              })
+            })
+            describe('when clicking', () => {
+              beforeEach(fakeAsync(() => {
+                dataElement.triggerEventHandler('click')
+
+                tick() // animation to complete
+
+                fixture.detectChanges()
+              }))
+              testShouldBeExpanded()
+            })
+            describe('when clicking twice', () => {
+              beforeEach(fakeAsync(() => {
+                dataElement.triggerEventHandler('click')
+                tick() // animation to complete
+                fixture.detectChanges()
+
+                dataElement.triggerEventHandler('click')
+                tick() // animation to complete
+                fixture.detectChanges()
+              }))
+              testShouldBeCollapsed()
+            })
+          })
+        })
+      })
+    })
+  })
+})
+
+function makeSut(
+  {platformId}: {
+    platformId?: typeof PLATFORM_BROWSER_ID | typeof PLATFORM_SERVER_ID
+  } = {}): [ComponentFixture<DescriptionComponent>, DescriptionComponent] {
+  TestBed.configureTestingModule({
+    declarations: [DescriptionComponent],
+    providers: [
+      MockProvider(COLLAPSIBLE_CONFIG, fakeConfig),
+      MockProvider(PLATFORM_ID, platformId ?? PLATFORM_BROWSER_ID),
+    ],
+    imports: [NoopAnimationsModule],
+  })
+  const fixture = TestBed.createComponent(DescriptionComponent)
+  return [fixture, fixture.componentInstance]
+}
+
+const fakeConfig: CollapsibleConfiguration = {
+  collapsibleStartAtDepth: 1,
+  collapsedIcon: 'C -',
+  expandedIcon: 'E -',
+  listIdPrefix: 'fakePrefix-',
+}
diff --git a/src/app/about/description/description.component.ts b/src/app/about/description/description.component.ts
index 21ee9039..399de995 100644
--- a/src/app/about/description/description.component.ts
+++ b/src/app/about/description/description.component.ts
@@ -1,23 +1,94 @@
-import { Component, Inject } from '@angular/core';
+import { animate, AUTO_STYLE, state, style, transition, trigger } from '@angular/animations';
+import { isPlatformBrowser } from '@angular/common';
+import { Component, HostBinding, Inject, InjectionToken, Input, PLATFORM_ID } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
-import { METADATA } from '../../common/injection-tokens';
-import { Metadata } from '../../metadata';
+import { EMPHASIZED_DURATION_MS, TIMING_FUNCTION } from '../../common/animations';
+import { DescriptionLine } from '../../metadata';
 
 @Component({
   selector: 'app-description',
   templateUrl: './description.component.html',
-  styleUrls: ['./description.component.scss']
+  styleUrls: ['./description.component.scss'],
+  animations: [
+    trigger('expanded', [
+      // TODO: Investigate how to set display in state without triggering Angular warning
+      //       Tried:
+      //        - Animation callbacks: they mess up the animation
+      //        - In CSS display: none, whilst :not(.ng-animating). Messes animation too
+      // Display state is needed so that elements don't make the body overflow in some devices
+      state('true', style({height: AUTO_STYLE, visibility: AUTO_STYLE, display: 'flex'})),
+      state('false', style({height: '0', visibility: 'hidden', display: 'none'})),
+      transition('true => false', animate(`${EMPHASIZED_DURATION_MS}ms ${TIMING_FUNCTION}`)),
+      transition('false => true', animate(`${EMPHASIZED_DURATION_MS}ms ${TIMING_FUNCTION}`)),
+    ]),
+  ],
 })
 export class DescriptionComponent {
-  public descriptionLines = this.metadata.descriptionLines
-    .map((descriptionLine) => ({
-        ...descriptionLine,
-        text: this.sanitizer.bypassSecurityTrustHtml(descriptionLine.text),
-      }),
-    );
+  @Input({required: true}) public line!: DescriptionLine
+  @Input() public depth: number = 0
+  // 👇 Using `protected` to avoid being marked as unused
+  @HostBinding('class.visibleIfNoScript') protected visibleIfNoScript = true
+  @HostBinding('class.hidden') protected hidden = true
+
+  private EXPANDED_DEFAULT_NO_JS = true
+  private EXPANDED_DEFAULT_JS_ENABLED = false
+  public isExpanded = this.EXPANDED_DEFAULT_NO_JS
+
   constructor(
-    @Inject(METADATA) private metadata: Metadata,
-    private sanitizer: DomSanitizer,
+    protected sanitizer: DomSanitizer,
+    @Inject(COLLAPSIBLE_CONFIG) protected config: CollapsibleConfiguration,
+    @Inject(PLATFORM_ID) private platformId: object,
   ) {
+    if (isPlatformBrowser(this.platformId)) {
+      this.isExpanded = this.EXPANDED_DEFAULT_JS_ENABLED
+      this.hidden = false
+    }
+  }
+
+  public get isCollapsible(): boolean {
+    return this.depth >= this.config.collapsibleStartAtDepth && this.line.children.length > 0
+  }
+
+  public get sluggedId(): string | undefined {
+    if (!this.isCollapsible) {
+      return
+    }
+    return this.config.listIdPrefix + this.line.data?.text.toString().toLowerCase()
+      .replace(/\s+/g, '-')         // Replace spaces with -
+      .replace(/[^\w-]+/g, '')      // Remove all non-word chars
+      .replace(/--+/g, '-')         // Replace multiple - with single -
+      .replace(/^-+/, '')           // Trim - from start of text
+      .replace(/-+$/, '')           // Trim - from end of text
+      .replace(/^\d/, '')
+  }
+
+  collapse() {
+    this.isExpanded = false
   }
+
+  expand() {
+    this.isExpanded = true
+  }
+}
+
+export interface CollapsibleConfiguration {
+  collapsibleStartAtDepth: number
+  collapsedIcon: string
+  expandedIcon: string
+  listIdPrefix: string
 }
+
+/* istanbul ignore next */
+export const COLLAPSIBLE_CONFIG = new InjectionToken<CollapsibleConfiguration>(
+  'Collapsible configuration for description component', {
+    factory: () => DEFAULT_COLLAPSIBLE_CONFIG,
+  },
+)
+
+const DEFAULT_COLLAPSIBLE_CONFIG: CollapsibleConfiguration = {
+  collapsibleStartAtDepth: 2,
+  collapsedIcon: '▶',
+  expandedIcon: '▼',
+  listIdPrefix: 'description-',
+}
+
diff --git a/src/app/about/profile-picture/profile-picture.component.spec.ts b/src/app/about/profile-picture/profile-picture.component.spec.ts
index cdf31169..6f5e3138 100644
--- a/src/app/about/profile-picture/profile-picture.component.spec.ts
+++ b/src/app/about/profile-picture/profile-picture.component.spec.ts
@@ -1,6 +1,7 @@
 import { DebugElement } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
+import { expectIsHidden } from '../../../test/helpers/visibility';
 
 import { ProfilePictureComponent } from './profile-picture.component';
 
@@ -35,10 +36,9 @@ describe('ProfilePictureComponent', () => {
     expect(huhProfilePic).toBeTruthy();
     expect(huhProfilePic.attributes['ngSrc']).toBeDefined();
     expect(huhProfilePic.attributes['ngSrc']).toContain('profile_huh.png');
+    expectIsHidden(huhProfilePic.nativeElement)
     const styles = getComputedStyle(huhProfilePic.nativeElement);
-    expect(styles).toBeTruthy();
     expect(styles.opacity).toEqual('0');
-    expect(styles.visibility).toEqual('hidden');
   })
 
   describe('accessible easter egg', () => {
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index d366f98d..b3df9d08 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,25 +1,28 @@
 import { NgOptimizedImage } from '@angular/common';
 import { NgModule, VERSION } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { SeoModule } from "@ngaox/seo";
 import { environment } from '../environments';
+import { AboutComponent } from './about/about.component';
+import { ContactSocialIconsComponent } from './about/contact-social-icons/contact-social-icons.component';
+import {
+  ContactTraditionalIconsComponent,
+} from './about/contact-traditional-icons/contact-traditional-icons.component';
+import { DescriptionComponent } from './about/description/description.component';
+import { ProfilePictureComponent } from './about/profile-picture/profile-picture.component';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { ContactsComponent } from './contacts/contacts.component';
+import { HeaderComponent } from './header/header.component';
 import { JsonldMetadataComponent } from './jsonld-metadata/jsonld-metadata.component';
 import { METADATA } from './metadata';
 import { NavigationTabsComponent } from './navigation-tabs/navigation-tabs.component';
 import { NoScriptComponent } from './no-script/no-script.component';
-import { AboutComponent } from './about/about.component';
 import { ReleaseInfoComponent } from './release-info/release-info.component';
 import { SocialComponent } from './social/social.component';
-import { HeaderComponent } from './header/header.component';
-import { ProfilePictureComponent } from './about/profile-picture/profile-picture.component';
-import { ContactTraditionalIconsComponent } from './about/contact-traditional-icons/contact-traditional-icons.component';
-import { ContactSocialIconsComponent } from './about/contact-social-icons/contact-social-icons.component';
-import { DescriptionComponent } from './about/description/description.component';
 
 @NgModule({
   declarations: [
@@ -39,6 +42,7 @@ import { DescriptionComponent } from './about/description/description.component'
   ],
   imports: [
     BrowserModule,
+    BrowserAnimationsModule,
     AppRoutingModule,
     NgOptimizedImage,
     SeoModule.forRoot({
diff --git a/src/app/common/animations.ts b/src/app/common/animations.ts
new file mode 100644
index 00000000..ac119e42
--- /dev/null
+++ b/src/app/common/animations.ts
@@ -0,0 +1,3 @@
+// To be in sync with animations in SCSS
+export const EMPHASIZED_DURATION_MS = 300;
+export const TIMING_FUNCTION = 'cubic-bezier(0.2, 0.0, 0, 1.0)'
diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
index b1dc71b4..0caabf65 100644
--- a/src/app/header/header.component.html
+++ b/src/app/header/header.component.html
@@ -1,5 +1,5 @@
 <div class="bar">
-  <div class="buttons hideIfNoScript">
+  <div class="buttons displayNoneIfNoScript">
     <button (click)="colorSchemeService.toggleDarkLight()" aria-label="Color scheme toggle (dark or light)"
             class="dark-light-scheme-toggle">
       <span class="material-symbols-outlined light-only">{{ MaterialSymbol.DarkTheme }}</span>
diff --git a/src/app/material-symbols.ts b/src/app/material-symbols.ts
index 6de42fcc..e3bf37e4 100644
--- a/src/app/material-symbols.ts
+++ b/src/app/material-symbols.ts
@@ -4,8 +4,17 @@ export const Warning = '\ue002'
 export const Email = '\ue158'
 export const Call = '\ue0b0'
 export const MyLocation = '\ue55c'
-export const Code = '\ue86f'
 export const History = '\ue889'
 export const Apps = '\ue5c3'
 export const Api = '\uf1b7'
 export const Build = '\ue869'
+export const Dns = '\ue875'
+export const Smartphone = '\ue32c'
+export const Web = '\ue051'
+export const Database = '\uf20e'
+export const Robot2 = '\uf5d0'
+export const Cloud = '\ue2bd'
+export const DeployedCode = '\uf720'
+export const Terminal = '\ueb8e'
+export const Login = '\uea77'
+export const Security = '\ue32a'
diff --git a/src/app/metadata.ts b/src/app/metadata.ts
index 0c4e9530..a4da09ff 100644
--- a/src/app/metadata.ts
+++ b/src/app/metadata.ts
@@ -1,4 +1,19 @@
-import { Api, Apps, Build, Code, History } from './material-symbols';
+import {
+  Api,
+  Apps,
+  Build,
+  Cloud,
+  Database,
+  DeployedCode,
+  Dns,
+  History,
+  Login,
+  Robot2,
+  Security,
+  Smartphone,
+  Terminal,
+  Web,
+} from './material-symbols';
 
 /**
  * Metadata used around the app. Either in the Angular app or accessory files.
@@ -7,6 +22,7 @@ import { Api, Apps, Build, Code, History } from './material-symbols';
  */
 const NICKNAME = 'davidlj95';
 const REAL_NAME = 'David LJ';
+const TITLE = 'Senior software engineer'
 // 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();
@@ -14,47 +30,134 @@ 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> = [
-  {
-    symbol: Code,
-    text: 'Full stack software engineer',
-  },
-  {
-    symbol: History,
-    text: `${YEARS_OF_EXPERIENCE}+ years of experience`,
-  },
-  {
-    symbol: Apps,
-    text: 'Web apps & hybrid mobile apps',
-  },
-  {
-    symbol: Api,
-    text: 'REST APIs backends',
-  },
-  {
-    symbol: Build,
-    text: 'CI/CD, DevOps, Cloud',
-  },
-]
 
-export interface DescriptionLine {
-  symbol: string;
-  text: string;
+export class DescriptionLine {
+  public readonly data?: DescriptionLineData
+  public readonly children: ReadonlyArray<DescriptionLine>
+
+  public constructor(
+    data?: DescriptionLineData,
+    children?: ReadonlyArray<DescriptionLine>,
+  ) {
+    this.data = data
+    this.children = children ?? []
+  }
+
+  public static fromData(dataArg: ConstructorParameters<typeof DescriptionLineData>[0], children?: ReadonlyArray<DescriptionLine>) {
+    return new this(new DescriptionLineData(dataArg), children)
+  }
 }
 
+export class DescriptionLineData {
+  public readonly symbol: string
+  public readonly html: string
+  public readonly text: string
+
+  public constructor(
+    {symbol, html, text}: { symbol: string, html: string, text?: string },
+  ) {
+    this.symbol = symbol
+    this.html = html
+    this.text = text ??
+      // Strip HTML tags
+      html.replace(/(<([^>]+)>)/gi, '');
+  }
+}
+
+const DESCRIPTION_LINES: ReadonlyArray<DescriptionLine> = [
+  DescriptionLine.fromData({
+      symbol: History,
+      html: `${YEARS_OF_EXPERIENCE}+ years \
+<a class="craft" href="https://manifesto.softwarecraftsmanship.org/">crafting</a>`,
+    }, [
+      DescriptionLine.fromData({
+          symbol: Apps,
+          html: 'Frontends',
+        },
+        [
+          DescriptionLine.fromData({
+            symbol: Smartphone,
+            html: '<a href="https://www.linfo.org/cross-platform.html">Cross-platform</a> mobile apps',
+          }),
+          DescriptionLine.fromData({
+            symbol: Web,
+            html: 'Websites and web apps',
+          }),
+        ],
+      ),
+      DescriptionLine.fromData({
+        symbol: Dns,
+        html: 'Backends',
+      }, [
+        DescriptionLine.fromData({
+          symbol: Api,
+          html: `HTTP <a href="https://www.ibm.com/topics/rest-apis">REST APIs</a>`,
+        }),
+        DescriptionLine.fromData({
+          symbol: Database,
+          html: 'Relational databases',
+        }),
+        DescriptionLine.fromData({
+          symbol: Login,
+          html: `<a href="https://www.cloudflare.com/en-gb/learning/access-management/authn-vs-authz/">AuthNZ</a>: \
+<a href="https://oauth.net/2/">OAuth 2</a> & <a href="https://www.okta.com/blog/2021/02/single-sign-on-sso/">SSO</a>`,
+        }),
+      ]),
+      DescriptionLine.fromData({
+        symbol: Build,
+        html: 'Infrastructure and tooling',
+      }, [
+        DescriptionLine.fromData({
+          symbol: Robot2,
+          html: '<a href="https://about.gitlab.com/topics/ci-cd/">CI/CD</a> pipelines',
+        }),
+        DescriptionLine.fromData({
+          symbol: Terminal,
+          html: 'Shell scripting',
+        }),
+        DescriptionLine.fromData({
+          symbol: DeployedCode,
+          html: '<a href="https://aws.amazon.com/what-is/containerization/">Containerization</a>',
+        }),
+        DescriptionLine.fromData({
+          symbol: Cloud,
+          html: `<a href="https://github.com/cncf/toc/blob/main/DEFINITION.md">Cloud native</a> \
+<span class="sr-only">and</span><span aria-hidden="true">&</span> \
+<a href="https://www.redhat.com/en/topics/automation/what-is-infrastructure-as-code-iac" \
+aria-label="Infrastructure as Code">IaC</a>`,
+          text: `Cloud native and Infrastructure as Code (IaC)`,
+        }),
+      ]),
+    ],
+  ),
+  DescriptionLine.fromData({
+    symbol: Security,
+    html: `With <a href="https://www.cisa.gov/securebydesign#:~:text=What%20is%20Secure%20by%20Design%3F">security in mind</a>`,
+  }),
+]
+
 const DOMAIN_NAME = `${NICKNAME}.com`;
 
+const getDescriptionFromTitleAndLines = (title: string, lines: ReadonlyArray<DescriptionLine>): string => {
+  const formatter = new Intl.ListFormat('en')
+  return [`${title}. `].concat(lines.flatMap((line, index) =>
+    [
+      line.data?.text.replace(/:$/, '') ?? '',
+      line.children.length ? ' ' + formatter.format(
+        line.children.map((subLine) => subLine.data?.text.toLowerCase() ?? ''),
+      ) : '',
+      index != lines.length - 1 ? '. ' : '',
+    ],
+  )).join('')
+}
 export const METADATA = {
   nickname: NICKNAME,
   realName: REAL_NAME,
+  title: TITLE,
   siteName: `${REAL_NAME} 🔗 @${NICKNAME}`,
   descriptionLines: DESCRIPTION_LINES,
-  description: DESCRIPTION_LINES
-    .map((descriptionLine) => descriptionLine.text)
-    // Strip HTML tags
-    .map((lineText) => lineText.replace(/(<([^>]+)>)/gi, ''))
-    .concat(['Get to know me better here'])
-    .join('. '),
+  description: getDescriptionFromTitleAndLines(TITLE, DESCRIPTION_LINES)
+    .concat('. Get to know me more here'),
   domainName: DOMAIN_NAME,
   authorUrl: new URL(`https://${DOMAIN_NAME}`),
   // Chosen dark theme background color z0 level (theming.scss)
diff --git a/src/humans.txt b/src/humans.txt
index 9afca367..4a7635df 100644
--- a/src/humans.txt
+++ b/src/humans.txt
@@ -1,11 +1,22 @@
-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:
+Hi, I'm David LJ. Also known as davidlj95 in the cyberspace. Your trustworthy senior software engineer
+I happen to be the author of my own site too.
 
-*  Full stack software engineer
-*  9+ years of experience
-*  Web apps & hybrid mobile apps
-*  REST APIs backends
-*  CI/CD, DevOps, Cloud
+Some things about me:
+
+┌ 9+ years crafting
+│ ├ Frontends
+│ │ ├ Cross-platform mobile apps
+│ │ └ Websites and web apps
+│ ├ Backends
+│ │ ├ HTTP REST APIs
+│ │ ├ Relational databases
+│ │ └ AuthNZ: OAuth 2 & SSO
+│ └ Infrastructure and tooling
+│   ├ CI/CD pipelines
+│   ├ Shell scripting
+│   ├ Containerization
+│   └ Cloud native and Infrastructure as Code (IaC)
+└ With security in mind
 
 Visit the website for more info!
 
diff --git a/src/humans.txt.liquid b/src/humans.txt.liquid
index 8635e660..d6acebac 100644
--- a/src/humans.txt.liquid
+++ b/src/humans.txt.liquid
@@ -1,8 +1,45 @@
-Hi, I'm {{ realName }}. Also known as {{ nickname }} 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:
+Hi, I'm {{ realName }}. Also known as {{ nickname }} in the cyberspace. Your trustworthy {{ title | downcase }}
+I happen to be the author of my own site too.
 
-{% for descriptionLine in descriptionLines %}* {{ descriptionLine.emoji }} {{ descriptionLine.text }}
-{% endfor %}
+Some things about me:
+
+{% liquid
+for line in descriptionLines
+  if forloop.first
+    echo '┌'
+  elsif forloop.last
+    echo '└'
+  else
+    echo '├'
+  endif
+  echo ' ' | append: line.data.text | append: '\n'
+  for subline in line.children
+    echo '│ '
+    unless forloop.last
+      echo '├'
+    else
+      echo '└'
+    endunless
+    echo ' ' | append: subline.data.text | append: '\n'
+    assign last_subline = forloop.last
+    for subsubline in subline.children
+      echo '│ '
+      if last_subline
+        echo ' '
+      else
+        echo '│'
+      endif
+      echo ' '
+      unless forloop.last
+        echo '├'
+      else
+        echo '└'
+      endunless
+      echo ' ' | append: subsubline.data.text | append: '\n'
+    endfor
+  endfor
+endfor
+%}
 Visit the website for more info!
 
 You may wonder: why this thing is here? Well was reading about "robots.txt" in Wikipedia when building this site and
diff --git a/src/index.html b/src/index.html
index 7ae5c8f5..61c37ef0 100644
--- a/src/index.html
+++ b/src/index.html
@@ -34,11 +34,11 @@
          * Specifically, the navigation tabs and the active tab items. Or displaying the toolbar and navigation tabs if
          * JS is enabled.
          **/
-        .showIfNoScript {
-            display: block !important;
+        .visibleIfNoScript {
+            visibility: visible !important;
         }
 
-        .hideIfNoScript {
+        .displayNoneIfNoScript {
             display: none !important;
         }
 
diff --git a/src/sass/_animations.scss b/src/sass/_animations.scss
index 61139789..c1c98866 100644
--- a/src/sass/_animations.scss
+++ b/src/sass/_animations.scss
@@ -1,4 +1,5 @@
 // https://m3.material.io/styles/motion
+// To be in sync with animations.ts
 $standard-style: standard;
 $emphasized-style: emphasized;
 $standard-easing: cubic-bezier(0.2, 0.0, 0, 1.0);
diff --git a/src/sass/_typographies.scss b/src/sass/_typographies.scss
index d80800ae..9cf021fb 100644
--- a/src/sass/_typographies.scss
+++ b/src/sass/_typographies.scss
@@ -1,5 +1,5 @@
 @mixin body-font {
-  font-family: "Tahoma", Helvetica, sans-serif;
+  font-family: Helvetica, sans-serif;
 }
 
 @mixin monospace-font {
diff --git a/src/site.webmanifest b/src/site.webmanifest
index 796102a4..6d928a7b 100644
--- a/src/site.webmanifest
+++ b/src/site.webmanifest
@@ -1,7 +1,7 @@
 {
   "name": "David LJ 🔗 @davidlj95",
   "short_name": "davidlj95",
-  "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",
+  "description": "Senior software engineer. 9+ years crafting frontends, backends, and infrastructure and tooling. With security in mind. Get to know me more here",
   "display": "browser",
   "background_color": "#202023",
   "theme_color": "#202023",
diff --git a/src/styles.scss b/src/styles.scss
index 033bbe27..1568d5c9 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -22,9 +22,21 @@ code, pre {
 }
 
 // Needed for some accessibility tricks around
-// It's empty as Font Awesome already provides this class
-// But at least declaring it explicitly in case we remove it and need to implement it ourselves
-.sr-only {}
+// Font Awesome already provides this class, but it's copy/pasted to have it when:
+//  CSS loads, but JS hasn't loaded yet and style isn't there yet (it's injected by JS)
+//  No JS
+// https://github.com/FortAwesome/Font-Awesome/blob/6.4.2/scss/_mixins.scss#L22-L35
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
 
 @include typographies.material-symbols-font();
 
diff --git a/src/test/constants.ts b/src/test/helpers/material-symbols.ts
similarity index 56%
rename from src/test/constants.ts
rename to src/test/helpers/material-symbols.ts
index 3a69ed05..4a0cfb0e 100644
--- a/src/test/constants.ts
+++ b/src/test/helpers/material-symbols.ts
@@ -1,4 +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}`)
+export const MATERIAL_SYMBOLS_SELECTOR = By.css(`.${MATERIAL_SYMBOLS_CLASS}`)
diff --git a/src/test/helpers/platform-ids.ts b/src/test/helpers/platform-ids.ts
new file mode 100644
index 00000000..f2726439
--- /dev/null
+++ b/src/test/helpers/platform-ids.ts
@@ -0,0 +1,6 @@
+// Constants for mocking platform in tests
+// https://github.com/angular/angular/blob/16.2.6/packages/common/src/platform_id.ts#L9-L12
+export const PLATFORM_BROWSER_ID = 'browser';
+export const PLATFORM_SERVER_ID = 'server';
+export const PLATFORM_WORKER_APP_ID = 'browserWorkerApp';
+export const PLATFORM_WORKER_UI_ID = 'browserWorkerUi';
diff --git a/src/test/helpers/visibility.ts b/src/test/helpers/visibility.ts
new file mode 100644
index 00000000..aad77fd1
--- /dev/null
+++ b/src/test/helpers/visibility.ts
@@ -0,0 +1,16 @@
+// TODO: those could be custom matchers
+export function expectIsVisible(element: Element) {
+  expectVisibility(element, true)
+}
+export function expectIsHidden(element: Element) {
+  expectVisibility(element, false)
+}
+
+function expectVisibility(element: Element, visible: boolean) {
+  const styles = getComputedStyle(element);
+  const isHiddenWithVisibility = styles.visibility === 'hidden'
+  const isHiddenWithDisplay = styles.display === 'none'
+  expect(isHiddenWithDisplay || isHiddenWithVisibility)
+    .withContext(`is ${visible ? '' : 'not '}visible`)
+    .toBe(!visible)
+}