Improve image handling & fix shadows

src/data/portfolio.ts

@@ -24,11 +24,13 @@ import { sdf2d } from './projects/sdf2d';
 import { towers } from './projects/towers';
 import { CV, Email, GitHubLink, LinkedIn } from './shared';
 
+const imageViewer = new ImageViewer();
 const main = new Main(
   new Header({
     name: 'András Schmelczer',
     image: me,
     imageAltText: 'a picture of me',
+    imageViewer,
     about: [
       'With more than six years of professional software engineering experience and a degree in Computer Science, I can confidently undertake any challenge. My interests span diverse areas, allowing me to design complex — even multidisciplinary — systems with a clear understanding.',
 
@@ -56,7 +58,7 @@ const main = new Main(
     platformGame,
     photos,
     leds,
-  ].map((p) => new TimelineElement(p, 'Show details', 'Show less')),
+  ].map((p) => new TimelineElement(p, 'Show details', 'Show less', imageViewer)),
 
   Contact({
     title: 'Get in touch',
@@ -72,6 +74,6 @@ const main = new Main(
 
 export const portfolio: Array<PageElement> = [
   main,
-  new ImageViewer(),
   new UpArrowButton(main, 'go up'),
+  imageViewer,
 ];

src/data/projects/ad-astra.ts

@@ -1,5 +1,5 @@
+import { Video } from '../../page/figure/video/video';
 import { TimelineElementParameters } from '../../page/timeline-element/timeline-element-parameters';
-import { Video } from '../../page/video/video';
 import adAstraPoster from '../media/ad_astra.jpg';
 import adAstraMp4 from '../media/mp4/ad_astra.mp4';
 import adAstraWebM from '../media/webm/ad_astra.webm';

src/data/projects/avoid.ts

@@ -1,4 +1,4 @@
-import { Preview } from '../../page/preview/preview';
+import { Preview } from '../../page/figure/preview/preview';
 import { TimelineElementParameters } from '../../page/timeline-element/timeline-element-parameters';
 import avoidPoster from '../media/avoid.png';
 import { Open } from '../shared';

src/data/projects/city-simulation.ts

@@ -1,5 +1,5 @@
+import { Video } from '../../page/figure/video/video';
 import { TimelineElementParameters } from '../../page/timeline-element/timeline-element-parameters';
-import { Video } from '../../page/video/video';
 import citySimulationMp4 from '../media/mp4/simulation.mp4';
 import citySimulationPoster from '../media/simulation.jpg';
 import citySimulationWebM from '../media/webm/simulation.webm';
@@ -16,7 +16,7 @@ export const citySimulation: TimelineElementParameters = {
   }),
   description: 'I simulated a city where car crashes are more frequent than usual.',
   more: [
-    'The state of the traffic lights can be changed through a REST API. 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 as the context for a cybersecurity challenge on PLCs. With the help of this program, the contestants could instantly see the effect of their work.',
+    'The state of the traffic lights can be changed through a REST API. 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 as the context for a cybersecurity challenge about PLCs. With the help of this program, the contestants could instantly see the effect of their work.',
 
     'An exciting aspect of the project was building it in a server-client architecture. Every decision of the agents is calculated server-side. The real challenge was broadcasting these decisions in a fault-tolerant way using minimal bandwidth.',
 

src/data/projects/colors.ts

@@ -1,14 +1,13 @@
-import { Image } from '../../page/image-viewer/image/image.html';
+import { BorderedImage } from '../../page/figure/bordered-image/bordered-image';
 import { TimelineElementParameters } from '../../page/timeline-element/timeline-element-parameters';
 import colorsPoster from '../media/color.jpg';
 
 export const colors: TimelineElementParameters = {
   title: 'Photo colour grader',
   date: '2018 June',
-  figure: Image({
+  figure: new BorderedImage({
     image: colorsPoster,
     alt: 'a picture of the app',
-    container: true,
   }),
   description: 'An innovative (at least I thought so) colour grader web application.',
   more: [

src/data/projects/declared.ts

@@ -1,4 +1,4 @@
-import { Preview } from '../../page/preview/preview';
+import { Preview } from '../../page/figure/preview/preview';
 import { TimelineElementParameters } from '../../page/timeline-element/timeline-element-parameters';
 import declaredPoster from '../media/decla-red.png';
 import bscThesis from '../media/sdf2d-andras-schmelczer.pdf';

src/data/projects/forex.ts

@@ -1,5 +1,5 @@
+import { Video } from '../../page/figure/video/video';
 import { TimelineElementParameters } from '../../page/timeline-element/timeline-element-parameters';
-import { Video } from '../../page/video/video';
 import forexPoster from '../media/forex.jpg';
 import forexMp4 from '../media/mp4/forex.mp4';
 import forexWebM from '../media/webm/forex.webm';

src/data/projects/great-ai.ts

@@ -1,4 +1,4 @@
-import { Image } from '../../page/image-viewer/image/image.html';
+import { BorderedImage } from '../../page/figure/bordered-image/bordered-image';
 import { TimelineElementParameters } from '../../page/timeline-element/timeline-element-parameters';
 import mscThesis from '../media/great-ai-andras-schmelczer.pdf';
 import greatAiPoster from '../media/great-ai.png';
@@ -7,10 +7,9 @@ import { Open, PyPi, Thesis } from '../shared';
 export const greatAi: TimelineElementParameters = {
   title: 'GreatAI — AI deployment framework',
   date: '2022',
-  figure: Image({
+  figure: new BorderedImage({
     image: greatAiPoster,
     alt: 'some example code using GreatAI',
-    container: true,
     isEagerLoaded: true,
   }),
   description:

src/data/projects/leds.ts

@@ -1,5 +1,5 @@
+import { Video } from '../../page/figure/video/video';
 import { TimelineElementParameters } from '../../page/timeline-element/timeline-element-parameters';
-import { Video } from '../../page/video/video';
 import ledPoster from '../media/led.jpg';
 import ledMp4 from '../media/mp4/led.mp4';
 import ledWebM from '../media/webm/led.webm';

src/data/projects/my-notes.ts

@@ -1,4 +1,4 @@
-import { Image } from '../../page/image-viewer/image/image.html';
+import { BorderedImage } from '../../page/figure/bordered-image/bordered-image';
 import { TimelineElementParameters } from '../../page/timeline-element/timeline-element-parameters';
 import myNotesPoster from '../media/my-notes.png';
 import { GitHub } from '../shared';
@@ -6,10 +6,9 @@ import { GitHub } from '../shared';
 export const myNotes: TimelineElementParameters = {
   title: 'My Notes — Android app',
   date: '2019 November',
-  figure: Image({
+  figure: new BorderedImage({
     image: myNotesPoster,
     alt: 'two screenshots of the application',
-    container: true,
   }),
   description: 'A minimalist Android note organiser and editor powered by Markwon.',
   more: [

src/data/projects/nuclear-editor.ts

@@ -1,14 +1,13 @@
-import { Image } from '../../page/image-viewer/image/image.html';
+import { BorderedImage } from '../../page/figure/bordered-image/bordered-image';
 import { TimelineElementParameters } from '../../page/timeline-element/timeline-element-parameters';
 import nuclearEditorPoster from '../media/process-simulator-input.jpg';
 
 export const nuclearEditor: TimelineElementParameters = {
   title: 'Graph editor — JavaFX',
   date: '2018 October - November',
-  figure: Image({
+  figure: new BorderedImage({
     image: nuclearEditorPoster,
     alt: "a picture of the simulator's UI",
-    container: true,
   }),
   description:
     'An intuitive editor to create and edit input for the nuclear facility simulator (see above).',

src/data/projects/nuclear.ts

@@ -1,14 +1,13 @@
-import { Image } from '../../page/image-viewer/image/image.html';
+import { BorderedImage } from '../../page/figure/bordered-image/bordered-image';
 import { TimelineElementParameters } from '../../page/timeline-element/timeline-element-parameters';
 import processSimulatorPoster from '../media/process-simulator.jpg';
 
 export const nuclear: TimelineElementParameters = {
   title: 'Simulating the cooling system of a nuclear facility',
   date: '2018 October - November',
-  figure: Image({
+  figure: new BorderedImage({
     image: processSimulatorPoster,
     alt: 'a screenshot of the simulator',
-    container: true,
   }),
   description:
     'The temperatures and flow volumes are dynamically calculated by two graph models on a remote server while multiple "monitoring" clients update in real-time.',

src/data/projects/photos.ts

@@ -1,4 +1,4 @@
-import { Image } from '../../page/image-viewer/image/image.html';
+import { BorderedImage } from '../../page/figure/bordered-image/bordered-image';
 import { TimelineElementParameters } from '../../page/timeline-element/timeline-element-parameters';
 import photosPoster from '../media/photos.jpg';
 import { Open } from '../shared';
@@ -6,10 +6,9 @@ import { Open } from '../shared';
 export const photos: TimelineElementParameters = {
   title: 'Photos',
   date: '2016 summer',
-  figure: Image({
+  figure: new BorderedImage({
     image: photosPoster,
     alt: 'a picture of the website',
-    container: true,
   }),
   description: 'A simple webpage where you can view my photos.',
   more: [

src/data/projects/platform-game.ts

@@ -1,5 +1,5 @@
+import { Video } from '../../page/figure/video/video';
 import { TimelineElementParameters } from '../../page/timeline-element/timeline-element-parameters';
-import { Video } from '../../page/video/video';
 import platformMp4 from '../media/mp4/platform.mp4';
 import platformPoster from '../media/platform.png';
 import platformWebM from '../media/webm/platform.webm';

src/data/projects/sdf2d.ts

@@ -1,4 +1,4 @@
-import { Preview } from '../../page/preview/preview';
+import { Preview } from '../../page/figure/preview/preview';
 import { TimelineElementParameters } from '../../page/timeline-element/timeline-element-parameters';
 import sdf2dPoster from '../media/sdf2d.png';
 import { NPM, Open, Youtube } from '../shared';

src/data/projects/towers.ts

@@ -1,4 +1,4 @@
-import { Image } from '../../page/image-viewer/image/image.html';
+import { BorderedImage } from '../../page/figure/bordered-image/bordered-image';
 import { TimelineElementParameters } from '../../page/timeline-element/timeline-element-parameters';
 import towersPoster from '../media/towers.png';
 import { GitHub, Open } from '../shared';
@@ -6,10 +6,9 @@ import { GitHub, Open } from '../shared';
 export const towers: TimelineElementParameters = {
   title: 'Multi-device life tracking',
   date: '2019 August - September',
-  figure: Image({
+  figure: new BorderedImage({
     image: towersPoster,
     alt: 'a picture of the website',
-    container: true,
   }),
   description: 'An aesthetic representation of your previous and current goals/tasks.',
   more: [