fix(site): remove canvas frame, invert logos, new footer text

The canvas had a 1px frame. The company logos are opaque white, so
invert them to match the dark tiles. Core fetches the Auth public key
(JWKS), so the To Be Played diagram now shows that arrow.

src/app/layout/app/app.component.html

@@ -5,7 +5,7 @@
 </main>
 
 <footer class="border-t border-black/8 p-fluid-md text-center opacity-80 bg-app-bg">
-  <small>© {{ currentYear }} Andreas Dahm - {{ `APP.COPYRIGHT` | translate }}</small>
+  <small>© {{ currentYear }} Andreas Dahm. {{ 'APP.COPYRIGHT' | translate }}</small>
   <br />
   <small>
     {{ 'APP.AI_NOTICE' | translate }}

src/app/layout/app/app.component.spec.ts

@@ -0,0 +1,38 @@
+import { TestBed } from '@angular/core/testing';
+import { Component, provideZonelessChangeDetection } from '@angular/core';
+import { provideRouter } from '@angular/router';
+import { provideTranslateService } from '@ngx-translate/core';
+import { AppComponent } from './app.component';
+import { TopbarComponent } from '../topbar/topbar.component';
+import { ParticleBackgroundComponent } from '../../shared/components/particles-background/particles-background.component';
+import { SeoService } from '../../service/seo.service';
+
+@Component({ selector: 'app-topbar', template: '' })
+class TopbarStub {}
+
+@Component({ selector: 'app-particles-background', template: '' })
+class ParticlesStub {}
+
+describe('AppComponent', () => {
+  it('renders the copyright line with year, name and a closing dot', async () => {
+    TestBed.overrideComponent(AppComponent, {
+      remove: { imports: [TopbarComponent, ParticleBackgroundComponent] },
+      add: { imports: [TopbarStub, ParticlesStub] },
+    });
+    await TestBed.configureTestingModule({
+      imports: [AppComponent],
+      providers: [
+        provideZonelessChangeDetection(),
+        provideRouter([]),
+        provideTranslateService({ lang: 'en', fallbackLang: 'en' }),
+        { provide: SeoService, useValue: { init: vi.fn() } },
+      ],
+    }).compileComponents();
+
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+
+    const text = fixture.nativeElement.querySelector('footer small').textContent.trim();
+    expect(text).toBe(`© ${new Date().getFullYear()} Andreas Dahm. APP.COPYRIGHT`);
+  });
+});

src/app/pages/about/about.component.html

@@ -73,7 +73,8 @@
       <div class="relative pl-14 pb-fluid-sm">
         @if (isFirstRoleAtCompany(i)) {
         <img src="{{entry.logo}}" alt="" aria-hidden="true"
-          class="absolute left-0 top-0 w-10 h-10 object-contain opacity-90 rounded-[10%] bg-logo-bg" />
+          class="absolute left-0 top-0 w-10 h-10 object-contain opacity-90 rounded-[10%] bg-logo-bg"
+          [class.invert]="entry.invertLogo" />
         <div class="font-semibold opacity-90 text-[clamp(0.9rem,2.2vw,1.05rem)] leading-10" data-testid="company">
           {{ (entry.key + '.COMPANY') | translate }}
         </div>

src/app/pages/about/about.component.spec.ts

@@ -5,6 +5,7 @@ import { MatIconRegistry } from '@angular/material/icon';
 import { provideRouter } from '@angular/router';
 import { provideTranslateService } from '@ngx-translate/core';
 import { AboutComponent } from './about.component';
+import { AssetsConstants } from '../../constants/AssetsConstants';
 
 /**
  * No translations are loaded, so the translate pipe echoes the key back. That is
@@ -110,6 +111,16 @@ describe('AboutComponent', () => {
       expect(textOf('[data-testid="role"]')).not.toContain('ABOUT.XP.COMPANY0.ROLE');
     });
 
+    it('inverts the opaque white logos so they read as dark tiles', () => {
+      const inverted = fixture.debugElement
+        .queryAll(By.css('img.invert'))
+        .map(img => new URL(img.nativeElement.src, 'http://localhost').pathname);
+      const expected = [AssetsConstants.COLORDIGITAL_LOGO, AssetsConstants.TERAPORT_LOGO]
+        .map(src => new URL(src, 'http://localhost/').pathname);
+
+      expect(new Set(inverted)).toEqual(new Set(expected));
+    });
+
     it('reveals the earlier positions when the toggle button is clicked', () => {
       click('toggle-experience');
 
@@ -166,11 +177,14 @@ describe('AboutComponent', () => {
   describe('education', () => {
     it('shows only the post-school entries until the toggle button is clicked', () => {
       expect(textOf('[data-testid="education-where"]')).toContain('ABOUT.EDUCATION.E6.WHERE');
-      expect(textOf('[data-testid="education-where"]')).not.toContain('ABOUT.EDUCATION.E0.WHERE');
+      expect(textOf('[data-testid="education-where"]')).not.toContain('ABOUT.EDUCATION.E2.WHERE');
+      expect(textOf('[data-testid="education-where"]').length).toBe(3);
 
       click('toggle-education');
 
+      expect(textOf('[data-testid="education-where"]')).toContain('ABOUT.EDUCATION.E2.WHERE');
       expect(textOf('[data-testid="education-where"]')).toContain('ABOUT.EDUCATION.E0.WHERE');
+      expect(textOf('[data-testid="education-where"]').length).toBe(7);
     });
   });
 

src/app/pages/about/about.component.ts

@@ -17,6 +17,8 @@ interface ExperienceEntry {
   company: string;
   logo: string;
   highlightCount: number;
+  /** The source file is opaque white; inverting gives the same dark tile as the other logos. */
+  invertLogo?: boolean;
 }
 
 interface SkillGroup {
@@ -50,25 +52,29 @@ export class AboutComponent {
       key: 'ABOUT.XP.COMPANY9',
       company: 'colordigital',
       logo: AssetsConstants.COLORDIGITAL_LOGO,
-      highlightCount: 3
+      highlightCount: 3,
+      invertLogo: true
     },
     {
       key: 'ABOUT.XP.COMPANY8',
       company: 'teraport',
       logo: AssetsConstants.TERAPORT_LOGO,
-      highlightCount: 3
+      highlightCount: 3,
+      invertLogo: true
     },
     {
       key: 'ABOUT.XP.COMPANY7',
       company: 'colordigital-earlier',
       logo: AssetsConstants.COLORDIGITAL_LOGO,
-      highlightCount: 3
+      highlightCount: 3,
+      invertLogo: true
     },
     {
       key: 'ABOUT.XP.COMPANY6',
       company: 'colordigital-earlier',
       logo: AssetsConstants.COLORDIGITAL_LOGO,
-      highlightCount: 3
+      highlightCount: 3,
+      invertLogo: true
     },
     {
       key: 'ABOUT.XP.COMPANY5',

src/app/shared/components/particles-background/particles-background.component.scss

@@ -7,3 +7,7 @@
   z-index: -1;
   pointer-events: none;
 }
+
+canvas {
+  box-shadow: none;
+}