diff --git a/src/data/create-portfolio.ts b/src/data/create-portfolio.ts index 80f08ef..cece34e 100644 --- a/src/data/create-portfolio.ts +++ b/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 => [ 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 => [ ' 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 => [ lastEditText: 'Last modified on ', }) ), - new PageImageViewer(), + new ImageViewer(), ]; diff --git a/src/data/projects/ad-astra.ts b/src/data/projects/ad-astra.ts index d298f2a..4927c8f 100644 --- a/src/data/projects/ad-astra.ts +++ b/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'; diff --git a/src/data/projects/city-simulation.ts b/src/data/projects/city-simulation.ts index e1044d2..1556e82 100644 --- a/src/data/projects/city-simulation.ts +++ b/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'; diff --git a/src/data/projects/colors.ts b/src/data/projects/colors.ts index 1640dd2..2afb80f 100644 --- a/src/data/projects/colors.ts +++ b/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 = { diff --git a/src/data/projects/declared.ts b/src/data/projects/declared.ts index 412737a..6fe5d43 100644 --- a/src/data/projects/declared.ts +++ b/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'; diff --git a/src/data/projects/forex.ts b/src/data/projects/forex.ts index 2890a3f..47f7c35 100644 --- a/src/data/projects/forex.ts +++ b/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'; diff --git a/src/data/projects/great-ai.ts b/src/data/projects/great-ai.ts index 6599d42..bc0040a 100644 --- a/src/data/projects/great-ai.ts +++ b/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'; diff --git a/src/data/projects/leds.ts b/src/data/projects/leds.ts index ff9b0ba..4c873a0 100644 --- a/src/data/projects/leds.ts +++ b/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'; diff --git a/src/data/projects/my-notes.ts b/src/data/projects/my-notes.ts index e35b851..f6b3a28 100644 --- a/src/data/projects/my-notes.ts +++ b/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'; diff --git a/src/data/projects/nuclear-editor.ts b/src/data/projects/nuclear-editor.ts index b2d91ae..bdae4b5 100644 --- a/src/data/projects/nuclear-editor.ts +++ b/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 = { diff --git a/src/data/projects/nuclear.ts b/src/data/projects/nuclear.ts index 4db55f0..094cacb 100644 --- a/src/data/projects/nuclear.ts +++ b/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 = { diff --git a/src/data/projects/photos.ts b/src/data/projects/photos.ts index 638836c..d7a71d1 100644 --- a/src/data/projects/photos.ts +++ b/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'; diff --git a/src/data/projects/platform-game.ts b/src/data/projects/platform-game.ts index cd44d5e..7e38bbe 100644 --- a/src/data/projects/platform-game.ts +++ b/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'; diff --git a/src/data/projects/sdf2d.ts b/src/data/projects/sdf2d.ts index f4d1c16..27be862 100644 --- a/src/data/projects/sdf2d.ts +++ b/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'; diff --git a/src/data/projects/towers.ts b/src/data/projects/towers.ts index ae6ae45..ac51ec2 100644 --- a/src/data/projects/towers.ts +++ b/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'; diff --git a/src/page/background/background.ts b/src/page/background/background.ts index 064e12c..7271e5f 100644 --- a/src/page/background/background.ts +++ b/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) ), ]; } diff --git a/src/page/footer/footer.html.ts b/src/page/footer/footer.html.ts index 91b2549..fca8cde 100644 --- a/src/page/footer/footer.html.ts +++ b/src/page/footer/footer.html.ts @@ -13,7 +13,7 @@ export const Footer = ({ links: Array; lastEditText: string; }): html => ` -