diff --git a/src/data/media/avoid.png b/src/data/media/avoid.png new file mode 100644 index 0000000..2836c9d Binary files /dev/null and b/src/data/media/avoid.png differ diff --git a/src/data/portfolio.ts b/src/data/portfolio.ts index ad2197a..e64f4a9 100644 --- a/src/data/portfolio.ts +++ b/src/data/portfolio.ts @@ -10,6 +10,7 @@ import { UpArrowButton } from '../page/up-arrow-button/up-arrow-button'; import cvEnglish from './media/cv-andras-schmelczer.pdf'; import me from './media/me.jpg'; import { adAstra } from './projects/ad-astra'; +import { avoid } from './projects/avoid'; import { citySimulation } from './projects/city-simulation'; import { declared } from './projects/declared'; import { forex } from './projects/forex'; @@ -53,6 +54,7 @@ const main = new Main( nuclear, nuclearEditor, citySimulation, + avoid, platformGame, photos, leds, diff --git a/src/data/projects/avoid.ts b/src/data/projects/avoid.ts new file mode 100644 index 0000000..f2b8500 --- /dev/null +++ b/src/data/projects/avoid.ts @@ -0,0 +1,18 @@ +import { Preview } from '../../page/preview/preview'; +import { TimelineElementParameters } from '../../page/timeline-element/timeline-element-parameters'; +import avoidPoster from '../media/avoid.png'; +import { Open } from '../shared'; + +export const avoid: TimelineElementParameters = { + title: 'Avoid', + date: '2018 January', + figure: new Preview( + avoidPoster, + 'https://schmelczer.dev/avoid', + 'A webpage showcasing the SDF-2D project.' + ), + description: + "I recently found my first-ever web game. It's incredibly simple but I killed some time with it, so feel free to try it out but don't judge too harshly.", + + links: [Open('https://schmelczer.dev/avoid')], +}; diff --git a/src/page/timeline-element/timeline-element-parameters.ts b/src/page/timeline-element/timeline-element-parameters.ts index 6fcb0da..cb87abf 100644 --- a/src/page/timeline-element/timeline-element-parameters.ts +++ b/src/page/timeline-element/timeline-element-parameters.ts @@ -7,6 +7,6 @@ export interface TimelineElementParameters { figure: html | Video | Preview; title: string; description: string; - more: Array; + more?: Array; links: Array; } diff --git a/src/page/timeline-element/timeline-element.ts b/src/page/timeline-element/timeline-element.ts index fee5bb2..68ccbfb 100644 --- a/src/page/timeline-element/timeline-element.ts +++ b/src/page/timeline-element/timeline-element.ts @@ -5,7 +5,7 @@ import { generate } from './timeline-element.html'; export class TimelineElement extends PageElement { private isOpen = false; - private more: HTMLElement; + private readonly more?: HTMLElement; public constructor( private timelineElement: TimelineElementParameters, @@ -14,9 +14,12 @@ export class TimelineElement extends PageElement { ) { super(generate(timelineElement, showMore)); this.more = this.query('.more'); + addEventListener('resize', this.handleResize.bind(this)); - this.query('.info-button').addEventListener('click', this.toggleOpen.bind(this)); + if (this.more) { + this.query('.info-button').addEventListener('click', this.toggleOpen.bind(this)); + } this.attachElementByReplacing( '.figure', @@ -43,6 +46,10 @@ export class TimelineElement extends PageElement { } private openMore() { + if (!this.more) { + return; + } + this.isOpen = true; this.query('.info-button > p').innerText = this.showLess; @@ -52,6 +59,10 @@ export class TimelineElement extends PageElement { } private closeMore() { + if (!this.more) { + return; + } + this.isOpen = false; this.query('.info-button > p').innerText = this.showMore; @@ -60,6 +71,10 @@ export class TimelineElement extends PageElement { } private handleResize() { + if (!this.more) { + return; + } + if (this.isOpen) { this.more.style.height = 'auto'; setTimeout(this.openMore.bind(this), 100);