diff --git a/.idea/workspace.xml b/.idea/workspace.xml index 4f7317c..dfdff79 100644 --- a/.idea/workspace.xml +++ b/.idea/workspace.xml @@ -2,23 +2,32 @@ - - - + + + - - - - - - - + + + + + + + + + + + + + + + - - - - - + + + + + + + - @@ -105,7 +114,7 @@ - + diff --git a/src/index.html b/src/index.html index 6a78e90..ee92045 100644 --- a/src/index.html +++ b/src/index.html @@ -16,5 +16,6 @@ Portfolio +
diff --git a/src/page/background/background.html.ts b/src/page/background/background.html.ts index cfa91e2..b80e02a 100644 --- a/src/page/background/background.html.ts +++ b/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 => `
${new Array(count) @@ -15,7 +16,8 @@ export const generate = ( fixedSeedRandom() < probability ? `
` + 10}px; background-color: ${color}; transform: translateZ(${translateZ}px) rotate(-20deg);" + >` : `
` ) .join("")} diff --git a/src/page/background/background.scss b/src/page/background/background.scss index f36d197..caaf7cd 100644 --- a/src/page/background/background.scss +++ b/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; } diff --git a/src/page/background/background.ts b/src/page/background/background.ts index 1cb1c95..ba5229c 100644 --- a/src/page/background/background.ts +++ b/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)) + ); } } diff --git a/src/page/footer/footer.scss b/src/page/footer/footer.scss deleted file mode 100644 index 00015a5..0000000 --- a/src/page/footer/footer.scss +++ /dev/null @@ -1,6 +0,0 @@ -@import "../../style/mixins"; - -footer { - @include card(); - @include center-children(); -} diff --git a/src/page/index.ts b/src/page/index.ts index 115c0ea..ca38e2e 100644 --- a/src/page/index.ts +++ b/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 = [ - 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)); }; diff --git a/src/page/about/about.html.ts b/src/page/main/about/about.html.ts similarity index 75% rename from src/page/about/about.html.ts rename to src/page/main/about/about.html.ts index e87aa1c..2610982 100644 --- a/src/page/about/about.html.ts +++ b/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 = ( diff --git a/src/page/about/about.scss b/src/page/main/about/about.scss similarity index 74% rename from src/page/about/about.scss rename to src/page/main/about/about.scss index 52bae84..9323b28 100644 --- a/src/page/about/about.scss +++ b/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(); diff --git a/src/page/about/about.ts b/src/page/main/about/about.ts similarity index 69% rename from src/page/about/about.ts rename to src/page/main/about/about.ts index f50c8fc..42a6b02 100644 --- a/src/page/about/about.ts +++ b/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"; diff --git a/src/page/content/content.scss b/src/page/main/content/content.scss similarity index 79% rename from src/page/content/content.scss rename to src/page/main/content/content.scss index a442235..5a57623 100644 --- a/src/page/content/content.scss +++ b/src/page/main/content/content.scss @@ -1,4 +1,4 @@ -@import "../../style/vars"; +@import "../../../style/vars"; .content { margin-top: $small-margin; diff --git a/src/page/content/content.ts b/src/page/main/content/content.ts similarity index 82% rename from src/page/content/content.ts rename to src/page/main/content/content.ts index c8e528a..b05f7be 100644 --- a/src/page/content/content.ts +++ b/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 { diff --git a/src/page/footer/footer.html.ts b/src/page/main/footer/footer.html.ts similarity index 71% rename from src/page/footer/footer.html.ts rename to src/page/main/footer/footer.html.ts index 9073eea..b6edd55 100644 --- a/src/page/footer/footer.html.ts +++ b/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 => ` diff --git a/src/page/main/footer/footer.scss b/src/page/main/footer/footer.scss new file mode 100644 index 0000000..926f385 --- /dev/null +++ b/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; +} diff --git a/src/page/footer/footer.ts b/src/page/main/footer/footer.ts similarity index 54% rename from src/page/footer/footer.ts rename to src/page/main/footer/footer.ts index cebfbcb..ec0c3e0 100644 --- a/src/page/footer/footer.ts +++ b/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"; diff --git a/src/page/image-viewer/image-viewer.html.ts b/src/page/main/image-viewer/image-viewer.html.ts similarity index 70% rename from src/page/image-viewer/image-viewer.html.ts rename to src/page/main/image-viewer/image-viewer.html.ts index 31d9030..8b8b671 100644 --- a/src/page/image-viewer/image-viewer.html.ts +++ b/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 => ` diff --git a/src/page/image-viewer/image-viewer.scss b/src/page/main/image-viewer/image-viewer.scss similarity index 86% rename from src/page/image-viewer/image-viewer.scss rename to src/page/main/image-viewer/image-viewer.scss index 088bf66..d30f9a2 100644 --- a/src/page/image-viewer/image-viewer.scss +++ b/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(); diff --git a/src/page/image-viewer/image-viewer.ts b/src/page/main/image-viewer/image-viewer.ts similarity index 87% rename from src/page/image-viewer/image-viewer.ts rename to src/page/main/image-viewer/image-viewer.ts index 4eb74ad..30b35ac 100644 --- a/src/page/image-viewer/image-viewer.ts +++ b/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() { diff --git a/src/page/main/main.html.ts b/src/page/main/main.html.ts new file mode 100644 index 0000000..96b737e --- /dev/null +++ b/src/page/main/main.html.ts @@ -0,0 +1,6 @@ +import { html } from "../../model/misc"; +import "./main.scss"; + +export const generate = (): html => ` +
+`; diff --git a/src/page/main/main.scss b/src/page/main/main.scss new file mode 100644 index 0000000..1bfb3c5 --- /dev/null +++ b/src/page/main/main.scss @@ -0,0 +1,6 @@ +@import "../../style/vars"; + +article#main { + width: $body-width; + margin: auto; +} diff --git a/src/page/main/main.ts b/src/page/main/main.ts new file mode 100644 index 0000000..a54417b --- /dev/null +++ b/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 = [ + 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); + } +} diff --git a/src/page/timeline/timeline-element/timeline-element.html.ts b/src/page/main/timeline/timeline-element/timeline-element.html.ts similarity index 90% rename from src/page/timeline/timeline-element/timeline-element.html.ts rename to src/page/main/timeline/timeline-element/timeline-element.html.ts index 016aae4..f608391 100644 --- a/src/page/timeline/timeline-element/timeline-element.html.ts +++ b/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 = ( diff --git a/src/page/timeline/timeline-element/timeline-element.scss b/src/page/main/timeline/timeline-element/timeline-element.scss similarity index 96% rename from src/page/timeline/timeline-element/timeline-element.scss rename to src/page/main/timeline/timeline-element/timeline-element.scss index 4456755..9c95dce 100644 --- a/src/page/timeline/timeline-element/timeline-element.scss +++ b/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; diff --git a/src/page/timeline/timeline-element/timeline-element.ts b/src/page/main/timeline/timeline-element/timeline-element.ts similarity index 90% rename from src/page/timeline/timeline-element/timeline-element.ts rename to src/page/main/timeline/timeline-element/timeline-element.ts index 8de2c49..ccfed30 100644 --- a/src/page/timeline/timeline-element/timeline-element.ts +++ b/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 { diff --git a/src/page/timeline/timeline.html.ts b/src/page/main/timeline/timeline.html.ts similarity index 69% rename from src/page/timeline/timeline.html.ts rename to src/page/main/timeline/timeline.html.ts index b5cd2ce..7c3363a 100644 --- a/src/page/timeline/timeline.html.ts +++ b/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 => ` diff --git a/src/page/main/timeline/timeline.scss b/src/page/main/timeline/timeline.scss new file mode 100644 index 0000000..373d101 --- /dev/null +++ b/src/page/main/timeline/timeline.scss @@ -0,0 +1,5 @@ +@import "../../../style/vars"; + +main#timeline { + margin-top: $normal-margin; +} diff --git a/src/page/timeline/timeline.ts b/src/page/main/timeline/timeline.ts similarity index 73% rename from src/page/timeline/timeline.ts rename to src/page/main/timeline/timeline.ts index ff70ac5..668af7f 100644 --- a/src/page/timeline/timeline.ts +++ b/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"; diff --git a/src/page/timeline/timeline.scss b/src/page/timeline/timeline.scss deleted file mode 100644 index 0af2b02..0000000 --- a/src/page/timeline/timeline.scss +++ /dev/null @@ -1 +0,0 @@ -@import "../../style/vars"; diff --git a/src/styles.scss b/src/styles.scss index bd505d1..91c1942 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -19,15 +19,25 @@ html { background-color: $background; + height: 100%; } body { - width: $body-width; - margin: auto; @include main-font(); + margin: auto; + height: 100%; + width: 100%; - & > * { - margin-top: $normal-margin; + & > main { + height: 100%; + overflow-y: auto; + perspective-origin: 0 0; + overflow-x: hidden; + + perspective: 5px; + & > * { + margin-top: $normal-margin; + } } &::-webkit-scrollbar-track,