andras/schmelczer-dev
1
0
Fork 0
Code Issues Pull requests 6 Projects Releases Packages Wiki Activity Actions

WIP

Browse source
This commit is contained in:
Schmelczer András 2019-12-23 16:59:13 +01:00
parent c2dbf995cc
commit dbb48fbde6
29 changed files with 146 additions and 94 deletions
Download patch file Download diff file Expand all files Collapse all files

43
.idea/workspace.xml generated
View file

@ -2,23 +2,32 @@
<project version="4">
<component name="ChangeListManager">
<list default="true" id="8edc47ab-1265-4111-9771-536b24cc9310" name="Default Changelist" comment="">
<change afterPath="$PROJECT_DIR$/src/page/background/background.html.ts" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/page/background/background.scss" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/page/background/background.ts" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/page/main/main.html.ts" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/page/main/main.scss" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/page/main/main.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/framework/helper.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/framework/helper.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/about/about.html.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/about/about.html.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/about/about.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/about/about.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/footer/footer.html.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/footer/footer.html.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/footer/footer.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/footer/footer.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/image-viewer/image-viewer.html.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/image-viewer/image-viewer.html.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/image-viewer/image-viewer.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/image-viewer/image-viewer.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/index.html" beforeDir="false" afterPath="$PROJECT_DIR$/src/index.html" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/about/about.html.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/main/about/about.html.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/about/about.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/main/about/about.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/about/about.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/main/about/about.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/background/background.html.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/background/background.html.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/background/background.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/background/background.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/background/background.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/background/background.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/content/content.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/main/content/content.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/content/content.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/main/content/content.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/footer/footer.html.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/main/footer/footer.html.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/footer/footer.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/main/footer/footer.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/footer/footer.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/main/footer/footer.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/image-viewer/image-viewer.html.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/main/image-viewer/image-viewer.html.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/image-viewer/image-viewer.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/main/image-viewer/image-viewer.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/image-viewer/image-viewer.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/main/image-viewer/image-viewer.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/index.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/index.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/timeline/timeline-element/timeline-element.html.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/timeline/timeline-element/timeline-element.html.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/timeline/timeline-element/timeline-element.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/timeline/timeline-element/timeline-element.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/timeline/timeline.html.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/timeline/timeline.html.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/timeline/timeline.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/timeline/timeline.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/style/vars.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/style/vars.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/timeline/timeline-element/timeline-element.html.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/main/timeline/timeline-element/timeline-element.html.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/timeline/timeline-element/timeline-element.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/main/timeline/timeline-element/timeline-element.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/timeline/timeline-element/timeline-element.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/main/timeline/timeline-element/timeline-element.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/timeline/timeline.html.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/main/timeline/timeline.html.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/timeline/timeline.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/main/timeline/timeline.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/timeline/timeline.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/main/timeline/timeline.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/styles.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles.scss" afterDir="false" />
</list>
<option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
@ -60,11 +69,11 @@
</component>
<component name="RecentsManager">
<key name="MoveFile.RECENT_KEYS">
<recent name="C:\Projects\portfolio\CompiledCV\src\page\main" />
<recent name="C:\Projects\portfolio\CompiledCV\src\static\media" />
<recent name="C:\Projects\portfolio\CompiledCV\src\static" />
<recent name="C:\Projects\portfolio\CompiledCV\src\static\fonts" />
<recent name="C:\Projects\portfolio\CompiledCV\src\page\footer" />
<recent name="C:\Projects\portfolio\CompiledCV\src\page\timeline\timeline-element" />
</key>
<key name="CopyFile.RECENT_KEYS">
<recent name="C:\Projects\portfolio\CompiledCV\src\static\icons" />
@ -105,7 +114,7 @@
<workItem from="1576958819998" duration="3247000" />
<workItem from="1577001408085" duration="15739000" />
<workItem from="1577040021962" duration="1657000" />
<workItem from="1577088438195" duration="14685000" />
<workItem from="1577088438195" duration="19038000" />
</task>
<servers />
</component>

1
src/index.html
View file

@ -16,5 +16,6 @@
<title>Portfolio</title>
</head>
<body>
<main></main>
</body>
</html>

6
src/page/background/background.html.ts
View file

@ -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("")}

7
src/page/background/background.scss
View file

@ -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;
}

15
src/page/background/background.ts
View file

@ -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))
);
}
}

6
src/page/footer/footer.scss
View file

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

24
src/page/index.ts
View file

@ -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));
};

4
src/page/about/about.html.ts → src/page/main/about/about.html.ts
View file

@ -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 = (

6
src/page/about/about.scss → src/page/main/about/about.scss
View file

@ -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();

6
src/page/about/about.ts → src/page/main/about/about.ts
View file

@ -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";

2
src/page/content/content.scss → src/page/main/content/content.scss
View file

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

6
src/page/content/content.ts → src/page/main/content/content.ts
View file

@ -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 {

4
src/page/footer/footer.html.ts → src/page/main/footer/footer.html.ts
View file

@ -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 => `

8
src/page/main/footer/footer.scss Normal file
View file

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

6
src/page/footer/footer.ts → src/page/main/footer/footer.ts
View file

@ -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";

4
src/page/image-viewer/image-viewer.html.ts → src/page/main/image-viewer/image-viewer.html.ts
View file

@ -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 => `

4
src/page/image-viewer/image-viewer.scss → src/page/main/image-viewer/image-viewer.scss
View file

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

5
src/page/image-viewer/image-viewer.ts → src/page/main/image-viewer/image-viewer.ts
View file

@ -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() {

6
src/page/main/main.html.ts Normal file
View file

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

6
src/page/main/main.scss Normal file
View file

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

25
src/page/main/main.ts Normal file
View file

@ -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);
}
}

4
src/page/timeline/timeline-element/timeline-element.html.ts → src/page/main/timeline/timeline-element/timeline-element.html.ts
View file

@ -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 = (

4
src/page/timeline/timeline-element/timeline-element.scss → src/page/main/timeline/timeline-element/timeline-element.scss
View file

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

6
src/page/timeline/timeline-element/timeline-element.ts → src/page/main/timeline/timeline-element/timeline-element.ts
View file

@ -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 {

2
src/page/timeline/timeline.html.ts → src/page/main/timeline/timeline.html.ts
View file

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

5
src/page/main/timeline/timeline.scss Normal file
View file

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

6
src/page/timeline/timeline.ts → src/page/main/timeline/timeline.ts
View file

@ -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";

1
src/page/timeline/timeline.scss
View file

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

18
src/styles.scss
View file

@ -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,