WIP

src/page/background/background.html.ts

@@ -6,7 +6,8 @@ export const generate = (
   count: number,
   probability: number,
   width: number,
-  color: string
+  color: string,
+  translateZ: number
 ): html => `
     <section class="background">
         ${new Array(count)
@@ -15,7 +16,8 @@ export const generate = (
             fixedSeedRandom() < probability
               ? `<div style="width: ${width}px; height: ${width *
                   (fixedSeedRandom() + 0.1) *
-                  10}px; background-color: ${color}"></div>`
+                  10}px; background-color: ${color}; transform: translateZ(${translateZ}px) rotate(-20deg);"
+                ></div>`
               : `<div class="gap"></div>`
           )
           .join("")}

src/page/background/background.scss

@@ -2,23 +2,20 @@
 @import "../../style/mixins";
 
 .background {
-  position: fixed;
+  position: absolute;
   left: 0;
   top: 0;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-evenly;
   margin-top: -20vh;
-  width: 100%;
-  height: 100%;
+  width: 400%;
   z-index: -1;
 
   div {
     border-radius: 10000px;
     margin: 10vh 10vw;
 
-    transform: rotate(-20deg);
-
     &.gap {
       visibility: hidden;
     }

src/page/background/background.ts

@@ -8,17 +8,12 @@ export class PageBackground extends PageElement {
     count: number,
     width: number,
     probability: number,
-    color: string
+    color: string,
+    translateZ: number
   ) {
     super();
-    this.setElement(createElement(generate(count, probability, width, color)));
-  }
-
-  public onAfterLoad(parent: HTMLElement) {
-    window.addEventListener("scroll", () => {
-      this.getElement().style.transform = `translateY(-${window.scrollY *
-        this.speed}px)`;
-    });
-    super.onAfterLoad(parent);
+    this.setElement(
+      createElement(generate(count, probability, width, color, translateZ))
+    );
   }
 }

src/page/footer/footer.scss

@@ -1,6 +0,0 @@
-@import "../../style/mixins";
-
-footer {
-  @include card();
-  @include center-children();
-}

src/page/index.ts

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

src/page/main/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/main/about/about.scss

@@ -1,7 +1,9 @@
-@import "../../style/mixins";
-@import "../../style/vars";
+@import "../../../style/mixins";
+@import "../../../style/vars";
 
 #about {
+  margin-top: $normal-margin;
+
   header {
     @include center-children();
 

src/page/main/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/main/content/content.scss

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

src/page/main/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/main/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/main/footer/footer.scss

@@ -0,0 +1,8 @@
+@import "../../../style/mixins";
+@import "../../../style/vars";
+
+footer {
+  @include card();
+  @include center-children();
+  margin: $normal-margin 0;
+}

src/page/main/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/main/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/main/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/main/image-viewer/image-viewer.ts

@@ -1,8 +1,7 @@
-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";
-import { mixColorsToRGB } from "../../framework/helper";
 
 export class PageImageViewer extends PageElement {
   public constructor() {

src/page/main/main.html.ts

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

src/page/main/main.scss

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

src/page/main/main.ts

@@ -0,0 +1,25 @@
+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/main/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/main/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/main/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/main/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/main/timeline/timeline.scss

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

src/page/main/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/page/timeline/timeline.scss

@@ -1 +0,0 @@
-@import "../../style/vars";