Fix background and fix PageElement system

.vscode/settings.json

@@ -1,9 +1,11 @@
 {
   "cSpell.words": [
+    "Glsl",
     "andras",
     "decla",
     "favicons",
     "forex",
+    "froms",
     "schmelczer",
     "webm",
     "webp"

src/events/concrete-events/on-event-broadcaster-changed-event.ts

@@ -1,12 +0,0 @@
-import { Event } from '../event';
-import { EventHandler } from '../event-handler';
-import { EventBroadcaster } from '../event-broadcaster';
-import { OptionalEvent } from '../optional-event';
-
-export class OnEventBroadcasterChangedEvent implements Event {
-  public constructor(public broadcaster: EventBroadcaster) {}
-
-  public accept(handler: EventHandler): OptionalEvent {
-    return handler.handleOnEventBroadcasterChangedEvent(this);
-  }
-}

src/events/concrete-events/on-load-event.ts

@@ -1,12 +0,0 @@
-import { Event } from '../event';
-import { EventHandler } from '../event-handler';
-import { OptionalEvent } from '../optional-event';
-import { PageElement } from '../../page/page-element';
-
-export class OnLoadEvent implements Event {
-  public constructor(public parent: PageElement) {}
-
-  public accept(handler: EventHandler): OptionalEvent {
-    return handler.handleOnLoadEvent(this);
-  }
-}

src/events/concrete-events/on-page-theme-changed-event.ts

@@ -1,11 +0,0 @@
-import { Event } from '../event';
-import { EventHandler } from '../event-handler';
-import { OptionalEvent } from '../optional-event';
-
-export class OnPageThemeChangedEvent implements Event {
-  public constructor(public isDark: boolean) {}
-
-  public accept(handler: EventHandler): OptionalEvent {
-    return handler.handleOnPageThemeChangedEvent(this);
-  }
-}

src/events/event-broadcaster.ts

@@ -1,5 +0,0 @@
-import { Event } from './event';
-
-export interface EventBroadcaster {
-  broadcastEvent(event: Event): void;
-}

src/events/event-handler.ts

@@ -1,26 +0,0 @@
-import { Event } from './event';
-import { OnLoadEvent } from './concrete-events/on-load-event';
-
-import { OnPageThemeChangedEvent } from './concrete-events/on-page-theme-changed-event';
-import { OnEventBroadcasterChangedEvent } from './concrete-events/on-event-broadcaster-changed-event';
-import { OptionalEvent } from './optional-event';
-
-export abstract class EventHandler {
-  public handle(event: Event): OptionalEvent {
-    return event.accept(this);
-  }
-
-  public handleOnLoadEvent(event: OnLoadEvent): OptionalEvent {
-    return event;
-  }
-
-  public handleOnEventBroadcasterChangedEvent(
-    event: OnEventBroadcasterChangedEvent
-  ): OptionalEvent {
-    return event;
-  }
-
-  public handleOnPageThemeChangedEvent(event: OnPageThemeChangedEvent): OptionalEvent {
-    return event;
-  }
-}

src/events/event.ts

@@ -1,6 +0,0 @@
-import { EventHandler } from './event-handler';
-import { OptionalEvent } from './optional-event';
-
-export interface Event {
-  accept(handler: EventHandler): OptionalEvent;
-}

src/events/optional-event.ts

@@ -1,3 +0,0 @@
-import { Event } from './event';
-
-export type OptionalEvent = Event | undefined;

src/helper/random.ts

@@ -1,5 +1,5 @@
 export class Random {
-  public constructor(private seed: number) {}
+  public constructor(public seed: number = 42) {}
 
   public get next(): number {
     // result is in [0, 1)
@@ -7,10 +7,10 @@ export class Random {
   }
 
   public choose<T>(list: Array<T>): T {
-    return list[Math.floor(this.randomInInterval(0, list.length))];
+    return list[Math.floor(this.inInterval(0, list.length))];
   }
 
-  public randomInInterval(aClosed: number, bOpen: number): number {
+  public inInterval(aClosed: number, bOpen: number): number {
     return (bOpen - aClosed) * this.next + aClosed;
   }
 }

src/index.html

@@ -5,10 +5,10 @@
 
     <meta property="og:image:width" content="1500" />
     <meta property="og:image:height" content="785" />
-    <meta property="og:title" content="Andr&aacute;s Schmelczer - Portfolio" />
+    <meta property="og:image" content="https://schmelczer.dev/og-image.jpg" />
+    <meta property="og:title" content="Portfolio - Andr&aacute;s Schmelczer" />
     <meta property="og:description" content="Discover my projects." />
     <meta property="og:url" content="https://schmelczer.dev" />
-    <meta property="og:image" content="https://schmelczer.dev/og-image.jpg" />
 
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
     <link rel="icon" href="favicon.ico" type="image/x-icon" />
@@ -30,11 +30,9 @@
       rel="stylesheet"
     />
 
-    <title>András Schmelczer - Portfolio</title>
+    <title>Portfolio - András Schmelczer</title>
   </head>
   <body>
-    <main>
+    <noscript>Javascript is required for this website.</noscript>
-      <noscript><h1>Javascript is required for this website.</h1></noscript>
-    </main>
   </body>
 </html>

src/page/background/animation.ts

@@ -1,30 +0,0 @@
-export class Animation<T> {
-  private _value: T;
-  private elapsedTime = 0;
-
-  public constructor(
-    private from: T,
-    private to: T,
-    private intervalInMs: number,
-    private interpolator: (from: T, to: T, q: number) => T,
-    private onChange?: (currentValue: T) => void
-  ) {
-    this._value = from;
-  }
-
-  public step(deltaTimeInMs: number) {
-    if (this.elapsedTime === this.intervalInMs) {
-      return;
-    }
-
-    this.elapsedTime = Math.min(this.elapsedTime + deltaTimeInMs, this.intervalInMs);
-
-    const q = this.elapsedTime / this.intervalInMs;
-    this._value = this.interpolator(this.from, this.to, q);
-    this.onChange?.call(null, this._value);
-  }
-
-  public get value(): T {
-    return this._value;
-  }
-}

src/page/background/background.html.ts

@@ -2,5 +2,5 @@ import './background.scss';
 import { html } from '../../types/html';
 
 export const generate = (): html => `
-  <canvas id="background"></canvas>
+  <div id="background"></div>
 `;

src/page/background/background.scss

@@ -1,12 +1,20 @@
 @use '../../style/mixins' as *;
+@use '../../style/dark-mode/dark-mode' as *;
 
-canvas#background {
+.blob {
-  position: fixed;
+  position: absolute;
-  top: 0;
   left: 0;
-  height: 100%;
+  top: 0;
-  width: 100%;
+  border-radius: 1000px;
-  z-index: -10;
+  transition: background-color var(--transition-time);
+
+  &:nth-child(odd) {
+    background-color: #fff9e0;
+  }
+
+  &:nth-child(even) {
+    background-color: #ffd6d6;
+  }
 
   @media print {
     & {
@@ -14,3 +22,9 @@ canvas#background {
     }
   }
 }
+
+@include in-dark-mode {
+  .blob {
+    background-color: #2c477a;
+  }
+}

src/page/background/background.ts

@@ -1,160 +1,121 @@
 import { PageElement } from '../page-element';
-import { Blob } from './blob';
 import { generate } from './background.html';
 
-import { Vec3 } from './vec3';
-import { Vec2 } from './vec2';
 import { createElement } from '../../helper/create-element';
 import { sum } from '../../helper/sum';
 import { getHeight } from '../../helper/get-height';
-import { OnLoadEvent } from '../../events/concrete-events/on-load-event';
+
-import { OptionalEvent } from '../../events/optional-event';
+import { mix } from '../../helper/mix';
-import { OnPageThemeChangedEvent } from '../../events/concrete-events/on-page-theme-changed-event';
+import { Random } from '../../helper/random';
 
 export class PageBackground extends PageElement {
-  public static readonly blobSpacing = 325;
+  private static readonly perspective = 5;
-  public static readonly minBlobCount = 30;
+  private static readonly zMin = 6;
-  public static readonly perspective = 5;
+  private static readonly zMax = 50;
-  public static readonly zMin = 10;
-  public static readonly zMax = 30;
 
-  private backgroundSize: Vec2;
+  private random: Random = new Random();
-  private scrollPosition = 0;
+  private blobs: Array<HTMLElement> = [];
-  private previousTimestamp: DOMHighResTimeStamp = null;
-  private readonly blobs: Array<Blob> = [];
-  private readonly canvas: HTMLCanvasElement;
-  private readonly ctx: CanvasRenderingContext2D;
-  private parent: PageElement;
 
   public constructor(
-    private readonly start: PageElement,
+    private readonly topOffsetElementCount: number,
-    private readonly inBetween: Array<PageElement>,
+    private readonly bottomOffsetElementCount: number
-    private readonly end: PageElement
   ) {
     super(createElement(generate()));
-    this.canvas = this.htmlRoot as HTMLCanvasElement;
+
-    this.ctx = this.canvas.getContext('2d');
+    for (let i = 0; i < 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 = (
+        1 -
+        (z - PageBackground.zMin) / (PageBackground.zMax - PageBackground.zMin)
+      ).toString();
+      blob.style.height = `${this.random.inInterval(360, 740)}px`;
+      this.blobs.push(blob);
+      this.htmlRoot.appendChild(blob);
+    }
   }
 
-  public handleOnLoadEvent(event: OnLoadEvent): OptionalEvent {
+  private windowHeight = 0;
-    this.parent = event.parent;
+  private windowWidth = 0;
-    requestAnimationFrame(this.draw.bind(this));
+  private contentHeight = 0;
-    return super.handleOnLoadEvent(event);
+  private drawIfNecessary() {
-  }
+    const siblings = this.getSiblings();
+    const currentContentHeight = sum(siblings.map(getHeight));
 
-  public handleOnPageThemeChangedEvent(event: OnPageThemeChangedEvent): OptionalEvent {
+    if (
-    Blob.changeTheme(event.isDark);
+      window.innerWidth !== this.windowWidth ||
-    this.blobs.forEach(b => b.decideColor());
+      window.innerHeight !== this.windowHeight ||
-    return super.handleOnPageThemeChangedEvent(event);
+      currentContentHeight !== this.contentHeight
-  }
+    ) {
+      this.windowWidth = window.innerWidth;
+      this.windowHeight = window.innerHeight;
+      this.contentHeight = currentContentHeight;
 
-  private createBlobs() {
+      this.randomizeBlobs(
-    const requiredBlobCount = Math.max(
+        sum(siblings.slice(0, this.topOffsetElementCount).map(getHeight)),
-      PageBackground.minBlobCount,
+        sum(siblings.slice(-this.bottomOffsetElementCount).map(getHeight))
-      (this.backgroundSize.x * this.backgroundSize.y) / PageBackground.blobSpacing ** 2
       );
-
-    while (requiredBlobCount > this.blobs.length) {
-      this.blobs.push(new Blob());
-    }
     }
 
-  private resizeCanvas() {
+    requestAnimationFrame(this.drawIfNecessary.bind(this));
-    this.canvas.width = this.canvas.clientWidth;
-    this.canvas.height = this.canvas.clientHeight;
   }
 
-  private resizeBackground() {
+  private parent?: HTMLElement;
-    const targetWidth = this.parent.htmlRoot.clientWidth;
+  protected setParent(parent: PageElement) {
-
+    this.parent = parent.htmlRoot;
-    const siblings: Array<HTMLElement> = this.getSiblings();
+    requestAnimationFrame(this.drawIfNecessary.bind(this));
-    const targetHeight = sum(siblings.map(getHeight));
+    super.setParent(parent);
-
-    if (targetWidth === this.canvas.width && targetHeight === this.canvas.height) {
-      return;
-    }
-
-    const targetSize = new Vec2(targetWidth, targetHeight);
-    this.backgroundSize = targetSize;
-
-    this.blobs.forEach(blob => {
-      const variableOffset = (offset, q) =>
-        Math.max(
-          0,
-          offset -
-            ((blob.z - PageBackground.zMin) /
-              (PageBackground.zMax - PageBackground.zMin)) *
-              offset *
-              q
-        );
-      const topOffset = variableOffset(getHeight(this.start.htmlRoot), 1);
-      const topLeft = this.convertFrom2Dto3D(new Vec2(0, topOffset), blob.z);
-
-      const bottomOffset = variableOffset(getHeight(this.end.htmlRoot), 0.2);
-      const bottomRight = this.convertFrom2Dto3D(
-        new Vec2(this.canvas.width, this.canvas.height - bottomOffset),
-        blob.z,
-        targetSize.y - this.canvas.height
-      );
-
-      blob.positionOffset = topLeft;
-      blob.positionScale = bottomRight.subtract(topLeft);
-    });
   }
 
   private getSiblings(): Array<HTMLElement> {
-    return [this.start, ...this.inBetween, this.end].map(e => e.htmlRoot);
+    return Array.prototype.slice
+      .call(this.parent!.childNodes)
+      .filter((n: HTMLElement) => n !== this.htmlRoot);
   }
 
-  private draw(timestamp: DOMHighResTimeStamp) {
+  private randomizeBlobs(topOffset: number, bottomOffset: number) {
-    this.resizeCanvas();
+    this.random.seed = 50;
-    this.resizeBackground();
+    this.blobs.forEach(b => {
-    this.createBlobs();
+      const z = -Number.parseInt(b.style.zIndex);
-
+      const [x, y] = this.randomXY(z, topOffset, bottomOffset);
-    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+      b.style.transform = `translate3D(${x}px, ${y}px, ${-z}px) rotate(-20deg)`;
-    const deltaTime = this.getDeltaTime(timestamp);
-    this.blobs.forEach(b => b.step(deltaTime));
-
-    this.scrollPosition = this.parent.htmlRoot.scrollTop;
-
-    this.blobs.sort((b1, b2) => b2.z - b1.z);
-
-    this.blobs.forEach(blob => {
-      const topLeft = this.convertFrom3Dto2D(blob.topLeft);
-      const bottomRight = this.convertFrom3Dto2D(
-        blob.topLeft.add(Vec3.from(blob.size, 0))
-      );
-
-      if (this.isInView(topLeft, bottomRight)) {
-        blob.draw(this.ctx, topLeft, bottomRight.subtract(topLeft));
-      }
     });
-
-    requestAnimationFrame(this.draw.bind(this));
   }
 
-  private getDeltaTime(timestamp: DOMHighResTimeStamp): number {
+  private randomXY(z: number, topOffset: number, bottomOffset: number): [number, number] {
-    const deltaTime = this.previousTimestamp ? timestamp - this.previousTimestamp : 0;
+    const farTop = -(
-    this.previousTimestamp = timestamp;
+      ((this.windowHeight / 2 - topOffset) / PageBackground.perspective) *
-    return Math.max(0, deltaTime);
+        (PageBackground.zMax + PageBackground.perspective) -
-  }
+      this.windowHeight / 2
-
-  private convertFrom3Dto2D(p: Vec3): Vec2 {
-    const m = PageBackground.perspective / (PageBackground.perspective + p.z);
-    return new Vec2(m * (p.z / 2 + p.x), m * (p.z / 2 + p.y - this.scrollPosition));
-  }
-
-  private convertFrom2Dto3D(p: Vec2, z: number, scrollPosition = 0): Vec2 {
-    const m = 1 + z / PageBackground.perspective;
-    return new Vec2(p.x * m - z / 2, p.y * m - z / 2 + scrollPosition);
-  }
-
-  private isInView(topLeft: Vec2, bottomRight: Vec2): boolean {
-    return (
-      ((0 <= topLeft.x && topLeft.x <= this.canvas.width) ||
-        (0 <= bottomRight.x && bottomRight.x < this.canvas.width)) &&
-      ((0 <= topLeft.y && topLeft.y <= this.canvas.height) ||
-        (0 <= bottomRight.y && bottomRight.y <= this.canvas.height))
     );
+
+    const farBottom =
+      ((this.windowHeight / 2 - bottomOffset) / PageBackground.perspective) *
+        (PageBackground.zMax + PageBackground.perspective) -
+      this.windowHeight / 2 +
+      this.contentHeight;
+
+    const endXSpan =
+      ((this.windowWidth / PageBackground.perspective) *
+        (PageBackground.zMax + PageBackground.perspective)) /
+      2;
+
+    return [
+      this.random.inInterval(
+        mix(0, -(endXSpan - this.windowWidth / 2), z / PageBackground.zMax),
+        mix(
+          this.windowWidth,
+          this.windowWidth + endXSpan - this.windowWidth / 2,
+          z / PageBackground.zMax
+        )
+      ),
+      this.random.inInterval(
+        mix(topOffset, farTop, z / PageBackground.zMax),
+        mix(this.contentHeight - bottomOffset, farBottom, z / PageBackground.zMax)
+      ),
+    ];
   }
 }

src/page/background/blob.ts

@@ -1,100 +0,0 @@
-import { Vec2 } from './vec2';
-import { Vec3 } from './vec3';
-
-import { Random } from '../../helper/random';
-import { Animation } from './animation';
-import { PageBackground } from './background';
-import { mix } from '../../helper/mix';
-
-export class Blob {
-  private static readonly darkColors = [new Vec3(44, 71, 122)];
-  private static readonly lightColors = [
-    new Vec3(255, 249, 224),
-    new Vec3(255, 214, 214),
-  ];
-  private static readonly creatorRandom = new Random(51);
-
-  private static colorPickerRandom = new Random(132);
-  private static isDarkThemed = false;
-
-  public static changeTheme(isDarkThemed: boolean) {
-    Blob.colorPickerRandom = new Random(132);
-    Blob.isDarkThemed = isDarkThemed;
-  }
-
-  public readonly z = Blob.creatorRandom.randomInInterval(
-    PageBackground.zMin,
-    PageBackground.zMax
-  );
-  private color: Animation<Vec3>;
-
-  private readonly positionQ = new Vec2(Blob.creatorRandom.next, Blob.creatorRandom.next);
-  private _positionScale = new Vec2(0, 0);
-  private _positionOffset = new Vec2(0, 0);
-  private opacity: number;
-
-  private readonly _size = new Vec2(140, Blob.creatorRandom.randomInInterval(260, 740));
-
-  public constructor() {
-    this.opacity =
-      1 - (this.z - PageBackground.zMin) / (PageBackground.zMax - PageBackground.zMin);
-
-    this.decideColor();
-  }
-
-  public decideColor() {
-    const target = Blob.colorPickerRandom.choose(
-      Blob.isDarkThemed ? Blob.darkColors : Blob.lightColors
-    );
-
-    this.color = new Animation<Vec3>(
-      this.color ? this.color.value : target,
-      target,
-      125,
-      (f, t, q) => {
-        return new Vec3(mix(f.x, t.x, q), mix(f.y, t.y, q), mix(f.z, t.z, q));
-      }
-    );
-  }
-
-  public step(deltaTime: number) {
-    this.color?.step(deltaTime);
-  }
-
-  public get topLeft(): Vec3 {
-    return Vec3.from(
-      this.positionQ.multiply(this._positionScale).add(this._positionOffset),
-      this.z
-    );
-  }
-
-  public get size(): Vec2 {
-    return this._size;
-  }
-
-  public set positionScale(value: Vec2) {
-    this._positionScale = value;
-  }
-
-  public set positionOffset(value: Vec2) {
-    this._positionOffset = value;
-  }
-
-  public draw(ctx: CanvasRenderingContext2D, position: Vec2, size: Vec2) {
-    ctx.save();
-
-    ctx.translate(position.x, position.y);
-    ctx.rotate((-20 / 180) * Math.PI);
-
-    ctx.beginPath();
-    ctx.arc(0, size.x / 2, size.x / 2, Math.PI, 0);
-    ctx.arc(0, size.y - size.x / 2, size.x / 2, 0, Math.PI);
-    ctx.closePath();
-
-    const { x, y, z } = this.color.value;
-    ctx.fillStyle = `rgba(${x}, ${y}, ${z}, ${this.opacity})`;
-    ctx.fill();
-
-    ctx.restore();
-  }
-}

src/page/background/vec2.ts

@@ -1,17 +0,0 @@
-export class Vec2 {
-  public static readonly Zero = new Vec2(0, 0);
-
-  public constructor(public readonly x: number, public readonly y: number) {}
-
-  public add(other: Vec2): Vec2 {
-    return new Vec2(this.x + other.x, this.y + other.y);
-  }
-
-  public subtract(other: Vec2): Vec2 {
-    return new Vec2(this.x - other.x, this.y - other.y);
-  }
-
-  public multiply(other: Vec2): Vec2 {
-    return new Vec2(this.x * other.x, this.y * other.y);
-  }
-}

src/page/background/vec3.ts

@@ -1,23 +0,0 @@
-import { Vec2 } from './vec2';
-
-export class Vec3 {
-  public static readonly Zero = new Vec3(0, 0, 0);
-
-  public static from(vec2: Vec2, z: number): Vec3 {
-    return new Vec3(vec2.x, vec2.y, z);
-  }
-
-  public constructor(
-    public readonly x: number,
-    public readonly y: number,
-    public readonly z: number
-  ) {}
-
-  public add(other: Vec3): Vec3 {
-    return new Vec3(this.x + other.x, this.y + other.y, this.z + other.z);
-  }
-
-  public multiply(other: Vec3): Vec3 {
-    return new Vec3(this.x * other.x, this.y * other.y, this.z * other.z);
-  }
-}

src/page/body/body.ts

@@ -1,13 +1,9 @@
 import { PageElement } from '../page-element';
-import { OnLoadEvent } from '../../events/concrete-events/on-load-event';
-import { OnEventBroadcasterChangedEvent } from '../../events/concrete-events/on-event-broadcaster-changed-event';
 
 export class Body extends PageElement {
-  constructor(root: HTMLElement, children: Array<PageElement>) {
+  constructor(...children: Array<PageElement>) {
-    super(root);
+    super(document.body, children);
     children.forEach(c => this.attachElement(c));
-
+    this.setParent();
-    this.broadcastEvent(new OnEventBroadcasterChangedEvent(this));
-    this.broadcastEvent(new OnLoadEvent(this));
   }
 }

src/page/main/main.html.ts

@@ -0,0 +1,6 @@
+import './main.scss';
+import { html } from '../../types/html';
+
+export const generate = (): html => `
+  <main></main>
+`;

src/page/main/main.scss

@@ -0,0 +1,21 @@
+@use '../../style/mixins' as *;
+
+main {
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: scroll;
+  perspective: 5px;
+
+  @media (hover: hover) {
+    &::-webkit-scrollbar-track,
+    &::-webkit-scrollbar {
+      background-color: transparent;
+      width: 12px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background-color: var(--accent-color);
+      border-radius: var(--border-radius);
+    }
+  }
+}

src/page/main/main.ts

@@ -0,0 +1,10 @@
+import { PageElement } from '../page-element';
+import { generate } from './main.html';
+import { createElement } from '../../helper/create-element';
+
+export class Main extends PageElement {
+  constructor(...children: Array<PageElement>) {
+    super(createElement(generate()), children);
+    children.forEach(c => this.attachElement(c));
+  }
+}

src/page/page-element.ts

@@ -1,46 +1,21 @@
-import { EventHandler } from '../events/event-handler';
+export abstract class PageElement {
-import { EventBroadcaster } from '../events/event-broadcaster';
-import { OnEventBroadcasterChangedEvent } from '../events/concrete-events/on-event-broadcaster-changed-event';
-import { OptionalEvent } from '../events/optional-event';
-import { Event } from '../events/event';
-import { OnLoadEvent } from '../events/concrete-events/on-load-event';
-
-export abstract class PageElement extends EventHandler implements EventBroadcaster {
-  protected eventBroadcaster: EventBroadcaster;
-
   public constructor(
-    public readonly htmlRoot?: HTMLElement,
+    public readonly htmlRoot: HTMLElement,
     protected children: Array<PageElement> = []
-  ) {
+  ) {}
-    super();
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  protected setParent(parent?: PageElement): void {
+    this.children.forEach(c => c.setParent(this));
   }
 
-  public broadcastEvent(event: Event) {
+  protected query(query: string): HTMLElement {
-    event = this.handle(event);
+    return this.htmlRoot.querySelector(query) as HTMLElement;
-    if (event) {
-      this.children.forEach(c => c.broadcastEvent(event));
-    }
-  }
-
-  public handleOnEventBroadcasterChangedEvent(
-    event: OnEventBroadcasterChangedEvent
-  ): OptionalEvent {
-    this.eventBroadcaster = event.broadcaster;
-    return super.handleOnEventBroadcasterChangedEvent(event);
-  }
-
-  public handleOnLoadEvent(_: OnLoadEvent): OptionalEvent {
-    return super.handleOnLoadEvent(new OnLoadEvent(this));
-  }
-
-  protected query(query: string): HTMLElement | null {
-    return this.htmlRoot?.querySelector(query);
   }
 
   protected attachElementByReplacing(query: string, element: PageElement) {
     const old = this.query(query);
-    old.parentElement.replaceChild(element.htmlRoot, old);
+    old.parentElement!.replaceChild(element.htmlRoot, old);
-
     this.children.push(element);
   }
 

src/portfolio.ts

@@ -8,7 +8,7 @@ import { PageImageViewer } from './page/image-viewer/image-viewer';
 import { last } from './helper/last';
 import { PageBackground } from './page/background/background';
 import { Anchor } from './page/basics/anchor/anchor';
-import { Body } from './page/body/body';
+import { Main } from './page/main/main';
 import { ImageAnchorFactory } from './page/basics/image-anchor/image-anchor';
 import { Preview } from './page/basics/preview/preview';
 
@@ -59,13 +59,17 @@ import ledWebM from './static/media/led.webm';
 import githubIcon from './static/icons/github.svg';
 import openIcon from './static/icons/open.svg';
 import cvIcon from './static/icons/cv.svg';
+import { Body } from './page/body/body';
 
 export const create = () => {
   const GitHub = ImageAnchorFactory(githubIcon, 'Open on GitHub');
   const Open = ImageAnchorFactory(openIcon, 'Open in new tab');
   const Thesis = ImageAnchorFactory(cvIcon, 'Download thesis');
 
-  const header = new PageHeader({
+  new Body(
+    new Main(
+      new PageBackground(1, 1),
+      new PageHeader({
         name: `András Schmelczer`,
         picture: new Image(meWebP, meJpeg, `a picture of me`, false),
         about: [
@@ -76,9 +80,8 @@ export const create = () => {
           new Text(`Look at some of the more interesting projects I have worked on. They are all listed below. 
           Further information about me can be found at the bottom of the page.`),
         ],
-  });
+      }),
-
+      new PageTimeline({
-  const timeline = new PageTimeline({
         showMoreText: `Show details`,
         showLessText: `Show less`,
         elements: [
@@ -137,12 +140,12 @@ export const create = () => {
           {
             title: `Video game on an ATtiny85`,
             date: `2020 Spring`,
-        figure: new Video(
+            figure: new Video({
-          last(adAstraPoster.images).path,
+              poster: last(adAstraPoster.images)!.path,
-          adAstraMp4,
+              mp4: adAstraMp4,
-          adAstraWebM,
+              webm: adAstraWebM,
-          `controls playsinline preload="none"`
+              options: `controls playsinline preload="none"`,
-        ),
+            }),
             description: new Text(`A simple game engine with a sample game set in space. The greatest challenge was to overcome
             the very limited resources of the hardware, this was also the most rewarding part.`),
             more: [
@@ -166,12 +169,11 @@ export const create = () => {
           {
             title: `Predicting foreign exchange rates`,
             date: `2019 Autumn`,
-        figure: new Video(
+            figure: new Video({
-          null,
+              mp4: forexMp4,
-          forexMp4,
+              webm: forexWebM,
-          forexWebM,
+              options: `autoplay loop muted playsinline controls`,
-          `autoplay loop muted playsinline controls`
+            }),
-        ),
             description: new Text(
               `From the animation we can see that my algorithm does a somewhat acceptable job at
           predicting (blue graph) the EUR/USD rates (green graph).`
@@ -193,7 +195,11 @@ export const create = () => {
           {
             date: `2019 November`,
             title: `My Notes`,
-        figure: new Image(myNotesWebP, myNotesJpeg, `two screenshots of the application`),
+            figure: new Image(
+              myNotesWebP,
+              myNotesJpeg,
+              `two screenshots of the application`
+            ),
             description: new Text(
               `A minimalist note organizer and editor powered by Markwon.`
             ),
@@ -201,7 +207,10 @@ export const create = () => {
               new Text(
                 `A basic android app for creating and filtering notes written in markdown.`
               ),
-          new Anchor(`https://github.com/schmelczerandras/my-notes`, `MyNotes on GitHub`),
+              new Anchor(
+                `https://github.com/schmelczerandras/my-notes`,
+                `MyNotes on GitHub`
+              ),
               new Text(
                 `It was my homework for BME's Android and web development course.
             It was also my first experience with Android development.`
@@ -342,12 +351,12 @@ export const create = () => {
           {
             date: `2016 spring`,
             title: `Lights synchronised to music`,
-        figure: new Video(
+            figure: new Video({
-          last(ledPoster.images).path,
+              poster: last(ledPoster.images)!.path,
-          ledMp4,
+              mp4: ledMp4,
-          ledWebM,
+              webm: ledWebM,
-          `controls playsinline preload="none"`
+              options: `controls playsinline preload="none"`,
-        ),
+            }),
             description: new Text(
               `A full stack application with a built-in 
           music player which music controls the colour of some RGB LED strips.`
@@ -358,7 +367,7 @@ export const create = () => {
             it is rather far from perfect, but I am still proud that I was able to build it on my own.`
               ),
               new Text(
-            `The backend logic is written in Python the FFT is provided by NumPy. 
+                `The backend logic is written in Python, the FFT implementation is provided by NumPy. 
             A quite simple frontend for accessing the music player and changing 
             the settings also got built using vanilla web development technologies.`
               ),
@@ -366,21 +375,15 @@ export const create = () => {
             links: [],
           },
         ],
-  });
+      }),
-
+      new PageFooter({
-  const footer = new PageFooter({
         title: `Learn more`,
         curriculaVitae: [{ name: `Curriculum vitae`, url: cvEnglish }],
         email: `andras@schmelczer.dev`,
         lastEditText: `Last modified on `,
         lastEdit: new Date(2020, 11 - 1, 17), // months are 0 indexed
-  });
+      })
-
+    ),
-  new Body(document.querySelector('main'), [
+    new PageImageViewer()
-    new PageImageViewer(),
+  );
-    header,
-    timeline,
-    footer,
-    new PageBackground(header, [timeline], footer),
-  ]);
 };

src/styles.scss

@@ -3,50 +3,47 @@
 @use 'style/animations/animations';
 @use 'style/dark-mode/dark-mode';
 
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
 html {
   height: 100%;
 
-  transition: background-color linear var(--transition-time);
-
   @include on-small-screen {
     font-size: 0.8rem;
   }
 
   @media print {
     & {
-      font-size: 0.75rem;
+      font-size: 0.7rem;
     }
   }
 }
 
-:focus {
+body {
-  outline: none;
+  background-color: var(--background);
+  transition: background-color linear var(--transition-time);
 
-  &:not(:hover) {
+  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom)
-    outline: var(--accent-color) solid 2px;
+    env(safe-area-inset-left);
+
+  height: 100%;
+
+  @media print {
+    & {
+      height: auto;
+    }
   }
 }
 
-::-moz-selection {
+noscript {
-  background-color: var(--accent-color);
+  @include square(100%);
-  color: var(--very-light-text-color);
+  @include center-children();
-}
-::selection {
-  background-color: var(--accent-color);
-  color: var(--very-light-text-color);
-}
-
-*,
-*::before,
-*::after {
-  @include main-font();
-
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-  transition: background-color linear var(--transition-time), color var(--transition-time);
-
-  hyphens: auto;
 }
 
 .figure-container {
@@ -61,46 +58,27 @@ html {
   iframe {
     pointer-events: all;
     position: relative;
-    z-index: -2;
+    z-index: -1;
     width: 100%;
     height: auto;
   }
 }
 
-body {
+img,
-  background-color: var(--background);
+video,
+iframe {
+  user-select: none;
+}
 
-  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom)
+:focus {
-    env(safe-area-inset-left);
+  outline: none;
 
-  height: 100%;
+  &:not(:hover) {
-
+    outline: var(--accent-color) solid 2px;
-  @media print {
-    & {
-      height: auto;
   }
 }
 
-  main {
+::selection {
-    height: 100%;
-    overflow-x: hidden;
-    overflow-y: scroll;
-
-    noscript {
-      @include square(100%);
-      @include center-children();
-    }
-
-    @media (hover: hover) {
-      &::-webkit-scrollbar-track,
-      &::-webkit-scrollbar {
-        background-color: transparent;
-        width: 12px;
-      }
-      &::-webkit-scrollbar-thumb {
   background-color: var(--accent-color);
-        border-radius: var(--border-radius);
+  color: var(--very-light-text-color);
-      }
-    }
-  }
 }