diff --git a/.idea/workspace.xml b/.idea/workspace.xml index 753b593..4f7317c 100644 --- a/.idea/workspace.xml +++ b/.idea/workspace.xml @@ -2,44 +2,24 @@ - - - - - - - - + + + - - - - - - + + - - + - + - + + - + - - - - - - - - - - - diff --git a/src/framework/helper.ts b/src/framework/helper.ts index a9b26d8..b455e47 100644 --- a/src/framework/helper.ts +++ b/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); diff --git a/src/page/about/about.html.ts b/src/page/about/about.html.ts index 9827889..e87aa1c 100644 --- a/src/page/about/about.html.ts +++ b/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, diff --git a/src/page/about/about.ts b/src/page/about/about.ts index d2f5e69..f50c8fc 100644 --- a/src/page/about/about.ts +++ b/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) { diff --git a/src/page/background/background.html.ts b/src/page/background/background.html.ts new file mode 100644 index 0000000..cfa91e2 --- /dev/null +++ b/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 => ` +
+ ${new Array(count) + .fill(0, 0, count) + .map(_ => + fixedSeedRandom() < probability + ? `
` + : `
` + ) + .join("")} +
+`; diff --git a/src/page/background/background.scss b/src/page/background/background.scss new file mode 100644 index 0000000..f36d197 --- /dev/null +++ b/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; + } + } +} diff --git a/src/page/background/background.ts b/src/page/background/background.ts new file mode 100644 index 0000000..1cb1c95 --- /dev/null +++ b/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); + } +} diff --git a/src/page/footer/footer.html.ts b/src/page/footer/footer.html.ts index 9cf8dfd..9073eea 100644 --- a/src/page/footer/footer.html.ts +++ b/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 => `