Optimizations

src/page/about/about.html.ts

@@ -1,13 +1,12 @@
 import { Header } from "../../model/portfolio";
 import { html } from "../../model/misc";
+import { PageContent } from "../content/content";
+
 import "./about.scss";
 
-export const generate = (
-  { name, picture, about }: Header,
-  aPictureOf: string
-): html => `
+export const generate = ({ name, picture }: Header): html => `
     <section id="about">
-        <img alt="${aPictureOf} ${name}" src="${picture}"/>
+        ${PageContent.parseTypedContent(picture, true)}
         <div class="placeholder"></div>
         <h1>${name}</h1>
     </section>`;

src/page/about/about.ts

@@ -6,8 +6,8 @@ import { generate } from "./about.html";
 import { createElement } from "../../framework/helper";
 
 export class PageHeader extends PageElement {
-  public constructor(header: Header, aPictureOf: string) {
-    const root = createElement(generate(header, aPictureOf));
+  public constructor(header: Header) {
+    const root = createElement(generate(header));
     const content = new PageContent(header.about);
 
     super([content]);

src/page/content/content.scss

@@ -11,3 +11,15 @@
     text-align: left;
   }
 }
+
+.image-container {
+  font-size: 0;
+  box-shadow: inset $shadow1, inset $shadow2;
+  pointer-events: none;
+  img {
+    pointer-events: all;
+    cursor: pointer;
+    position: relative;
+    z-index: -2;
+  }
+}

src/page/content/content.ts

@@ -1,13 +1,44 @@
 import { Content, TypedContent } from "../../model/content";
 import "./content.scss";
 import { PageElement } from "../../framework/page-element";
-import { createElement } from "../../framework/helper";
+import { createElement, last } from "../../framework/helper";
+import { html } from "../../model/misc";
 
 export class PageContent extends PageElement {
   private static isTyped(content): content is TypedContent {
     return (content as TypedContent).type !== undefined;
   }
 
+  public static parseTypedContent(
+    element: TypedContent,
+    disableInnerShadow?: boolean
+  ): html {
+    if (element.type === "a") {
+      return `<a href="${element.href}" rel="noreferrer" target="_blank"> ${element.text} </a>`;
+    }
+    if (element.type === "video") {
+      return `
+          <video ${element.options}>
+              <source src="${element.webm}" type="video/webm"/>
+              <source src="${element.mp4}" type="video/mp4"/>
+          </video>
+      `;
+    }
+    if (element.type === "img") {
+      return `
+            ${!disableInnerShadow ? `<div class="image-container">` : ""}
+                <img 
+                    srcset="${element.image.srcSet}" 
+                    src="${last(element.image.images).path}" 
+                    alt="${element.alt}"
+                />
+            ${!disableInnerShadow ? `</div>` : ""}
+      `;
+    }
+
+    throw new Error("Unhandled type.");
+  }
+
   public constructor(content: Content) {
     super();
 
@@ -15,18 +46,11 @@ export class PageContent extends PageElement {
       createElement(`
         <div class="content">
             ${content
-              .map(element => {
-                if (PageContent.isTyped(element)) {
-                  if (element.type === "a") {
-                    return `<a href="${element.href}" rel="noreferrer" target="_blank"> ${element.text} </a>`;
-                  }
-                  if (element.type === "video") {
-                    return `<video controls><source src="${element.src}" /></video>`;
-                  }
-                  throw new Error("Unhandled type.");
-                }
-                return `<p>${element}</p>`;
-              })
+              .map(element =>
+                PageContent.isTyped(element)
+                  ? PageContent.parseTypedContent(element)
+                  : `<p>${element}</p>`
+              )
               .join("\n")}
         </div>
       `)

src/page/footer/footer.html.ts

@@ -1,9 +1,9 @@
 import { Footer } from "../../model/portfolio";
-import { html, url } from "../../model/misc";
+import { html } from "../../model/misc";
+import emailIcon from "../../static/icons/at.svg";
+import cvIcon from "../../static/icons/cv.svg";
 
 import "./footer.scss";
-import cvIcon from "../../static/icons/cv.svg";
-import emailIcon from "../../static/icons/at.svg";
 
 export const generate = ({
   title,
@@ -11,9 +11,7 @@ export const generate = ({
   cv,
   cvName,
   lastEditName,
-  lastEdit,
-  githubLinkName,
-  githubLink
+  lastEdit
 }: Footer): html => `
     <footer id="page-footer">
         <h2>${title}</h2>

src/page/footer/footer.scss

@@ -43,7 +43,7 @@ footer#page-footer {
 
     h6 {
       @include insignificant-font();
-      opacity: 0.4;
+      opacity: 0.6;
     }
   }
 }

src/page/index.ts

@@ -7,7 +7,7 @@ import { PageImageViewer } from "./image-viewer/image-viewer";
 import { Page } from "../framework/page";
 
 export const create = ({ config, header, timeline, footer }: Portfolio) => {
-  const pageHeader = new PageHeader(header, config.aPictureOf);
+  const pageHeader = new PageHeader(header);
   const pageFooter = new PageFooter(footer);
 
   const bg = new PageBackground(pageHeader, pageFooter);

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

@@ -1,9 +1,11 @@
 import { TimelineElement } from "../../../model/portfolio";
 import { html } from "../../../model/misc";
+import { PageContent } from "../../content/content";
+
 import "./timeline-element.scss";
 
 export const generate = (
-  { date, title, picture, description, more, link }: TimelineElement,
+  { date, title, figure, description, more, link }: TimelineElement,
   showMore: string,
   showLess: string
 ): html => `
@@ -13,9 +15,7 @@ export const generate = (
         </div>
         <div class="card">
             <h2>${title}</h2>
-            <div class="image-container">
-                <img src="${picture}" alt="${picture}"/>
-            </div>
+            ${PageContent.parseTypedContent(figure)}
             <p class="description">${description}</p>
             ${
               more

src/page/timeline/timeline-element/timeline-element.scss

@@ -75,18 +75,6 @@
       @include sub-title-font();
     }
 
-    .image-container {
-      font-size: 0;
-      box-shadow: inset $shadow1, inset $shadow2;
-      pointer-events: none;
-      img {
-        pointer-events: all;
-        cursor: pointer;
-        position: relative;
-        z-index: -2;
-      }
-    }
-
     .description {
       font-style: italic;
     }