Add favicon support

src/index.ts

@@ -1,3 +1,6 @@
+import "./static/no-change/favicon.ico";
+import "./static/no-change/og-image.jpg";
+
 import "./styles.scss";
 
 import { create } from "./page/index";

src/page/about/about.html.ts

@@ -1,5 +1,5 @@
-import { Header } from "../../../model/portfolio";
-import { html } from "../../../model/misc";
+import { Header } from "../../model/portfolio";
+import { html } from "../../model/misc";
 import "./about.scss";
 
 export const generate = (

src/page/about/about.scss

@@ -1,5 +1,5 @@
-@import "../../../style/mixins";
-@import "../../../style/vars";
+@import "../../style/mixins";
+@import "../../style/vars";
 
 #about {
   margin-top: $normal-margin;

src/page/about/about.ts

@@ -1,7 +1,7 @@
 import { PageContent } from "../content/content";
-import { Header } from "../../../model/portfolio";
-import { PageElement } from "../../../framework/page-element";
-import { createElement } from "../../../framework/element-factory";
+import { Header } from "../../model/portfolio";
+import { PageElement } from "../../framework/page-element";
+import { createElement } from "../../framework/element-factory";
 
 import { generate } from "./about.html";
 

src/page/content/content.scss

@@ -1,4 +1,4 @@
-@import "../../../style/vars";
+@import "../../style/vars";
 
 .content {
   margin-top: $small-margin;

src/page/content/content.ts

@@ -1,7 +1,7 @@
-import { Content, TypedContent } from "../../../model/content";
+import { Content, TypedContent } from "../../model/content";
 import "./content.scss";
-import { PageElement } from "../../../framework/page-element";
-import { createElement } from "../../../framework/element-factory";
+import { PageElement } from "../../framework/page-element";
+import { createElement } from "../../framework/element-factory";
 
 export class PageContent extends PageElement {
   private static isTyped(content): content is TypedContent {

src/page/footer/footer.html.ts

@@ -1,5 +1,5 @@
-import { Footer } from "../../../model/portfolio";
-import { html } from "../../../model/misc";
+import { Footer } from "../../model/portfolio";
+import { html } from "../../model/misc";
 import "./footer.scss";
 
 export const generate = ({ email, cv }: Footer, cvName: string): html => `

src/page/footer/footer.scss

@@ -1,5 +1,5 @@
-@import "../../../style/mixins";
-@import "../../../style/vars";
+@import "../../style/mixins";
+@import "../../style/vars";
 
 footer {
   @include card();

src/page/footer/footer.ts

@@ -1,6 +1,6 @@
-import { Footer } from "../../../model/portfolio";
-import { PageElement } from "../../../framework/page-element";
-import { createElement } from "../../../framework/element-factory";
+import { Footer } from "../../model/portfolio";
+import { PageElement } from "../../framework/page-element";
+import { createElement } from "../../framework/element-factory";
 
 import { generate } from "./footer.html";
 

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

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

src/page/image-viewer/image-viewer.scss

@@ -1,5 +1,5 @@
-@import "../../../style/vars";
-@import "../../../style/mixins";
+@import "../../style/vars";
+@import "../../style/mixins";
 
 .photo-viewer {
   @include center-children();

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

@@ -1,5 +1,5 @@
-import { createElement } from "../../../framework/element-factory";
-import { PageElement } from "../../../framework/page-element";
+import { createElement } from "../../framework/element-factory";
+import { PageElement } from "../../framework/page-element";
 
 import { generate } from "./image-viewer.html";
 

src/page/index.ts

@@ -1,15 +1,21 @@
 import { Portfolio } from "../model/portfolio";
 import { PageElement } from "../framework/page-element";
 import { PageBackground } from "./background/background";
-import { PageMain } from "./main/main";
+import { PageHeader } from "./about/about";
+import { PageTimeline } from "./timeline/timeline";
+import { PageFooter } from "./footer/footer";
+import { PageImageViewer } from "./image-viewer/image-viewer";
 
-export const create = (portfolio: Portfolio) => {
-  document.title = portfolio.header.name;
+export const create = ({ config, header, timeline, footer }: Portfolio) => {
+  document.title = header.name;
 
   const pageElements: Array<PageElement> = [
     new PageBackground(0.1, 200, 140, 0.4, "#fff9e0aa", -15),
     new PageBackground(0.15, 300, 80, 0.3, "#ffd6d6aa", -10),
-    new PageMain(portfolio)
+    new PageHeader(header, config.aPictureOf),
+    new PageTimeline(timeline, config.showMore, config.showLess),
+    new PageFooter(footer, config.cvName),
+    new PageImageViewer()
   ];
 
   const root = document.body.querySelector("main");

src/page/main/main.html.ts

@@ -1,6 +0,0 @@
-import { html } from "../../model/misc";
-import "./main.scss";
-
-export const generate = (): html => `
-    <article id="main"></article>
-`;

src/page/main/main.scss

@@ -1,6 +0,0 @@
-@import "../../style/vars";
-
-article#main {
-  width: $body-width;
-  margin: auto;
-}

src/page/main/main.ts

@@ -1,25 +0,0 @@
-import { PageElement } from "../../framework/page-element";
-import { createElement } from "../../framework/element-factory";
-import { generate } from "./main.html";
-import { Portfolio } from "../../model/portfolio";
-import { PageHeader } from "./about/about";
-import { PageTimeline } from "./timeline/timeline";
-import { PageFooter } from "./footer/footer";
-import { PageImageViewer } from "./image-viewer/image-viewer";
-
-export class PageMain extends PageElement {
-  constructor({ config, header, timeline, footer }: Portfolio) {
-    const root = createElement(generate());
-
-    const pageElements: Array<PageElement> = [
-      new PageHeader(header, config.aPictureOf),
-      new PageTimeline(timeline, config.showMore, config.showLess),
-      new PageFooter(footer, config.cvName),
-      new PageImageViewer()
-    ];
-
-    root.append(...pageElements.map(e => e.getElement()));
-    super(pageElements);
-    this.setElement(root);
-  }
-}

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

@@ -1,5 +1,5 @@
-import { TimelineElement } from "../../../../model/portfolio";
-import { html } from "../../../../model/misc";
+import { TimelineElement } from "../../../model/portfolio";
+import { html } from "../../../model/misc";
 import "./timeline-element.scss";
 
 export const generate = (

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

@@ -1,5 +1,5 @@
-@import "../../../../style/mixins";
-@import "../../../../style/vars";
+@import "../../../style/mixins";
+@import "../../../style/vars";
 
 .timeline-element {
   display: flex;

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

@@ -1,7 +1,7 @@
-import { TimelineElement } from "../../../../model/portfolio";
+import { TimelineElement } from "../../../model/portfolio";
 import { PageContent } from "../../content/content";
-import { PageElement } from "../../../../framework/page-element";
-import { createElement } from "../../../../framework/element-factory";
+import { PageElement } from "../../../framework/page-element";
+import { createElement } from "../../../framework/element-factory";
 import { generate } from "./timeline-element.html";
 
 export class PageTimelineElement extends PageElement {

src/page/timeline/timeline.html.ts

@@ -1,4 +1,4 @@
-import { html } from "../../../model/misc";
+import { html } from "../../model/misc";
 import "./timeline.scss";
 
 export const generate = (): html => `

src/page/timeline/timeline.scss

@@ -1,4 +1,4 @@
-@import "../../../style/vars";
+@import "../../style/vars";
 
 main#timeline {
   margin-top: $normal-margin;

src/page/timeline/timeline.ts

@@ -1,6 +1,6 @@
-import { TimelineElement } from "../../../model/portfolio";
-import { PageElement } from "../../../framework/page-element";
-import { createElement } from "../../../framework/element-factory";
+import { TimelineElement } from "../../model/portfolio";
+import { PageElement } from "../../framework/page-element";
+import { createElement } from "../../framework/element-factory";
 import { PageTimelineElement } from "./timeline-element/timeline-element";
 import { generate } from "./timeline.html";
 

src/styles.scss

@@ -36,7 +36,8 @@ body {
 
     perspective: 5px;
     & > * {
-      margin-top: $normal-margin;
+      width: $body-width;
+      margin: $normal-margin auto 0 auto;
     }
   }