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

Add parallax

Browse source
This commit is contained in:
Schmelczer András 2019-12-23 14:39:49 +01:00
parent c8679b77bf
commit c2dbf995cc
18 changed files with 102 additions and 56 deletions
Download patch file Download diff file Expand all files Collapse all files

42
.idea/workspace.xml generated
View file

@ -2,44 +2,24 @@
<project version="4">
<component name="ChangeListManager">
<list default="true" id="8edc47ab-1265-4111-9771-536b24cc9310" name="Default Changelist" comment="">
<change afterPath="$PROJECT_DIR$/src/framework/helper.ts" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/page/about/about.html.ts" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/page/footer/footer.html.ts" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/page/image-viewer/image-viewer.html.ts" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/page/timeline/timeline-element/timeline-element.html.ts" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/page/timeline/timeline.html.ts" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/static/media/me-2.jpg" afterDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/dictionaries/Schme.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/dictionaries/Schme.xml" afterDir="false" />
<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 beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/favicon.ico" beforeDir="false" afterPath="$PROJECT_DIR$/src/static/favicon.ico" afterDir="false" />
<change beforePath="$PROJECT_DIR$/og-image.jpg" beforeDir="false" afterPath="$PROJECT_DIR$/src/static/og-image.jpg" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/content/en.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/content/en.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/framework/helpers.ts" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/src/model/portfolio.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/model/portfolio.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/about/about.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/about/about.scss" 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/content/content.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/content/content.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/footer/footer.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/footer/footer.scss" 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.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/image-viewer/image-viewer.scss" 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/page/timeline/timeline-element/timeline-element.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/timeline/timeline-element/timeline-element.scss" 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.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/timeline/timeline.scss" 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/static/fonts/open_sans/open-sans-v17-latin_latin-ext-300italic.eot" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/src/static/fonts/open_sans/open-sans-v17-latin_latin-ext-300italic.svg" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/src/static/fonts/open_sans/open-sans-v17-latin_latin-ext-300italic.ttf" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/src/static/fonts/open_sans/open-sans-v17-latin_latin-ext-300italic.woff" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/src/static/fonts/open_sans/open-sans-v17-latin_latin-ext-300italic.woff2" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/src/static/icons/cancel.svg" beforeDir="false" afterPath="$PROJECT_DIR$/src/static/icons/cancel.svg" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/style/fonts.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/style/fonts.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/style/mixins.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/style/mixins.scss" 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/styles.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/ts/parser.ts" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/tsconfig.json" beforeDir="false" afterPath="$PROJECT_DIR$/tsconfig.json" afterDir="false" />
<change beforePath="$PROJECT_DIR$/webpack.config.js" beforeDir="false" afterPath="$PROJECT_DIR$/webpack.config.js" afterDir="false" />
</list>
<option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
<option name="SHOW_DIALOG" value="false" />
@ -125,7 +105,7 @@
<workItem from="1576958819998" duration="3247000" />
<workItem from="1577001408085" duration="15739000" />
<workItem from="1577040021962" duration="1657000" />
<workItem from="1577088438195" duration="7290000" />
<workItem from="1577088438195" duration="14685000" />
</task>
<servers />
</component>

5
src/framework/helper.ts
View file

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

1
src/page/about/about.html.ts
View file

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

1
src/page/about/about.ts
View file

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

23
src/page/background/background.html.ts Normal file
View file

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

26
src/page/background/background.scss Normal file
View file

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

24
src/page/background/background.ts Normal file
View file

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

1
src/page/footer/footer.html.ts
View file

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

1
src/page/footer/footer.ts
View file

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

1
src/page/image-viewer/image-viewer.html.ts
View file

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

4
src/page/image-viewer/image-viewer.ts
View file

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

3
src/page/index.ts
View file

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

1
src/page/timeline/timeline-element/timeline-element.html.ts
View file

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

1
src/page/timeline/timeline-element/timeline-element.ts
View file

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

1
src/page/timeline/timeline.html.ts
View file

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

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

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

8
src/style/vars.scss
View file

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

14
src/styles.scss
View file

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