Simplify names & improve HTML semantics

src/data/create-portfolio.ts

@@ -1,10 +1,10 @@
-import { PageBackground } from '../page/background/background';
+import { Background } from '../page/background/background';
 import { Footer } from '../page/footer/footer.html';
-import { PageHeader } from '../page/header/header';
-import { PageImageViewer } from '../page/image-viewer/image-viewer';
+import { Header } from '../page/header/header';
+import { ImageViewer } from '../page/image-viewer/image-viewer';
 import { Main } from '../page/main/main';
 import { PageElement } from '../page/page-element';
-import { PageTimeline } from '../page/timeline/timeline';
+import { TimelineElement } from '../page/timeline-element/timeline-element';
 import cvEnglish from './media/cv-andras-schmelczer.pdf';
 import me from './media/me.jpg';
 import { adAstra } from './projects/ad-astra';
@@ -24,8 +24,8 @@ import { CV, Email, GitHubLink, LinkedIn } from './shared';
 
 export const createPortfolio = (): Array<PageElement> => [
   new Main(
-    new PageBackground(1, 1),
-    new PageHeader({
+    new Background(1, 1),
+    new Header({
       name: 'András Schmelczer',
       image: me,
       imageAltText: 'a picture of me',
@@ -35,25 +35,23 @@ export const createPortfolio = (): Array<PageElement> => [
         ' Discover some of my more interesting earlier projects. They are all listed below. Further information about me can be found at the bottom of the page.',
       ],
     }),
-    new PageTimeline({
-      showMoreText: 'Show details',
-      showLessText: 'Show less',
-      elements: [
-        greatAi,
-        declared,
-        sdf2d,
-        adAstra,
-        forex,
-        myNotes,
-        towers,
-        nuclear,
-        nuclearEditor,
-        citySimulation,
-        platformGame,
-        photos,
-        leds,
-      ],
-    }),
+
+    ...[
+      greatAi,
+      declared,
+      sdf2d,
+      adAstra,
+      forex,
+      myNotes,
+      towers,
+      nuclear,
+      nuclearEditor,
+      citySimulation,
+      platformGame,
+      photos,
+      leds,
+    ].map((p) => new TimelineElement(p, 'Show details', 'Show less')),
+
     Footer({
       title: 'Learn more',
       links: [
@@ -65,5 +63,5 @@ export const createPortfolio = (): Array<PageElement> => [
       lastEditText: 'Last modified on ',
     })
   ),
-  new PageImageViewer(),
+  new ImageViewer(),
 ];

src/data/projects/ad-astra.ts

@@ -1,4 +1,4 @@
-import { TimelineElementParameters } from '../../page/timeline/timeline-element/timeline-element-parameters';
+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';

src/data/projects/city-simulation.ts

@@ -1,4 +1,4 @@
-import { TimelineElementParameters } from '../../page/timeline/timeline-element/timeline-element-parameters';
+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';

src/data/projects/colors.ts

@@ -1,5 +1,5 @@
 import { Image } from '../../page/image-viewer/image/image.html';
-import { TimelineElementParameters } from '../../page/timeline/timeline-element/timeline-element-parameters';
+import { TimelineElementParameters } from '../../page/timeline-element/timeline-element-parameters';
 import colorsPoster from '../media/color.jpg';
 
 export const colors: TimelineElementParameters = {

src/data/projects/declared.ts

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

src/data/projects/forex.ts

@@ -1,4 +1,4 @@
-import { TimelineElementParameters } from '../../page/timeline/timeline-element/timeline-element-parameters';
+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';

src/data/projects/great-ai.ts

@@ -1,5 +1,5 @@
 import { Image } from '../../page/image-viewer/image/image.html';
-import { TimelineElementParameters } from '../../page/timeline/timeline-element/timeline-element-parameters';
+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';
 import { Open, PyPi, Thesis } from '../shared';

src/data/projects/leds.ts

@@ -1,4 +1,4 @@
-import { TimelineElementParameters } from '../../page/timeline/timeline-element/timeline-element-parameters';
+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';

src/data/projects/my-notes.ts

@@ -1,5 +1,5 @@
 import { Image } from '../../page/image-viewer/image/image.html';
-import { TimelineElementParameters } from '../../page/timeline/timeline-element/timeline-element-parameters';
+import { TimelineElementParameters } from '../../page/timeline-element/timeline-element-parameters';
 import myNotesPoster from '../media/my-notes.png';
 import { GitHub } from '../shared';
 

src/data/projects/nuclear-editor.ts

@@ -1,5 +1,5 @@
 import { Image } from '../../page/image-viewer/image/image.html';
-import { TimelineElementParameters } from '../../page/timeline/timeline-element/timeline-element-parameters';
+import { TimelineElementParameters } from '../../page/timeline-element/timeline-element-parameters';
 import nuclearEditorPoster from '../media/process-simulator-input.jpg';
 
 export const nuclearEditor: TimelineElementParameters = {

src/data/projects/nuclear.ts

@@ -1,5 +1,5 @@
 import { Image } from '../../page/image-viewer/image/image.html';
-import { TimelineElementParameters } from '../../page/timeline/timeline-element/timeline-element-parameters';
+import { TimelineElementParameters } from '../../page/timeline-element/timeline-element-parameters';
 import processSimulatorPoster from '../media/process-simulator.jpg';
 
 export const nuclear: TimelineElementParameters = {

src/data/projects/photos.ts

@@ -1,5 +1,5 @@
 import { Image } from '../../page/image-viewer/image/image.html';
-import { TimelineElementParameters } from '../../page/timeline/timeline-element/timeline-element-parameters';
+import { TimelineElementParameters } from '../../page/timeline-element/timeline-element-parameters';
 import photosPoster from '../media/photos.jpg';
 import { Open } from '../shared';
 

src/data/projects/platform-game.ts

@@ -1,4 +1,4 @@
-import { TimelineElementParameters } from '../../page/timeline/timeline-element/timeline-element-parameters';
+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';

src/data/projects/sdf2d.ts

@@ -1,5 +1,5 @@
 import { Preview } from '../../page/preview/preview';
-import { TimelineElementParameters } from '../../page/timeline/timeline-element/timeline-element-parameters';
+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,5 +1,5 @@
 import { Image } from '../../page/image-viewer/image/image.html';
-import { TimelineElementParameters } from '../../page/timeline/timeline-element/timeline-element-parameters';
+import { TimelineElementParameters } from '../../page/timeline-element/timeline-element-parameters';
 import towersPoster from '../media/towers.png';
 import { GitHub, Open } from '../shared';