Most features done

src/page/about/about.html.ts

@@ -0,0 +1,13 @@
+import { Header } from "../../model/portfolio";
+import { html } from "../../model/misc";
+
+export const generate = (
+  { name, picture, about }: Header,
+  aPictureOf: string
+): html => `
+    <section id="about">
+        <header>
+            <img alt="${aPictureOf} ${name}" src="${picture}"/>
+            <h1>${name}</h1>
+        </header>
+    </section>`;

src/page/about/about.scss

@@ -4,21 +4,17 @@
 #about {
   header {
     @include center-children();
-    margin-top: $normal-margin;
 
     h1,
     img {
-      font: $title-font;
-    }
-
-    h1 {
-      text-align: center;
+      @include title-font();
     }
 
     img {
       @include square(4ch);
       border-radius: 100%;
       margin-right: 1.5ex;
+      cursor: pointer;
     }
   }
 

src/page/about/about.ts

@@ -1,20 +1,16 @@
 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";
 
+import { generate } from "./about.html";
+import "./about.scss";
+
 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);
+  public constructor(header: Header, aPictureOf: string) {
+    const root = createElement(generate(header, aPictureOf));
+    const content = new PageContent(header.about);
+
     root.appendChild(content.getElement());
     super([content]);
     this.setElement(root);