Refactor and minor fixes

src/data/portfolio.ts

@@ -1,6 +1,6 @@
 import { PageBackground } from '../page/background/background';
-import { Image } from '../page/basics/image/image';
-import { PageFooter } from '../page/footer/footer';
+import { Image } from '../page/basics/image/image.html';
+import { Footer } from '../page/footer/footer.html';
 import { PageHeader } from '../page/header/header';
 import { PageImageViewer } from '../page/image-viewer/image-viewer';
 import { Main } from '../page/main/main';
@@ -28,7 +28,11 @@ export const create = (): Array<PageElement> => [
     new PageBackground(1, 1),
     new PageHeader({
       name: `András Schmelczer`,
-      photo: new Image(meWebP, meJpeg, `a picture of me`, false),
+      photo: Image({
+        imageWebP: meWebP,
+        imageJpeg: meJpeg,
+        alt: `a picture of me`,
+      }),
       about: [
         `
             I have always been fascinated by the engineering feats that surround us and pervade every aspect
@@ -62,7 +66,7 @@ export const create = (): Array<PageElement> => [
         ledsTimelineElement,
       ],
     }),
-    new PageFooter({
+    Footer({
       title: `Learn more`,
       curriculaVitae: [{ name: `Curriculum vitae`, url: cvEnglish }],
       email: `andras@schmelczer.dev`,

src/data/projects/colors.ts

@@ -1,4 +1,4 @@
-import { Image } from '../../page/basics/image/image';
+import { Image } from '../../page/basics/image/image.html';
 import { TimelineElementParameters } from '../../page/timeline/timeline-element/timeline-element-parameters';
 import colourJpeg from '../media/color.jpg?format=jpg';
 import colourWebP from '../media/color.jpg?format=webp';
@@ -6,7 +6,12 @@ import colourWebP from '../media/color.jpg?format=webp';
 export const colorsTimelineElement: TimelineElementParameters = {
   title: `Photo colour grader`,
   date: `2018 June`,
-  figure: new Image(colourWebP, colourJpeg, `a picture of the app`),
+  figure: Image({
+    imageWebP: colourWebP,
+    imageJpeg: colourJpeg,
+    alt: `a picture of the app`,
+    container: true,
+  }),
   description: `An innovative (at least I thought so) colour grader web application.`,
   more: [
     `

src/data/projects/my-notes.ts

@@ -1,4 +1,4 @@
-import { Image } from '../../page/basics/image/image';
+import { Image } from '../../page/basics/image/image.html';
 import { TimelineElementParameters } from '../../page/timeline/timeline-element/timeline-element-parameters';
 import myNotesJpeg from '../media/my-notes.png?format=jpg';
 import myNotesWebP from '../media/my-notes.png?format=webp';
@@ -7,7 +7,12 @@ import { GitHub } from '../shared';
 export const myNotesTimelineElement: TimelineElementParameters = {
   title: `My Notes`,
   date: `2019 November`,
-  figure: new Image(myNotesWebP, myNotesJpeg, `two screenshots of the application`),
+  figure: Image({
+    imageWebP: myNotesWebP,
+    imageJpeg: myNotesJpeg,
+    alt: `two screenshots of the application`,
+    container: true,
+  }),
   description: `A minimalist note organiser and editor powered by Markwon.`,
   more: [
     `

src/data/projects/nuclear-editor.ts

@@ -1,4 +1,4 @@
-import { Image } from '../../page/basics/image/image';
+import { Image } from '../../page/basics/image/image.html';
 import { TimelineElementParameters } from '../../page/timeline/timeline-element/timeline-element-parameters';
 import processSimulatorInputJpeg from '../media/process-simulator-input.jpg?format=jpg';
 import processSimulatorInputWebP from '../media/process-simulator-input.jpg?format=webp';
@@ -6,11 +6,12 @@ import processSimulatorInputWebP from '../media/process-simulator-input.jpg?form
 export const nuclearEditorTimelineElement: TimelineElementParameters = {
   title: `Graph editing application`,
   date: `2018 October - November`,
-  figure: new Image(
-    processSimulatorInputWebP,
-    processSimulatorInputJpeg,
-    `a picture of the simulator's UI`
-  ),
+  figure: Image({
+    imageWebP: processSimulatorInputWebP,
+    imageJpeg: processSimulatorInputJpeg,
+    alt: `a picture of the simulator's UI`,
+    container: true,
+  }),
   description: `
     An intuitive editor to create and edit input for the nuclear facility simulator.
   `,

src/data/projects/nuclear.ts

@@ -1,4 +1,4 @@
-import { Image } from '../../page/basics/image/image';
+import { Image } from '../../page/basics/image/image.html';
 import { TimelineElementParameters } from '../../page/timeline/timeline-element/timeline-element-parameters';
 import processSimulatorJpeg from '../media/process-simulator.jpg?format=jpg';
 import processSimulatorWebP from '../media/process-simulator.jpg?format=webp';
@@ -6,11 +6,12 @@ import processSimulatorWebP from '../media/process-simulator.jpg?format=webp';
 export const nuclearTimelineElement: TimelineElementParameters = {
   title: `Simulating the cooling system of a nuclear facility`,
   date: `2018 October - November`,
-  figure: new Image(
-    processSimulatorWebP,
-    processSimulatorJpeg,
-    `a screenshot of the simulator`
-  ),
+  figure: Image({
+    imageWebP: processSimulatorWebP,
+    imageJpeg: processSimulatorJpeg,
+    alt: `a screenshot of the simulator`,
+    container: true,
+  }),
   description: `
     The temperatures and flow velocities are dynamically calculated in a fluid-based 
     cooling system based on a simple model.

src/data/projects/photos.ts

@@ -1,4 +1,4 @@
-import { Image } from '../../page/basics/image/image';
+import { Image } from '../../page/basics/image/image.html';
 import { TimelineElementParameters } from '../../page/timeline/timeline-element/timeline-element-parameters';
 import photosJpeg from '../media/photos.jpg?format=jpg';
 import photosWebP from '../media/photos.jpg?format=webp';
@@ -7,7 +7,12 @@ import { Open } from '../shared';
 export const photosTimelineElement: TimelineElementParameters = {
   title: `Photos`,
   date: `2016 summer`,
-  figure: new Image(photosWebP, photosJpeg, `a picture of the website`),
+  figure: Image({
+    imageWebP: photosWebP,
+    imageJpeg: photosJpeg,
+    alt: `a picture of the website`,
+    container: true,
+  }),
   description: `A simple webpage where you can view my photos.`,
   more: [
     `

src/data/projects/towers.ts

@@ -1,4 +1,4 @@
-import { Image } from '../../page/basics/image/image';
+import { Image } from '../../page/basics/image/image.html';
 import { TimelineElementParameters } from '../../page/timeline/timeline-element/timeline-element-parameters';
 import towersJpeg from '../media/towers.png?format=jpg';
 import towersWebP from '../media/towers.png?format=webp';
@@ -7,7 +7,12 @@ import { GitHub, Open } from '../shared';
 export const towersTimelineElement: TimelineElementParameters = {
   title: `Towers tracking app`,
   date: `2019 August - September`,
-  figure: new Image(towersWebP, towersJpeg, `a picture of the website`),
+  figure: Image({
+    imageWebP: towersWebP,
+    imageJpeg: towersJpeg,
+    alt: `a picture of the website`,
+    container: true,
+  }),
   description: `An aesthetic representation of your previous and current goals/tasks.`,
   more: [
     `

src/data/shared.ts

@@ -4,7 +4,7 @@ import openIcon from '../../static/icons/open.svg';
 import packageIcon from '../../static/icons/package.svg';
 import pythonIcon from '../../static/icons/python.svg';
 import youtubeIcon from '../../static/icons/youtube.svg';
-import { ImageAnchorFactory } from '../page/basics/image-anchor/image-anchor';
+import { ImageAnchorFactory } from '../page/basics/image-anchor/image-anchor.html';
 
 export const GitHub = ImageAnchorFactory(githubIcon, 'Open on GitHub');
 export const NPM = ImageAnchorFactory(packageIcon, 'Open on npm');