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

Refactor

Browse source
This commit is contained in:
Schmelczer András 2020-01-04 10:24:07 +01:00
parent 41d4665e49
commit 969ccac690
24 changed files with 236 additions and 287 deletions
Download patch file Download diff file Expand all files Collapse all files

47
.idea/workspace.xml generated
View file

@ -2,19 +2,29 @@
<project version="4"> <project version="4">
<component name="ChangeListManager"> <component name="ChangeListManager">
<list default="true" id="8edc47ab-1265-4111-9771-536b24cc9310" name="Default Changelist" comment=""> <list default="true" id="8edc47ab-1265-4111-9771-536b24cc9310" name="Default Changelist" comment="">
<change afterPath="$PROJECT_DIR$/.prettierrc" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/framework/helper/color-mixer.ts" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/framework/helper/create-element.ts" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/framework/helper/get-height.ts" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/framework/helper/last.ts" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/framework/helper/random.ts" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/framework/helper/range.ts" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/framework/helper/sum.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" /> <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" /> <change beforePath="$PROJECT_DIR$/src/framework/helper.ts" beforeDir="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/framework/page.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/framework/page.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/index.html" beforeDir="false" afterPath="$PROJECT_DIR$/src/index.html" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/model/content.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/model/content.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/model/portfolio.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/model/portfolio.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/background/background.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/background/background.ts" 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/background/blob.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/background/blob.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/content/content.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/content/content.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.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.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/timeline/timeline-element/timeline-element.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/page/timeline/timeline.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/timeline/timeline.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/portfolio.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/portfolio.ts" afterDir="false" /> <change beforePath="$PROJECT_DIR$/src/style/a.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/style/a.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/style/vars.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/style/vars.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/webpack.config.js" beforeDir="false" afterPath="$PROJECT_DIR$/webpack.config.js" afterDir="false" /> <change beforePath="$PROJECT_DIR$/webpack.config.js" beforeDir="false" afterPath="$PROJECT_DIR$/webpack.config.js" afterDir="false" />
</list> </list>
<option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" /> <option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
@ -23,9 +33,6 @@
<option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" /> <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
<option name="LAST_RESOLUTION" value="IGNORE" /> <option name="LAST_RESOLUTION" value="IGNORE" />
</component> </component>
<component name="FavoritesManager">
<favorites_list name="CompiledCV" />
</component>
<component name="FileTemplateManagerImpl"> <component name="FileTemplateManagerImpl">
<option name="RECENT_TEMPLATES"> <option name="RECENT_TEMPLATES">
<list> <list>
@ -55,15 +62,9 @@
<property name="nodejs_package_manager_path" value="npm" /> <property name="nodejs_package_manager_path" value="npm" />
<property name="prettierjs.PrettierConfiguration.Package" value="/usr/local/lib/node_modules/prettier" /> <property name="prettierjs.PrettierConfiguration.Package" value="/usr/local/lib/node_modules/prettier" />
<property name="settings.editor.selected.configurable" value="watcher.settings" /> <property name="settings.editor.selected.configurable" value="watcher.settings" />
<property name="ts.external.directory.path" value="C:\Projects\portfolio\CompiledCV\node_modules\typescript\lib" /> <property name="ts.external.directory.path" value="$PROJECT_DIR$/node_modules/typescript/lib" />
</component> </component>
<component name="RecentsManager"> <component name="RecentsManager">
<key name="CopyFile.RECENT_KEYS">
<recent name="C:\Projects\portfolio\CompiledCV\src\page\background" />
<recent name="C:\Projects\portfolio\CompiledCV\src\static" />
<recent name="C:\Projects\portfolio\CompiledCV\src\static\icons" />
<recent name="$PROJECT_DIR$" />
</key>
<key name="MoveFile.RECENT_KEYS"> <key name="MoveFile.RECENT_KEYS">
<recent name="C:\Projects\portfolio\CompiledCV\src\static\fonts" /> <recent name="C:\Projects\portfolio\CompiledCV\src\static\fonts" />
<recent name="C:\Projects\portfolio\CompiledCV\src\static\cv" /> <recent name="C:\Projects\portfolio\CompiledCV\src\static\cv" />
@ -71,6 +72,12 @@
<recent name="C:\Projects\portfolio\CompiledCV\src" /> <recent name="C:\Projects\portfolio\CompiledCV\src" />
<recent name="C:\Projects\portfolio\CompiledCV\src\static\no-change" /> <recent name="C:\Projects\portfolio\CompiledCV\src\static\no-change" />
</key> </key>
<key name="CopyFile.RECENT_KEYS">
<recent name="C:\Projects\portfolio\CompiledCV\src\page\background" />
<recent name="C:\Projects\portfolio\CompiledCV\src\static" />
<recent name="C:\Projects\portfolio\CompiledCV\src\static\icons" />
<recent name="$PROJECT_DIR$" />
</key>
</component> </component>
<component name="RunDashboard"> <component name="RunDashboard">
<option name="ruleStates"> <option name="ruleStates">
@ -117,6 +124,8 @@
<workItem from="1577662869335" duration="6536000" /> <workItem from="1577662869335" duration="6536000" />
<workItem from="1577702567470" duration="3227000" /> <workItem from="1577702567470" duration="3227000" />
<workItem from="1577786195424" duration="4310000" /> <workItem from="1577786195424" duration="4310000" />
<workItem from="1578128234878" duration="396000" />
<workItem from="1578128641780" duration="1136000" />
</task> </task>
<servers /> <servers />
</component> </component>

5
.prettierrc Normal file
View file

@ -0,0 +1,5 @@
{
"trailingComma": "es5",
"tabWidth": 2,
"singleQuote": true
}

98
src/framework/helper.ts
View file

@ -1,98 +0,0 @@
import { html } from "../model/misc";
export const createElement = (from: html): HTMLElement => {
const element: HTMLElement = document.createElement("div");
element.innerHTML = from;
return element.firstElementChild as HTMLElement;
};
export const randomFactory = seed => () =>
((2 ** 31 - 1) & (seed = Math.imul(48271, seed))) / 2 ** 31;
export const fixedSeedRandom = randomFactory(42);
export const choose = <T>(
list: Array<T>,
random: () => number = fixedSeedRandom
): T => list[randomInInterval(0, list.length, random)];
export const randomInInterval = (
aClosed: number,
bOpen: number,
random: () => number = fixedSeedRandom
): number => Math.floor((bOpen - aClosed) * random()) + aClosed;
export const sum = (list: ArrayLike<number>): number =>
Array.prototype.reduce.call(list, (a, sum) => a + sum, 0);
export const getHeight = (e: HTMLElement): number => {
const computedStyle = window.getComputedStyle(e);
return (
// ignores margin collapse
e.clientHeight +
parseInt(computedStyle.marginTop) +
parseInt(computedStyle.marginBottom) +
parseInt(computedStyle.borderTopWidth) +
parseInt(computedStyle.borderBottomWidth)
);
};
export const mixColors = (
hexColorA: string,
hexColorB: string,
qA: number
): string => {
const colorA = hexToRGB(normalizeHex(hexColorA));
const colorB = hexToRGB(normalizeHex(hexColorB));
const mixedColor: [number, number, number] = [
colorA[0] * qA + colorB[0] * (1 - qA),
colorA[1] * qA + colorB[1] * (1 - qA),
colorA[2] * qA + colorB[2] * (1 - qA)
];
return RGBToHex(mixedColor);
};
const normalizeHex = (hex: string): string => {
hex = hex.trim();
if (hex.startsWith("#")) {
hex = hex.substr(1);
}
return hex;
};
const hexToRGB = (hex: string): [number, number, number] => {
const [r1, r2, g1, g2, b1, b2] = hex;
return [
Number.parseInt(r1 + r2, 16),
Number.parseInt(g1 + g2, 16),
Number.parseInt(b1 + b2, 16)
];
};
const RGBToHex = (rgb: [number, number, number]): string =>
rgb.map(n => Math.round(n).toString(16)).join("");
export const range = ({
from = 0,
to = Infinity,
step = 1
}: {
from?: number;
to?: number;
step?: number;
}): Iterable<number> => {
return {
*[Symbol.iterator]() {
for (let i = from; i < to; yield i, i += step) {}
}
};
};
export const last = <T>(list: Array<T>): T =>
list.length > 0 ? list[list.length - 1] : undefined;
export const isChrome = (): boolean =>
!!navigator.appVersion.match(/chrome/i) &&
// @ts-ignore
window.webkitRequestFileSystem !== undefined;

41
src/framework/helper/color-mixer.ts Normal file
View file

@ -0,0 +1,41 @@
export const mixColors = (
hexColorA: string,
hexColorB: string,
quantityA: number
): string => {
const colorA = hexToRGB(normalizeHex(hexColorA));
const colorB = hexToRGB(normalizeHex(hexColorB));
const mixedColor: [number, number, number] = [
mix(colorA[0], colorB[0], quantityA),
mix(colorA[1], colorB[1], quantityA),
mix(colorA[2], colorB[2], quantityA),
];
return RGBToHex(mixedColor);
};
const hexToRGB = ([r1, r2, g1, g2, b1, b2]: string): [
number,
number,
number
] => {
return [
Number.parseInt(r1 + r2, 16),
Number.parseInt(g1 + g2, 16),
Number.parseInt(b1 + b2, 16),
];
};
const normalizeHex = (hex: string): string => {
hex = hex.trim();
if (hex.startsWith('#')) {
hex = hex.substr(1);
}
return hex;
};
const mix = (a: number, b: number, q: number): number => a * q + b * (1 - q);
const RGBToHex = (rgb: [number, number, number]): string =>
'#' + rgb.map(n => Math.round(n).toString(16)).join('');

7
src/framework/helper/create-element.ts Normal file
View file

@ -0,0 +1,7 @@
import { html } from '../../model/misc';
export const createElement = (from: html): HTMLElement => {
const element: HTMLElement = document.createElement('div');
element.innerHTML = from;
return element.firstElementChild as HTMLElement;
};

11
src/framework/helper/get-height.ts Normal file
View file

@ -0,0 +1,11 @@
export const getHeight = (e: HTMLElement): number => {
const computedStyle = window.getComputedStyle(e);
return (
// ignores margin collapse
e.clientHeight +
parseInt(computedStyle.marginTop) +
parseInt(computedStyle.marginBottom) +
parseInt(computedStyle.borderTopWidth) +
parseInt(computedStyle.borderBottomWidth)
);
};

2
src/framework/helper/last.ts Normal file
View file

@ -0,0 +1,2 @@
export const last = <T>(list: Array<T>): T =>
list.length > 0 ? list[list.length - 1] : undefined;

17
src/framework/helper/random.ts Normal file
View file

@ -0,0 +1,17 @@
export class Random {
public constructor(private seed: number) {}
public get next(): number {
return (
((2 ** 31 - 1) & (this.seed = Math.imul(48271, this.seed))) / 2 ** 31
);
}
public choose<T>(list: Array<T>): T {
return list[this.randomInInterval(0, list.length)];
}
public randomInInterval(aClosed: number, bOpen: number): number {
return Math.floor((bOpen - aClosed) * this.next) + aClosed;
}
}

15
src/framework/helper/range.ts Normal file
View file

@ -0,0 +1,15 @@
export const range = ({
from = 0,
to = Infinity,
step = 1,
}: {
from?: number;
to?: number;
step?: number;
}): Iterable<number> => {
return {
*[Symbol.iterator]() {
for (let i = from; i < to; yield i, i += step) {}
},
};
};

2
src/framework/helper/sum.ts Normal file
View file

@ -0,0 +1,2 @@
export const sum = (list: ArrayLike<number>): number =>
Array.prototype.reduce.call(list, (a, sum) => a + sum, 0);

4
src/index.html
View file

@ -18,9 +18,7 @@
</head> </head>
<body> <body>
<main> <main>
<noscript> <noscript><h1>Javascript is required for this website.</h1></noscript>
<h1>Javascript is required for this website.</h1>
</noscript>
</main> </main>
</body> </body>
</html> </html>

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

@ -1,9 +1,9 @@
import { PageContent } from "../content/content"; import { PageContent } from '../content/content';
import { Header } from "../../model/portfolio"; import { Header } from '../../model/portfolio';
import { PageElement } from "../../framework/page-element"; import { PageElement } from '../../framework/page-element';
import { generate } from "./about.html"; import { generate } from './about.html';
import { createElement } from "../../framework/helper"; import { createElement } from '../../framework/helper/create-element';
export class PageHeader extends PageElement { export class PageHeader extends PageElement {
public constructor(header: Header) { public constructor(header: Header) {

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

@ -5,5 +5,4 @@ export const generate = (): html => `
<section id="background-container"> <section id="background-container">
<section id="background"></section> <section id="background"></section>
</section> </section>
<div id="edge-hack"></div>
`; `;

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

@ -2,10 +2,10 @@
@import "../../style/mixins"; @import "../../style/mixins";
#background-container { #background-container {
position: absolute; position: fixed;
left: 0; left: 0;
top: 0; top: 0;
height: 100%; height: 100vh;
width: 100%; width: 100%;
z-index: -1; z-index: -1;
@ -42,7 +42,3 @@
} }
} }
} }
#edge-hack {
position: fixed;
}

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

@ -1,31 +1,19 @@
import { PageElement } from "../../framework/page-element"; import { PageElement } from '../../framework/page-element';
import { import { PageEvent, PageEventType } from '../../framework/page-event';
getHeight, import { createElement } from '../../framework/helper/create-element';
createElement, import { Blob } from './blob';
randomFactory, import { generate } from './background.html';
sum, import { Random } from '../../framework/helper/random';
isChrome import { getHeight } from '../../framework/helper/get-height';
} from "../../framework/helper"; import { sum } from '../../framework/helper/sum';
import { PageEvent, PageEventType } from "../../framework/page-event";
import { Blob } from "./blob";
import { generate } from "./background.html";
export class PageBackground extends PageElement { export class PageBackground extends PageElement {
private readonly blobs: Array<Blob> = []; private readonly blobs: Array<Blob> = [];
private readonly blobSpacing = 350; private readonly blobSpacing = 350;
private previousWidth: number;
private previousHeight: number;
private previousScrollPositionToSet: number = 0;
private previousTimestamp: DOMHighResTimeStamp = null;
private readonly baseDeltaTime = (1 / 30) * 1000;
private readonly maxBaseSpeedInPixels = 20;
public constructor(private start: PageElement, private end: PageElement) { public constructor(private start: PageElement, private end: PageElement) {
super(); super();
this.setElement(createElement(generate())); this.setElement(createElement(generate()));
if (isChrome()) {
this.query("#background").style.transformStyle = "preserve-3d";
}
Blob.initialize(10, 30, 5); Blob.initialize(10, 30, 5);
} }
@ -38,46 +26,14 @@ export class PageBackground extends PageElement {
} }
private bindListeners(parent: PageElement) { private bindListeners(parent: PageElement) {
window.addEventListener("resize", () => this.resize(parent)); window.addEventListener('resize', () => this.resize(parent));
window.addEventListener("load", () => this.resize(parent)); window.addEventListener('load', () => this.resize(parent));
window.requestAnimationFrame(timestamp => parent
this.scrollContainer(timestamp, parent) .getElement()
); .addEventListener(
} 'scroll',
() => (this.getElement().scrollTop = parent.getElement().scrollTop)
private scrollContainer(timestamp: DOMHighResTimeStamp, parent: PageElement) { );
const deltaTime = this.getDeltaTime(timestamp);
const scrollPositionToSet = parent.getElement().scrollTop;
const deltaScroll = scrollPositionToSet - this.previousScrollPositionToSet;
this.previousScrollPositionToSet = scrollPositionToSet;
const threshold = 2;
if (deltaScroll > threshold) {
const smoothDeltaScroll =
(deltaScroll / deltaTime) * Math.min(deltaTime, this.baseDeltaTime);
this.getElement().scrollTop += smoothDeltaScroll;
} else {
const error = scrollPositionToSet - this.getElement().scrollTop;
if (Math.abs(error) > threshold) {
this.getElement().scrollTop += Math.min(
error / 4,
this.maxBaseSpeedInPixels,
error
);
}
}
window.requestAnimationFrame(timestamp =>
this.scrollContainer(timestamp, parent)
);
}
private getDeltaTime(timestamp: DOMHighResTimeStamp): number {
const deltaTime = this.previousTimestamp
? timestamp - this.previousTimestamp
: 0;
this.previousTimestamp = timestamp;
return deltaTime;
} }
private resize(parent: PageElement, heightChange?: number) { private resize(parent: PageElement, heightChange?: number) {
@ -89,14 +45,8 @@ export class PageBackground extends PageElement {
height += heightChange; height += heightChange;
} }
if (this.previousHeight === height && this.previousWidth === width) { this.query('#background').style.width = `${width}px`;
return; this.query('#background').style.height = `${height}px`;
}
this.previousHeight = height;
this.previousWidth = width;
this.query("#background").style.width = `${width}px`;
this.query("#background").style.height = `${height}px`;
const requiredBlobCount = Math.round( const requiredBlobCount = Math.round(
(width * height) / this.blobSpacing ** 2 (width * height) / this.blobSpacing ** 2
@ -104,11 +54,11 @@ export class PageBackground extends PageElement {
while (requiredBlobCount > this.blobs.length) { while (requiredBlobCount > this.blobs.length) {
const blob = new Blob(); const blob = new Blob();
this.query("#background").appendChild(blob.htmlElement); this.query('#background').appendChild(blob.htmlElement);
this.blobs.push(blob); this.blobs.push(blob);
} }
const random = randomFactory(2662); const random = new Random(2662);
this.blobs.forEach((b, i) => { this.blobs.forEach((b, i) => {
if (i >= requiredBlobCount) { if (i >= requiredBlobCount) {

50
src/page/background/blob.ts
View file

@ -1,14 +1,10 @@
import { import { mixColors } from '../../framework/helper/color-mixer';
choose, import { createElement } from '../../framework/helper/create-element';
createElement, import { Random } from '../../framework/helper/random';
mixColors,
randomFactory,
randomInInterval
} from "../../framework/helper";
export class Blob { export class Blob {
private static readonly creatorRandom = randomFactory(44); private static readonly creatorRandom = new Random(44);
private static readonly colors = ["#fff9e0", "#ffd6d6"]; private static readonly colors = ['#fff9e0', '#ffd6d6'];
private static zMin: number; private static zMin: number;
private static zMax: number; private static zMax: number;
private static perspective: number; private static perspective: number;
@ -18,26 +14,22 @@ export class Blob {
Blob.perspective = perspective; Blob.perspective = perspective;
} }
private readonly z = randomInInterval( private readonly z = Blob.creatorRandom.randomInInterval(
Blob.zMin, Blob.zMin,
Blob.zMax, Blob.zMax
Blob.creatorRandom
); );
private readonly element: HTMLElement = createElement("<div></div>"); private readonly element: HTMLElement = createElement('<div></div>');
constructor() { constructor() {
this.element.style.backgroundColor = this.element.style.backgroundColor = mixColors(
"#" + '#ffffff',
mixColors( Blob.creatorRandom.choose(Blob.colors),
"#ffffff", (this.z - Blob.zMin) / (Blob.zMax - Blob.zMin)
choose(Blob.colors, Blob.creatorRandom), );
(this.z - Blob.zMin) / (Blob.zMax - Blob.zMin)
);
this.element.style.zIndex = (-this.z).toString(); this.element.style.zIndex = (-this.z).toString();
this.element.style.height = `${randomInInterval( this.element.style.height = `${Blob.creatorRandom.randomInInterval(
160, 160,
740, 740
Blob.creatorRandom
)}px`; )}px`;
} }
@ -46,7 +38,7 @@ export class Blob {
} }
private randomWithKnownZ( private randomWithKnownZ(
random: () => number, random: Random,
viewportSize: number, viewportSize: number,
scrollSize: number, scrollSize: number,
startOffset = 0, startOffset = 0,
@ -67,19 +59,19 @@ export class Blob {
const l = const l =
scrollSize - viewportSize + (viewportSize - startOffset - endOffset) * m; scrollSize - viewportSize + (viewportSize - startOffset - endOffset) * m;
return randomInInterval(lowerBound, lowerBound + l, random); return random.randomInInterval(lowerBound, lowerBound + l);
} }
public show() { public show() {
this.element.style.opacity = "1"; this.element.style.opacity = '1';
} }
public hide() { public hide() {
this.element.style.opacity = "0"; this.element.style.opacity = '0';
} }
public transform( public transform(
random: () => number, random: Random,
width: number, width: number,
viewportHeight: number, viewportHeight: number,
scrollHeight: number, scrollHeight: number,
@ -98,7 +90,7 @@ export class Blob {
translateZ(${-this.z}px) translateZ(${-this.z}px)
rotate(-20deg) rotate(-20deg)
`; `;
this.element.style["-webkit-transform"] = value; this.element.style['-webkit-transform'] = value;
this.element.style.transform = value; this.element.style.transform = value;
} }
} }

25
src/page/content/content.ts
View file

@ -1,8 +1,9 @@
import { Content, TypedContent } from "../../model/content"; import { Content, TypedContent } from '../../model/content';
import "./content.scss"; import './content.scss';
import { PageElement } from "../../framework/page-element"; import { PageElement } from '../../framework/page-element';
import { createElement, last } from "../../framework/helper"; import { createElement } from '../../framework/helper/create-element';
import { html } from "../../model/misc"; import { html } from '../../model/misc';
import { last } from '../../framework/helper/last';
export class PageContent extends PageElement { export class PageContent extends PageElement {
private static isTyped(content): content is TypedContent { private static isTyped(content): content is TypedContent {
@ -13,10 +14,10 @@ export class PageContent extends PageElement {
element: TypedContent, element: TypedContent,
disableInnerShadow?: boolean disableInnerShadow?: boolean
): html { ): html {
if (element.type === "a") { if (element.type === 'a') {
return `<a href="${element.href}" rel="noreferrer" target="_blank"> ${element.text} </a>`; return `<a href="${element.href}" rel="noreferrer" target="_blank"> ${element.text} </a>`;
} }
if (element.type === "video") { if (element.type === 'video') {
return ` return `
<video ${element.options}> <video ${element.options}>
<source src="${element.webm}" type="video/webm"/> <source src="${element.webm}" type="video/webm"/>
@ -24,19 +25,19 @@ export class PageContent extends PageElement {
</video> </video>
`; `;
} }
if (element.type === "img") { if (element.type === 'img') {
return ` return `
${!disableInnerShadow ? `<div class="image-container">` : ""} ${!disableInnerShadow ? `<div class="image-container">` : ''}
<img <img
srcset="${element.image.srcSet}" srcset="${element.image.srcSet}"
src="${last(element.image.images).path}" src="${last(element.image.images).path}"
alt="${element.alt}" alt="${element.alt}"
/> />
${!disableInnerShadow ? `</div>` : ""} ${!disableInnerShadow ? `</div>` : ''}
`; `;
} }
throw new Error("Unhandled type."); throw new Error('Unhandled type.');
} }
public constructor(content: Content) { public constructor(content: Content) {
@ -51,7 +52,7 @@ export class PageContent extends PageElement {
? PageContent.parseTypedContent(element) ? PageContent.parseTypedContent(element)
: `<p>${element}</p>` : `<p>${element}</p>`
) )
.join("\n")} .join('\n')}
</div> </div>
`) `)
); );

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

@ -1,8 +1,8 @@
import { Footer } from "../../model/portfolio"; import { Footer } from '../../model/portfolio';
import { PageElement } from "../../framework/page-element"; import { PageElement } from '../../framework/page-element';
import { generate } from "./footer.html"; import { generate } from './footer.html';
import { createElement } from "../../framework/helper"; import { createElement } from '../../framework/helper/create-element';
export class PageFooter extends PageElement { export class PageFooter extends PageElement {
constructor(footer: Footer) { constructor(footer: Footer) {

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

@ -1,8 +1,8 @@
import { PageElement } from "../../framework/page-element"; import { PageElement } from '../../framework/page-element';
import { generate } from "./image-viewer.html"; import { generate } from './image-viewer.html';
import { createElement } from "../../framework/helper"; import { PageEvent, PageEventType } from '../../framework/page-event';
import { PageEvent, PageEventType } from "../../framework/page-event"; import { createElement } from '../../framework/helper/create-element';
export class PageImageViewer extends PageElement { export class PageImageViewer extends PageElement {
public constructor() { public constructor() {
@ -17,16 +17,16 @@ export class PageImageViewer extends PageElement {
return; return;
} }
document.body.addEventListener("keydown", this.handleKeydown.bind(this)); document.body.addEventListener('keydown', this.handleKeydown.bind(this));
const images = Array.prototype.slice.call( const images = Array.prototype.slice.call(
parent.getElement().querySelectorAll("img") parent.getElement().querySelectorAll('img')
); );
images images
.filter( .filter(
(img: HTMLImageElement) => (img: HTMLImageElement) =>
img.parentElement !== this.getElement() && img.parentElement !== this.getElement() &&
!img.classList.contains("no-open") !img.classList.contains('no-open')
) )
.forEach( .forEach(
(img: HTMLImageElement) => (img.onclick = this.handleClick.bind(this)) (img: HTMLImageElement) => (img.onclick = this.handleClick.bind(this))
@ -35,22 +35,22 @@ export class PageImageViewer extends PageElement {
private handleClick(event: Event) { private handleClick(event: Event) {
(this.query( (this.query(
"#photo" '#photo'
) as HTMLImageElement).src = (event.target as HTMLImageElement).src; ) as HTMLImageElement).src = (event.target as HTMLImageElement).src;
PageImageViewer.show(this.getElement()); PageImageViewer.show(this.getElement());
} }
private handleKeydown(event: KeyboardEvent) { private handleKeydown(event: KeyboardEvent) {
if (event.key === "Escape") { if (event.key === 'Escape') {
PageImageViewer.hide(this.getElement()); PageImageViewer.hide(this.getElement());
} }
} }
private static show(e: HTMLElement) { private static show(e: HTMLElement) {
e.style.display = "flex"; e.style.display = 'flex';
} }
private static hide(e: HTMLElement) { private static hide(e: HTMLElement) {
e.style.display = "none"; e.style.display = 'none';
} }
} }

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

@ -1,9 +1,9 @@
import { TimelineElement } from "../../../model/portfolio"; import { TimelineElement } from '../../../model/portfolio';
import { PageContent } from "../../content/content"; import { PageContent } from '../../content/content';
import { PageElement } from "../../../framework/page-element"; import { PageElement } from '../../../framework/page-element';
import { generate } from "./timeline-element.html"; import { generate } from './timeline-element.html';
import { createElement } from "../../../framework/helper"; import { PageEventType } from '../../../framework/page-event';
import { PageEventType } from "../../../framework/page-event"; import { createElement } from '../../../framework/helper/create-element';
export class PageTimelineElement extends PageElement { export class PageTimelineElement extends PageElement {
private isOpen; private isOpen;
@ -20,19 +20,19 @@ export class PageTimelineElement extends PageElement {
const content = new PageContent(timelineElement.more); const content = new PageContent(timelineElement.more);
super([content]); super([content]);
this.isOpen = false; this.isOpen = false;
this.more = root.querySelector(".more"); this.more = root.querySelector('.more');
this.more.appendChild(content.getElement()); this.more.appendChild(content.getElement());
window.addEventListener("resize", this.handleResize.bind(this)); window.addEventListener('resize', this.handleResize.bind(this));
root root
.querySelector(".buttons") .querySelector('.buttons')
.addEventListener("click", this.toggleOpen.bind(this)); .addEventListener('click', this.toggleOpen.bind(this));
} else super(); } else super();
this.setElement(root); this.setElement(root);
} }
private toggleOpen() { private toggleOpen() {
const showMore = this.query(".show-more") as HTMLElement; const showMore = this.query('.show-more') as HTMLElement;
const showLess = this.query(".show-less") as HTMLElement; const showLess = this.query('.show-less') as HTMLElement;
if (this.isOpen) { if (this.isOpen) {
PageTimelineElement.show(showMore); PageTimelineElement.show(showMore);
PageTimelineElement.hide(showLess); PageTimelineElement.hide(showLess);
@ -49,28 +49,28 @@ export class PageTimelineElement extends PageElement {
private notifyOfHeightChange(deltaHeight: number = undefined) { private notifyOfHeightChange(deltaHeight: number = undefined) {
this.eventBroadcaster?.broadcastEvent({ this.eventBroadcaster?.broadcastEvent({
type: PageEventType.onBodyDimensionsChanged, type: PageEventType.onBodyDimensionsChanged,
data: { deltaHeight } data: { deltaHeight },
}); });
setTimeout( setTimeout(
() => () =>
this.eventBroadcaster?.broadcastEvent({ this.eventBroadcaster?.broadcastEvent({
type: PageEventType.onBodyDimensionsChanged type: PageEventType.onBodyDimensionsChanged,
}), }),
350 350
); );
} }
private static hide(element: HTMLElement) { private static hide(element: HTMLElement) {
element.style.opacity = "0"; element.style.opacity = '0';
setTimeout(() => { setTimeout(() => {
element.style.visibility = "hidden"; element.style.visibility = 'hidden';
}, 350); }, 350);
} }
private static show(element: HTMLElement) { private static show(element: HTMLElement) {
element.style.visibility = "visible"; element.style.visibility = 'visible';
element.style.opacity = "1"; element.style.opacity = '1';
} }
private openMore() { private openMore() {
@ -81,13 +81,13 @@ export class PageTimelineElement extends PageElement {
private closeMore() { private closeMore() {
const deltaHeight = this.more.scrollHeight; const deltaHeight = this.more.scrollHeight;
this.more.style.height = "0"; this.more.style.height = '0';
this.notifyOfHeightChange(-deltaHeight); this.notifyOfHeightChange(-deltaHeight);
} }
private handleResize() { private handleResize() {
if (this.isOpen) { if (this.isOpen) {
this.more.style.height = "auto"; this.more.style.height = 'auto';
setTimeout(this.openMore.bind(this), 200); setTimeout(this.openMore.bind(this), 200);
} }
} }

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

@ -1,8 +1,8 @@
import { TimelineElement } from "../../model/portfolio"; import { TimelineElement } from '../../model/portfolio';
import { PageElement } from "../../framework/page-element"; import { PageElement } from '../../framework/page-element';
import { PageTimelineElement } from "./timeline-element/timeline-element"; import { PageTimelineElement } from './timeline-element/timeline-element';
import { generate } from "./timeline.html"; import { generate } from './timeline.html';
import { createElement } from "../../framework/helper"; import { createElement } from '../../framework/helper/create-element';
export class PageTimeline extends PageElement { export class PageTimeline extends PageElement {
public constructor( public constructor(

5
src/style/a.scss
View file

@ -13,14 +13,13 @@ a {
$border-shift: 10px; $border-shift: 10px;
transition: transform $long-transition-time; transition: transform $long-transition-time;
$dot-size: 4px;
&:before { &:before {
content: ""; content: "";
display: block; display: block;
position: absolute; position: absolute;
width: 100%; width: 100%;
height: $dot-size; height: $line-width;
bottom: 0; bottom: 0;
z-index: 1; z-index: 1;
background: linear-gradient( background: linear-gradient(
@ -37,7 +36,7 @@ a {
display: block; display: block;
width: calc(100% + #{$border-shift}); width: calc(100% + #{$border-shift});
z-index: 0; z-index: 0;
border-bottom: $dot-size dotted $accent-color; border-bottom: $line-width dashed $accent-color;
transition: transform $long-transition-time; transition: transform $long-transition-time;
} }

4
src/style/vars.scss
View file

@ -13,7 +13,7 @@ $scrollbar-color: #ffd6d6;
$short-transition-time: 220ms; $short-transition-time: 220ms;
$long-transition-time: 350ms; $long-transition-time: 350ms;
$line-width: 3px; $line-width: 3px;
$border-radius: 15px; $border-radius: var(--border-radius);
$breakpoint-width: 925px; $breakpoint-width: 925px;
$large-margin: var(--large-margin); $large-margin: var(--large-margin);
@ -36,6 +36,7 @@ $body-width: var(--body-width);
--body-width: 765px; --body-width: 765px;
--shadow1: 0 0 10px 2px rgba(0, 0, 0, 0.075); --shadow1: 0 0 10px 2px rgba(0, 0, 0, 0.075);
--shadow2: 0 0 1px rgba(0, 0, 0, 0.2); --shadow2: 0 0 1px rgba(0, 0, 0, 0.2);
--border-radius: 15px;
@media (max-width: $breakpoint-width) { @media (max-width: $breakpoint-width) {
--large-margin: 60px; --large-margin: 60px;
@ -45,5 +46,6 @@ $body-width: var(--body-width);
--body-width: 90%; --body-width: 90%;
--shadow1: 0 0 10px 2px rgba(0, 0, 0, 0.05); --shadow1: 0 0 10px 2px rgba(0, 0, 0, 0.05);
--shadow2: 0 0 1px rgba(0, 0, 0, 0.125); --shadow2: 0 0 1px rgba(0, 0, 0, 0.125);
--border-radius: 10px;
} }
} }

1
webpack.config.js
View file

@ -14,6 +14,7 @@ module.exports = {
}, },
devServer: { devServer: {
host: "0.0.0.0" host: "0.0.0.0"
// disableHostCheck: true
}, },
optimization: { optimization: {
minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})] minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})]