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-06 21:40:25 +01:00
parent f054546aa6
commit 48a55a4a97
51 changed files with 604 additions and 577 deletions
Download patch file Download diff file Expand all files Collapse all files

39
.idea/codeStyles/Project.xml generated Normal file
View file

@ -0,0 +1,39 @@
<component name="ProjectCodeStyleConfiguration">
<code_scheme name="Project" version="173">
<option name="LINE_SEPARATOR" value="&#10;" />
<JSCodeStyleSettings version="0">
<option name="FORCE_SEMICOLON_STYLE" value="true" />
<option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" />
<option name="USE_DOUBLE_QUOTES" value="false" />
<option name="FORCE_QUOTE_STYlE" value="true" />
<option name="ENFORCE_TRAILING_COMMA" value="WhenMultiline" />
<option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
<option name="SPACES_WITHIN_IMPORTS" value="true" />
</JSCodeStyleSettings>
<TypeScriptCodeStyleSettings version="0">
<option name="FORCE_SEMICOLON_STYLE" value="true" />
<option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" />
<option name="USE_DOUBLE_QUOTES" value="false" />
<option name="FORCE_QUOTE_STYlE" value="true" />
<option name="ENFORCE_TRAILING_COMMA" value="WhenMultiline" />
<option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
<option name="SPACES_WITHIN_IMPORTS" value="true" />
</TypeScriptCodeStyleSettings>
<codeStyleSettings language="JavaScript">
<option name="SOFT_MARGINS" value="80" />
<indentOptions>
<option name="INDENT_SIZE" value="2" />
<option name="CONTINUATION_INDENT_SIZE" value="2" />
<option name="TAB_SIZE" value="2" />
</indentOptions>
</codeStyleSettings>
<codeStyleSettings language="TypeScript">
<option name="SOFT_MARGINS" value="80" />
<indentOptions>
<option name="INDENT_SIZE" value="2" />
<option name="CONTINUATION_INDENT_SIZE" value="2" />
<option name="TAB_SIZE" value="2" />
</indentOptions>
</codeStyleSettings>
</code_scheme>
</component>

5
.idea/codeStyles/codeStyleConfig.xml generated Normal file
View file

@ -0,0 +1,5 @@
<component name="ProjectCodeStyleConfiguration">
<state>
<option name="USE_PER_PROJECT_SETTINGS" value="true" />
</state>
</component>

2
.idea/dictionaries/andras.xml generated
View file

@ -5,6 +5,8 @@
<w>deltatime</w> <w>deltatime</w>
<w>forex</w> <w>forex</w>
<w>schmelczer</w> <w>schmelczer</w>
<w>vitaes</w>
<w>önéletrajz</w>
</words> </words>
</dictionary> </dictionary>
</component> </component>

67
.idea/workspace.xml generated
View file

@ -2,29 +2,56 @@
<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$/.idea/codeStyles/Project.xml" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/framework/helper/color-mixer.ts" afterDir="false" /> <change afterPath="$PROJECT_DIR$/.idea/codeStyles/codeStyleConfig.xml" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/framework/helper/create-element.ts" afterDir="false" /> <change afterPath="$PROJECT_DIR$/src/framework/cache.ts" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/framework/helper/get-height.ts" afterDir="false" /> <change afterPath="$PROJECT_DIR$/src/framework/container-page.ts" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/framework/helper/last.ts" afterDir="false" /> <change afterPath="$PROJECT_DIR$/src/framework/event-broadcaster.ts" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/framework/helper/random.ts" afterDir="false" /> <change afterPath="$PROJECT_DIR$/src/framework/primitives/implementations/anchor.ts" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/framework/helper/range.ts" afterDir="false" /> <change afterPath="$PROJECT_DIR$/src/framework/primitives/implementations/image.ts" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/framework/helper/sum.ts" afterDir="false" /> <change afterPath="$PROJECT_DIR$/src/framework/primitives/implementations/text.ts" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/framework/primitives/implementations/video.ts" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/framework/primitives/primitive.ts" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/framework/primitives/primitives.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/dictionaries/andras.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/dictionaries/andras.xml" 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$/src/framework/helper.ts" beforeDir="false" /> <change beforePath="$PROJECT_DIR$/.prettierrc" beforeDir="false" afterPath="$PROJECT_DIR$/.prettierrc" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/index.html" beforeDir="false" afterPath="$PROJECT_DIR$/src/index.html" afterDir="false" /> <change beforePath="$PROJECT_DIR$/README.md" beforeDir="false" afterPath="$PROJECT_DIR$/README.md" afterDir="false" />
<change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/framework/helper/color-mixer.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/framework/helper/mix-colors.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/framework/helper/create-element.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/framework/helper/create-element.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/framework/helper/get-height.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/framework/helper/get-height.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/framework/helper/last.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/framework/helper/last.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/framework/helper/random.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/framework/helper/random.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/framework/helper/range.ts" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/src/framework/page-element.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/framework/page-element.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/framework/page.ts" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/src/model/content.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.html.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/about/about.html.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/page/about/about.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/about/about.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/background/animation.ts" beforeDir="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.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.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/background/blob.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/background/blob.ts" 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/background/vec2.ts" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/background/vec3.ts" beforeDir="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/content/content.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/content/content.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.html.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/footer/footer.html.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/footer/footer.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/footer/footer.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/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/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.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/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/timeline/timeline-element/timeline-element.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/style/a.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/style/a.scss" 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/vars.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/style/vars.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$/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" />
@ -61,23 +88,24 @@
<property name="node.js.selected.package.stylelint" value="" /> <property name="node.js.selected.package.stylelint" value="" />
<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="run.code.analysis.last.selected.profile" value="pProject Default" />
<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="$PROJECT_DIR$/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="MoveFile.RECENT_KEYS">
<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\icons" />
<recent name="C:\Projects\portfolio\CompiledCV\src" />
<recent name="C:\Projects\portfolio\CompiledCV\src\static\no-change" />
</key>
<key name="CopyFile.RECENT_KEYS"> <key name="CopyFile.RECENT_KEYS">
<recent name="C:\Projects\portfolio\CompiledCV\src\page\background" /> <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" />
<recent name="C:\Projects\portfolio\CompiledCV\src\static\icons" /> <recent name="C:\Projects\portfolio\CompiledCV\src\static\icons" />
<recent name="$PROJECT_DIR$" /> <recent name="$PROJECT_DIR$" />
</key> </key>
<key name="MoveFile.RECENT_KEYS">
<recent name="$PROJECT_DIR$/src/framework/primitives/implementations" />
<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\icons" />
<recent name="C:\Projects\portfolio\CompiledCV\src" />
</key>
</component> </component>
<component name="RunDashboard"> <component name="RunDashboard">
<option name="ruleStates"> <option name="ruleStates">
@ -126,6 +154,9 @@
<workItem from="1577786195424" duration="4310000" /> <workItem from="1577786195424" duration="4310000" />
<workItem from="1578128234878" duration="396000" /> <workItem from="1578128234878" duration="396000" />
<workItem from="1578128641780" duration="1136000" /> <workItem from="1578128641780" duration="1136000" />
<workItem from="1578140662891" duration="4319000" />
<workItem from="1578213355277" duration="599000" />
<workItem from="1578327147961" duration="14056000" />
</task> </task>
<servers /> <servers />
</component> </component>

3
.prettierrc
View file

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

3
README.md
View file

@ -1,3 +1,6 @@
# Timeline # Timeline
[Click for live version](https://schmelczer.dev)
An easily configurable portfolio. An easily configurable portfolio.

3
package.json
View file

@ -55,7 +55,6 @@
"typescript": "^3.7.3", "typescript": "^3.7.3",
"webpack": "^4.41.4", "webpack": "^4.41.4",
"webpack-cli": "^3.3.10", "webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.10.1", "webpack-dev-server": "^3.10.1"
"workbox-webpack-plugin": "^4.3.1"
} }
} }

0
src/framework/cache.ts Normal file
View file

18
src/framework/container-page.ts Normal file
View file

@ -0,0 +1,18 @@
import { PageElement } from './page-element';
import { PageEventType } from './page-event';
export class ContainerPage extends PageElement {
public constructor(rootElement: HTMLElement, children: Array<PageElement>) {
children.forEach(e => rootElement.appendChild(e.element));
super(rootElement, children);
}
public setAsMain() {
this.broadcastEvent({ type: PageEventType.onLoad }, this);
this.broadcastEvent(
{ type: PageEventType.eventBroadcasterChanged, data: this },
this
);
}
}

5
src/framework/event-broadcaster.ts Normal file
View file

@ -0,0 +1,5 @@
import { PageEvent } from './page-event';
export interface EventBroadcaster {
broadcastEvent(event: PageEvent, parent?: EventBroadcaster);
}

1
src/framework/helper/create-element.ts
View file

@ -1,6 +1,7 @@
import { html } from '../../model/misc'; import { html } from '../../model/misc';
export const createElement = (from: html): HTMLElement => { export const createElement = (from: html): HTMLElement => {
// won't work for all elements, eg.: <td>
const element: HTMLElement = document.createElement('div'); const element: HTMLElement = document.createElement('div');
element.innerHTML = from; element.innerHTML = from;
return element.firstElementChild as HTMLElement; return element.firstElementChild as HTMLElement;

2
src/framework/helper/get-height.ts
View file

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

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

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

32
src/framework/helper/color-mixer.ts → src/framework/helper/mix-colors.ts
View file

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

5
src/framework/helper/random.ts
View file

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

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

@ -1,15 +0,0 @@
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) {}
},
};
};

37
src/framework/page-element.ts
View file

@ -1,33 +1,30 @@
import { PageEvent, PageEventType } from "./page-event"; import { PageEvent, PageEventType } from './page-event';
import { EventBroadcaster } from './event-broadcaster';
export abstract class PageElement { export abstract class PageElement implements EventBroadcaster {
private element: HTMLElement; protected eventBroadcaster: EventBroadcaster;
// Getter and setter accessors would have to agree in visibility protected constructor(
public getElement(): HTMLElement { private readonly rootElement: HTMLElement,
return this.element; private readonly children: Array<PageElement> = []
) {}
public get element(): HTMLElement {
return this.rootElement;
} }
protected setElement(value: HTMLElement) { public broadcastEvent(event: PageEvent, parent: EventBroadcaster = null) {
this.getElement()?.parentElement?.replaceChild(value, this.getElement());
this.element = value;
}
protected eventBroadcaster: PageElement;
protected constructor(private children: Array<PageElement> = []) {}
public broadcastEvent(event: PageEvent, parent: PageElement = null) {
if (event.type === PageEventType.eventBroadcasterChanged) { if (event.type === PageEventType.eventBroadcasterChanged) {
this.eventBroadcaster = event.data; this.eventBroadcaster = event.data;
} }
this.handleEvent(event, parent); this.handleEvent(event, parent);
this.children.forEach(c => c.broadcastEvent(event, this)); this.children.forEach(c => c.broadcastEvent(event, this));
} }
protected query(query: string): HTMLElement | null { protected handleEvent(event: PageEvent, parent: EventBroadcaster) {}
return this.getElement()?.querySelector(query);
}
protected handleEvent(event: PageEvent, parent: PageElement) {} protected query(query: string): HTMLElement | null {
return this.element?.querySelector(query);
}
} }

28
src/framework/page.ts
View file

@ -1,28 +0,0 @@
import { PageElement } from "./page-element";
import { PageEventType } from "./page-event";
export class Page extends PageElement {
public constructor(
children: Array<PageElement>,
private rootElement: HTMLElement,
isRootPage = false
) {
super(children);
this.setElement(rootElement);
if (isRootPage) {
this.broadcastEvent(
{ type: PageEventType.eventBroadcasterChanged, data: this },
this
);
}
children
.map(e => e.getElement())
.filter(e => e)
.forEach(e => rootElement.appendChild(e));
if (isRootPage) {
this.broadcastEvent({ type: PageEventType.onLoad }, this);
}
}
}

13
src/framework/primitives/implementations/anchor.ts Normal file
View file

@ -0,0 +1,13 @@
import { Primitive } from '../primitive';
import { html, url } from '../../../model/misc';
export class Anchor implements Primitive {
public constructor(
private readonly href: url,
private readonly text: string
) {}
public toHTML(): html {
return `<a class="primitive-anchor" href="${this.href}" rel="noreferrer" target="_blank">${this.text}</a>`;
}
}

22
src/framework/primitives/implementations/image.ts Normal file
View file

@ -0,0 +1,22 @@
import { Primitive } from '../primitive';
import { html, ResponsiveImage } from '../../../model/misc';
import { last } from '../../helper/last';
export class Image implements Primitive {
public constructor(
private readonly image: ResponsiveImage,
private readonly alt: string
) {}
public toHTML(disableInnerShadow = false): html {
return `
${!disableInnerShadow ? `<div class="figure-container">` : ''}
<img
srcset="${this.image.srcSet}"
src="${last(this.image.images)?.path}"
alt="${this.alt}"
/>
${!disableInnerShadow ? `</div>` : ''}
`;
}
}

10
src/framework/primitives/implementations/text.ts Normal file
View file

@ -0,0 +1,10 @@
import { Primitive } from '../primitive';
import { html } from '../../../model/misc';
export class Text implements Primitive {
public constructor(private readonly text: string) {}
public toHTML(): html {
return `<p class="primitive-text">${this.text}</p>`;
}
}

21
src/framework/primitives/implementations/video.ts Normal file
View file

@ -0,0 +1,21 @@
import { Primitive } from '../primitive';
import { url } from '../../../model/misc';
export class Video implements Primitive {
public constructor(
private readonly poster: url,
private readonly mp4: url,
private readonly webm: url,
private readonly options?: string
) {}
public toHTML(disableInnerShadow = false): string {
return `
${!disableInnerShadow ? `<div class="figure-container">` : ''}
<video ${this.options} poster="${this.poster}">
<source src="${this.webm}" type="video/webm"/>
<source src="${this.mp4}" type="video/mp4"/>
</video>
${!disableInnerShadow ? `</div>` : ''}
`;
}
}

7
src/framework/primitives/primitive.ts Normal file
View file

@ -0,0 +1,7 @@
import { html } from '../../model/misc';
import './primitives.scss';
export interface Primitive {
toHTML(): html;
}

25
src/framework/primitives/primitives.scss Normal file
View file

@ -0,0 +1,25 @@
@import '../../style/vars';
@import '../../style/mixins';
.figure-container {
font-size: 0;
box-shadow: inset $shadow1, inset $shadow2;
pointer-events: none;
cursor: pointer;
* {
pointer-events: all;
position: relative;
z-index: -2;
}
}
.primitive-text,
.primitive-anchor,
.figure-container {
margin-top: $line-height;
}
.primitive-text {
text-align: left;
}

24
src/model/content.ts
View file

@ -1,24 +0,0 @@
import { ResponsiveImage, url } from "./misc";
export type Anchor = {
type: "a";
href: url;
text: string;
};
export type Video = {
type: "video";
mp4: url;
webm: url;
options?: string;
};
export type Image = {
type: "img";
alt: string;
image: ResponsiveImage;
};
export type TypedContent = Anchor | Video | Image;
export type Content = Array<String | TypedContent>;

37
src/model/portfolio.ts
View file

@ -1,29 +1,33 @@
import { url } from "./misc"; import { url } from './misc';
import { Anchor, Content, Image, Video } from "./content"; import { Primitive } from '../framework/primitives/primitive';
import { Image } from '../framework/primitives/implementations/image';
import { Anchor } from '../framework/primitives/implementations/anchor';
import { Video } from '../framework/primitives/implementations/video';
import { Text } from '../framework/primitives/implementations/text';
export interface Portfolio { export interface Portfolio {
config: Config;
header: Header; header: Header;
timeline: Array<TimelineElement>; timeline: Timeline;
footer: Footer; footer: Footer;
} }
export interface Config {
showMore: string;
showLess: string;
}
export interface Header { export interface Header {
name: string; name: string;
picture: Image; picture: Image;
about: Content; about: Content;
} }
export interface Timeline {
showMoreText: string;
showLessText: string;
elements: Array<TimelineElement>;
}
export interface TimelineElement { export interface TimelineElement {
title: string; title: string;
date: string; date: string;
figure: Image | Video; figure: Image | Video;
description: string; description: Text;
more?: Content; more?: Content;
link?: Anchor; link?: Anchor;
} }
@ -31,8 +35,15 @@ export interface TimelineElement {
export interface Footer { export interface Footer {
title: string; title: string;
email: string; email: string;
cv: url; curiumVitaes: Array<CV>;
cvName: string; lastEditText: string;
lastEditName: string;
lastEdit: Date; lastEdit: Date;
gitHub: Anchor;
} }
export interface CV {
name: string;
url: url;
}
export type Content = Array<Primitive>;

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

@ -1,12 +1,12 @@
import { Header } from "../../model/portfolio"; import { Header } from '../../model/portfolio';
import { html } from "../../model/misc"; import { html } from '../../model/misc';
import { PageContent } from "../content/content";
import "./about.scss"; import './about.scss';
export const generate = ({ name, picture }: Header): html => ` export const generate = ({ name, picture }: Header): html => `
<section id="about"> <section id="about">
${PageContent.parseTypedContent(picture, true)} ${picture.toHTML(true)}
<div class="placeholder"></div> <div class="placeholder"></div>
<h1>${name}</h1> <h1>${name}</h1>
</section>`; </section>
`;

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

@ -16,7 +16,6 @@
img { img {
@include square($img-size); @include square($img-size);
border-radius: 100%; border-radius: 100%;
cursor: pointer;
} }
p { p {

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

@ -4,14 +4,10 @@ import { PageElement } from '../../framework/page-element';
import { generate } from './about.html'; import { generate } from './about.html';
import { createElement } from '../../framework/helper/create-element'; import { createElement } from '../../framework/helper/create-element';
import { ContainerPage } from '../../framework/container-page';
export class PageHeader extends PageElement { export class PageHeader extends ContainerPage {
public constructor(header: Header) { public constructor(header: Header) {
const root = createElement(generate(header)); super(createElement(generate(header)), [new PageContent(header.about)]);
const content = new PageContent(header.about);
super([content]);
this.setElement(root);
root.appendChild(content.getElement());
} }
} }

40
src/page/background/animation.ts
View file

@ -1,40 +0,0 @@
import { Vec2 } from './vec2';
export class Animation {
private _value: Vec2;
private elapsedTime = 0;
public constructor(
private from: Vec2,
private to: Vec2,
private intervalInMs: number,
private onChange?: (currentValue: Vec2) => void
) {}
public step(deltaTimeInMs: number) {
if (this.elapsedTime === this.intervalInMs) {
return;
}
this.elapsedTime = Math.min(
this.elapsedTime + deltaTimeInMs,
this.intervalInMs
);
const q = this.elapsedTime / this.intervalInMs;
this._value = new Vec2(
Animation.interpolate(this.from.x, this.to.x, q),
Animation.interpolate(this.from.y, this.to.y, q)
);
this.onChange?.call(null, this._value);
}
private static interpolate(from: number, to: number, q: number): number {
return from + q * (to - from);
}
public get value(): Vec2 {
return this._value;
}
}

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

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

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

@ -1,5 +1,5 @@
@import "../../style/vars"; @import '../../style/vars';
@import "../../style/mixins"; @import '../../style/mixins';
#background-container { #background-container {
position: fixed; position: fixed;

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

@ -12,8 +12,7 @@ export class PageBackground extends PageElement {
private readonly blobSpacing = 350; private readonly blobSpacing = 350;
public constructor(private start: PageElement, private end: PageElement) { public constructor(private start: PageElement, private end: PageElement) {
super(); super(createElement(generate()));
this.setElement(createElement(generate()));
Blob.initialize(10, 30, 5); Blob.initialize(10, 30, 5);
} }
@ -28,18 +27,16 @@ 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));
parent parent.element.addEventListener(
.getElement() 'scroll',
.addEventListener( () => (this.element.scrollTop = parent.element.scrollTop)
'scroll', );
() => (this.getElement().scrollTop = parent.getElement().scrollTop)
);
} }
private resize(parent: PageElement, heightChange?: number) { private resize(parent: PageElement, heightChange?: number) {
const siblings: Array<HTMLElement> = this.getSiblings(parent); const siblings: Array<HTMLElement> = this.getSiblings(parent);
const width = parent.getElement().clientWidth; const width = parent.element.clientWidth;
let height = sum(siblings.map(getHeight)); let height = sum(siblings.map(getHeight));
if (heightChange) { if (heightChange) {
height += heightChange; height += heightChange;
@ -67,10 +64,10 @@ export class PageBackground extends PageElement {
b.transform( b.transform(
random, random,
width, width,
parent.getElement().clientHeight, parent.element.clientHeight,
height, height,
getHeight(this.start.getElement()), getHeight(this.start.element),
getHeight(this.end.getElement()) getHeight(this.end.element)
); );
b.show(); b.show();
} }
@ -79,7 +76,7 @@ export class PageBackground extends PageElement {
private getSiblings(parent: PageElement): Array<HTMLElement> { private getSiblings(parent: PageElement): Array<HTMLElement> {
return Array.prototype.slice return Array.prototype.slice
.call(parent.getElement().children) .call(parent.element.children)
.filter(e => e !== this.getElement()); .filter(e => e !== this.element);
} }
} }

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

@ -1,4 +1,4 @@
import { mixColors } from '../../framework/helper/color-mixer'; import { mixColors } from '../../framework/helper/mix-colors';
import { createElement } from '../../framework/helper/create-element'; import { createElement } from '../../framework/helper/create-element';
import { Random } from '../../framework/helper/random'; import { Random } from '../../framework/helper/random';

17
src/page/background/vec2.ts
View file

@ -1,17 +0,0 @@
export class Vec2 {
public static readonly Zero = new Vec2(0, 0);
public constructor(public readonly x: number, public readonly y: number) {}
public add(other: Vec2): Vec2 {
return new Vec2(this.x + other.x, this.y + other.y);
}
public subtract(other: Vec2): Vec2 {
return new Vec2(this.x - other.x, this.y - other.y);
}
public multiply(other: Vec2): Vec2 {
return new Vec2(this.x * other.x, this.y * other.y);
}
}

23
src/page/background/vec3.ts
View file

@ -1,23 +0,0 @@
import { Vec2 } from './vec2';
export class Vec3 {
public static readonly Zero = new Vec3(0, 0, 0);
public static from(vec2: Vec2, z: number): Vec3 {
return new Vec3(vec2.x, vec2.y, z);
}
public constructor(
public readonly x: number,
public readonly y: number,
public readonly z: number
) {}
public add(other: Vec3): Vec3 {
return new Vec3(this.x + other.x, this.y + other.y, this.z + other.z);
}
public multiply(other: Vec3): Vec3 {
return new Vec3(this.x * other.x, this.y * other.y, this.z * other.z);
}
}

20
src/page/content/content.scss
View file

@ -2,24 +2,4 @@
.content { .content {
margin-top: $small-margin; margin-top: $small-margin;
* {
margin-top: $line-height;
}
p {
text-align: left;
}
}
.image-container {
font-size: 0;
box-shadow: inset $shadow1, inset $shadow2;
pointer-events: none;
cursor: pointer;
img {
pointer-events: all;
position: relative;
z-index: -2;
}
} }

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

@ -1,58 +1,14 @@
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 } from '../../framework/helper/create-element'; import { createElement } from '../../framework/helper/create-element';
import { html } from '../../model/misc'; import { Content } from '../../model/portfolio';
import { last } from '../../framework/helper/last';
export class PageContent extends PageElement { export class PageContent extends PageElement {
private static isTyped(content): content is TypedContent {
return (content as TypedContent).type !== undefined;
}
public static parseTypedContent(
element: TypedContent,
disableInnerShadow?: boolean
): html {
if (element.type === 'a') {
return `<a href="${element.href}" rel="noreferrer" target="_blank"> ${element.text} </a>`;
}
if (element.type === 'video') {
return `
<video ${element.options}>
<source src="${element.webm}" type="video/webm"/>
<source src="${element.mp4}" type="video/mp4"/>
</video>
`;
}
if (element.type === 'img') {
return `
${!disableInnerShadow ? `<div class="image-container">` : ''}
<img
srcset="${element.image.srcSet}"
src="${last(element.image.images).path}"
alt="${element.alt}"
/>
${!disableInnerShadow ? `</div>` : ''}
`;
}
throw new Error('Unhandled type.');
}
public constructor(content: Content) { public constructor(content: Content) {
super(); super(
this.setElement(
createElement(` createElement(`
<div class="content"> <div class="content">
${content ${content.map(element => element.toHTML()).join('\n')}
.map(element =>
PageContent.isTyped(element)
? PageContent.parseTypedContent(element)
: `<p>${element}</p>`
)
.join('\n')}
</div> </div>
`) `)
); );

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

@ -1,32 +1,37 @@
import { Footer } from "../../model/portfolio"; import { Footer } from '../../model/portfolio';
import { html } from "../../model/misc"; import { html } from '../../model/misc';
import emailIcon from "../../static/icons/at.svg"; import emailIcon from '../../static/icons/at.svg';
import cvIcon from "../../static/icons/cv.svg"; import cvIcon from '../../static/icons/cv.svg';
import "./footer.scss"; import './footer.scss';
export const generate = ({ export const generate = ({
title, title,
email, email,
cv, curiumVitaes,
cvName, gitHub,
lastEditName, lastEditText,
lastEdit lastEdit,
}: Footer): html => ` }: Footer): html => `
<footer id="page-footer"> <footer id="page-footer">
<h2>${title}</h2> <h2>${title}</h2>
<ul> <ul>
<li> ${curiumVitaes
<img src="${cvIcon}" alt="CV" class="no-open" /> .map(
<a id="cv" href="${cv}" target="_blank">${cvName}</a> cv =>
</li> `<li>
<img src="${cvIcon}" alt="CV" class="no-open" />
<a id="cv" href="${cv.url}" target="_blank">${cv.name}</a>
</li>`
)
.join('\n')}
<li> <li>
<img src="${emailIcon}" alt="email" class="no-open"/> <img src="${emailIcon}" alt="email" class="no-open"/>
<a id="email" href="mailto:${email}">${email}</a> <a id="email" href="mailto:${email}">${email}</a>
</li> </li>
</ul> </ul>
<aside class="other"> <aside class="other">
<h6>${lastEditName} ${lastEdit.toLocaleDateString()}</h6> <h6>${lastEditText} <time datetime="${lastEdit.toISOString()}">${lastEdit.toLocaleDateString()}</time></h6>
</aside> </aside>
</footer> </footer>
`; `;

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

@ -38,11 +38,13 @@ footer#page-footer {
aside.other { aside.other {
@include center-children(); @include center-children();
flex-direction: column;
margin: $large-margin auto $line-height auto; margin: $large-margin auto $line-height auto;
width: $body-width; width: $body-width;
h6 { h6 {
@include insignificant-font(); @include insignificant-font();
display: inline;
opacity: 0.75; opacity: 0.75;
} }
} }

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

@ -6,7 +6,6 @@ import { createElement } from '../../framework/helper/create-element';
export class PageFooter extends PageElement { export class PageFooter extends PageElement {
constructor(footer: Footer) { constructor(footer: Footer) {
super(); super(createElement(generate(footer)));
this.setElement(createElement(generate(footer)));
} }
} }

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

@ -6,10 +6,9 @@ import { createElement } from '../../framework/helper/create-element';
export class PageImageViewer extends PageElement { export class PageImageViewer extends PageElement {
public constructor() { public constructor() {
super();
const root = createElement(generate()); const root = createElement(generate());
this.setElement(root);
root.onclick = () => PageImageViewer.hide(root); root.onclick = () => PageImageViewer.hide(root);
super(root);
} }
protected handleEvent(event: PageEvent, parent: PageElement) { protected handleEvent(event: PageEvent, parent: PageElement) {
@ -20,12 +19,12 @@ export class PageImageViewer extends PageElement {
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.element.querySelectorAll('img')
); );
images images
.filter( .filter(
(img: HTMLImageElement) => (img: HTMLImageElement) =>
img.parentElement !== this.getElement() && img.parentElement !== this.element &&
!img.classList.contains('no-open') !img.classList.contains('no-open')
) )
.forEach( .forEach(
@ -38,12 +37,12 @@ export class PageImageViewer extends PageElement {
'#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.element);
} }
private handleKeydown(event: KeyboardEvent) { private handleKeydown(event: KeyboardEvent) {
if (event.key === 'Escape') { if (event.key === 'Escape') {
PageImageViewer.hide(this.getElement()); PageImageViewer.hide(this.element);
} }
} }

43
src/page/index.ts
View file

@ -1,31 +1,22 @@
import { Portfolio } from "../model/portfolio"; import { Portfolio } from '../model/portfolio';
import { PageBackground } from "./background/background"; import { PageBackground } from './background/background';
import { PageHeader } from "./about/about"; import { PageHeader } from './about/about';
import { PageTimeline } from "./timeline/timeline"; import { PageTimeline } from './timeline/timeline';
import { PageFooter } from "./footer/footer"; import { PageFooter } from './footer/footer';
import { PageImageViewer } from "./image-viewer/image-viewer"; import { PageImageViewer } from './image-viewer/image-viewer';
import { Page } from "../framework/page"; import { ContainerPage } from '../framework/container-page';
export const create = ({ config, header, timeline, footer }: Portfolio) => { export const create = ({ header, timeline, footer }: Portfolio) => {
const pageHeader = new PageHeader(header); const pageHeader = new PageHeader(header);
const pageFooter = new PageFooter(footer); const pageFooter = new PageFooter(footer);
const bg = new PageBackground(pageHeader, pageFooter); new ContainerPage(document.body, [
new Page( new PageImageViewer(),
[ new ContainerPage(document.body.querySelector('main'), [
new PageImageViewer(), pageHeader,
new Page( new PageTimeline(timeline),
[ pageFooter,
pageHeader, new PageBackground(pageHeader, pageFooter),
new PageTimeline(timeline, config.showMore, config.showLess), ]),
pageFooter, ]).setAsMain();
bg
],
document.body.querySelector("main"),
false
)
],
document.body,
true
);
}; };

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

@ -1,8 +1,7 @@
import { TimelineElement } from "../../../model/portfolio"; import { TimelineElement } from '../../../model/portfolio';
import { html } from "../../../model/misc"; import { html } from '../../../model/misc';
import { PageContent } from "../../content/content";
import "./timeline-element.scss"; import './timeline-element.scss';
export const generate = ( export const generate = (
{ date, title, figure, description, more, link }: TimelineElement, { date, title, figure, description, more, link }: TimelineElement,
@ -15,8 +14,8 @@ export const generate = (
</div> </div>
<div class="card"> <div class="card">
<h2>${title}</h2> <h2>${title}</h2>
${PageContent.parseTypedContent(figure)} ${figure.toHTML()}
<p class="description">${description}</p> ${description.toHTML()}
${ ${
more more
? ` ? `
@ -26,9 +25,9 @@ export const generate = (
<a class="show-less">${showLess}</a> <a class="show-less">${showLess}</a>
</div> </div>
` `
: "" : ''
} }
${link ? PageContent.parseTypedContent(link) : ""} ${link ? link.toHTML() : ''}
</div> </div>
</section> </section>
`; `;

3
src/page/timeline/timeline-element/timeline-element.scss
View file

@ -76,8 +76,9 @@
@include sub-title-font(); @include sub-title-font();
} }
.description { & > p {
font-style: italic; font-style: italic;
text-align: center;
} }
.more { .more {

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

@ -18,16 +18,15 @@ export class PageTimelineElement extends PageElement {
if (timelineElement.more) { if (timelineElement.more) {
const content = new PageContent(timelineElement.more); const content = new PageContent(timelineElement.more);
super([content]); super(root, [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.element);
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(root);
this.setElement(root);
} }
private toggleOpen() { private toggleOpen() {
@ -38,8 +37,8 @@ export class PageTimelineElement extends PageElement {
PageTimelineElement.hide(showLess); PageTimelineElement.hide(showLess);
this.closeMore(); this.closeMore();
} else { } else {
PageTimelineElement.hide(showMore);
PageTimelineElement.show(showLess); PageTimelineElement.show(showLess);
PageTimelineElement.hide(showMore);
this.openMore(); this.openMore();
} }

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

@ -1,21 +1,15 @@
import { TimelineElement } from '../../model/portfolio'; import { Timeline } 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/create-element'; import { createElement } from '../../framework/helper/create-element';
import { ContainerPage } from '../../framework/container-page';
export class PageTimeline extends PageElement { export class PageTimeline extends ContainerPage {
public constructor( public constructor({ elements, showMoreText, showLessText }: Timeline) {
timeline: Array<TimelineElement>, super(
showMore: string, createElement(generate()),
showLess: string elements.map(e => new PageTimelineElement(e, showMoreText, showLessText))
) {
const root = createElement(generate());
const elements = timeline.map(
e => new PageTimelineElement(e, showMore, showLess)
); );
elements.map(e => e.getElement()).forEach(e => root.appendChild(e));
super(elements);
this.setElement(root);
} }
} }

386
src/portfolio.ts
View file

@ -1,6 +1,11 @@
import { Portfolio } from './model/portfolio'; import { Portfolio } from './model/portfolio';
import { Text } from './framework/primitives/implementations/text';
import { Image } from './framework/primitives/implementations/image';
import { Video } from './framework/primitives/implementations/video';
import { Anchor } from './framework/primitives/implementations/anchor';
import me from './static/media/me.jpg'; import me from './static/media/me.jpg';
import forexGIF from './static/media/forex.gif';
import forexMP4 from './static/media/forex.mp4'; import forexMP4 from './static/media/forex.mp4';
import forexWEBM from './static/media/forex.webm'; import forexWEBM from './static/media/forex.webm';
import myNotes from './static/media/my-notes.jpg'; import myNotes from './static/media/my-notes.jpg';
@ -16,196 +21,227 @@ import ledMP4 from './static/media/led.mp4';
import ledWEBM from './static/media/led.webm'; import ledWEBM from './static/media/led.webm';
export const portfolio: Portfolio = { export const portfolio: Portfolio = {
config: {
showMore: `Show details`,
showLess: `Show less`,
},
header: { header: {
name: `András Schmelczer`, name: `András Schmelczer`,
picture: { picture: new Image(me, `a picture of me`),
type: `img`,
image: me,
alt: `a picture of me`,
},
about: [ about: [
`I have always been fascinated by the engineering feats that surround us. new Text(
When I realized that someday I might be able to contribute to these achievements, `I have always been fascinated by the engineering feats that surround us.
I knew that is what I need to aim for. As I am finishing my fifth semester at the When I realized that someday I might be able to contribute to these achievements,
Budapest University of Technology and Economics, I feel I am getting closer to it every day.`, I knew that is what I need to aim for. As I am starting my sixth semester at the
`You can see some of the more interesting projects I have worked on below.`, Budapest University of Technology and Economics, I feel I am getting closer to it every day.`
),
new Text(
`You can see some of the more interesting projects I have worked on below.`
),
], ],
}, },
timeline: [ timeline: {
{ showMoreText: `Show details`,
title: `Predicting foreign exchange rates`, showLessText: `Show less`,
date: `2019 Autumn`, elements: [
figure: { {
type: `video`, title: `Predicting foreign exchange rates`,
options: `autoplay loop muted playsinline`, date: `2019 Autumn`,
webm: forexWEBM, figure: new Video(
mp4: forexMP4, forexGIF,
forexMP4,
forexWEBM,
`autoplay loop muted playsinline`
),
description: new Text(
`From the animation we can see that my algorithm does a somewhat acceptable job at
predicting (blue graph) the EUR/USD rates (green graph).`
),
more: [
new Text(
`In a nutshell, the algorithm (written with Python - NumPy, SciPy, Flask),
extrapolates in the frequency domain. The steps are the following: smoothing the input values,
differentiating, applying a short-time Fourier-transformation with overlapped (and Hanning-windowed) windows,
extrapolating and then applying the inverse of these transformations to the extrapolated values.`
),
new Text(
`Of course, there is still plenty of room for improvement, but even with this simple algorithm
a mostly profitable trading strategy is viable. In my free time I may put more work into it.`
),
],
}, },
description: `From the animation we can see that my algorithm does a somewhat acceptable job at {
predicting (blue graph) the EUR/USD rates (green graph).`, date: `2019 November`,
more: [ title: `My Notes`,
`In a nutshell, the algorithm (written with Python - NumPy, SciPy, Flask), figure: new Image(myNotes, `two screenshots of the application`),
extrapolates in the frequency domain. The steps are the following: smoothing the input values, description: new Text(
differentiating, applying a short-time Fourier-transformation with overlapped (and Hanning-windowed) windows, `A minimalist note organizer and editor powered by Markwon.`
extrapolating and then applying the inverse of these transformations to the extrapolated values.`, ),
`Of course, there is still plenty of room for improvement, but even with this simple algorithm more: [
a mostly profitable trading strategy is viable. In my free time I may put more work into it.`, new Anchor(
], `https://github.com/schmelczerandras/my-notes`,
}, `MyNotes on GitHub`
{ ),
date: `2019 November`, new Text(
title: `My Notes`, `A basic android app for creating and filtering notes written in markdown.`
figure: { ),
type: `img`, new Text(
image: myNotes, `It was my homework for BME's Android and web development course.
alt: `two screenshots of the application`, It was also my first experience with Android development.`
),
],
}, },
description: `A minimalist note organizer and editor powered by Markwon.`, {
more: [ date: `2018 October - November`,
{ title: `Simulating the cooling system of a nuclear facility`,
type: `a`, figure: new Image(processSimulator, `a screenshot of the simulator`),
href: `https://github.com/schmelczerandras/my-notes`, description: new Text(
text: `MyNotes on GitHub`, `Dynamically calculating the temperatures and flow velocities
}, in a fluid based cooling system based on a simple model.`
`A basic android app for creating and filtering notes written in markdown.`, ),
`It was my homework for BME's Android and web development course. more: [
It was also my first experience with Android development.`, new Text(
], `A simulated system can contain reactors (heaters / coolers), pumps, heat exchangers,
}, drains sources, and of course, pipes.`
{ ),
date: `2018 October - November`, new Text(
title: `Simulating the cooling system of a nuclear facility`, `The algorithm takes advantages of graphs and matrices to get to a next time frame.`
figure: { ),
type: `img`, new Text(
image: processSimulator, `Python is used for the backend along with Flask and NumPy. A REST API facilitates
alt: `a screenshot of the simulator`, the communication between the layers. For drawing the frontend HTML5 canvas is utilized.`
),
],
}, },
description: `Dynamically calculating the temperatures and flow velocities {
in a fluid based cooling system based on a simple model.`, date: `2018 October - November`,
more: [ title: `Graph editing application`,
`A simulated system can contain reactors (heaters / coolers), pumps, heat exchangers, figure: new Image(
drains sources, and of course, pipes.`, processSimulatorInput,
`The algorithm takes advantages of graphs and matrices to get to a next time frame.`, `a picture of the simulator's UI`
`Python is used for the backend along with Flask and NumPy. A REST API facilitates ),
the communication between the layers. For drawing the frontend HTML5 canvas is utilized.`, description: new Text(
], `An intuitive editor to create and edit input files for the nuclear facility simulator.`
}, ),
{ more: [
date: `2018 October - November`, new Text(
title: `Graph editing application`, `Nodes can be moved with drag&drop gestures. Editing the parameters of elements
figure: { can be done on the right panel.`
type: `img`, ),
image: processSimulatorInput, new Text(
alt: `a picture of the simulator's UI`, `The UI is built with JavaFX. The output can be exported as JSON or
directly uploaded to the simulation backend.`
),
],
}, },
description: `An intuitive editor to create and edit input files for the nuclear facility simulator.`, {
more: [ date: `2018 July - August`,
`Nodes can be moved with drag&drop gestures. Editing the parameters of elements title: `City simulation`,
can be done on the right panel.`, figure: new Image(citySimulation, `a picture of a low-poly city`),
`The UI is built with JavaFX. The output can be exported as JSON or description: new Text(
directly uploaded to the simulation backend.`, `Simulating a city where car crashes are more frequent than usual.`
], ),
}, more: [
{ new Text(
date: `2018 July - August`, `Through a REST API the state of the traffic lights can be changed.
title: `City simulation`, The drivers follow the instructions of the traffic lights, so if a mistake is made,
figure: { there will be collisions. There is also support for displaying tweets on a HUD.`
type: `img`, ),
image: citySimulation, new Text(
alt: `a picture of a low-poly city`, `This was created for a Cybersecurity challenge. With the help of this program
the contestants could instantly see the effect of their work.`
),
new Text(
`The most interesting aspect of this project was building it in a server-client architecture.
The decisions of the agents is calculated server-side. The real challenge was broadcasting
these decisions in a fault-tolerant way using minimal bandwidth.`
),
new Text(
`The program is made with Unity using C# as the scripting language. The models and animations
were also made by me using Blender.`
),
],
}, },
description: `Simulating a city where car crashes are more frequent than usual.`, {
more: [ date: `2018 June`,
`Through a REST API the state of the traffic lights can be changed. title: `Photo color grader`,
The drivers follow the instructions of the traffic lights, so if a mistake is made, figure: new Image(color, `a picture of the app`),
there will be collisions. There is also support for displaying tweets on a HUD.`, description: new Text(
`This was created for a Cybersecurity challenge. With the help of this program `An innovative (at least I thought so) color grader web application.`
the contestants could instantly see the effect of their work.`, ),
`The most interesting aspect of this project was building it in a server-client architecture. more: [
The decisions of the agents is calculated server-side. The real challenge was broadcasting new Text(
these decisions in a fault-tolerant way using minimal bandwidth.`, `The most noteworthy feature of this application is the color selector UI.
`The program is made with Unity using C# as the scripting language. The models and animations This program is only intended as a proof-of-concept, I wanted to experiment with
were also made by me using Blender.`, some ideas and this was the outcome.`
], ),
}, new Text(
{ `You can select some colors and then apply transformations to the other colors as a
date: `2018 June`, function of their distance to the selected color.`
title: `Photo color grader`, ),
figure: { new Text(
type: `img`, `By clicking on a colored circle you can change its settings.
image: color, New circles can be created by clicking in the large circle (and they can also be moved by drag & drop).`
alt: `a picture of the app`, ),
new Anchor('color', `schmelczer.dev/color`),
],
}, },
description: `An innovative (at least I thought so) color grader web application.`, {
more: [ date: `2017 autumn`,
`The most noteworthy feature of this application is the color selector UI. title: `Platform game`,
This program is only intended as a proof-of-concept, I wanted to experiment with figure: new Image(platform, `a picture of the app`),
some ideas and this was the outcome. `, description: new Text(
`You can select some colors and then apply transformations to the other colors as a `A 3D game written in C with the help of SDL 1.2 (I haven't heard of GPU programming at the time).`
function of their distance to the selected color.`, ),
`By clicking on a colored circle you can change its settings. more: [
New circles can be created by clicking in the large circle (and they can also be moved by drag&drop).`, new Text(
{ type: `a`, href: `color`, text: `schmelczer.dev/color` }, `The maps are randomly generated and fully destroyable.
], The player is getting chased by flying enemies. Overall, I find it a really enjoyable game.`
}, ),
{ new Text(
date: `2017 autumn`, `I did this as a homework for my Basics of Programming course.`
),
title: `Platform game`, ],
figure: {
type: `img`,
image: platform,
alt: `a picture of the app`,
}, },
description: `A 3D game written in C with the help of SDL 1.2 (I haven't heard of GPU programming at the time).`, {
more: [ date: `2016 summer`,
`The maps are randomly generated and fully destroyable. title: `Photos`,
The player is getting chased by flying enemies. Overall, I find it a really enjoyable game.`, figure: new Image(photos, `a picture of the website`),
`I did this as a homework for my Basics of Programming course.`, description: new Text(
], `A simple web page where you can view my photos.`
}, ),
{ link: new Anchor(`photos`, `schmelczer.dev/photos`),
date: `2016 summer`,
title: `Photos`,
figure: {
type: `img`,
image: photos,
alt: `a picture of the website`,
}, },
description: `A simple web page where you can view my photos.`, {
link: { type: `a`, href: `photos`, text: `schmelczer.dev/photos` }, date: `2016 spring`,
}, title: `Lights synchronised to music`,
{ figure: new Video(led.src, ledMP4, ledWEBM, `controls`),
date: `2016 spring`, description: new Text(
title: `Lights synchronised to music`, `A full stack application with a built-in
figure: { music player which music controls the color of some RGB LED strips.`
type: `img`, ),
image: led, more: [
alt: `a picture from the video`, new Text(
`This was my first non-trivial project which got finished. Obviously,
it is rather far from perfect, but I am still proud that I was able to build it on my own.`
),
new Text(
`The backend logic is written in Python the FFT is provided by NumPy.
A quite simple frontend for accessing the music player and changing
the settings also got built using vanilla web development technologies.`
),
],
}, },
description: `A full stack application with a built-in ],
music player which music controls the color of some RGB LED strips.`, },
more: [
`This was my first non-trivial project which got finished. Obviously,
it is rather far from perfect, but I am still proud that I was able to build it on my own.`,
`The backend logic is written in Python the FFT is provided by NumPy.
A quite simple frontend for accessing the music player and changing
the settings also got built using vanilla web development technologies.`,
`Below is a video showing the system in work.`,
{ type: `video`, mp4: ledMP4, webm: ledWEBM, options: 'controls' },
],
},
],
footer: { footer: {
title: `Learn more`, title: `Learn more`,
cv, curiumVitaes: [
email: `schmelczerandras@gmail.com`, { name: `Curriculum vitae (en)`, url: cv },
cvName: `Curriculum vitae`, { name: `Önéletrajz (hu)`, url: cv },
lastEditName: `Last modified on `, ],
lastEdit: new Date(2020, 0, 2), // months are 0 indexed email: `andras@schmelczer.dev`,
lastEditText: `Last modified on `,
lastEdit: new Date(2020, 0, 6), // months are 0 indexed
gitHub: new Anchor(
`https://github.com/schmelczerandras/timeline`,
`Find this page on GitHub.`
),
}, },
}; };

2
src/style/vars.scss
View file

@ -1,6 +1,6 @@
@import 'fonts'; @import 'fonts';
$background: white; $background: #ffffff;
$normal-text-color: #31343f; $normal-text-color: #31343f;
$light-text-color: #7a7d8e; $light-text-color: #7a7d8e;

2
src/styles.scss
View file

@ -1,6 +1,7 @@
@import 'style/vars'; @import 'style/vars';
@import 'style/mixins'; @import 'style/mixins';
@import 'style/a'; @import 'style/a';
@import 'framework/primitives/primitives';
* { * {
margin: 0; margin: 0;
@ -27,6 +28,7 @@ html {
body { body {
@include main-font(); @include main-font();
height: 100%; height: 100%;
//noinspection CssInvalidFunction
padding: env(safe-area-inset-top, 20px) env(safe-area-inset-right, 20px) padding: env(safe-area-inset-top, 20px) env(safe-area-inset-right, 20px)
env(safe-area-inset-bottom, 20px) env(safe-area-inset-left, 20px); env(safe-area-inset-bottom, 20px) env(safe-area-inset-left, 20px);

18
webpack.config.js
View file

@ -5,6 +5,7 @@ const TerserJSPlugin = require('terser-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin'); const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');
const Sharp = require('responsive-loader/sharp');
const isProduction = process.env.NODE_ENV === 'production'; const isProduction = process.env.NODE_ENV === 'production';
@ -14,7 +15,7 @@ module.exports = {
}, },
devServer: { devServer: {
host: '0.0.0.0', host: '0.0.0.0',
// disableHostCheck: true // disableHostCheck: true,
}, },
optimization: { optimization: {
minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})], minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
@ -23,8 +24,15 @@ module.exports = {
new CleanWebpackPlugin(), new CleanWebpackPlugin(),
new HtmlWebpackPlugin({ new HtmlWebpackPlugin({
xhtml: true, xhtml: true,
minify: true,
template: './src/index.html', template: './src/index.html',
minify: {
collapseWhitespace: true,
removeComments: true,
removeRedundantAttributes: true,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true,
useShortDoctype: true,
},
inlineSource: '.(js|css)$', inlineSource: '.(js|css)$',
}), }),
new HtmlWebpackInlineSourcePlugin(), new HtmlWebpackInlineSourcePlugin(),
@ -42,14 +50,14 @@ module.exports = {
test: /\.(jpe?g|png)$/i, test: /\.(jpe?g|png)$/i,
loader: 'responsive-loader', loader: 'responsive-loader',
options: { options: {
adapter: require('responsive-loader/sharp'), adapter: Sharp,
outputPath: 'static/', outputPath: 'static/',
sizes: [300, 600, 1200, 2000], sizes: [200, 400, 800, 1200, 2000],
placeholder: false, placeholder: false,
}, },
}, },
{ {
test: /\.(webm|mp4)$/i, test: /\.(webm|mp4|gif)$/i,
use: [ use: [
{ {
loader: 'file-loader', loader: 'file-loader',