Remove "framework"

.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+  "cSpell.words": [
+    "andras",
+    "schmelczer",
+    "webm"
+  ]
+}

custom.d.ts

@@ -1,56 +1,45 @@
 declare module '*.svg' {
-  import { url } from 'src/framework/model/misc';
+  import { url } from 'src/types/url';
   const content: url;
   export default content;
 }
 
 declare module '*.png' {
-  import { ResponsiveImage } from 'src/framework/model/misc';
+  import { ResponsiveImage } from 'src/types/responsive-image';
   const content: ResponsiveImage;
   export default content;
 }
 
 declare module '*.jpg' {
-  import { ResponsiveImage } from 'src/framework/model/misc';
+  import { ResponsiveImage } from 'src/types/responsive-image';
   const content: ResponsiveImage;
   export default content;
 }
 
 declare module '*.jpeg' {
-  import { ResponsiveImage } from 'src/framework/model/misc';
+  import { ResponsiveImage } from 'src/types/responsive-image';
   const content: ResponsiveImage;
   export default content;
 }
 
-declare module '*.gif' {
-  import { url } from 'src/framework/model/misc';
-  const content: url;
-  export default content;
-}
-
 declare module '*.mp4' {
-  import { url } from 'src/framework/model/misc';
+  import { url } from 'src/types/url';
   const content: url;
   export default content;
 }
 
 declare module '*.webm' {
-  import { url } from 'src/framework/model/misc';
+  import { url } from 'src/types/url';
   const content: url;
   export default content;
 }
 
 declare module '*.pdf' {
-  import { url } from 'src/framework/model/misc';
+  import { url } from 'src/types/url';
   const content: url;
   export default content;
 }
 
-declare module '*.txt' {
-  const content: string;
-  export default content;
-}
-
 declare module '*.html' {
   const content: string;
   export default content;

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

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

src/events/event-broadcaster.ts

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

src/framework/container-page.ts

@@ -1,15 +0,0 @@
-import { PageElement } from './page-element';
-import { OnEventBroadcasterChangedEvent } from './events/concrete-events/on-event-broadcaster-changed-event';
-import { OnLoadEvent } from './events/concrete-events/on-load-event';
-
-export class ContainerPage extends PageElement {
-  public constructor(rootElement: HTMLElement, children: Array<PageElement>) {
-    children.filter(e => e.element).forEach(e => rootElement.appendChild(e.element));
-    super(rootElement, children);
-  }
-
-  public setAsMain() {
-    this.broadcastEvent(new OnEventBroadcasterChangedEvent(this));
-    this.broadcastEvent(new OnLoadEvent(this));
-  }
-}

src/framework/framework.scss

@@ -1 +0,0 @@
-@forward "styles/index";

src/framework/helper/last.ts

@@ -1,2 +0,0 @@
-export const last = <T>(list: ArrayLike<T>): T =>
-  list.length >= 1 ? list[list.length - 1] : undefined;

src/framework/page-element.ts

@@ -1,39 +0,0 @@
-import { EventBroadcaster } from './events/event-broadcaster';
-import { EventHandler } from './events/event-handler';
-import { OnEventBroadcasterChangedEvent } from './events/concrete-events/on-event-broadcaster-changed-event';
-import { Event } from './events/event';
-import { OnLoadEvent } from './events/concrete-events/on-load-event';
-import { OptionalEvent } from './events/optional-event';
-
-export abstract class PageElement extends EventHandler implements EventBroadcaster {
-  protected eventBroadcaster: EventBroadcaster;
-
-  protected constructor(
-    public readonly element?: HTMLElement,
-    private readonly children: Array<PageElement> = []
-  ) {
-    super();
-  }
-
-  public broadcastEvent(event: Event) {
-    event = this.handle(event);
-    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.element?.querySelector(query);
-  }
-}

src/framework/primitives/implementations/anchor.ts

@@ -1,17 +0,0 @@
-import { Primitive } from '../primitive';
-import { html, url } from '../../model/misc';
-
-export class Anchor implements Primitive {
-  public constructor(private readonly href: url, private readonly text: string) {}
-
-  public toHTML(): html {
-    return `
-        <a class="primitive-anchor" 
-           href="${this.href}"
-           rel="noreferrer"
-           target="_blank"
-        >${this.text}</a>
-        <br/>
-    `;
-  }
-}

src/framework/primitives/implementations/image.ts

@@ -1,33 +0,0 @@
-import { Primitive } from '../primitive';
-import { html, ResponsiveImage } from '../../model/misc';
-import { last } from '../../helper/last';
-
-export class Image implements Primitive {
-  private static readonly IMAGE_SCREEN_RATIO = 0.8;
-  public constructor(
-    private readonly image: ResponsiveImage,
-    private readonly alt: string
-  ) {}
-
-  public toHTML(container = false): html {
-    return `
-        ${container ? `<div class="figure-container">` : ''}
-            <img tabindex="0"
-                srcset="${this.image.srcSet}" 
-                sizes="${this.getSizes()}"
-                src="${last(this.image.images)?.path}" 
-                alt="${this.alt}"
-            />
-        ${container ? `</div>` : ''}
-      `;
-  }
-
-  private getSizes(): string {
-    return (
-      this.image.images
-        .slice(0, -1)
-        .map(d => `(max-width: ${d.width / Image.IMAGE_SCREEN_RATIO}px) ${d.width}px,`)
-        .join('\n') + `\n${last(this.image.images).width}px`
-    );
-  }
-}

src/framework/primitives/implementations/text.ts

@@ -1,10 +0,0 @@
-import { Primitive } from '../primitive';
-import { html } from '../../model/misc';
-
-export class Text implements Primitive {
-  public constructor(private readonly text: string) {}
-
-  public toHTML(): html {
-    return `<p class="primitive-text">${this.text}</p>`;
-  }
-}

src/framework/primitives/implementations/video.ts

@@ -1,21 +0,0 @@
-import { Primitive } from '../primitive';
-import { url } from '../../model/misc';
-
-export class Video implements Primitive {
-  public constructor(
-    private readonly poster: url,
-    private readonly mp4: url,
-    private readonly webm: url,
-    private readonly options?: string
-  ) {}
-  public toHTML(container = false): string {
-    return `
-        ${container ? `<div class="figure-container">` : ''}
-          <video ${this.options} ${this.poster ? `poster="${this.poster}` : ''}" >
-              <source src="${this.webm}" type="video/webm"/>
-              <source src="${this.mp4}" type="video/mp4"/>
-          </video>
-        ${container ? `</div>` : ''}
-    `;
-  }
-}

src/framework/primitives/primitive.ts

@@ -1,5 +0,0 @@
-import { html } from '../model/misc';
-
-export interface Primitive {
-  toHTML(): html;
-}

src/framework/styles/index.scss

@@ -1,3 +0,0 @@
-@forward 'animations/animations';
-@forward 'dark-mode/dark-mode';
-@forward 'wrapper';

src/framework/styles/wrapper.scss

@@ -1,15 +0,0 @@
-@use 'dark-mode/dark-mode' as *;
-
-$breakpoint-width: 925px !default;
-
-@mixin on-small-screen() {
-  @media (max-width: $breakpoint-width - 1px) {
-    @content;
-  }
-}
-
-@mixin on-large-screen() {
-  @media (min-width: $breakpoint-width) {
-    @content;
-  }
-}

src/helper/create-element.ts

@@ -1,4 +1,4 @@
-import { html } from '../model/misc';
+import { html } from '../types/html';
 
 export const createElement = (from: html): HTMLElement => {
   // won't work for all elements, eg.: <td>

src/helper/last.ts

@@ -0,0 +1,2 @@
+export const last = <T>(list: ArrayLike<T>): T | undefined =>
+  list.length >= 1 ? list[list.length - 1] : undefined;

src/helper/polyfill-imul.ts

@@ -1,4 +1,4 @@
-export const addImul = () => {
+export const polyfillImul = () => {
   // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/imul
   if (!Math.imul)
     Math.imul = function(opA, opB) {

src/helper/random.ts

@@ -1,8 +1,8 @@
-import { addImul } from './polyfills';
+import { polyfillImul } from './polyfill-imul';
 
 export class Random {
   public constructor(private seed: number) {
-    addImul();
+    polyfillImul();
   }
 
   public get next(): number {

src/index.ts

@@ -2,16 +2,9 @@ import './static/no-change/favicon.ico';
 import './static/no-change/og-image.jpg';
 import './static/no-change/robots.txt';
 import './static/no-change/404.html';
-
 import './styles.scss';
 import { create } from './portfolio';
 
-const initialize = () => {
-  create();
-  addSupportForTabNavigation();
-  removeUnnecessaryOutlines();
-};
-
 const addSupportForTabNavigation = () =>
   (document.onkeydown = e => {
     if (e.key === ' ') {
@@ -25,4 +18,6 @@ const removeUnnecessaryOutlines = () =>
     (e.target as HTMLElement)?.blur();
   });
 
-initialize();
+create();
+addSupportForTabNavigation();
+removeUnnecessaryOutlines();

src/page/about/about.html.ts

@@ -1,11 +1,11 @@
-import { Header } from '../../model/portfolio';
-import { html } from '../../framework/model/misc';
+import { Header } from '../../types/portfolio';
 
 import './about.scss';
+import { html } from '../../types/html';
 
-export const generate = ({ name, picture }: Header): html => `
+export const generate = ({ name }: Header): html => `
     <section id="about">
-        ${picture.toHTML()}
+        <div class="picture"></div>
         <div class="placeholder"></div>
         <h1>${name}</h1>
     </section>

src/page/about/about.ts

@@ -1,16 +1,16 @@
 import { PageContent } from '../content/content';
-import { Header } from '../../model/portfolio';
+import { Header } from '../../types/portfolio';
 
 import { generate } from './about.html';
-import { createElement } from '../../framework/helper/create-element';
-import { ContainerPage } from '../../framework/container-page';
+import { createElement } from '../../helper/create-element';
 import { PageThemeSwitcher } from '../theme-switcher/theme-switcher';
+import { PageElement } from '../page-element';
 
-export class PageHeader extends ContainerPage {
+export class PageHeader extends PageElement {
   public constructor(header: Header) {
-    super(createElement(generate(header)), [
-      new PageContent(header.about),
-      new PageThemeSwitcher(),
-    ]);
+    super(createElement(generate(header)));
+    this.attachElementByReplacing('.picture', header.picture);
+    this.attachElement(new PageContent(header.about));
+    this.attachElement(new PageThemeSwitcher());
   }
 }

src/page/background/background.html.ts

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

src/page/background/background.ts

@@ -1,16 +1,16 @@
-import { PageElement } from '../../framework/page-element';
+import { PageElement } from '../page-element';
 import { Blob } from './blob';
 import { generate } from './background.html';
 import { Animation } from './animation';
 import { Vec3 } from './vec3';
 import { Vec2 } from './vec2';
-import { createElement } from '../../framework/helper/create-element';
-import { sum } from '../../framework/helper/sum';
-import { getHeight } from '../../framework/helper/get-height';
-import { OnLoadEvent } from '../../framework/events/concrete-events/on-load-event';
-import { OnBodyDimensionsChangedEvent } from '../../framework/events/concrete-events/on-body-dimensions-changed-event';
-import { OnPageThemeChangedEvent } from '../../framework/events/concrete-events/on-page-theme-changed-event';
-import { OptionalEvent } from '../../framework/events/optional-event';
+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 { OnBodyDimensionsChangedEvent } from '../../events/concrete-events/on-body-dimensions-changed-event';
+import { OnPageThemeChangedEvent } from '../../events/concrete-events/on-page-theme-changed-event';
 
 export class PageBackground extends PageElement {
   public static readonly BLOB_SPACING = 325;
@@ -34,7 +34,7 @@ export class PageBackground extends PageElement {
     private readonly end: PageElement
   ) {
     super(createElement(generate()));
-    this.canvas = this.element as HTMLCanvasElement;
+    this.canvas = this.htmlRoot as HTMLCanvasElement;
     this.ctx = this.canvas.getContext('2d');
   }
 
@@ -89,7 +89,7 @@ export class PageBackground extends PageElement {
   }
 
   private resizeBackground(heightChange?: number) {
-    const targetWidth = this.parent.element.clientWidth;
+    const targetWidth = this.parent.htmlRoot.clientWidth;
 
     const siblings: Array<HTMLElement> = this.getSiblings();
     let targetHeight = sum(siblings.map(getHeight));
@@ -116,11 +116,10 @@ export class PageBackground extends PageElement {
                   offset *
                   q
             );
-          const topOffset = variableOffset(getHeight(this.start.element), 1);
+          const topOffset = variableOffset(getHeight(this.start.htmlRoot), 1);
           const topLeft = this.convertFrom2Dto3D(new Vec2(0, topOffset), blob.z);
 
-          const bottomOffset = variableOffset(getHeight(this.end.element), 0.2);
-
+          const bottomOffset = variableOffset(getHeight(this.end.htmlRoot), 0.2);
           const bottomRight = this.convertFrom2Dto3D(
             new Vec2(this.canvas.width, this.canvas.height - bottomOffset),
             blob.z,
@@ -134,7 +133,7 @@ export class PageBackground extends PageElement {
   }
 
   private getSiblings(): Array<HTMLElement> {
-    return [this.start, ...this.inBetween, this.end].map(e => e.element);
+    return [this.start, ...this.inBetween, this.end].map(e => e.htmlRoot);
   }
 
   private redraw(timestamp: DOMHighResTimeStamp) {
@@ -144,7 +143,7 @@ export class PageBackground extends PageElement {
     this.backgroundSize.step(deltaTime);
     this.blobs.forEach(b => b.step(deltaTime));
 
-    this.scrollPosition = this.parent.element.scrollTop;
+    this.scrollPosition = this.parent.htmlRoot.scrollTop;
 
     this.blobs.sort((b1, b2) => b2.z - b1.z);
 

src/page/background/blob.ts

@@ -1,7 +1,7 @@
 import { Vec2 } from './vec2';
 import { Vec3 } from './vec3';
-import { mixColors } from '../../framework/helper/mix-colors';
-import { Random } from '../../framework/helper/random';
+import { mixColors } from '../../helper/mix-colors';
+import { Random } from '../../helper/random';
 import { Animation } from './animation';
 import { PageBackground } from './background';
 

src/page/basics/anchor/anchor.html.ts

@@ -0,0 +1,10 @@
+import './anchor.scss';
+import { html } from '../../../types/html';
+
+export const generate = ({ href, text }: { href: string; text: string }): html => `
+  <a class="primitive-anchor" 
+    href="${href}"
+    target="_blank"
+  >${text}</a>
+  <br/>
+`;

src/page/basics/anchor/anchor.scss

@@ -0,0 +1,3 @@
+.primitive-anchor {
+  margin-top: var(--line-height);
+}

src/page/basics/anchor/anchor.ts

@@ -0,0 +1,10 @@
+import { PageElement } from '../../page-element';
+import { createElement } from '../../../helper/create-element';
+import { generate } from './anchor.html';
+import { url } from '../../../types/url';
+
+export class Anchor extends PageElement {
+  public constructor(href: url, text: string) {
+    super(createElement(generate({ href, text })));
+  }
+}

src/page/basics/image/image.html.ts

@@ -0,0 +1,25 @@
+import './image.scss';
+import { last } from '../../../helper/last';
+import { ResponsiveImage } from '../../../types/responsive-image';
+import { html } from '../../../types/html';
+
+export const generate = ({
+  sizes,
+  image,
+  alt,
+  container,
+}: {
+  sizes: string;
+  image: ResponsiveImage;
+  alt: string;
+  container: boolean;
+}): html => `
+  ${container ? `<div class="figure-container">` : ''}
+  <img tabindex="0"
+      srcset="${image.srcSet}" 
+      sizes="${sizes}"
+      src="${last(image.images)?.path}" 
+      alt="${alt}"
+  />
+  ${container ? `</div>` : ''}
+`;

src/page/basics/image/image.ts

@@ -0,0 +1,24 @@
+import { PageElement } from '../../page-element';
+import { createElement } from '../../../helper/create-element';
+import { generate } from './image.html';
+import { last } from '../../../helper/last';
+import { ResponsiveImage } from '../../../types/responsive-image';
+
+export class Image extends PageElement {
+  private static readonly imageScreenRatio = 0.8;
+
+  public constructor(image: ResponsiveImage, alt: string, container = true) {
+    super(
+      createElement(generate({ image, alt, container, sizes: Image.getSizes(image) }))
+    );
+  }
+
+  private static getSizes(image: ResponsiveImage): string {
+    return (
+      image.images
+        .slice(0, -1)
+        .map(d => `(max-width: ${d.width / Image.imageScreenRatio}px) ${d.width}px,`)
+        .join('\n') + `\n${last(image.images).width}px`
+    );
+  }
+}

src/page/basics/text/text.html.ts

@@ -0,0 +1,6 @@
+import './text.scss';
+import { html } from '../../../types/html';
+
+export const generate = (text: string): html => `
+  <p class="primitive-text">${text}</p>
+`;

src/page/basics/text/text.scss

@@ -0,0 +1,4 @@
+.primitive-text {
+  text-align: left;
+  margin-top: var(--line-height);
+}

src/page/basics/text/text.ts

@@ -0,0 +1,9 @@
+import { PageElement } from '../../page-element';
+import { createElement } from '../../../helper/create-element';
+import { generate } from './text.html';
+
+export class Text extends PageElement {
+  public constructor(text: string) {
+    super(createElement(generate(text)));
+  }
+}

src/page/basics/video/video.html.ts

@@ -0,0 +1,24 @@
+import './video.scss';
+import { url } from '../../../types/url';
+import { html } from '../../../types/html';
+
+export const generate = ({
+  poster,
+  options,
+  webm,
+  mp4,
+  container,
+}: {
+  poster: url;
+  options: string;
+  webm: url;
+  mp4: url;
+  container: boolean;
+}): html => `
+  ${container ? `<div class="figure-container">` : ''}
+    <video ${options} ${poster ? `poster="${poster}` : ''}" >
+        <source src="${webm}" type="video/webm"/>
+        <source src="${mp4}" type="video/mp4"/>
+    </video>
+  ${container ? `</div>` : ''}
+`;

src/page/basics/video/video.ts

@@ -0,0 +1,16 @@
+import { PageElement } from '../../page-element';
+import { createElement } from '../../../helper/create-element';
+import { generate } from './video.html';
+import { url } from '../../../types/url';
+
+export class Video extends PageElement {
+  public constructor(
+    poster: url,
+    mp4: url,
+    webm: url,
+    options?: string,
+    container = true
+  ) {
+    super(createElement(generate({ poster, mp4, webm, options, container })));
+  }
+}

src/page/body/body.ts

@@ -0,0 +1,13 @@
+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>) {
+    super(root);
+    children.forEach(c => this.attachElement(c));
+
+    this.broadcastEvent(new OnEventBroadcasterChangedEvent(this));
+    this.broadcastEvent(new OnLoadEvent(this));
+  }
+}

src/page/content/content.html.ts

@@ -1,10 +1,6 @@
-import { Content } from '../../model/portfolio';
-import { html } from '../../framework/model/misc';
-
 import './content.scss';
+import { html } from '../../types/html';
 
-export const generate = (content: Content): html => `
-    <div class="content">
-        ${content.map(element => element.toHTML()).join('\n')}
-    </div>
+export const generate = (): html => `
+    <div class="content"></div>
 `;

src/page/content/content.ts

@@ -1,10 +1,11 @@
-import { PageElement } from '../../framework/page-element';
-import { createElement } from '../../framework/helper/create-element';
-import { Content } from '../../model/portfolio';
+import { createElement } from '../../helper/create-element';
+import { Content } from '../../types/portfolio';
 import { generate } from './content.html';
+import { PageElement } from '../page-element';
 
 export class PageContent extends PageElement {
   public constructor(content: Content) {
-    super(createElement(generate(content)));
+    super(createElement(generate()));
+    content.forEach(c => this.attachElement(c));
   }
 }

src/page/footer/footer.html.ts

@@ -1,7 +1,7 @@
-import { Footer } from '../../model/portfolio';
-import { html } from '../../framework/model/misc';
+import { Footer } from '../../types/portfolio';
 
 import './footer.scss';
+import { html } from '../../types/html';
 
 export const generate = ({
   title,

src/page/footer/footer.ts

@@ -1,8 +1,8 @@
-import { Footer } from '../../model/portfolio';
-import { PageElement } from '../../framework/page-element';
+import { Footer } from '../../types/portfolio';
+import { PageElement } from '../page-element';
 
 import { generate } from './footer.html';
-import { createElement } from '../../framework/helper/create-element';
+import { createElement } from '../../helper/create-element';
 
 export class PageFooter extends PageElement {
   constructor(footer: Footer) {

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

@@ -1,7 +1,7 @@
-import { html } from '../../framework/model/misc';
 import cancel from '../../static/icons/cancel.svg';
 
 import './image-viewer.scss';
+import { html } from '../../types/html';
 
 export const generate = (): html => `
     <section id="image-viewer">

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

@@ -1,14 +1,14 @@
-import { PageElement } from '../../framework/page-element';
+import { PageElement } from '../page-element';
 
 import { generate } from './image-viewer.html';
-import { createElement } from '../../framework/helper/create-element';
-import { OnLoadEvent } from '../../framework/events/concrete-events/on-load-event';
-import { OptionalEvent } from '../../framework/events/optional-event';
+import { createElement } from '../../helper/create-element';
+import { OnLoadEvent } from '../../events/concrete-events/on-load-event';
+import { OptionalEvent } from '../../events/optional-event';
 
 export class PageImageViewer extends PageElement {
   public constructor() {
     super(createElement(generate()));
-    this.element.onclick = () => PageImageViewer.hide(this.element);
+    this.htmlRoot.onclick = () => PageImageViewer.hide(this.htmlRoot);
   }
 
   public handleOnLoadEvent(event: OnLoadEvent): OptionalEvent {
@@ -17,7 +17,7 @@ export class PageImageViewer extends PageElement {
     const media = Array.prototype.slice.call(document.querySelectorAll('img'));
 
     media
-      .filter((e: HTMLElement) => e.parentElement !== this.element)
+      .filter((e: HTMLElement) => e.parentElement !== this.htmlRoot)
       .forEach((e: HTMLImageElement) => (e.onclick = this.handleClick.bind(this)));
     return super.handleOnLoadEvent(event);
   }
@@ -29,12 +29,12 @@ export class PageImageViewer extends PageElement {
     const element: HTMLImageElement = new Image();
     element.src = (event.target as HTMLImageElement).src;
     container.appendChild(element);
-    PageImageViewer.show(this.element);
+    PageImageViewer.show(this.htmlRoot);
   }
 
   private handleKeydown(event: KeyboardEvent) {
     if (event.key === 'Escape') {
-      PageImageViewer.hide(this.element);
+      PageImageViewer.hide(this.htmlRoot);
     }
   }
 

src/page/page-element.ts

@@ -0,0 +1,51 @@
+import { EventHandler } from '../events/event-handler';
+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,
+    protected children: Array<PageElement> = []
+  ) {
+    super();
+  }
+
+  public broadcastEvent(event: Event) {
+    event = this.handle(event);
+    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);
+
+    this.children.push(element);
+  }
+
+  protected attachElement(element: PageElement) {
+    this.htmlRoot.appendChild(element.htmlRoot);
+    this.children.push(element);
+  }
+}

src/page/theme-switcher/theme-switcher.html.ts

@@ -1,6 +1,5 @@
-import { html } from '../../framework/model/misc';
-
 import './theme-switcher.scss';
+import { html } from '../../types/html';
 
 export const generate = (): html => `
    <input id="theme-switcher" aria-label="color-theme-switch" type="checkbox" name="switch-theme"/>

src/page/theme-switcher/theme-switcher.ts

@@ -1,21 +1,18 @@
-import { PageElement } from '../../framework/page-element';
-import { createElement } from '../../framework/helper/create-element';
+import { PageElement } from '../page-element';
+import { createElement } from '../../helper/create-element';
 import { generate } from './theme-switcher.html';
 import {
   isSystemLevelDarkModeEnabled,
   turnOnDarkMode,
   turnOnLightMode,
-} from '../../framework/styles/dark-mode/dark-mode';
-import {
-  turnOffAnimations,
-  turnOnAnimations,
-} from '../../framework/styles/animations/animations';
-import { OnLoadEvent } from '../../framework/events/concrete-events/on-load-event';
-import { OnPageThemeChangedEvent } from '../../framework/events/concrete-events/on-page-theme-changed-event';
-import { OptionalEvent } from '../../framework/events/optional-event';
+} from '../../style/dark-mode/dark-mode';
+import { turnOffAnimations, turnOnAnimations } from '../../style/animations/animations';
+import { OnLoadEvent } from '../../events/concrete-events/on-load-event';
+import { OptionalEvent } from '../../events/optional-event';
+import { OnPageThemeChangedEvent } from '../../events/concrete-events/on-page-theme-changed-event';
 
 export class PageThemeSwitcher extends PageElement {
-  private static readonly LOCAL_STORAGE_KEY = 'dark-mode';
+  private static readonly localStorageKey = 'dark-mode';
 
   public constructor() {
     super(createElement(generate()));
@@ -24,14 +21,14 @@ export class PageThemeSwitcher extends PageElement {
     const isDark = storedIsDark !== null ? storedIsDark : isSystemLevelDarkModeEnabled();
 
     if (isDark) {
-      (this.element as HTMLInputElement).checked = true;
+      (this.htmlRoot as HTMLInputElement).checked = true;
       turnOffAnimations();
       turnOnDarkMode();
       setTimeout(() => turnOnAnimations(), 0);
     } else {
       turnOnLightMode();
     }
-    this.element.onchange = this.handleThemeChange.bind(this);
+    this.htmlRoot.onchange = this.handleThemeChange.bind(this);
   }
 
   public handleOnLoadEvent(event: OnLoadEvent): OptionalEvent {
@@ -40,7 +37,7 @@ export class PageThemeSwitcher extends PageElement {
   }
 
   private handleThemeChange() {
-    const isDark = (this.element as HTMLInputElement).checked;
+    const isDark = (this.htmlRoot as HTMLInputElement).checked;
     if (isDark) {
       turnOnDarkMode();
     } else {
@@ -53,14 +50,14 @@ export class PageThemeSwitcher extends PageElement {
 
   private static saveToLocalStorage(darkModeEnabled: boolean) {
     localStorage?.setItem(
-      PageThemeSwitcher.LOCAL_STORAGE_KEY,
+      PageThemeSwitcher.localStorageKey,
       JSON.stringify(darkModeEnabled)
     );
   }
 
   private static loadFromLocalStorage(): boolean | null {
     try {
-      return JSON.parse(localStorage?.getItem(PageThemeSwitcher.LOCAL_STORAGE_KEY));
+      return JSON.parse(localStorage?.getItem(PageThemeSwitcher.localStorageKey));
     } catch {
       return null;
     }

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

@@ -1,10 +1,10 @@
-import { TimelineElement } from '../../../model/portfolio';
-import { html } from '../../../framework/model/misc';
+import { TimelineElement } from '../../../types/portfolio';
 
 import './timeline-element.scss';
+import { html } from '../../../types/html';
 
 export const generate = (
-  { date, title, figure, description, more, link }: TimelineElement,
+  { date, title, more }: TimelineElement,
   showMore: string,
   showLess: string
 ): html => `
@@ -15,8 +15,8 @@ export const generate = (
         </div>
         <div class="card">
             <h2>${title}</h2>
-            ${figure.toHTML(true)}
-            ${description.toHTML()}
+            <div class="figure"></div>
+            <div class="description"></div>
             ${
               more
                 ? `
@@ -28,7 +28,7 @@ export const generate = (
                 `
                 : ''
             }
-            ${link ? link.toHTML() : ''}
+            <div class="link"></div>
         </div>
     </section>
 `;

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

@@ -1,9 +1,9 @@
-import { TimelineElement } from '../../../model/portfolio';
+import { TimelineElement } from '../../../types/portfolio';
 import { PageContent } from '../../content/content';
-import { PageElement } from '../../../framework/page-element';
+import { PageElement } from '../../page-element';
 import { generate } from './timeline-element.html';
-import { createElement } from '../../../framework/helper/create-element';
-import { OnBodyDimensionsChangedEvent } from '../../../framework/events/concrete-events/on-body-dimensions-changed-event';
+import { createElement } from '../../../helper/create-element';
+import { OnBodyDimensionsChangedEvent } from '../../../events/concrete-events/on-body-dimensions-changed-event';
 
 export class PageTimelineElement extends PageElement {
   private isOpen: boolean;
@@ -18,15 +18,23 @@ export class PageTimelineElement extends PageElement {
 
     if (timelineElement.more) {
       const content = new PageContent(timelineElement.more);
-      super(root, [content]);
+      super(root);
+      this.children = [content];
       this.isOpen = false;
       this.more = root.querySelector('.more');
-      this.more.appendChild(content.element);
+      this.more.appendChild(content.htmlRoot);
       window.addEventListener('resize', this.handleResize.bind(this));
       root
         .querySelector('.buttons')
         .addEventListener('click', this.toggleOpen.bind(this));
     } else super(root);
+
+    this.attachElementByReplacing('.figure', timelineElement.figure);
+    this.attachElementByReplacing('.description', timelineElement.description);
+
+    if (timelineElement.link) {
+      this.attachElementByReplacing('.link', timelineElement.link);
+    }
   }
 
   private toggleOpen() {
@@ -46,15 +54,10 @@ export class PageTimelineElement extends PageElement {
   }
 
   private notifyOfHeightChange(deltaHeight: number = undefined) {
-    this.eventBroadcaster?.broadcastEvent(
-      new OnBodyDimensionsChangedEvent(deltaHeight)
-    );
+    this.eventBroadcaster?.broadcastEvent(new OnBodyDimensionsChangedEvent(deltaHeight));
 
     setTimeout(
-      () =>
-        this.eventBroadcaster?.broadcastEvent(
-          new OnBodyDimensionsChangedEvent()
-        ),
+      () => this.eventBroadcaster?.broadcastEvent(new OnBodyDimensionsChangedEvent()),
       250
     );
   }

src/page/timeline/timeline.html.ts

@@ -1,5 +1,5 @@
-import { html } from '../../framework/model/misc';
 import './timeline.scss';
+import { html } from '../../types/html';
 
 export const generate = (): html => `
     <div id="timeline"></div>

src/page/timeline/timeline.ts

@@ -1,14 +1,14 @@
-import { Timeline } from '../../model/portfolio';
+import { Timeline } from '../../types/portfolio';
 import { PageTimelineElement } from './timeline-element/timeline-element';
 import { generate } from './timeline.html';
-import { createElement } from '../../framework/helper/create-element';
-import { ContainerPage } from '../../framework/container-page';
+import { createElement } from '../../helper/create-element';
+import { PageElement } from '../page-element';
 
-export class PageTimeline extends ContainerPage {
+export class PageTimeline extends PageElement {
   public constructor({ elements, showMoreText, showLessText }: Timeline) {
-    super(
-      createElement(generate()),
-      elements.map(e => new PageTimelineElement(e, showMoreText, showLessText))
+    super(createElement(generate()));
+    elements.forEach(e =>
+      this.attachElement(new PageTimelineElement(e, showMoreText, showLessText))
     );
   }
 }

src/portfolio.ts

@@ -1,13 +1,11 @@
-import { Text } from './framework/primitives/implementations/text';
-import { Image } from './framework/primitives/implementations/image';
-import { Video } from './framework/primitives/implementations/video';
-import { Anchor } from './framework/primitives/implementations/anchor';
 import { PageFooter } from './page/footer/footer';
+import { Video } from './page/basics/video/video';
+import { Text } from './page/basics/text/text';
+import { Image } from './page/basics/image/image';
 import { PageHeader } from './page/about/about';
 import { PageTimeline } from './page/timeline/timeline';
 import { PageImageViewer } from './page/image-viewer/image-viewer';
-import { last } from './framework/helper/last';
-
+import { last } from './helper/last';
 import me from './static/media/me.jpg';
 import forexMP4 from './static/media/forex.mp4';
 import forexWEBM from './static/media/forex.webm';
@@ -26,15 +24,17 @@ import led from './static/media/led.jpg';
 import cvEnglish from './static/cv/cv_andras_schmelczer.pdf';
 import ledMP4 from './static/media/led.mp4';
 import ledWEBM from './static/media/led.webm';
-import { ContainerPage } from './framework/container-page';
 import { PageBackground } from './page/background/background';
+import { Anchor } from './page/basics/anchor/anchor';
+
+import { Body } from './page/body/body';
 
 export const create = () => {
   const page = {
     imageViewer: new PageImageViewer(),
     header: new PageHeader({
       name: `András Schmelczer`,
-      picture: new Image(me, `a picture of me`),
+      picture: new Image(me, `a picture of me`, false),
       about: [
         new Text(
           `I have always been fascinated by the engineering feats that surround us. 
@@ -308,12 +308,12 @@ export const create = () => {
       curiumVitaes: [{ name: `Curriculum vitae`, url: cvEnglish }],
       email: `andras@schmelczer.dev`,
       lastEditText: `Last modified on `,
-      lastEdit: new Date(2020, 9 - 1, 24), // months are 0 indexed
+      lastEdit: new Date(2020, 11 - 1, 17), // months are 0 indexed
     }),
   };
 
-  new ContainerPage(document.body.querySelector('main'), [
+  new Body(document.querySelector('main'), [
     ...Object.values(page),
     new PageBackground(page.header, [page.timeline], page.footer),
-  ]).setAsMain();
+  ]);
 };

src/style/mixins.scss

@@ -1,4 +1,16 @@
-@import '../framework/framework';
+$breakpoint-width: 925px !default;
+
+@mixin on-small-screen() {
+  @media (max-width: $breakpoint-width - 1px) {
+    @content;
+  }
+}
+
+@mixin on-large-screen() {
+  @media (min-width: $breakpoint-width) {
+    @content;
+  }
+}
 
 @mixin center-children() {
   display: flex;

src/style/vars.scss

@@ -1,4 +1,6 @@
-@import '../framework/framework';
+@use 'mixins' as *;
+@use 'dark-mode/dark-mode' as *;
+@use 'animations/animations' as *;
 
 :root {
   --transition-time: 250ms;

src/styles.scss

@@ -1,7 +1,8 @@
 @use 'style/vars';
 @use 'style/mixins' as *;
 @use 'style/a';
-@use 'framework/styles/index';
+@use 'style/animations/animations';
+@use 'style/dark-mode/dark-mode';
 
 html {
   height: 100%;
@@ -46,8 +47,7 @@ html {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
-  transition: background-color linear var(--transition-time),
-    color var(--transition-time);
+  transition: background-color linear var(--transition-time), color var(--transition-time);
 
   hyphens: auto;
 }
@@ -55,6 +55,7 @@ html {
 .figure-container {
   font-size: 0;
   box-shadow: var(--inset-shadow);
+  margin-top: var(--line-height);
   pointer-events: none;
   cursor: pointer;
 
@@ -68,19 +69,9 @@ html {
   }
 }
 
-.primitive-text,
-.primitive-anchor,
-.figure-container {
-  margin-top: var(--line-height);
-}
-
-.primitive-text {
-  text-align: left;
-}
-
 body {
-  padding: env(safe-area-inset-top) env(safe-area-inset-right)
-    env(safe-area-inset-bottom) env(safe-area-inset-left);
+  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom)
+    env(safe-area-inset-left);
 
   height: 100%;
 
@@ -100,7 +91,7 @@ body {
       @include center-children();
     }
 
-    @include on-large-screen {
+    @media (hover: hover) {
       &::-webkit-scrollbar-track,
       &::-webkit-scrollbar {
         background-color: transparent;

src/types/html.ts

@@ -0,0 +1 @@
+export type html = string;

src/types/portfolio.ts

@@ -1,9 +1,9 @@
-import { url } from '../framework/model/misc';
-import { Primitive } from '../framework/primitives/primitive';
-import { Image } from '../framework/primitives/implementations/image';
-import { Anchor } from '../framework/primitives/implementations/anchor';
-import { Video } from '../framework/primitives/implementations/video';
-import { Text } from '../framework/primitives/implementations/text';
+import { Video } from '../page/basics/video/video';
+import { Text } from '../page/basics/text/text';
+import { Image } from '../page/basics/image/image';
+import { Anchor } from '../page/basics/anchor/anchor';
+import { PageElement } from '../page/page-element';
+import { url } from './url';
 
 export interface Portfolio {
   header: Header;
@@ -45,4 +45,4 @@ export interface CV {
   url: url;
 }
 
-export type Content = Array<Primitive>;
+export type Content = Array<PageElement>;

src/types/responsive-image.ts

@@ -1,6 +1,4 @@
-export type url = string;
-
-export type html = string;
+import { url } from './url';
 
 export type ResponsiveImage = {
   srcSet: string;

src/types/url.ts

@@ -0,0 +1 @@
+export type url = string;