Minor improvements

src/page/background/background.ts

@@ -20,10 +20,8 @@ export class PageBackground extends PageElement {
   ) {
     super(createElement(generate()));
 
-    for (let i = 0; i < window.innerWidth / 10; i++) {
+    for (let i = 0; i < Math.max(30, window.innerWidth / 10); i++) {
       const blob = document.createElement('div');
-      blob.classList.add('blob');
-      blob.style.width = '140px';
       const z = this.random.inInterval(PageBackground.zMin, PageBackground.zMax);
       blob.style.zIndex = (-z).toFixed(0);
       blob.style.opacity = (
@@ -62,7 +60,7 @@ export class PageBackground extends PageElement {
 
   protected initialize() {
     super.initialize();
-    requestAnimationFrame(this.drawIfNecessary.bind(this));
+    this.drawIfNecessary();
   }
 
   private getSiblings(): Array<HTMLElement> {

src/page/header/header.html.ts

@@ -10,10 +10,13 @@ export const generate = ({
   about: Array<string>;
   photo: html;
 }): html => `
-  <section id="about">
+  <header id="about">
     ${photo}
+
     <div class="placeholder"></div>
+
     <h1>${name}</h1>
+
     ${about.map((t) => `<p>${t}</p>`).join('')}
-  </section>
+  </header>
 `;

src/page/header/header.ts

@@ -1,6 +1,6 @@
 import { createElement } from '../../helper/create-element';
 import { ResponsiveImage } from '../../types/responsive-image';
-import { Image } from '../basics/image/image.html';
+import { Image } from '../image-viewer/image/image.html';
 import { PageElement } from '../page-element';
 import { generate } from './header.html';
 import { PageThemeSwitcher } from './theme-switcher/theme-switcher';

src/page/image-viewer/image-viewer.html.ts

@@ -5,6 +5,6 @@ import './image-viewer.scss';
 export const generate = (): html => `
   <section id="image-viewer">
     <img height="0" width="0" image-viewer-ignore />
-    <div tabindex="0" id="cancel">${cancel}</div>
+    <div tabindex="2" id="cancel">${cancel}</div>
   </section>
 `;

src/page/image-viewer/image-viewer.ts

@@ -7,11 +7,14 @@ export class PageImageViewer extends PageElement {
     super(createElement(generate()));
 
     document.body.addEventListener('click', (event: MouseEvent) => {
-      if (
+      const element = event.target as HTMLElement;
-        event.target instanceof HTMLImageElement &&
+
-        !(event.target.attributes['image-viewer-ignore'] as boolean | undefined)
+      if (element.classList?.contains('image')) {
-      ) {
+        this.showImage(element.querySelector('img')!);
-        this.showImage(event.target);
+      }
+
+      if (element instanceof HTMLImageElement) {
+        this.showImage(element);
       }
     });
 
@@ -25,6 +28,10 @@ export class PageImageViewer extends PageElement {
   }
 
   private showImage(source: HTMLImageElement) {
+    if (source.attributes['image-viewer-ignore'] as boolean | undefined) {
+      return;
+    }
+
     const image = this.query('img') as HTMLImageElement;
     image.src = '';
     image.src = source.src;

src/page/timeline/timeline-element/timeline-element-parameters.ts

@@ -1,6 +1,6 @@
 import { html } from '../../../types/html';
-import { Preview } from '../../basics/preview/preview';
+import { Preview } from '../../preview/preview';
-import { Video } from '../../basics/video/video';
+import { Video } from '../../video/video';
 
 export interface TimelineElementParameters {
   date: string;