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';
 

src/page/background/background.ts

@@ -6,7 +6,7 @@ import { sum } from '../../helper/sum';
 import { PageElement } from '../page-element';
 import { generate } from './background.html';
 
-export class PageBackground extends PageElement {
+export class Background extends PageElement {
   private static readonly perspective = 5;
   private static readonly zMin = 6;
   private static readonly zMax = 50;
@@ -22,11 +22,11 @@ export class PageBackground extends PageElement {
 
     for (let i = 0; i < Math.max(30, window.innerWidth / 10); i++) {
       const blob = document.createElement('div');
-      const z = this.random.inInterval(PageBackground.zMin, PageBackground.zMax);
+      const z = this.random.inInterval(Background.zMin, Background.zMax);
       blob.style.zIndex = (-z).toFixed(0);
       blob.style.opacity = (
         1 -
-        (z - PageBackground.zMin) / (PageBackground.zMax - PageBackground.zMin)
+        (z - Background.zMin) / (Background.zMax - Background.zMin)
       ).toString();
       blob.style.height = `${this.random.inInterval(360, 740)}px`;
       this.blobs.push(blob);
@@ -85,36 +85,36 @@ export class PageBackground extends PageElement {
     height: number
   ): [number, number] {
     const farTop = -(
-      ((this.windowHeight / 2 - topOffset) / PageBackground.perspective) *
-        (PageBackground.zMax + PageBackground.perspective) -
+      ((this.windowHeight / 2 - topOffset) / Background.perspective) *
+        (Background.zMax + Background.perspective) -
       this.windowHeight / 2
     );
 
     const farBottom = Math.min(
-      ((this.windowHeight / 2 - bottomOffset) / PageBackground.perspective) *
-        (PageBackground.zMax + PageBackground.perspective) -
+      ((this.windowHeight / 2 - bottomOffset) / Background.perspective) *
+        (Background.zMax + Background.perspective) -
         this.windowHeight / 2 +
         this.contentHeight,
       this.contentHeight - height
     );
 
     const endXSpan =
-      ((this.windowWidth / PageBackground.perspective) *
-        (PageBackground.zMax + PageBackground.perspective)) /
+      ((this.windowWidth / Background.perspective) *
+        (Background.zMax + Background.perspective)) /
       2;
 
     return [
       this.random.inInterval(
-        mix(0, -(endXSpan - this.windowWidth / 2), z / PageBackground.zMax),
+        mix(0, -(endXSpan - this.windowWidth / 2), z / Background.zMax),
         mix(
           this.windowWidth,
           this.windowWidth + endXSpan - this.windowWidth / 2,
-          z / PageBackground.zMax
+          z / Background.zMax
         )
       ),
       this.random.inInterval(
-        mix(topOffset, farTop, z / PageBackground.zMax),
-        mix(this.contentHeight - bottomOffset, farBottom, z / PageBackground.zMax)
+        mix(topOffset, farTop, z / Background.zMax),
+        mix(this.contentHeight - bottomOffset, farBottom, z / Background.zMax)
       ),
     ];
   }

src/page/footer/footer.html.ts

@@ -13,7 +13,7 @@ export const Footer = ({
   links: Array<html>;
   lastEditText: string;
 }): html => `
-  <footer id="footer">
+  <footer id="contact">
     <h2>${title}</h2>
 
     <div class="links">

src/page/footer/footer.scss

@@ -1,6 +1,6 @@
 @use '../../style/mixins' as *;
 
-#footer {
+#contact {
   text-align: center;
   margin-top: var(--large-margin);
 

src/page/header/header.scss

@@ -50,7 +50,8 @@
     $img-size: 190px;
 
     width: var(--body-width);
-    margin: calc(#{var(--normal-margin)} + #{$img-size} * 1 / 3) auto 0 auto;
+    margin: calc(#{var(--normal-margin)} + #{$img-size} * 1 / 3) auto var(--large-margin)
+      auto;
     position: relative;
     border-radius: var(--border-radius);
 

src/page/header/header.ts

@@ -3,9 +3,9 @@ import { ResponsiveImage } from '../../types/responsive-image';
 import { Image } from '../image-viewer/image/image.html';
 import { PageElement } from '../page-element';
 import { generate } from './header.html';
-import { PageThemeSwitcher } from './theme-switcher/theme-switcher';
+import { ThemeSwitcher } from './theme-switcher/theme-switcher';
 
-export class PageHeader extends PageElement {
+export class Header extends PageElement {
   public constructor({
     name,
     image,
@@ -30,6 +30,6 @@ export class PageHeader extends PageElement {
         })
       )
     );
-    this.attachElement(new PageThemeSwitcher());
+    this.attachElement(new ThemeSwitcher());
   }
 }

src/page/header/theme-switcher/theme-switcher.ts

@@ -2,13 +2,13 @@ import { createElement } from '../../../helper/create-element';
 import { PageElement } from '../../page-element';
 import { generate } from './theme-switcher.html';
 
-export class PageThemeSwitcher extends PageElement {
+export class ThemeSwitcher extends PageElement {
   private static readonly localStorageKey = 'dark-mode';
 
   public constructor() {
     super(createElement(generate()));
 
-    const storedIsDark = PageThemeSwitcher.loadFromLocalStorage();
+    const storedIsDark = ThemeSwitcher.loadFromLocalStorage();
     const isDark = storedIsDark ?? isSystemLevelDarkModeEnabled();
 
     if (isDark) {
@@ -31,19 +31,16 @@ export class PageThemeSwitcher extends PageElement {
       turnOnLightMode();
     }
 
-    PageThemeSwitcher.saveToLocalStorage(isDark);
+    ThemeSwitcher.saveToLocalStorage(isDark);
   }
 
   private static saveToLocalStorage(darkModeEnabled: boolean) {
-    localStorage?.setItem(
-      PageThemeSwitcher.localStorageKey,
-      JSON.stringify(darkModeEnabled)
-    );
+    localStorage?.setItem(ThemeSwitcher.localStorageKey, JSON.stringify(darkModeEnabled));
   }
 
   private static loadFromLocalStorage(): boolean | null {
     try {
-      return JSON.parse(localStorage!.getItem(PageThemeSwitcher.localStorageKey)!);
+      return JSON.parse(localStorage!.getItem(ThemeSwitcher.localStorageKey)!);
     } catch {
       return null;
     }

src/page/image-viewer/image-viewer.html.ts

@@ -3,8 +3,8 @@ import { html } from '../../types/html';
 import './image-viewer.scss';
 
 export const generate = (): html => `
-  <section id="image-viewer">
+  <div id="image-viewer">
     <img height="0" width="0" image-viewer-ignore />
-    <div tabindex="2" id="cancel">${cancel}</div>
-  </section>
+    <button id="cancel">${cancel}</button>
+  </div>
 `;

src/page/image-viewer/image-viewer.scss

@@ -26,6 +26,8 @@
   }
 
   #cancel {
+    background: none;
+    border: none;
     @include image-button(var(--large-icon-size));
     @include square(calc(var(--large-icon-size) + var(--normal-margin) * 2));
     position: absolute;

src/page/image-viewer/image-viewer.ts

@@ -2,7 +2,7 @@ import { createElement } from '../../helper/create-element';
 import { PageElement } from '../page-element';
 import { generate } from './image-viewer.html';
 
-export class PageImageViewer extends PageElement {
+export class ImageViewer extends PageElement {
   public constructor() {
     super(createElement(generate()));
 

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

@@ -1,6 +1,6 @@
-import { html } from '../../../types/html';
-import { Preview } from '../../preview/preview';
-import { Video } from '../../video/video';
+import { html } from '../../types/html';
+import { Preview } from '../preview/preview';
+import { Video } from '../video/video';
 
 export interface TimelineElementParameters {
   date: string;

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

@@ -1,6 +1,6 @@
-import info from '../../../../static/icons/info.svg';
-import { titleToFragment } from '../../../helper/title-to-fragment';
-import { html } from '../../../types/html';
+import info from '../../../static/icons/info.svg';
+import { titleToFragment } from '../../helper/title-to-fragment';
+import { html } from '../../types/html';
 import { TimelineElementParameters } from './timeline-element-parameters';
 import './timeline-element.scss';
 
@@ -8,7 +8,7 @@ export const generate = (
   { date, title, description, more, links }: TimelineElementParameters,
   showMore: string
 ): html => `
-  <section id="${titleToFragment(title)}" class="timeline-element">
+  <article id="${titleToFragment(title)}" class="timeline-element">
     <div class="line-container">
       <div class="line"></div>
       <p class="date">${date}</p>
@@ -33,15 +33,16 @@ export const generate = (
 
         <div class="buttons">
         ${
-          more &&
-          `<div tabindex=0 class="info-button">
+          more
+            ? `<div tabindex=0 class="info-button">
               <div class="svg-container">${info}</div>
               <p>${showMore}</p>
             </div>`
+            : ''
         }
         ${links.join('')}
         </div>
       </div>
     </div>
-  </section>
+  </article>
 `;

src/page/timeline-element/timeline-element.scss

@@ -1,4 +1,4 @@
-@use '../../../style/mixins' as *;
+@use '../../style/mixins' as *;
 
 @mixin q-dependent-line-container($q) {
   .line {

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

@@ -1,9 +1,9 @@
-import { createElement } from '../../../helper/create-element';
-import { PageElement } from '../../page-element';
+import { createElement } from '../../helper/create-element';
+import { PageElement } from '../page-element';
 import { TimelineElementParameters } from './timeline-element-parameters';
 import { generate } from './timeline-element.html';
 
-export class PageTimelineElement extends PageElement {
+export class TimelineElement extends PageElement {
   private isOpen = false;
   private more: HTMLElement;
 

src/page/timeline/timeline.html.ts

@@ -1,6 +0,0 @@
-import { html } from '../../types/html';
-import './timeline.scss';
-
-export const generate = (): html => `
-  <div id="timeline"></div>
-`;

src/page/timeline/timeline.scss

@@ -1,7 +0,0 @@
-@use '../../style/mixins' as *;
-
-@include on-large-screen {
-  #timeline > :first-child {
-    margin-top: var(--large-margin);
-  }
-}

src/page/timeline/timeline.ts

@@ -1,22 +0,0 @@
-import { createElement } from '../../helper/create-element';
-import { PageElement } from '../page-element';
-import { PageTimelineElement } from './timeline-element/timeline-element';
-import { TimelineElementParameters } from './timeline-element/timeline-element-parameters';
-import { generate } from './timeline.html';
-
-export class PageTimeline extends PageElement {
-  public constructor({
-    elements,
-    showMoreText,
-    showLessText,
-  }: {
-    showMoreText: string;
-    showLessText: string;
-    elements: Array<TimelineElementParameters>;
-  }) {
-    super(createElement(generate()));
-    elements.forEach((e) =>
-      this.attachElement(new PageTimelineElement(e, showMoreText, showLessText))
-    );
-  }
-}