Convert to component based architecture

src/page/about/about.scss

@@ -0,0 +1,28 @@
+@import "../../style/mixins";
+@import "../../style/vars";
+
+#about {
+  header {
+    @include center-children();
+    margin-top: $normal-margin;
+
+    h1,
+    img {
+      font: $title-font;
+    }
+
+    h1 {
+      text-align: center;
+    }
+
+    img {
+      @include square(4ch);
+      border-radius: 100%;
+      margin-right: 1.5ex;
+    }
+  }
+
+  * {
+    text-align: justify;
+  }
+}

src/page/about/about.ts

@@ -0,0 +1,22 @@
+import { PageContent } from "../content/content";
+import { Header } from "../../model/portfolio";
+import "./about.scss";
+import { PageElement } from "../../framework/page-element";
+import { createElement } from "../../framework/element-factory";
+
+export class PageHeader extends PageElement {
+  public constructor({ name, picture, about }: Header, aPictureOf: string) {
+    const root = createElement(`
+        <section id="about">
+            <header>
+                <img alt="${aPictureOf} ${name}" src="${picture}"/>
+                <h1>${name}</h1>
+            </header>
+        </section>
+  `);
+    const content = new PageContent(about);
+    root.appendChild(content.getElement());
+    super([content]);
+    this.setElement(root);
+  }
+}