Improve build process and remove WebP support

src/data/portfolio.ts

@@ -7,7 +7,6 @@ import { Main } from '../page/main/main';
 import { PageElement } from '../page/page-element';
 import { PageTimeline } from '../page/timeline/timeline';
 import cvEnglish from './media/cv-andras-schmelczer.pdf';
-import meJpeg from './media/me.jpg?format=jpg';
 import meWebP from './media/me.jpg?format=webp';
 import { adAstraTimelineElement } from './projects/ad-astra';
 import { citySimulationTimelineElement } from './projects/city-simulation';
@@ -30,7 +29,6 @@ export const create = (): Array<PageElement> => [
       name: `András Schmelczer`,
       photo: Image({
         imageWebP: meWebP,
-        imageJpeg: meJpeg,
         alt: `a picture of me`,
       }),
       about: [

src/data/projects/ad-astra.ts

@@ -1,6 +1,5 @@
 import { Video } from '../../page/basics/video/video';
 import { TimelineElementParameters } from '../../page/timeline/timeline-element/timeline-element-parameters';
-import adAstraJpeg from '../media/ad_astra.jpg?format=jpg';
 import adAstraWebP from '../media/ad_astra.jpg?format=webp';
 import adAstraMp4 from '../media/mp4/ad_astra.mp4';
 import adAstraWebM from '../media/webm/ad_astra.webm';
@@ -11,7 +10,6 @@ export const adAstraTimelineElement: TimelineElementParameters = {
   date: `2020 spring`,
   figure: new Video({
     posterWebP: adAstraWebP,
-    posterJpeg: adAstraJpeg,
     mp4: adAstraMp4,
     webm: adAstraWebM,
   }),

src/data/projects/city-simulation.ts

@@ -1,7 +1,6 @@
 import { Video } from '../../page/basics/video/video';
 import { TimelineElementParameters } from '../../page/timeline/timeline-element/timeline-element-parameters';
 import citySimulationMp4 from '../media/mp4/simulation.mp4';
-import citySimulationPosterJpeg from '../media/simulation.jpg?format=jpg';
 import citySimulationPosterWebP from '../media/simulation.jpg?format=webp';
 import citySimulationWebM from '../media/webm/simulation.webm';
 
@@ -10,7 +9,6 @@ export const citySimulationTimelineElement: TimelineElementParameters = {
   date: `2018 July - August`,
   figure: new Video({
     posterWebP: citySimulationPosterWebP,
-    posterJpeg: citySimulationPosterJpeg,
     mp4: citySimulationMp4,
     webm: citySimulationWebM,
   }),

src/data/projects/colors.ts

@@ -1,6 +1,5 @@
 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';
 
 export const colorsTimelineElement: TimelineElementParameters = {
@@ -8,7 +7,6 @@ export const colorsTimelineElement: TimelineElementParameters = {
   date: `2018 June`,
   figure: Image({
     imageWebP: colourWebP,
-    imageJpeg: colourJpeg,
     alt: `a picture of the app`,
     container: true,
   }),

src/data/projects/declared.ts

@@ -1,6 +1,5 @@
 import { Preview } from '../../page/basics/preview/preview';
 import { TimelineElementParameters } from '../../page/timeline/timeline-element/timeline-element-parameters';
-import declaredJpeg from '../media/decla-red.png?format=jpg';
 import declaredWebP from '../media/decla-red.png?format=webp';
 import bscThesis from '../media/sdf2d-andras-schmelczer.pdf';
 import { GitHub, Open, Thesis } from '../shared';
@@ -8,12 +7,7 @@ import { GitHub, Open, Thesis } from '../shared';
 export const declaredTimelineElement: TimelineElementParameters = {
   title: `Multiplayer game`,
   date: `2020 autumn`,
-  figure: new Preview(
-    declaredWebP,
-    declaredJpeg,
-    'https://decla.red',
-    'The website of the video game'
-  ),
+  figure: new Preview(declaredWebP, 'https://decla.red', 'The website of the video game'),
   description: `
     Using SDF-2D (my ray tracing graphics library), I created a conquest-style multiplayer browser game. 
     It even runs on mobiles.

src/data/projects/forex.ts

@@ -1,6 +1,5 @@
 import { Video } from '../../page/basics/video/video';
 import { TimelineElementParameters } from '../../page/timeline/timeline-element/timeline-element-parameters';
-import forexPosterJpeg from '../media/forex.jpg?format=jpg';
 import forexPosterWebP from '../media/forex.jpg?format=webp';
 import forexMp4 from '../media/mp4/forex.mp4';
 import forexWebM from '../media/webm/forex.webm';
@@ -10,7 +9,6 @@ export const forexTimelineElement: TimelineElementParameters = {
   date: `2019 autumn`,
   figure: new Video({
     posterWebP: forexPosterWebP,
-    posterJpeg: forexPosterJpeg,
     mp4: forexMp4,
     webm: forexWebM,
     invertButton: true,

src/data/projects/great-ai.ts

@@ -1,7 +1,6 @@
 import { Image } from '../../page/basics/image/image.html';
 import { TimelineElementParameters } from '../../page/timeline/timeline-element/timeline-element-parameters';
 import mscThesis from '../media/great-ai-andras-schmelczer.pdf';
-import greatAiJpeg from '../media/great-ai.png?format=jpg';
 import greatAiWebP from '../media/great-ai.png?format=webp';
 import { Open, PyPi, Thesis } from '../shared';
 
@@ -10,7 +9,6 @@ export const greatAiTimelineElement: TimelineElementParameters = {
   date: `2022`,
   figure: Image({
     imageWebP: greatAiWebP,
-    imageJpeg: greatAiJpeg,
     alt: `some example code using GreatAI`,
     container: true,
   }),

src/data/projects/leds.ts

@@ -1,6 +1,5 @@
 import { Video } from '../../page/basics/video/video';
 import { TimelineElementParameters } from '../../page/timeline/timeline-element/timeline-element-parameters';
-import ledPosterJpeg from '../media/led.jpg?format=jpg';
 import ledPosterWebP from '../media/led.jpg?format=webp';
 import ledMp4 from '../media/mp4/led.mp4';
 import ledWebM from '../media/webm/led.webm';
@@ -10,7 +9,6 @@ export const ledsTimelineElement: TimelineElementParameters = {
   date: `2016 spring`,
   figure: new Video({
     posterWebP: ledPosterWebP,
-    posterJpeg: ledPosterJpeg,
     mp4: ledMp4,
     webm: ledWebM,
   }),

src/data/projects/my-notes.ts

@@ -1,6 +1,5 @@
 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';
 import { GitHub } from '../shared';
 
@@ -9,7 +8,6 @@ export const myNotesTimelineElement: TimelineElementParameters = {
   date: `2019 November`,
   figure: Image({
     imageWebP: myNotesWebP,
-    imageJpeg: myNotesJpeg,
     alt: `two screenshots of the application`,
     container: true,
   }),

src/data/projects/nuclear-editor.ts

@@ -1,6 +1,5 @@
 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';
 
 export const nuclearEditorTimelineElement: TimelineElementParameters = {
@@ -8,7 +7,6 @@ export const nuclearEditorTimelineElement: TimelineElementParameters = {
   date: `2018 October - November`,
   figure: Image({
     imageWebP: processSimulatorInputWebP,
-    imageJpeg: processSimulatorInputJpeg,
     alt: `a picture of the simulator's UI`,
     container: true,
   }),

src/data/projects/nuclear.ts

@@ -1,6 +1,5 @@
 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';
 
 export const nuclearTimelineElement: TimelineElementParameters = {
@@ -8,7 +7,6 @@ export const nuclearTimelineElement: TimelineElementParameters = {
   date: `2018 October - November`,
   figure: Image({
     imageWebP: processSimulatorWebP,
-    imageJpeg: processSimulatorJpeg,
     alt: `a screenshot of the simulator`,
     container: true,
   }),

src/data/projects/photos.ts

@@ -1,6 +1,5 @@
 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';
 import { Open } from '../shared';
 
@@ -9,7 +8,6 @@ export const photosTimelineElement: TimelineElementParameters = {
   date: `2016 summer`,
   figure: Image({
     imageWebP: photosWebP,
-    imageJpeg: photosJpeg,
     alt: `a picture of the website`,
     container: true,
   }),

src/data/projects/platform-game.ts

@@ -1,7 +1,6 @@
 import { Video } from '../../page/basics/video/video';
 import { TimelineElementParameters } from '../../page/timeline/timeline-element/timeline-element-parameters';
 import platformMp4 from '../media/mp4/platform.mp4';
-import platformPosterJpeg from '../media/platform.png?format=jpg';
 import platformPosterWebP from '../media/platform.png?format=webp';
 import platformWebM from '../media/webm/platform.webm';
 
@@ -10,7 +9,6 @@ export const platformGameTimelineElement: TimelineElementParameters = {
   date: `2017 autumn`,
   figure: new Video({
     posterWebP: platformPosterWebP,
-    posterJpeg: platformPosterJpeg,
     mp4: platformMp4,
     webm: platformWebM,
   }),

src/data/projects/sdf2d.ts

@@ -1,6 +1,5 @@
 import { Preview } from '../../page/basics/preview/preview';
 import { TimelineElementParameters } from '../../page/timeline/timeline-element/timeline-element-parameters';
-import sdf2dJpeg from '../media/sdf2d.png?format=jpg';
 import sdf2dWebP from '../media/sdf2d.png?format=webp';
 import { NPM, Open, Youtube } from '../shared';
 
@@ -9,7 +8,6 @@ export const sdf2dTimelineElement: TimelineElementParameters = {
   date: `2020 autumn`,
   figure: new Preview(
     sdf2dWebP,
-    sdf2dJpeg,
     'https://sdf2d.schmelczer.dev',
     'A webpage showcasing the SDF-2D project.'
   ),

src/data/projects/towers.ts

@@ -1,6 +1,5 @@
 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';
 import { GitHub, Open } from '../shared';
 
@@ -9,7 +8,6 @@ export const towersTimelineElement: TimelineElementParameters = {
   date: `2019 August - September`,
   figure: Image({
     imageWebP: towersWebP,
-    imageJpeg: towersJpeg,
     alt: `a picture of the website`,
     container: true,
   }),

src/page/basics/preview/preview.html.ts

@@ -8,16 +8,13 @@ import './preview.scss';
 export const generate = ({
   alt,
   posterWebP,
-  posterJpeg,
 }: {
   alt: string;
   posterWebP: ResponsiveImage;
-  posterJpeg: ResponsiveImage;
 }): html => `
   <div class="preview">
     ${Image({
       imageWebP: posterWebP,
-      imageJpeg: posterJpeg,
       alt,
       container: true,
       isIgnoredByImageViewer: true,

src/page/basics/preview/preview.ts

@@ -6,11 +6,10 @@ import { generate } from './preview.html';
 export class Preview extends PageElement {
   public constructor(
     posterWebP: ResponsiveImage,
-    posterJpeg: ResponsiveImage,
     private readonly url: string,
     alt: string
   ) {
-    super(createElement(generate({ posterWebP, posterJpeg, alt })));
+    super(createElement(generate({ posterWebP, alt })));
     this.url += '?portfolioView';
     this.query('.start-button').addEventListener('click', this.loadContent.bind(this));
   }

src/page/basics/video/video-parameters.ts

@@ -5,6 +5,5 @@ export interface VideoParameters {
   mp4: url;
   webm: url;
   posterWebP: ResponsiveImage;
-  posterJpeg: ResponsiveImage;
   invertButton?: boolean;
 }

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

@@ -9,15 +9,13 @@ export const generate = ({
   webm,
   mp4,
   posterWebP,
-  posterJpeg,
   invertButton,
 }: VideoParameters): html => `
   <div class="figure-container video-container" style="padding-top:${
-    (posterJpeg.height / posterJpeg.width) * 100
+    (posterWebP.height / posterWebP.width) * 100
   }%">
     ${Image({
       imageWebP: posterWebP,
-      imageJpeg: posterJpeg,
       alt: `thumbnail for the video`,
       isIgnoredByImageViewer: true,
     })}