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

Fix lagging

Browse source
This commit is contained in:
Schmelczer András 2020-01-04 10:25:10 +01:00
commit f054546aa6
35 changed files with 497 additions and 494 deletions
Download patch file Download diff file Expand all files Collapse all files

30
.idea/workspace.xml generated
View file

@ -2,15 +2,30 @@
<project version="4">
<component name="ChangeListManager">
<list default="true" id="8edc47ab-1265-4111-9771-536b24cc9310" name="Default Changelist" comment="">
<change afterPath="$PROJECT_DIR$/src/page/background/animation.ts" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/page/background/vec2.ts" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/page/background/vec3.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/dictionaries/andras.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/dictionaries/andras.xml" afterDir="false" />
<change afterPath="$PROJECT_DIR$/.prettierrc" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/framework/helper/color-mixer.ts" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/framework/helper/create-element.ts" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/framework/helper/get-height.ts" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/framework/helper/last.ts" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/framework/helper/random.ts" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/framework/helper/range.ts" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/framework/helper/sum.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/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$/src/page/about/about.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/about/about.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/background/background.html.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/background/background.html.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/background/background.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/background/background.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/background/background.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/background/background.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/background/blob.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/background/blob.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/portfolio.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/portfolio.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/content/content.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/content/content.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/footer/footer.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/footer/footer.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/image-viewer/image-viewer.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/image-viewer/image-viewer.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/timeline/timeline-element/timeline-element.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/timeline/timeline-element/timeline-element.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/timeline/timeline.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/timeline/timeline.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/style/a.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/style/a.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/style/vars.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/style/vars.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/webpack.config.js" beforeDir="false" afterPath="$PROJECT_DIR$/webpack.config.js" afterDir="false" />
</list>
<option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
<option name="SHOW_DIALOG" value="false" />
@ -108,8 +123,9 @@
<workItem from="1577639259221" duration="3798000" />
<workItem from="1577662869335" duration="6536000" />
<workItem from="1577702567470" duration="3227000" />
<workItem from="1577955137825" duration="6471000" />
<workItem from="1578037890102" duration="19519000" />
<workItem from="1577786195424" duration="4310000" />
<workItem from="1578128234878" duration="396000" />
<workItem from="1578128641780" duration="1136000" />
</task>
<servers />
</component>

5
.prettierrc Normal file
View file

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

93
src/framework/helper.ts
View file

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4
src/index.html
View file

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

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

@ -1,5 +1,5 @@
@import "../../style/mixins";
@import "../../style/vars";
@import '../../style/mixins';
@import '../../style/vars';
#about {
@include important-card();

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

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

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

@ -1,4 +1,4 @@
import { Vec2 } from "./vec2";
import { Vec2 } from './vec2';
export class Animation {
private _value: Vec2;

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

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

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

@ -1,11 +1,44 @@
@import "../../style/vars";
@import "../../style/mixins";
canvas#background {
#background-container {
position: fixed;
top: 0;
left: 0;
top: 0;
height: 100vh;
width: 100%;
z-index: -10;
z-index: -1;
-webkit-overflow-scrolling: touch;
perspective: 5px;
perspective-origin: center center;
overflow: hidden;
#background {
overflow: hidden;
will-change: width, height;
transition: height $long-transition-time, width $long-transition-time;
transform-style: flat;
div {
position: -webkit-sticky;
position: absolute;
left: 0;
top: 0;
border-radius: 100px;
width: 140px;
transition: transform $long-transition-time, opacity $long-transition-time;
will-change: transform, opacity;
animation: fade-in 1s linear;
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
}
}
}

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

@ -1,31 +1,20 @@
import { PageElement } from "../../framework/page-element";
import { getHeight, createElement, sum } from "../../framework/helper";
import { PageEvent, PageEventType } from "../../framework/page-event";
import { Blob } from "./blob";
import { generate } from "./background.html";
import { Animation } from "./animation";
import { Vec3 } from "./vec3";
import { Vec2 } from "./vec2";
import { PageElement } from '../../framework/page-element';
import { PageEvent, PageEventType } from '../../framework/page-event';
import { createElement } from '../../framework/helper/create-element';
import { Blob } from './blob';
import { generate } from './background.html';
import { Random } from '../../framework/helper/random';
import { getHeight } from '../../framework/helper/get-height';
import { sum } from '../../framework/helper/sum';
export class PageBackground extends PageElement {
private readonly blobs: Array<Blob> = [];
private readonly blobSpacing = 140;
private readonly perspective = 5;
private readonly zMin = 10;
private readonly zMax = 30;
private readonly animationTime = 350;
private backgroundSize: Animation;
private scrollPosition: number = 0;
private previousTimestamp: DOMHighResTimeStamp = null;
private readonly canvas: HTMLCanvasElement;
private readonly ctx: CanvasRenderingContext2D;
private readonly blobSpacing = 350;
public constructor(private start: PageElement, private end: PageElement) {
super();
this.canvas = createElement(generate()) as HTMLCanvasElement;
this.ctx = this.canvas.getContext("2d");
this.setElement(this.canvas);
Blob.initialize(this.zMin, this.zMax);
this.setElement(createElement(generate()));
Blob.initialize(10, 30, 5);
}
protected handleEvent(event: PageEvent, parent: PageElement) {
@ -37,49 +26,55 @@ export class PageBackground extends PageElement {
}
private bindListeners(parent: PageElement) {
window.addEventListener("resize", () => this.resize(parent));
window.addEventListener("load", e => {
this.resize(parent);
this.redraw(e.timeStamp, parent);
});
window.addEventListener('resize', () => this.resize(parent));
window.addEventListener('load', () => this.resize(parent));
parent
.getElement()
.addEventListener(
'scroll',
() => (this.getElement().scrollTop = parent.getElement().scrollTop)
);
}
private resize(parent: PageElement, heightChange?: number) {
this.resizeCanvas();
this.resizeBackground(parent, heightChange);
}
private resizeCanvas() {
this.canvas.width = this.canvas.clientWidth;
this.canvas.height = this.canvas.clientHeight;
}
private resizeBackground(parent: PageElement, heightChange?: number) {
const targetWidth = parent.getElement().clientWidth;
const siblings: Array<HTMLElement> = this.getSiblings(parent);
let targetHeight = sum(siblings.map(getHeight));
const width = parent.getElement().clientWidth;
let height = sum(siblings.map(getHeight));
if (heightChange) {
targetHeight += heightChange;
height += heightChange;
}
const targetSize = new Vec2(targetWidth, targetHeight);
this.query('#background').style.width = `${width}px`;
this.query('#background').style.height = `${height}px`;
this.backgroundSize = new Animation(
this.backgroundSize ? this.backgroundSize.value : targetSize,
targetSize,
this.animationTime,
backgroundSize =>
this.blobs.forEach(blob => {
const topLeft = this.convertFrom2Dto3D(Vec2.Zero, blob.z);
const bottomRight = this.convertFrom2Dto3D(
backgroundSize,
blob.z,
backgroundSize.y - this.canvas.height
);
blob.positionScale = bottomRight.subtract(topLeft);
})
const requiredBlobCount = Math.round(
(width * height) / this.blobSpacing ** 2
);
while (requiredBlobCount > this.blobs.length) {
const blob = new Blob();
this.query('#background').appendChild(blob.htmlElement);
this.blobs.push(blob);
}
const random = new Random(2662);
this.blobs.forEach((b, i) => {
if (i >= requiredBlobCount) {
b.hide();
} else {
b.transform(
random,
width,
parent.getElement().clientHeight,
height,
getHeight(this.start.getElement()),
getHeight(this.end.getElement())
);
b.show();
}
});
}
private getSiblings(parent: PageElement): Array<HTMLElement> {
@ -87,77 +82,4 @@ export class PageBackground extends PageElement {
.call(parent.getElement().children)
.filter(e => e !== this.getElement());
}
private redraw(timestamp: DOMHighResTimeStamp, parent: PageElement) {
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
const deltaTime = this.getDeltaTime(timestamp);
this.backgroundSize.step(deltaTime);
this.scrollPosition = parent.getElement().scrollTop;
const requiredBlobCount = this.requiredBlobCount;
while (requiredBlobCount > this.blobs.length) {
this.blobs.push(new Blob());
}
this.blobs.sort((b1, b2) => b2.z - b1.z);
this.blobs.forEach((blob, i) => {
if (i >= requiredBlobCount) {
return;
}
const topLeft = this.convertFrom3Dto2D(blob.topLeft);
const bottomRight = this.convertFrom3Dto2D(
blob.topLeft.add(Vec3.from(blob.size, 0))
);
if (this.isInView(topLeft) || this.isInView(bottomRight)) {
blob.draw(this.ctx, topLeft, bottomRight.subtract(topLeft));
}
});
window.requestAnimationFrame(timestamp => this.redraw(timestamp, parent));
}
private getDeltaTime(timestamp: DOMHighResTimeStamp): number {
const deltaTime = this.previousTimestamp
? timestamp - this.previousTimestamp
: 0;
this.previousTimestamp = timestamp;
return Math.max(0, deltaTime);
}
private convertFrom3Dto2D(p: Vec3): Vec2 {
const m = this.perspective / (this.perspective + p.z);
return new Vec2(
m * (p.z / 2 + p.x),
m * (p.z / 2 + p.y - this.scrollPosition)
);
}
private convertFrom2Dto3D(
p: Vec2,
z: number,
scrollPosition: number = 0
): Vec2 {
const m = 1 + z / this.perspective;
return new Vec2(p.x * m - z / 2, p.y * m - z / 2 + scrollPosition);
}
private isInView(p: Vec2): boolean {
return (
0 <= p.x &&
p.x <= this.canvas.width &&
0 <= p.y &&
p.y <= this.canvas.height
);
}
private get requiredBlobCount(): number {
return Math.round(
(this.backgroundSize.value.x * this.backgroundSize.value.y) /
this.blobSpacing ** 2
);
}
}

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

@ -1,74 +1,96 @@
import {
choose,
mixColors,
randomFactory,
randomInInterval
} from "../../framework/helper";
import { Vec2 } from "./vec2";
import { Vec3 } from "./vec3";
import { mixColors } from '../../framework/helper/color-mixer';
import { createElement } from '../../framework/helper/create-element';
import { Random } from '../../framework/helper/random';
export class Blob {
private static readonly creatorRandom = randomFactory(44);
private static readonly colors = ["#fff9e0", "#ffd6d6"];
private static readonly rotation = (-20 / 180) * Math.PI;
private static readonly creatorRandom = new Random(44);
private static readonly colors = ['#fff9e0', '#ffd6d6'];
private static zMin: number;
private static zMax: number;
public static initialize(zMin: number, zMax: number) {
private static perspective: number;
public static initialize(zMin: number, zMax: number, perspective: number) {
Blob.zMin = zMin;
Blob.zMax = zMax;
Blob.perspective = perspective;
}
public readonly z = randomInInterval(
private readonly z = Blob.creatorRandom.randomInInterval(
Blob.zMin,
Blob.zMax,
Blob.creatorRandom
Blob.zMax
);
private readonly positionQ = new Vec2(
Blob.creatorRandom(),
Blob.creatorRandom()
);
private _positionScale = new Vec2(0, 0);
private readonly _size = new Vec2(
140,
randomInInterval(160, 740, Blob.creatorRandom)
);
private readonly color =
"#" +
mixColors(
"#ffffff",
choose(Blob.colors, Blob.creatorRandom),
private readonly element: HTMLElement = createElement('<div></div>');
constructor() {
this.element.style.backgroundColor = mixColors(
'#ffffff',
Blob.creatorRandom.choose(Blob.colors),
(this.z - Blob.zMin) / (Blob.zMax - Blob.zMin)
);
public get topLeft(): Vec3 {
return Vec3.from(this.positionQ.multiply(this._positionScale), this.z);
this.element.style.zIndex = (-this.z).toString();
this.element.style.height = `${Blob.creatorRandom.randomInInterval(
160,
740
)}px`;
}
public get size(): Vec2 {
return this._size;
get htmlElement(): HTMLElement {
return this.element;
}
public set positionScale(value: Vec2) {
this._positionScale = value;
private randomWithKnownZ(
random: Random,
viewportSize: number,
scrollSize: number,
startOffset = 0,
endOffset = 0
): number {
const m = 1 + this.z / Blob.perspective;
const variableOffset = (offset, q) =>
Math.max(
0,
offset - ((this.z - Blob.zMin) / (Blob.zMax - Blob.zMin)) * (offset * q)
);
startOffset = variableOffset(startOffset, 1);
endOffset = variableOffset(endOffset, 0.2);
const lowerBound = viewportSize / 2 - (viewportSize / 2 - startOffset) * m;
const l =
scrollSize - viewportSize + (viewportSize - startOffset - endOffset) * m;
return random.randomInInterval(lowerBound, lowerBound + l);
}
public draw(ctx: CanvasRenderingContext2D, position: Vec2, size: Vec2) {
ctx.save();
public show() {
this.element.style.opacity = '1';
}
ctx.translate(position.x, position.y);
ctx.rotate(Blob.rotation);
public hide() {
this.element.style.opacity = '0';
}
ctx.beginPath();
ctx.arc(0, size.x / 2 - size.y / 2, size.x / 2, Math.PI, 0);
ctx.arc(0, size.y / 2 - size.x / 2, size.x / 2, 0, Math.PI);
ctx.closePath();
ctx.fillStyle = this.color;
ctx.fill();
ctx.restore();
public transform(
random: Random,
width: number,
viewportHeight: number,
scrollHeight: number,
startOffset: number,
endOffset: number
) {
const value = `
translateX(${this.randomWithKnownZ(random, width, width)}px)
translateY(${this.randomWithKnownZ(
random,
viewportHeight,
scrollHeight,
startOffset,
endOffset
)}px)
translateZ(${-this.z}px)
rotate(-20deg)
`;
this.element.style['-webkit-transform'] = value;
this.element.style.transform = value;
}
}

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

@ -1,4 +1,4 @@
import { Vec2 } from "./vec2";
import { Vec2 } from './vec2';
export class Vec3 {
public static readonly Zero = new Vec3(0, 0, 0);

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

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

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

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

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

@ -1,5 +1,5 @@
@import "../../style/mixins";
@import "../../style/vars";
@import '../../style/mixins';
@import '../../style/vars';
footer#page-footer {
text-align: center;

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

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

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

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

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

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

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

@ -1,5 +1,5 @@
@import "../../../style/mixins";
@import "../../../style/vars";
@import '../../../style/mixins';
@import '../../../style/vars';
.timeline-element {
display: flex;
@ -9,7 +9,7 @@
border-left: $line-width solid $accent-color;
&:before {
content: "";
content: '';
@include square($icon-size);
position: absolute;
left: calc(-0.5 * #{$icon-size} - (1.5 * #{$line-width}));

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

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

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

@ -1,4 +1,4 @@
@import "../../style/vars";
@import '../../style/vars';
#timeline {
width: $body-width;

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

@ -1,8 +1,8 @@
import { TimelineElement } 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";
import { TimelineElement } 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';
export class PageTimeline extends PageElement {
public constructor(

98
src/portfolio.ts
View file

@ -1,39 +1,39 @@
import { Portfolio } from "./model/portfolio";
import { Portfolio } from './model/portfolio';
import me from "./static/media/me.jpg";
import forexMP4 from "./static/media/forex.mp4";
import forexWEBM from "./static/media/forex.webm";
import myNotes from "./static/media/my-notes.jpg";
import processSimulator from "./static/media/process-simulator.jpg";
import processSimulatorInput from "./static/media/process-simulator-input.jpg";
import citySimulation from "./static/media/simulation.jpg";
import color from "./static/media/color.jpg";
import platform from "./static/media/platform.png";
import photos from "./static/media/photos.jpg";
import led from "./static/media/led.jpg";
import cv from "./static/cv/andras_schmelczer_cv_2020_01.pdf";
import ledMP4 from "./static/media/led.mp4";
import ledWEBM from "./static/media/led.webm";
import me from './static/media/me.jpg';
import forexMP4 from './static/media/forex.mp4';
import forexWEBM from './static/media/forex.webm';
import myNotes from './static/media/my-notes.jpg';
import processSimulator from './static/media/process-simulator.jpg';
import processSimulatorInput from './static/media/process-simulator-input.jpg';
import citySimulation from './static/media/simulation.jpg';
import color from './static/media/color.jpg';
import platform from './static/media/platform.png';
import photos from './static/media/photos.jpg';
import led from './static/media/led.jpg';
import cv from './static/cv/andras_schmelczer_cv_2020_01.pdf';
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`
showLess: `Show less`,
},
header: {
name: `András Schmelczer`,
picture: {
type: `img`,
image: me,
alt: `a picture of me`
alt: `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.`
]
`You can see some of the more interesting projects I have worked on below.`,
],
},
timeline: [
{
@ -43,7 +43,7 @@ export const portfolio: Portfolio = {
type: `video`,
options: `autoplay loop muted playsinline`,
webm: forexWEBM,
mp4: forexMP4
mp4: forexMP4,
},
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).`,
@ -53,8 +53,8 @@ export const portfolio: Portfolio = {
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.`
]
a mostly profitable trading strategy is viable. In my free time I may put more work into it.`,
],
},
{
date: `2019 November`,
@ -62,19 +62,19 @@ export const portfolio: Portfolio = {
figure: {
type: `img`,
image: myNotes,
alt: `two screenshots of the application`
alt: `two screenshots of the application`,
},
description: `A minimalist note organizer and editor powered by Markwon.`,
more: [
{
type: `a`,
href: `https://github.com/schmelczerandras/my-notes`,
text: `MyNotes on GitHub`
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.`
]
It was also my first experience with Android development.`,
],
},
{
date: `2018 October - November`,
@ -82,7 +82,7 @@ export const portfolio: Portfolio = {
figure: {
type: `img`,
image: processSimulator,
alt: `a screenshot of the simulator`
alt: `a screenshot of the simulator`,
},
description: `Dynamically calculating the temperatures and flow velocities
in a fluid based cooling system based on a simple model.`,
@ -91,8 +91,8 @@ export const portfolio: Portfolio = {
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.`
]
the communication between the layers. For drawing the frontend HTML5 canvas is utilized.`,
],
},
{
date: `2018 October - November`,
@ -100,15 +100,15 @@ export const portfolio: Portfolio = {
figure: {
type: `img`,
image: processSimulatorInput,
alt: `a picture of the simulator's UI`
alt: `a picture of the simulator's UI`,
},
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.`
]
directly uploaded to the simulation backend.`,
],
},
{
date: `2018 July - August`,
@ -116,7 +116,7 @@ export const portfolio: Portfolio = {
figure: {
type: `img`,
image: citySimulation,
alt: `a picture of a low-poly city`
alt: `a picture of a low-poly city`,
},
description: `Simulating a city where car crashes are more frequent than usual.`,
more: [
@ -129,8 +129,8 @@ export const portfolio: Portfolio = {
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.`
]
were also made by me using Blender.`,
],
},
{
date: `2018 June`,
@ -138,7 +138,7 @@ export const portfolio: Portfolio = {
figure: {
type: `img`,
image: color,
alt: `a picture of the app`
alt: `a picture of the app`,
},
description: `An innovative (at least I thought so) color grader web application.`,
more: [
@ -149,8 +149,8 @@ export const portfolio: Portfolio = {
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` }
]
{ type: `a`, href: `color`, text: `schmelczer.dev/color` },
],
},
{
date: `2017 autumn`,
@ -159,14 +159,14 @@ export const portfolio: Portfolio = {
figure: {
type: `img`,
image: platform,
alt: `a picture of the app`
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: [
`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.`
]
`I did this as a homework for my Basics of Programming course.`,
],
},
{
date: `2016 summer`,
@ -174,10 +174,10 @@ export const portfolio: Portfolio = {
figure: {
type: `img`,
image: photos,
alt: `a picture of the website`
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` }
link: { type: `a`, href: `photos`, text: `schmelczer.dev/photos` },
},
{
date: `2016 spring`,
@ -185,7 +185,7 @@ export const portfolio: Portfolio = {
figure: {
type: `img`,
image: led,
alt: `a picture from the video`
alt: `a picture from the video`,
},
description: `A full stack application with a built-in
music player which music controls the color of some RGB LED strips.`,
@ -196,9 +196,9 @@ export const portfolio: Portfolio = {
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" }
]
}
{ type: `video`, mp4: ledMP4, webm: ledWEBM, options: 'controls' },
],
},
],
footer: {
title: `Learn more`,
@ -206,6 +206,6 @@ export const portfolio: Portfolio = {
email: `schmelczerandras@gmail.com`,
cvName: `Curriculum vitae`,
lastEditName: `Last modified on `,
lastEdit: new Date(2020, 0, 2) // months are 0 indexed
}
lastEdit: new Date(2020, 0, 2), // months are 0 indexed
},
};

13
src/style/a.scss
View file

@ -1,5 +1,5 @@
@import "vars";
@import "mixins";
@import 'vars';
@import 'mixins';
a {
@include insignificant-font();
@ -13,14 +13,13 @@ a {
$border-shift: 10px;
transition: transform $long-transition-time;
$dot-size: 4px;
&:before {
content: "";
content: '';
display: block;
position: absolute;
width: 100%;
height: $dot-size;
height: $line-width;
bottom: 0;
z-index: 1;
background: linear-gradient(
@ -33,11 +32,11 @@ a {
}
&:after {
content: "";
content: '';
display: block;
width: calc(100% + #{$border-shift});
z-index: 0;
border-bottom: $dot-size dotted $accent-color;
border-bottom: $line-width dashed $accent-color;
transition: transform $long-transition-time;
}

10
src/style/mixins.scss
View file

@ -1,4 +1,4 @@
@import "vars";
@import 'vars';
@mixin center-children() {
display: flex;
@ -47,7 +47,7 @@
}
@mixin title-font() {
font: 400 3.5rem "Montserrat", serif;
font: 400 3.5rem 'Montserrat', serif;
font-style: normal;
line-height: 1;
@ -58,16 +58,16 @@
}
@mixin sub-title-font() {
font: 400 2rem "Montserrat", serif;
font: 400 2rem 'Montserrat', serif;
font-style: normal;
}
@mixin main-font() {
font: 400 1.25rem "Lato", sans-serif;
font: 400 1.25rem 'Lato', sans-serif;
line-height: 1.6;
}
@mixin insignificant-font() {
font: 400 1.1rem "Lato", sans-serif;
font: 400 1.1rem 'Lato', sans-serif;
font-style: italic;
}

6
src/style/vars.scss
View file

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

6
src/styles.scss
View file

@ -1,6 +1,6 @@
@import "style/vars";
@import "style/mixins";
@import "style/a";
@import 'style/vars';
@import 'style/mixins';
@import 'style/a';
* {
margin: 0;

143
webpack.config.js
View file

@ -1,157 +1,158 @@
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
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 path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
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 isProduction = process.env.NODE_ENV === "production";
const isProduction = process.env.NODE_ENV === 'production';
module.exports = {
watchOptions: {
ignored: /node_modules/
ignored: /node_modules/,
},
devServer: {
host: "0.0.0.0"
host: '0.0.0.0',
// disableHostCheck: true
},
optimization: {
minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})]
minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
xhtml: true,
minify: true,
template: "./src/index.html",
inlineSource: ".(js|css)$"
template: './src/index.html',
inlineSource: '.(js|css)$',
}),
new HtmlWebpackInlineSourcePlugin(),
new MiniCssExtractPlugin({
filename: "[name].[contenthash].css",
chunkFilename: "[id].[contenthash].css"
})
filename: '[name].[contenthash].css',
chunkFilename: '[id].[contenthash].css',
}),
],
entry: {
index: "./src/index.ts"
index: './src/index.ts',
},
module: {
rules: [
{
test: /\.(jpe?g|png)$/i,
loader: "responsive-loader",
loader: 'responsive-loader',
options: {
adapter: require("responsive-loader/sharp"),
outputPath: "static/",
adapter: require('responsive-loader/sharp'),
outputPath: 'static/',
sizes: [300, 600, 1200, 2000],
placeholder: false
}
placeholder: false,
},
},
{
test: /\.(webm|mp4)$/i,
use: [
{
loader: "file-loader",
loader: 'file-loader',
query: {
outputPath: "static/"
}
outputPath: 'static/',
},
},
{
loader: "image-webpack-loader",
loader: 'image-webpack-loader',
options: {
disable: !isProduction,
mozjpeg: {
progressive: true,
quality: 65
quality: 65,
},
optipng: {
enabled: true
enabled: true,
},
pngquant: {
quality: [0.65, 0.9],
speed: 4
speed: 4,
},
gifsicle: {
interlaced: false
interlaced: false,
},
webp: {
quality: 65
}
}
}
]
quality: 65,
},
},
},
],
},
{
test: /\.svg$/,
loader: "svg-url-loader",
loader: 'svg-url-loader',
options: {
limit: 10 * 1024,
noquotes: true
}
noquotes: true,
},
},
{
test: /\.(pdf)$/i,
use: {
loader: "file-loader",
loader: 'file-loader',
query: {
outputPath: "static/",
name: "[name].[ext]"
}
}
outputPath: 'static/',
name: '[name].[ext]',
},
},
},
{
test: /\.ico$/i,
use: {
loader: "file-loader",
loader: 'file-loader',
query: {
outputPath: "/",
name: "[name].[ext]"
}
}
outputPath: '/',
name: '[name].[ext]',
},
},
},
{
test: /\.scss$/i,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
"postcss-loader",
'css-loader',
'postcss-loader',
{
loader: "resolve-url-loader",
loader: 'resolve-url-loader',
options: {
keepQuery: true
}
keepQuery: true,
},
},
{
loader: "sass-loader",
loader: 'sass-loader',
options: {
sourceMap: true
}
}
]
sourceMap: true,
},
},
],
},
{
test: /\.(woff2?|ttf|eot|svg)(?:[?#].+)?$/,
use: {
loader: "file-loader",
loader: 'file-loader',
options: {
name: "[name].[ext]",
outputPath: "static/fonts/"
}
name: '[name].[ext]',
outputPath: 'static/fonts/',
},
},
include: /fonts/
include: /fonts/,
},
{
test: /\.ts$/,
use: "ts-loader",
exclude: /node_modules/
}
]
use: 'ts-loader',
exclude: /node_modules/,
},
],
},
resolve: {
extensions: [".ts", ".js"]
extensions: ['.ts', '.js'],
},
output: {
filename: "[name].[contenthash].js",
path: path.resolve(__dirname, "dist")
}
filename: '[name].[contenthash].js',
path: path.resolve(__dirname, 'dist'),
},
};