Add parallax

src/framework/helper.ts

@@ -25,3 +25,8 @@ const hexToRGB = (hex: string): [number, number, number] => {
 
 const RGBToHex = (rgb: [number, number, number]): string =>
   rgb.map(n => Math.round(n).toString(16)).join("");
+
+export const randomFactory = seed => () =>
+  ((2 ** 31 - 1) & (seed = Math.imul(48271, seed))) / 2 ** 31;
+
+export const fixedSeedRandom = randomFactory(42);

src/page/about/about.html.ts

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

src/page/about/about.ts

@@ -4,7 +4,6 @@ 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(header: Header, aPictureOf: string) {

src/page/background/background.html.ts

@@ -0,0 +1,23 @@
+import { html } from "../../model/misc";
+import "./background.scss";
+import { fixedSeedRandom } from "../../framework/helper";
+
+export const generate = (
+  count: number,
+  probability: number,
+  width: number,
+  color: string
+): html => `
+    <section class="background">
+        ${new Array(count)
+          .fill(0, 0, count)
+          .map(_ =>
+            fixedSeedRandom() < probability
+              ? `<div style="width: ${width}px; height: ${width *
+                  (fixedSeedRandom() + 0.1) *
+                  10}px; background-color: ${color}"></div>`
+              : `<div class="gap"></div>`
+          )
+          .join("")}
+    </section>
+`;

src/page/background/background.scss

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

src/page/background/background.ts

@@ -0,0 +1,24 @@
+import { PageElement } from "../../framework/page-element";
+import { createElement } from "../../framework/element-factory";
+import { generate } from "./background.html";
+
+export class PageBackground extends PageElement {
+  public constructor(
+    private speed: number,
+    count: number,
+    width: number,
+    probability: number,
+    color: string
+  ) {
+    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);
+  }
+}

src/page/footer/footer.html.ts

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

src/page/footer/footer.ts

@@ -2,7 +2,6 @@ import { Footer } from "../../model/portfolio";
 import { PageElement } from "../../framework/page-element";
 import { createElement } from "../../framework/element-factory";
 
-import "./footer.scss";
 import { generate } from "./footer.html";
 
 export class PageFooter extends PageElement {

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

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

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

@@ -1,7 +1,6 @@
 import { createElement } from "../../framework/element-factory";
 import { PageElement } from "../../framework/page-element";
 
-import "./image-viewer.scss";
 import { generate } from "./image-viewer.html";
 import { mixColorsToRGB } from "../../framework/helper";
 
@@ -45,9 +44,6 @@ export class PageImageViewer extends PageElement {
 
   private static show(e: HTMLElement) {
     e.style.display = "flex";
-    console.log("#" + mixColorsToRGB("00000", "ffd6d6", 0.75));
-    document.body.parentElement.style.backgroundColor =
-      "#" + mixColorsToRGB("00000", "ffd6d6", 0.75);
   }
   private static hide(e: HTMLElement) {
     e.style.display = "none";

src/page/index.ts

@@ -4,6 +4,7 @@ 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";
 
 export const create = (portfolio: Portfolio) => {
   const { config, header, timeline, footer } = portfolio;
@@ -11,6 +12,8 @@ export const create = (portfolio: Portfolio) => {
   document.title = 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),

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

@@ -1,5 +1,6 @@
 import { TimelineElement } from "../../../model/portfolio";
 import { html } from "../../../model/misc";
+import "./timeline-element.scss";
 
 export const generate = (
   { date, title, picture, description, more, link }: TimelineElement,

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

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

src/page/timeline/timeline.html.ts

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

src/page/timeline/timeline.ts

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

src/style/vars.scss

@@ -1,7 +1,7 @@
 @import "fonts";
-$background-start: #fff9e0;
-$background-end: #ffd6d6;
-$background: linear-gradient(90deg, $background-start 0, $background-end 100vw);
+$background-start: white;
+$background-end: white;
+$background: white;
 
 $normal-text-color: #31343f;
 $light-text-color: #7a7d8e;
@@ -17,7 +17,7 @@ $line-width: 3px;
 $border-radius: 5px;
 $breakpoint-width: 900px;
 
-$normal-margin: 35px;
+$normal-margin: 45px;
 $small-margin: 25px;
 $line-height: 2ch;
 

src/styles.scss

@@ -18,19 +18,7 @@
 }
 
 html {
-  background-color: $normal-text-color;
-  color: $inverse-text-color;
-}
-
-@supports (background: $background) {
-  html {
-    background: $background;
-    color: $normal-text-color;
-  }
-}
-
-html {
-  background-color: $background-end;
+  background-color: $background;
 }
 
 body {