Run lint

package.json

@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "start": "webpack serve --open --mode development",
-    "lint": "npx eslint --fix \"src/**/*.ts\" && npx prettier --write \"src/**/*\"",
+    "lint": "npx eslint --fix \"src/**/*.ts\" && npx prettier --write \"src/**/*.(ts|scss|json|html)\"",
     "build": "webpack --mode production"
   },
   "repository": {

src/index.ts

@@ -12,7 +12,7 @@ import './styles.scss';
 import { create } from './portfolio';
 
 const addSupportForTabNavigation = () =>
-  document.addEventListener('keydown', e => {
+  document.addEventListener('keydown', (e) => {
     if (e.key === ' ') {
       (document.activeElement as HTMLElement)?.click();
       e.preventDefault();

src/page/background/background.ts

@@ -77,7 +77,7 @@ export class PageBackground extends PageElement {
 
   private randomizeBlobs(topOffset: number, bottomOffset: number) {
     this.random.seed = 50;
-    this.blobs.forEach(b => {
+    this.blobs.forEach((b) => {
       const z = -Number.parseInt(b.style.zIndex);
       const [x, y] = this.randomXY(z, topOffset, bottomOffset);
       b.style.transform = `translate3D(${x}px, ${y}px, ${-z}px) rotate(-20deg)`;

src/page/basics/image/image.html.ts

@@ -18,9 +18,9 @@ export const generate = ({
 }): html => `
   ${
     container
-      ? `<div class="figure-container" style="padding-top:${(imageJpeg.height /
+      ? `<div class="figure-container" style="padding-top:${
-          imageJpeg.width) *
+          (imageJpeg.height / imageJpeg.width) * 100
-          100}%">`
+        }%">`
       : ''
   }
   <picture loading="lazy">

src/page/basics/image/image.ts

@@ -30,7 +30,7 @@ export class Image extends PageElement {
     return (
       image.images
         .slice(0, -1)
-        .map(d => `(max-width: ${d.width / Image.imageScreenRatio}px) ${d.width}px,`)
+        .map((d) => `(max-width: ${d.width / Image.imageScreenRatio}px) ${d.width}px,`)
         .join('\n') + `\n${last(image.images)!.width}px`
     );
   }

src/page/basics/preview/preview.ts

@@ -18,7 +18,7 @@ export class Preview extends PageElement {
   }
 
   public setParent(parent: PageElement) {
-    new IntersectionObserver(e => {
+    new IntersectionObserver((e) => {
       if (!e[0].isIntersecting) {
         this.unloadContent();
       }

src/page/basics/video/video.html.ts

@@ -12,9 +12,9 @@ export const generate = ({
   posterJpeg,
   invertButton,
 }: VideoParameters): html => `
-  <div class="figure-container video-container" style="padding-top:${(posterJpeg.height /
+  <div class="figure-container video-container" style="padding-top:${
-    posterJpeg.width) *
+    (posterJpeg.height / posterJpeg.width) * 100
-    100}%">
+  }%">
     <img image-viewer-ignore class="poster"/>
     <div class="loading">${loading}</div>
     <video playsinline preload="none">

src/page/body/body.ts

@@ -3,7 +3,7 @@ import { PageElement } from '../page-element';
 export class Body extends PageElement {
   constructor(...children: Array<PageElement>) {
     super(document.body, children);
-    children.forEach(c => this.attachElement(c));
+    children.forEach((c) => this.attachElement(c));
     this.setParent();
   }
 }

src/page/content/content.ts

@@ -6,7 +6,7 @@ import { PageElement } from '../page-element';
 export class PageContent extends PageElement {
   public constructor(content: Array<string>) {
     super(createElement(generate()));
-    content.map(t => {
+    content.map((t) => {
       const p = createElement(`<p>${t}</p>`);
       this.htmlRoot.appendChild(p);
     });

src/page/main/main.ts

@@ -5,6 +5,6 @@ import { createElement } from '../../helper/create-element';
 export class Main extends PageElement {
   constructor(...children: Array<PageElement>) {
     super(createElement(generate()), children);
-    children.forEach(c => this.attachElement(c));
+    children.forEach((c) => this.attachElement(c));
   }
 }

src/page/page-element.ts

@@ -6,7 +6,7 @@ export abstract class PageElement {
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   protected setParent(parent?: PageElement): void {
-    this.children.forEach(c => c.setParent(this));
+    this.children.forEach((c) => c.setParent(this));
   }
 
   protected query(query: string): HTMLElement {

src/page/timeline/timeline-element/timeline-element.ts

@@ -35,7 +35,7 @@ export class PageTimelineElement extends PageElement {
     this.query('.info-button').addEventListener('click', this.toggleOpen.bind(this));
     this.attachElementByReplacing('.figure', timelineElement.figure);
     this.query('.description').innerText = timelineElement.description;
-    timelineElement.links.forEach(l => this.attachElementAsChildOf('.buttons', l));
+    timelineElement.links.forEach((l) => this.attachElementAsChildOf('.buttons', l));
 
     this.isOpen = false;
   }

src/page/timeline/timeline.ts

@@ -17,7 +17,7 @@ export class PageTimeline extends PageElement {
     elements: Array<TimelineElementParameters>;
   }) {
     super(createElement(generate()));
-    elements.forEach(e =>
+    elements.forEach((e) =>
       this.attachElement(new PageTimelineElement(e, showMoreText, showLessText))
     );
   }