Refactor
This commit is contained in:
Schmelczer András
parent
f054546aa6
commit
48a55a4a97
51 changed files with 604 additions and 577 deletions
39
.idea/codeStyles/Project.xml
generated
Normal file
39
.idea/codeStyles/Project.xml
generated
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
<component name="ProjectCodeStyleConfiguration">
|
||||
<code_scheme name="Project" version="173">
|
||||
<option name="LINE_SEPARATOR" value=" " />
|
||||
<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
5
.idea/codeStyles/codeStyleConfig.xml
generated
Normal 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
2
.idea/dictionaries/andras.xml
generated
|
|
@ -5,6 +5,8 @@
|
|||
<w>deltatime</w>
|
||||
<w>forex</w>
|
||||
<w>schmelczer</w>
|
||||
<w>vitaes</w>
|
||||
<w>önéletrajz</w>
|
||||
</words>
|
||||
</dictionary>
|
||||
</component>
|
||||
67
.idea/workspace.xml
generated
67
.idea/workspace.xml
generated
|
|
@ -2,29 +2,56 @@
|
|||
<project version="4">
|
||||
<component name="ChangeListManager">
|
||||
<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 afterPath="$PROJECT_DIR$/.idea/codeStyles/Project.xml" afterDir="false" />
|
||||
<change afterPath="$PROJECT_DIR$/.idea/codeStyles/codeStyleConfig.xml" afterDir="false" />
|
||||
<change afterPath="$PROJECT_DIR$/src/framework/cache.ts" afterDir="false" />
|
||||
<change afterPath="$PROJECT_DIR$/src/framework/container-page.ts" afterDir="false" />
|
||||
<change afterPath="$PROJECT_DIR$/src/framework/event-broadcaster.ts" afterDir="false" />
|
||||
<change afterPath="$PROJECT_DIR$/src/framework/primitives/implementations/anchor.ts" afterDir="false" />
|
||||
<change afterPath="$PROJECT_DIR$/src/framework/primitives/implementations/image.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$/src/framework/helper.ts" beforeDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/src/index.html" beforeDir="false" afterPath="$PROJECT_DIR$/src/index.html" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/.prettierrc" beforeDir="false" afterPath="$PROJECT_DIR$/.prettierrc" 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/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.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/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/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/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.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/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" />
|
||||
</list>
|
||||
<option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
|
||||
|
|
@ -61,23 +88,24 @@
|
|||
<property name="node.js.selected.package.stylelint" value="" />
|
||||
<property name="nodejs_package_manager_path" value="npm" />
|
||||
<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="ts.external.directory.path" value="$PROJECT_DIR$/node_modules/typescript/lib" />
|
||||
</component>
|
||||
<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">
|
||||
<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">
|
||||
<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 name="RunDashboard">
|
||||
<option name="ruleStates">
|
||||
|
|
@ -126,6 +154,9 @@
|
|||
<workItem from="1577786195424" duration="4310000" />
|
||||
<workItem from="1578128234878" duration="396000" />
|
||||
<workItem from="1578128641780" duration="1136000" />
|
||||
<workItem from="1578140662891" duration="4319000" />
|
||||
<workItem from="1578213355277" duration="599000" />
|
||||
<workItem from="1578327147961" duration="14056000" />
|
||||
</task>
|
||||
<servers />
|
||||
</component>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
{
|
||||
"trailingComma": "es5",
|
||||
"tabWidth": 2,
|
||||
"singleQuote": true
|
||||
"singleQuote": true,
|
||||
"endOfLine": "lf"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,6 @@
|
|||
# Timeline
|
||||
|
||||
[Click for live version](https://schmelczer.dev)
|
||||
|
||||
An easily configurable portfolio.
|
||||
|
||||
|
|
|
|||
|
|
@ -55,7 +55,6 @@
|
|||
"typescript": "^3.7.3",
|
||||
"webpack": "^4.41.4",
|
||||
"webpack-cli": "^3.3.10",
|
||||
"webpack-dev-server": "^3.10.1",
|
||||
"workbox-webpack-plugin": "^4.3.1"
|
||||
"webpack-dev-server": "^3.10.1"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
0
src/framework/cache.ts
Normal file
0
src/framework/cache.ts
Normal file
18
src/framework/container-page.ts
Normal file
18
src/framework/container-page.ts
Normal 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
5
src/framework/event-broadcaster.ts
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
import { PageEvent } from './page-event';
|
||||
|
||||
export interface EventBroadcaster {
|
||||
broadcastEvent(event: PageEvent, parent?: EventBroadcaster);
|
||||
}
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
import { html } from '../../model/misc';
|
||||
|
||||
export const createElement = (from: html): HTMLElement => {
|
||||
// won't work for all elements, eg.: <td>
|
||||
const element: HTMLElement = document.createElement('div');
|
||||
element.innerHTML = from;
|
||||
return element.firstElementChild as HTMLElement;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
export const getHeight = (e: HTMLElement): number => {
|
||||
// ignores margin collapse
|
||||
const computedStyle = window.getComputedStyle(e);
|
||||
return (
|
||||
// ignores margin collapse
|
||||
e.clientHeight +
|
||||
parseInt(computedStyle.marginTop) +
|
||||
parseInt(computedStyle.marginBottom) +
|
||||
|
|
|
|||
|
|
@ -1,2 +1,2 @@
|
|||
export const last = <T>(list: Array<T>): T =>
|
||||
list.length > 0 ? list[list.length - 1] : undefined;
|
||||
list.length >= 1 ? list[list.length - 1] : undefined;
|
||||
|
|
|
|||
|
|
@ -1,25 +1,25 @@
|
|||
export const mixColors = (
|
||||
hexColorA: string,
|
||||
hexColorB: string,
|
||||
quantityA: number
|
||||
): string => {
|
||||
const colorA = hexToRGB(normalizeHex(hexColorA));
|
||||
const colorB = hexToRGB(normalizeHex(hexColorB));
|
||||
export type hex = string;
|
||||
export type rgb = [number, number, number];
|
||||
|
||||
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[1], colorB[1], quantityA),
|
||||
mix(colorA[2], colorB[2], quantityA),
|
||||
];
|
||||
|
||||
return RGBToHex(mixedColor);
|
||||
return rgbToHex(mixedColor);
|
||||
};
|
||||
|
||||
const hexToRGB = ([r1, r2, g1, g2, b1, b2]: string): [
|
||||
number,
|
||||
number,
|
||||
number
|
||||
] => {
|
||||
const hexToRGB = (hex: hex): rgb => {
|
||||
const [r1, r2, g1, g2, b1, b2] = normalizeHex(hex);
|
||||
return [
|
||||
Number.parseInt(r1 + r2, 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();
|
||||
if (hex.startsWith('#')) {
|
||||
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 RGBToHex = (rgb: [number, number, number]): string =>
|
||||
const rgbToHex = (rgb: rgb): hex =>
|
||||
'#' + rgb.map(n => Math.round(n).toString(16)).join('');
|
||||
|
|
@ -2,16 +2,17 @@ export class Random {
|
|||
public constructor(private seed: number) {}
|
||||
|
||||
public get next(): number {
|
||||
// result is in [0, 1)
|
||||
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)];
|
||||
return list[Math.floor(this.randomInInterval(0, list.length))];
|
||||
}
|
||||
|
||||
public randomInInterval(aClosed: number, bOpen: number): number {
|
||||
return Math.floor((bOpen - aClosed) * this.next) + aClosed;
|
||||
return (bOpen - aClosed) * this.next + aClosed;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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) {}
|
||||
},
|
||||
};
|
||||
};
|
||||
|
|
@ -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 {
|
||||
private element: HTMLElement;
|
||||
export abstract class PageElement implements EventBroadcaster {
|
||||
protected eventBroadcaster: EventBroadcaster;
|
||||
|
||||
// Getter and setter accessors would have to agree in visibility
|
||||
public getElement(): HTMLElement {
|
||||
return this.element;
|
||||
protected constructor(
|
||||
private readonly rootElement: HTMLElement,
|
||||
private readonly children: Array<PageElement> = []
|
||||
) {}
|
||||
|
||||
public get element(): HTMLElement {
|
||||
return this.rootElement;
|
||||
}
|
||||
|
||||
protected setElement(value: HTMLElement) {
|
||||
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) {
|
||||
public broadcastEvent(event: PageEvent, parent: EventBroadcaster = null) {
|
||||
if (event.type === PageEventType.eventBroadcasterChanged) {
|
||||
this.eventBroadcaster = event.data;
|
||||
}
|
||||
|
||||
this.handleEvent(event, parent);
|
||||
this.children.forEach(c => c.broadcastEvent(event, this));
|
||||
}
|
||||
|
||||
protected query(query: string): HTMLElement | null {
|
||||
return this.getElement()?.querySelector(query);
|
||||
}
|
||||
protected handleEvent(event: PageEvent, parent: EventBroadcaster) {}
|
||||
|
||||
protected handleEvent(event: PageEvent, parent: PageElement) {}
|
||||
protected query(query: string): HTMLElement | null {
|
||||
return this.element?.querySelector(query);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
13
src/framework/primitives/implementations/anchor.ts
Normal 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
22
src/framework/primitives/implementations/image.ts
Normal 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
10
src/framework/primitives/implementations/text.ts
Normal 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
21
src/framework/primitives/implementations/video.ts
Normal 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
7
src/framework/primitives/primitive.ts
Normal 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
25
src/framework/primitives/primitives.scss
Normal 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;
|
||||
}
|
||||
|
|
@ -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>;
|
||||
|
|
@ -1,29 +1,33 @@
|
|||
import { url } from "./misc";
|
||||
import { Anchor, Content, Image, Video } from "./content";
|
||||
import { url } from './misc';
|
||||
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 {
|
||||
config: Config;
|
||||
header: Header;
|
||||
timeline: Array<TimelineElement>;
|
||||
timeline: Timeline;
|
||||
footer: Footer;
|
||||
}
|
||||
|
||||
export interface Config {
|
||||
showMore: string;
|
||||
showLess: string;
|
||||
}
|
||||
|
||||
export interface Header {
|
||||
name: string;
|
||||
picture: Image;
|
||||
about: Content;
|
||||
}
|
||||
|
||||
export interface Timeline {
|
||||
showMoreText: string;
|
||||
showLessText: string;
|
||||
elements: Array<TimelineElement>;
|
||||
}
|
||||
|
||||
export interface TimelineElement {
|
||||
title: string;
|
||||
date: string;
|
||||
figure: Image | Video;
|
||||
description: string;
|
||||
description: Text;
|
||||
more?: Content;
|
||||
link?: Anchor;
|
||||
}
|
||||
|
|
@ -31,8 +35,15 @@ export interface TimelineElement {
|
|||
export interface Footer {
|
||||
title: string;
|
||||
email: string;
|
||||
cv: url;
|
||||
cvName: string;
|
||||
lastEditName: string;
|
||||
curiumVitaes: Array<CV>;
|
||||
lastEditText: string;
|
||||
lastEdit: Date;
|
||||
gitHub: Anchor;
|
||||
}
|
||||
|
||||
export interface CV {
|
||||
name: string;
|
||||
url: url;
|
||||
}
|
||||
|
||||
export type Content = Array<Primitive>;
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
import { Header } from "../../model/portfolio";
|
||||
import { html } from "../../model/misc";
|
||||
import { PageContent } from "../content/content";
|
||||
import { Header } from '../../model/portfolio';
|
||||
import { html } from '../../model/misc';
|
||||
|
||||
import "./about.scss";
|
||||
import './about.scss';
|
||||
|
||||
export const generate = ({ name, picture }: Header): html => `
|
||||
<section id="about">
|
||||
${PageContent.parseTypedContent(picture, true)}
|
||||
${picture.toHTML(true)}
|
||||
<div class="placeholder"></div>
|
||||
<h1>${name}</h1>
|
||||
</section>`;
|
||||
</section>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -16,7 +16,6 @@
|
|||
img {
|
||||
@include square($img-size);
|
||||
border-radius: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
p {
|
||||
|
|
|
|||
|
|
@ -4,14 +4,10 @@ import { PageElement } from '../../framework/page-element';
|
|||
|
||||
import { generate } from './about.html';
|
||||
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) {
|
||||
const root = createElement(generate(header));
|
||||
const content = new PageContent(header.about);
|
||||
|
||||
super([content]);
|
||||
this.setElement(root);
|
||||
root.appendChild(content.getElement());
|
||||
super(createElement(generate(header)), [new PageContent(header.about)]);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import { html } from "../../model/misc";
|
||||
import "./background.scss";
|
||||
import { html } from '../../model/misc';
|
||||
import './background.scss';
|
||||
|
||||
export const generate = (): html => `
|
||||
<section id="background-container">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
@import "../../style/vars";
|
||||
@import "../../style/mixins";
|
||||
@import '../../style/vars';
|
||||
@import '../../style/mixins';
|
||||
|
||||
#background-container {
|
||||
position: fixed;
|
||||
|
|
|
|||
|
|
@ -12,8 +12,7 @@ export class PageBackground extends PageElement {
|
|||
private readonly blobSpacing = 350;
|
||||
|
||||
public constructor(private start: PageElement, private end: PageElement) {
|
||||
super();
|
||||
this.setElement(createElement(generate()));
|
||||
super(createElement(generate()));
|
||||
Blob.initialize(10, 30, 5);
|
||||
}
|
||||
|
||||
|
|
@ -28,18 +27,16 @@ export class PageBackground extends PageElement {
|
|||
private bindListeners(parent: PageElement) {
|
||||
window.addEventListener('resize', () => this.resize(parent));
|
||||
window.addEventListener('load', () => this.resize(parent));
|
||||
parent
|
||||
.getElement()
|
||||
.addEventListener(
|
||||
'scroll',
|
||||
() => (this.getElement().scrollTop = parent.getElement().scrollTop)
|
||||
);
|
||||
parent.element.addEventListener(
|
||||
'scroll',
|
||||
() => (this.element.scrollTop = parent.element.scrollTop)
|
||||
);
|
||||
}
|
||||
|
||||
private resize(parent: PageElement, heightChange?: number) {
|
||||
const siblings: Array<HTMLElement> = this.getSiblings(parent);
|
||||
|
||||
const width = parent.getElement().clientWidth;
|
||||
const width = parent.element.clientWidth;
|
||||
let height = sum(siblings.map(getHeight));
|
||||
if (heightChange) {
|
||||
height += heightChange;
|
||||
|
|
@ -67,10 +64,10 @@ export class PageBackground extends PageElement {
|
|||
b.transform(
|
||||
random,
|
||||
width,
|
||||
parent.getElement().clientHeight,
|
||||
parent.element.clientHeight,
|
||||
height,
|
||||
getHeight(this.start.getElement()),
|
||||
getHeight(this.end.getElement())
|
||||
getHeight(this.start.element),
|
||||
getHeight(this.end.element)
|
||||
);
|
||||
b.show();
|
||||
}
|
||||
|
|
@ -79,7 +76,7 @@ export class PageBackground extends PageElement {
|
|||
|
||||
private getSiblings(parent: PageElement): Array<HTMLElement> {
|
||||
return Array.prototype.slice
|
||||
.call(parent.getElement().children)
|
||||
.filter(e => e !== this.getElement());
|
||||
.call(parent.element.children)
|
||||
.filter(e => e !== this.element);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 { Random } from '../../framework/helper/random';
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
@ -2,24 +2,4 @@
|
|||
|
||||
.content {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,58 +1,14 @@
|
|||
import { Content, TypedContent } from '../../model/content';
|
||||
import './content.scss';
|
||||
import { PageElement } from '../../framework/page-element';
|
||||
import { createElement } from '../../framework/helper/create-element';
|
||||
import { html } from '../../model/misc';
|
||||
import { last } from '../../framework/helper/last';
|
||||
import { Content } from '../../model/portfolio';
|
||||
|
||||
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) {
|
||||
super();
|
||||
|
||||
this.setElement(
|
||||
super(
|
||||
createElement(`
|
||||
<div class="content">
|
||||
${content
|
||||
.map(element =>
|
||||
PageContent.isTyped(element)
|
||||
? PageContent.parseTypedContent(element)
|
||||
: `<p>${element}</p>`
|
||||
)
|
||||
.join('\n')}
|
||||
${content.map(element => element.toHTML()).join('\n')}
|
||||
</div>
|
||||
`)
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,32 +1,37 @@
|
|||
import { Footer } from "../../model/portfolio";
|
||||
import { html } from "../../model/misc";
|
||||
import emailIcon from "../../static/icons/at.svg";
|
||||
import cvIcon from "../../static/icons/cv.svg";
|
||||
import { Footer } from '../../model/portfolio';
|
||||
import { html } from '../../model/misc';
|
||||
import emailIcon from '../../static/icons/at.svg';
|
||||
import cvIcon from '../../static/icons/cv.svg';
|
||||
|
||||
import "./footer.scss";
|
||||
import './footer.scss';
|
||||
|
||||
export const generate = ({
|
||||
title,
|
||||
email,
|
||||
cv,
|
||||
cvName,
|
||||
lastEditName,
|
||||
lastEdit
|
||||
curiumVitaes,
|
||||
gitHub,
|
||||
lastEditText,
|
||||
lastEdit,
|
||||
}: Footer): html => `
|
||||
<footer id="page-footer">
|
||||
<h2>${title}</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<img src="${cvIcon}" alt="CV" class="no-open" />
|
||||
<a id="cv" href="${cv}" target="_blank">${cvName}</a>
|
||||
</li>
|
||||
${curiumVitaes
|
||||
.map(
|
||||
cv =>
|
||||
`<li>
|
||||
<img src="${cvIcon}" alt="CV" class="no-open" />
|
||||
<a id="cv" href="${cv.url}" target="_blank">${cv.name}</a>
|
||||
</li>`
|
||||
)
|
||||
.join('\n')}
|
||||
<li>
|
||||
<img src="${emailIcon}" alt="email" class="no-open"/>
|
||||
<a id="email" href="mailto:${email}">${email}</a>
|
||||
</li>
|
||||
</ul>
|
||||
<aside class="other">
|
||||
<h6>${lastEditName} ${lastEdit.toLocaleDateString()}</h6>
|
||||
<h6>${lastEditText} <time datetime="${lastEdit.toISOString()}">${lastEdit.toLocaleDateString()}</time></h6>
|
||||
</aside>
|
||||
</footer>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -38,11 +38,13 @@ footer#page-footer {
|
|||
|
||||
aside.other {
|
||||
@include center-children();
|
||||
flex-direction: column;
|
||||
margin: $large-margin auto $line-height auto;
|
||||
width: $body-width;
|
||||
|
||||
h6 {
|
||||
@include insignificant-font();
|
||||
display: inline;
|
||||
opacity: 0.75;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@ import { createElement } from '../../framework/helper/create-element';
|
|||
|
||||
export class PageFooter extends PageElement {
|
||||
constructor(footer: Footer) {
|
||||
super();
|
||||
this.setElement(createElement(generate(footer)));
|
||||
super(createElement(generate(footer)));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,10 +6,9 @@ import { createElement } from '../../framework/helper/create-element';
|
|||
|
||||
export class PageImageViewer extends PageElement {
|
||||
public constructor() {
|
||||
super();
|
||||
const root = createElement(generate());
|
||||
this.setElement(root);
|
||||
root.onclick = () => PageImageViewer.hide(root);
|
||||
super(root);
|
||||
}
|
||||
|
||||
protected handleEvent(event: PageEvent, parent: PageElement) {
|
||||
|
|
@ -20,12 +19,12 @@ export class PageImageViewer extends PageElement {
|
|||
document.body.addEventListener('keydown', this.handleKeydown.bind(this));
|
||||
|
||||
const images = Array.prototype.slice.call(
|
||||
parent.getElement().querySelectorAll('img')
|
||||
parent.element.querySelectorAll('img')
|
||||
);
|
||||
images
|
||||
.filter(
|
||||
(img: HTMLImageElement) =>
|
||||
img.parentElement !== this.getElement() &&
|
||||
img.parentElement !== this.element &&
|
||||
!img.classList.contains('no-open')
|
||||
)
|
||||
.forEach(
|
||||
|
|
@ -38,12 +37,12 @@ export class PageImageViewer extends PageElement {
|
|||
'#photo'
|
||||
) as HTMLImageElement).src = (event.target as HTMLImageElement).src;
|
||||
|
||||
PageImageViewer.show(this.getElement());
|
||||
PageImageViewer.show(this.element);
|
||||
}
|
||||
|
||||
private handleKeydown(event: KeyboardEvent) {
|
||||
if (event.key === 'Escape') {
|
||||
PageImageViewer.hide(this.getElement());
|
||||
PageImageViewer.hide(this.element);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,31 +1,22 @@
|
|||
import { Portfolio } from "../model/portfolio";
|
||||
import { PageBackground } from "./background/background";
|
||||
import { PageHeader } from "./about/about";
|
||||
import { PageTimeline } from "./timeline/timeline";
|
||||
import { PageFooter } from "./footer/footer";
|
||||
import { PageImageViewer } from "./image-viewer/image-viewer";
|
||||
import { Page } from "../framework/page";
|
||||
import { Portfolio } from '../model/portfolio';
|
||||
import { PageBackground } from './background/background';
|
||||
import { PageHeader } from './about/about';
|
||||
import { PageTimeline } from './timeline/timeline';
|
||||
import { PageFooter } from './footer/footer';
|
||||
import { PageImageViewer } from './image-viewer/image-viewer';
|
||||
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 pageFooter = new PageFooter(footer);
|
||||
|
||||
const bg = new PageBackground(pageHeader, pageFooter);
|
||||
new Page(
|
||||
[
|
||||
new PageImageViewer(),
|
||||
new Page(
|
||||
[
|
||||
pageHeader,
|
||||
new PageTimeline(timeline, config.showMore, config.showLess),
|
||||
pageFooter,
|
||||
bg
|
||||
],
|
||||
document.body.querySelector("main"),
|
||||
false
|
||||
)
|
||||
],
|
||||
document.body,
|
||||
true
|
||||
);
|
||||
new ContainerPage(document.body, [
|
||||
new PageImageViewer(),
|
||||
new ContainerPage(document.body.querySelector('main'), [
|
||||
pageHeader,
|
||||
new PageTimeline(timeline),
|
||||
pageFooter,
|
||||
new PageBackground(pageHeader, pageFooter),
|
||||
]),
|
||||
]).setAsMain();
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
import { TimelineElement } from "../../../model/portfolio";
|
||||
import { html } from "../../../model/misc";
|
||||
import { PageContent } from "../../content/content";
|
||||
import { TimelineElement } from '../../../model/portfolio';
|
||||
import { html } from '../../../model/misc';
|
||||
|
||||
import "./timeline-element.scss";
|
||||
import './timeline-element.scss';
|
||||
|
||||
export const generate = (
|
||||
{ date, title, figure, description, more, link }: TimelineElement,
|
||||
|
|
@ -15,8 +14,8 @@ export const generate = (
|
|||
</div>
|
||||
<div class="card">
|
||||
<h2>${title}</h2>
|
||||
${PageContent.parseTypedContent(figure)}
|
||||
<p class="description">${description}</p>
|
||||
${figure.toHTML()}
|
||||
${description.toHTML()}
|
||||
${
|
||||
more
|
||||
? `
|
||||
|
|
@ -26,9 +25,9 @@ export const generate = (
|
|||
<a class="show-less">${showLess}</a>
|
||||
</div>
|
||||
`
|
||||
: ""
|
||||
: ''
|
||||
}
|
||||
${link ? PageContent.parseTypedContent(link) : ""}
|
||||
${link ? link.toHTML() : ''}
|
||||
</div>
|
||||
</section>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -76,8 +76,9 @@
|
|||
@include sub-title-font();
|
||||
}
|
||||
|
||||
.description {
|
||||
& > p {
|
||||
font-style: italic;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.more {
|
||||
|
|
|
|||
|
|
@ -18,16 +18,15 @@ export class PageTimelineElement extends PageElement {
|
|||
|
||||
if (timelineElement.more) {
|
||||
const content = new PageContent(timelineElement.more);
|
||||
super([content]);
|
||||
super(root, [content]);
|
||||
this.isOpen = false;
|
||||
this.more = root.querySelector('.more');
|
||||
this.more.appendChild(content.getElement());
|
||||
this.more.appendChild(content.element);
|
||||
window.addEventListener('resize', this.handleResize.bind(this));
|
||||
root
|
||||
.querySelector('.buttons')
|
||||
.addEventListener('click', this.toggleOpen.bind(this));
|
||||
} else super();
|
||||
this.setElement(root);
|
||||
} else super(root);
|
||||
}
|
||||
|
||||
private toggleOpen() {
|
||||
|
|
@ -38,8 +37,8 @@ export class PageTimelineElement extends PageElement {
|
|||
PageTimelineElement.hide(showLess);
|
||||
this.closeMore();
|
||||
} else {
|
||||
PageTimelineElement.hide(showMore);
|
||||
PageTimelineElement.show(showLess);
|
||||
PageTimelineElement.hide(showMore);
|
||||
this.openMore();
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,21 +1,15 @@
|
|||
import { TimelineElement } from '../../model/portfolio';
|
||||
import { Timeline } from '../../model/portfolio';
|
||||
import { PageElement } from '../../framework/page-element';
|
||||
import { PageTimelineElement } from './timeline-element/timeline-element';
|
||||
import { generate } from './timeline.html';
|
||||
import { createElement } from '../../framework/helper/create-element';
|
||||
import { ContainerPage } from '../../framework/container-page';
|
||||
|
||||
export class PageTimeline extends PageElement {
|
||||
public constructor(
|
||||
timeline: Array<TimelineElement>,
|
||||
showMore: string,
|
||||
showLess: string
|
||||
) {
|
||||
const root = createElement(generate());
|
||||
const elements = timeline.map(
|
||||
e => new PageTimelineElement(e, showMore, showLess)
|
||||
export class PageTimeline extends ContainerPage {
|
||||
public constructor({ elements, showMoreText, showLessText }: Timeline) {
|
||||
super(
|
||||
createElement(generate()),
|
||||
elements.map(e => new PageTimelineElement(e, showMoreText, showLessText))
|
||||
);
|
||||
elements.map(e => e.getElement()).forEach(e => root.appendChild(e));
|
||||
super(elements);
|
||||
this.setElement(root);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
386
src/portfolio.ts
386
src/portfolio.ts
|
|
@ -1,6 +1,11 @@
|
|||
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 forexGIF from './static/media/forex.gif';
|
||||
import forexMP4 from './static/media/forex.mp4';
|
||||
import forexWEBM from './static/media/forex.webm';
|
||||
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';
|
||||
|
||||
export const portfolio: Portfolio = {
|
||||
config: {
|
||||
showMore: `Show details`,
|
||||
showLess: `Show less`,
|
||||
},
|
||||
header: {
|
||||
name: `András Schmelczer`,
|
||||
picture: {
|
||||
type: `img`,
|
||||
image: me,
|
||||
alt: `a picture of me`,
|
||||
},
|
||||
picture: new Image(me, `a picture of me`),
|
||||
about: [
|
||||
`I have always been fascinated by the engineering feats that surround us.
|
||||
When I realized that someday I might be able to contribute to these achievements,
|
||||
I knew that is what I need to aim for. As I am finishing my fifth semester at the
|
||||
Budapest University of Technology and Economics, I feel I am getting closer to it every day.`,
|
||||
`You can see some of the more interesting projects I have worked on below.`,
|
||||
new Text(
|
||||
`I have always been fascinated by the engineering feats that surround us.
|
||||
When I realized that someday I might be able to contribute to these achievements,
|
||||
I knew that is what I need to aim for. As I am starting my sixth semester at the
|
||||
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: [
|
||||
{
|
||||
title: `Predicting foreign exchange rates`,
|
||||
date: `2019 Autumn`,
|
||||
figure: {
|
||||
type: `video`,
|
||||
options: `autoplay loop muted playsinline`,
|
||||
webm: forexWEBM,
|
||||
mp4: forexMP4,
|
||||
timeline: {
|
||||
showMoreText: `Show details`,
|
||||
showLessText: `Show less`,
|
||||
elements: [
|
||||
{
|
||||
title: `Predicting foreign exchange rates`,
|
||||
date: `2019 Autumn`,
|
||||
figure: new Video(
|
||||
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).`,
|
||||
more: [
|
||||
`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.`,
|
||||
`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.`,
|
||||
],
|
||||
},
|
||||
{
|
||||
date: `2019 November`,
|
||||
title: `My Notes`,
|
||||
figure: {
|
||||
type: `img`,
|
||||
image: myNotes,
|
||||
alt: `two screenshots of the application`,
|
||||
{
|
||||
date: `2019 November`,
|
||||
title: `My Notes`,
|
||||
figure: new Image(myNotes, `two screenshots of the application`),
|
||||
description: new Text(
|
||||
`A minimalist note organizer and editor powered by Markwon.`
|
||||
),
|
||||
more: [
|
||||
new Anchor(
|
||||
`https://github.com/schmelczerandras/my-notes`,
|
||||
`MyNotes on GitHub`
|
||||
),
|
||||
new Text(
|
||||
`A basic android app for creating and filtering notes written in markdown.`
|
||||
),
|
||||
new Text(
|
||||
`It was my homework for BME's Android and web development course.
|
||||
It was also my first experience with Android development.`
|
||||
),
|
||||
],
|
||||
},
|
||||
description: `A minimalist note organizer and editor powered by Markwon.`,
|
||||
more: [
|
||||
{
|
||||
type: `a`,
|
||||
href: `https://github.com/schmelczerandras/my-notes`,
|
||||
text: `MyNotes on GitHub`,
|
||||
},
|
||||
`A basic android app for creating and filtering notes written in markdown.`,
|
||||
`It was my homework for BME's Android and web development course.
|
||||
It was also my first experience with Android development.`,
|
||||
],
|
||||
},
|
||||
{
|
||||
date: `2018 October - November`,
|
||||
title: `Simulating the cooling system of a nuclear facility`,
|
||||
figure: {
|
||||
type: `img`,
|
||||
image: processSimulator,
|
||||
alt: `a screenshot of the simulator`,
|
||||
{
|
||||
date: `2018 October - November`,
|
||||
title: `Simulating the cooling system of a nuclear facility`,
|
||||
figure: new Image(processSimulator, `a screenshot of the simulator`),
|
||||
description: new Text(
|
||||
`Dynamically calculating the temperatures and flow velocities
|
||||
in a fluid based cooling system based on a simple model.`
|
||||
),
|
||||
more: [
|
||||
new Text(
|
||||
`A simulated system can contain reactors (heaters / coolers), pumps, heat exchangers,
|
||||
drains sources, and of course, pipes.`
|
||||
),
|
||||
new Text(
|
||||
`The algorithm takes advantages of graphs and matrices to get to a next time frame.`
|
||||
),
|
||||
new Text(
|
||||
`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: `Dynamically calculating the temperatures and flow velocities
|
||||
in a fluid based cooling system based on a simple model.`,
|
||||
more: [
|
||||
`A simulated system can contain reactors (heaters / coolers), pumps, heat exchangers,
|
||||
drains sources, and of course, pipes.`,
|
||||
`The algorithm takes advantages of graphs and matrices to get to a next time frame.`,
|
||||
`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.`,
|
||||
],
|
||||
},
|
||||
{
|
||||
date: `2018 October - November`,
|
||||
title: `Graph editing application`,
|
||||
figure: {
|
||||
type: `img`,
|
||||
image: processSimulatorInput,
|
||||
alt: `a picture of the simulator's UI`,
|
||||
{
|
||||
date: `2018 October - November`,
|
||||
title: `Graph editing application`,
|
||||
figure: new Image(
|
||||
processSimulatorInput,
|
||||
`a picture of the simulator's UI`
|
||||
),
|
||||
description: new Text(
|
||||
`An intuitive editor to create and edit input files for the nuclear facility simulator.`
|
||||
),
|
||||
more: [
|
||||
new Text(
|
||||
`Nodes can be moved with drag&drop gestures. Editing the parameters of elements
|
||||
can be done on the right panel.`
|
||||
),
|
||||
new Text(
|
||||
`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: [
|
||||
`Nodes can be moved with drag&drop gestures. Editing the parameters of elements
|
||||
can be done on the right panel.`,
|
||||
`The UI is built with JavaFX. The output can be exported as JSON or
|
||||
directly uploaded to the simulation backend.`,
|
||||
],
|
||||
},
|
||||
{
|
||||
date: `2018 July - August`,
|
||||
title: `City simulation`,
|
||||
figure: {
|
||||
type: `img`,
|
||||
image: citySimulation,
|
||||
alt: `a picture of a low-poly city`,
|
||||
{
|
||||
date: `2018 July - August`,
|
||||
title: `City simulation`,
|
||||
figure: new Image(citySimulation, `a picture of a low-poly city`),
|
||||
description: new Text(
|
||||
`Simulating a city where car crashes are more frequent than usual.`
|
||||
),
|
||||
more: [
|
||||
new Text(
|
||||
`Through a REST API the state of the traffic lights can be changed.
|
||||
The drivers follow the instructions of the traffic lights, so if a mistake is made,
|
||||
there will be collisions. There is also support for displaying tweets on a HUD.`
|
||||
),
|
||||
new Text(
|
||||
`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: [
|
||||
`Through a REST API the state of the traffic lights can be changed.
|
||||
The drivers follow the instructions of the traffic lights, so if a mistake is made,
|
||||
there will be collisions. There is also support for displaying tweets on a HUD.`,
|
||||
`This was created for a Cybersecurity challenge. With the help of this program
|
||||
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.
|
||||
The decisions of the agents is calculated server-side. The real challenge was broadcasting
|
||||
these decisions in a fault-tolerant way using minimal bandwidth.`,
|
||||
`The program is made with Unity using C# as the scripting language. The models and animations
|
||||
were also made by me using Blender.`,
|
||||
],
|
||||
},
|
||||
{
|
||||
date: `2018 June`,
|
||||
title: `Photo color grader`,
|
||||
figure: {
|
||||
type: `img`,
|
||||
image: color,
|
||||
alt: `a picture of the app`,
|
||||
{
|
||||
date: `2018 June`,
|
||||
title: `Photo color grader`,
|
||||
figure: new Image(color, `a picture of the app`),
|
||||
description: new Text(
|
||||
`An innovative (at least I thought so) color grader web application.`
|
||||
),
|
||||
more: [
|
||||
new Text(
|
||||
`The most noteworthy feature of this application is the color selector UI.
|
||||
This program is only intended as a proof-of-concept, I wanted to experiment with
|
||||
some ideas and this was the outcome.`
|
||||
),
|
||||
new Text(
|
||||
`You can select some colors and then apply transformations to the other colors as a
|
||||
function of their distance to the selected color.`
|
||||
),
|
||||
new Text(
|
||||
`By clicking on a colored circle you can change its settings.
|
||||
New circles can be created by clicking in the large circle (and they can also be moved by drag & drop).`
|
||||
),
|
||||
new Anchor('color', `schmelczer.dev/color`),
|
||||
],
|
||||
},
|
||||
description: `An innovative (at least I thought so) color grader web application.`,
|
||||
more: [
|
||||
`The most noteworthy feature of this application is the color selector UI.
|
||||
This program is only intended as a proof-of-concept, I wanted to experiment with
|
||||
some ideas and this was the outcome. `,
|
||||
`You can select some colors and then apply transformations to the other colors as a
|
||||
function of their distance to the selected color.`,
|
||||
`By clicking on a colored circle you can change its settings.
|
||||
New circles can be created by clicking in the large circle (and they can also be moved by drag&drop).`,
|
||||
{ type: `a`, href: `color`, text: `schmelczer.dev/color` },
|
||||
],
|
||||
},
|
||||
{
|
||||
date: `2017 autumn`,
|
||||
|
||||
title: `Platform game`,
|
||||
figure: {
|
||||
type: `img`,
|
||||
image: platform,
|
||||
alt: `a picture of the app`,
|
||||
{
|
||||
date: `2017 autumn`,
|
||||
title: `Platform game`,
|
||||
figure: new Image(platform, `a picture of the app`),
|
||||
description: new Text(
|
||||
`A 3D game written in C with the help of SDL 1.2 (I haven't heard of GPU programming at the time).`
|
||||
),
|
||||
more: [
|
||||
new Text(
|
||||
`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(
|
||||
`I did this as a homework for my Basics of Programming course.`
|
||||
),
|
||||
],
|
||||
},
|
||||
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: [
|
||||
`The maps are randomly generated and fully destroyable.
|
||||
The player is getting chased by flying enemies. Overall, I find it a really enjoyable game.`,
|
||||
`I did this as a homework for my Basics of Programming course.`,
|
||||
],
|
||||
},
|
||||
{
|
||||
date: `2016 summer`,
|
||||
title: `Photos`,
|
||||
figure: {
|
||||
type: `img`,
|
||||
image: photos,
|
||||
alt: `a picture of the website`,
|
||||
{
|
||||
date: `2016 summer`,
|
||||
title: `Photos`,
|
||||
figure: new Image(photos, `a picture of the website`),
|
||||
description: new Text(
|
||||
`A simple web page where you can view my photos.`
|
||||
),
|
||||
link: new Anchor(`photos`, `schmelczer.dev/photos`),
|
||||
},
|
||||
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: {
|
||||
type: `img`,
|
||||
image: led,
|
||||
alt: `a picture from the video`,
|
||||
{
|
||||
date: `2016 spring`,
|
||||
title: `Lights synchronised to music`,
|
||||
figure: new Video(led.src, ledMP4, ledWEBM, `controls`),
|
||||
description: new Text(
|
||||
`A full stack application with a built-in
|
||||
music player which music controls the color of some RGB LED strips.`
|
||||
),
|
||||
more: [
|
||||
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: {
|
||||
title: `Learn more`,
|
||||
cv,
|
||||
email: `schmelczerandras@gmail.com`,
|
||||
cvName: `Curriculum vitae`,
|
||||
lastEditName: `Last modified on `,
|
||||
lastEdit: new Date(2020, 0, 2), // months are 0 indexed
|
||||
curiumVitaes: [
|
||||
{ name: `Curriculum vitae (en)`, url: cv },
|
||||
{ name: `Önéletrajz (hu)`, url: cv },
|
||||
],
|
||||
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.`
|
||||
),
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
@import 'fonts';
|
||||
|
||||
$background: white;
|
||||
$background: #ffffff;
|
||||
|
||||
$normal-text-color: #31343f;
|
||||
$light-text-color: #7a7d8e;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
@import 'style/vars';
|
||||
@import 'style/mixins';
|
||||
@import 'style/a';
|
||||
@import 'framework/primitives/primitives';
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
|
|
@ -27,6 +28,7 @@ html {
|
|||
body {
|
||||
@include main-font();
|
||||
height: 100%;
|
||||
//noinspection CssInvalidFunction
|
||||
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);
|
||||
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ const TerserJSPlugin = require('terser-webpack-plugin');
|
|||
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
|
||||
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
||||
const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');
|
||||
const Sharp = require('responsive-loader/sharp');
|
||||
|
||||
const isProduction = process.env.NODE_ENV === 'production';
|
||||
|
||||
|
|
@ -14,7 +15,7 @@ module.exports = {
|
|||
},
|
||||
devServer: {
|
||||
host: '0.0.0.0',
|
||||
// disableHostCheck: true
|
||||
// disableHostCheck: true,
|
||||
},
|
||||
optimization: {
|
||||
minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
|
||||
|
|
@ -23,8 +24,15 @@ module.exports = {
|
|||
new CleanWebpackPlugin(),
|
||||
new HtmlWebpackPlugin({
|
||||
xhtml: true,
|
||||
minify: true,
|
||||
template: './src/index.html',
|
||||
minify: {
|
||||
collapseWhitespace: true,
|
||||
removeComments: true,
|
||||
removeRedundantAttributes: true,
|
||||
removeScriptTypeAttributes: true,
|
||||
removeStyleLinkTypeAttributes: true,
|
||||
useShortDoctype: true,
|
||||
},
|
||||
inlineSource: '.(js|css)$',
|
||||
}),
|
||||
new HtmlWebpackInlineSourcePlugin(),
|
||||
|
|
@ -42,14 +50,14 @@ module.exports = {
|
|||
test: /\.(jpe?g|png)$/i,
|
||||
loader: 'responsive-loader',
|
||||
options: {
|
||||
adapter: require('responsive-loader/sharp'),
|
||||
adapter: Sharp,
|
||||
outputPath: 'static/',
|
||||
sizes: [300, 600, 1200, 2000],
|
||||
sizes: [200, 400, 800, 1200, 2000],
|
||||
placeholder: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
test: /\.(webm|mp4)$/i,
|
||||
test: /\.(webm|mp4|gif)$/i,
|
||||
use: [
|
||||
{
|
||||
loader: 'file-loader',
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue