From 5592828c92d32433a82af767d64a826d0960053c Mon Sep 17 00:00:00 2001 From: schmelczerandras Date: Thu, 19 Nov 2020 19:46:41 +0100 Subject: [PATCH] Refactor portfolio --- .../about.html.ts => header/header.html.ts} | 2 +- .../{about/about.scss => header/header.scss} | 0 src/page/{about/about.ts => header/header.ts} | 2 +- src/page/theme-switcher/theme-switcher.scss | 18 +- src/portfolio.ts | 607 +++++++++--------- src/style/vars.scss | 2 +- src/types/portfolio.ts | 6 - 7 files changed, 309 insertions(+), 328 deletions(-) rename src/page/{about/about.html.ts => header/header.html.ts} (91%) rename src/page/{about/about.scss => header/header.scss} (100%) rename src/page/{about/about.ts => header/header.ts} (93%) diff --git a/src/page/about/about.html.ts b/src/page/header/header.html.ts similarity index 91% rename from src/page/about/about.html.ts rename to src/page/header/header.html.ts index e62031c..6f79006 100644 --- a/src/page/about/about.html.ts +++ b/src/page/header/header.html.ts @@ -1,4 +1,4 @@ -import './about.scss'; +import './header.scss'; import { Header } from '../../types/portfolio'; import { html } from '../../types/html'; diff --git a/src/page/about/about.scss b/src/page/header/header.scss similarity index 100% rename from src/page/about/about.scss rename to src/page/header/header.scss diff --git a/src/page/about/about.ts b/src/page/header/header.ts similarity index 93% rename from src/page/about/about.ts rename to src/page/header/header.ts index 89aa779..9b152d3 100644 --- a/src/page/about/about.ts +++ b/src/page/header/header.ts @@ -1,6 +1,6 @@ import { PageContent } from '../content/content'; import { Header } from '../../types/portfolio'; -import { generate } from './about.html'; +import { generate } from './header.html'; import { createElement } from '../../helper/create-element'; import { PageThemeSwitcher } from '../theme-switcher/theme-switcher'; import { PageElement } from '../page-element'; diff --git a/src/page/theme-switcher/theme-switcher.scss b/src/page/theme-switcher/theme-switcher.scss index 380dccc..8a6f97e 100644 --- a/src/page/theme-switcher/theme-switcher.scss +++ b/src/page/theme-switcher/theme-switcher.scss @@ -1,6 +1,6 @@ @use '../../style/mixins' as *; -input[type='checkbox']#theme-switcher { +#theme-switcher { @include on-large-screen { position: absolute; top: calc(-1 * var(--small-margin)); @@ -13,10 +13,6 @@ input[type='checkbox']#theme-switcher { margin-top: var(--normal-margin); } - &::-ms-check { - display: none; - } - background-color: var(--accent-color); cursor: pointer; -webkit-appearance: none; @@ -29,8 +25,7 @@ input[type='checkbox']#theme-switcher { $margin: calc((#{$size} - #{$icon-size}) / 2); border-radius: 1000px; - box-shadow: inset 0 0 10px 2px rgba(0, 0, 0, 0.175), - inset 0 0 1px rgba(0, 0, 0, 0.4); + box-shadow: inset 0 0 10px 2px rgba(0, 0, 0, 0.175), inset 0 0 1px rgba(0, 0, 0, 0.4); &:before { // moon + sun @@ -52,14 +47,12 @@ input[type='checkbox']#theme-switcher { top: 50%; transform: translateY(-50%); - transition: transform var(--transition-time), - background-color var(--transition-time); + transition: transform var(--transition-time), background-color var(--transition-time); } &:not(:checked) { &:before { - transform: translateY(-50%) - translateX(calc(3 * #{$margin} + #{$icon-size})); + transform: translateY(-50%) translateX(calc(3 * #{$margin} + #{$icon-size})); animation: shine 3s linear alternate infinite; background-color: var(--sun-color); @@ -90,8 +83,7 @@ input[type='checkbox']#theme-switcher { &:after { background-color: var(--accent-color); - transform: translateY(-50%) - translateX(calc(#{$margin} + #{$icon-size} * 0.33)); + transform: translateY(-50%) translateX(calc(#{$margin} + #{$icon-size} * 0.33)); } } } diff --git a/src/portfolio.ts b/src/portfolio.ts index c331d6b..9010ebb 100644 --- a/src/portfolio.ts +++ b/src/portfolio.ts @@ -2,7 +2,7 @@ import { PageFooter } from './page/footer/footer'; import { Video } from './page/basics/video/video'; import { Text } from './page/basics/text/text'; import { Image } from './page/basics/image/image'; -import { PageHeader } from './page/about/about'; +import { PageHeader } from './page/header/header'; import { PageTimeline } from './page/timeline/timeline'; import { PageImageViewer } from './page/image-viewer/image-viewer'; import { last } from './helper/last'; @@ -65,327 +65,322 @@ export const create = () => { const Open = ImageAnchorFactory(openIcon, 'Open in new tab'); const Thesis = ImageAnchorFactory(cvIcon, 'Download thesis'); - const page = { - imageViewer: new PageImageViewer(), - header: new PageHeader({ - name: `András Schmelczer`, - picture: new Image(meWebP, meJpeg, `a picture of me`, false), - about: [ - new Text(`I have always been fascinated by the engineering feats that surround us and pervade every aspect - of our lives. When I realised I might someday be able to contribute to this field, I knew that - this would become my life’s ambition. As I am finishing my last semester at the - Budapest University of Technology and Economics, I feel I am getting closer to it every day.`), - new Text(`Look at some of the more interesting projects I have worked on. They are all listed below. - Further information about me can be found at the bottom of the page.`), - ], - }), - timeline: new PageTimeline({ - showMoreText: `Show details`, - showLessText: `Show less`, - elements: [ - { - title: `Multiplayer game`, - date: `2020 Autumn`, - figure: new Preview( - declaredWebP, - declaredJpeg, - 'https://decla.red', - 'The website of the video game' - ), - description: new Text( - `Using SDF-2D, I developed a conquest-style multiplayer browser game. It even runs on mobiles.` - ), - more: [ - new Text(`The scene is set in space, two teams have to conquer small planets, while they can also shoot at the other team. - Points are given based on the number of planets controlled, - and the first team which reaches a predefined score wins.`), - new Text(`As for the communication, a server-client architecture is used. Messaging is provided by Socket.IO and a custom - serialisation solution.`), - new Text(`This (along with SDF-2D) was my BSc thesis project, so more in-depth information about them - can be found in my thesis linked below.`), - ], - links: [ - new GitHub('https://github.com/schmelczerandras/decla.red'), - new Thesis(thesis), - new Open('https://decla.red'), - ], - }, - { - title: `2D ray tracing`, - date: `2020 Autumn`, - figure: new Preview( - sdf2dWebP, - sdf2dJpeg, - 'https://sdf2d.schmelczer.dev', - 'A webpage showcasing the SDF-2D project.' - ), - description: new Text(`I created the SDF-2D library for efficiently rendering 2D scenes using ray tracing. - My solution relies on signed distance fields (SDF-s), it supports both WebGL and WebGL2, - and is an easily reusable and extendible NPM package.`), - more: [ - new Text(`A multitude of optimisations were needed to achieve real-time performance even on low-end mobile devices. - These include deferred shading, tile-based rendering, and dynamic shader generation to eliminate unnecessary - instructions. Additionally, there were some interesting quirks of specific hardware that also needed to be overcome.`), - new Text(`The end result is a reusable library written in TypeScript with a — subjectively — simple and elegant API. - For more information please check out the GitHub repository or the NPM package itself. Or simply enjoy the - mesmerizing demo scenes.`), - ], - links: [ - new GitHub('https://github.com/schmelczerandras/sdf-2d'), - new Open('https://sdf2d.schmelczer.dev'), - ], - }, - { - title: `Video game on an ATtiny85`, - date: `2020 Spring`, - figure: new Video( - last(adAstraPoster.images).path, - adAstraMp4, - adAstraWebM, - `controls playsinline preload="none"` - ), - description: new Text(`A simple game engine with a sample game set in space. The greatest challenge was to overcome - the very limited resources of the hardware, this was also the most rewarding part.`), - more: [ - new Text(`For reducing complexity while maintaining performance, a balance had to be found between object-oriented - and structural programming. For example, a simple prototype-based inheritance is used for the game objects. - Meanwhile, an optimized SIMD utilizing low-level driver is used for drawing on the display. - I think the codebase is quite readable and at the same time the - maximum frame times are between 15 ms and 20 ms at 8 MHz clock speed, which I find quite impressive.`), - new Text(`As for the hardware, it is rather simple. Aside from the ATtiny85V, a D096-12864-SPI7 display is used for - output and a TSOP4838 for input. The circuit runs on 3.3V, so a regulator is also needed. It uses a current - of 8mA to 11mA on full brightness and around 1.5mA on standby mode.`), - new Text( - `There is also fault-tolerant persistent data storage using the built-in EEPROM. - For creating sprites (which are also stored in EEPROM) I made a tool to convert PNG-s into C code. - This can also be found on GitHub as well as the entire project.` - ), - ], - links: [new GitHub('https://github.com/schmelczerandras/ad_astra')], - }, + const header = new PageHeader({ + name: `András Schmelczer`, + picture: new Image(meWebP, meJpeg, `a picture of me`, false), + about: [ + new Text(`I have always been fascinated by the engineering feats that surround us and pervade every aspect + of our lives. When I realised I might someday be able to contribute to this field, I knew that + this would become my life’s ambition. As I am finishing my last semester at the + Budapest University of Technology and Economics, I feel I am getting closer to it every day.`), + new Text(`Look at some of the more interesting projects I have worked on. They are all listed below. + Further information about me can be found at the bottom of the page.`), + ], + }); - { - title: `Predicting foreign exchange rates`, - date: `2019 Autumn`, - figure: new Video( - null, - forexMp4, - forexWebM, - `autoplay loop muted playsinline controls` + const timeline = new PageTimeline({ + showMoreText: `Show details`, + showLessText: `Show less`, + elements: [ + { + title: `Multiplayer game`, + date: `2020 Autumn`, + figure: new Preview( + declaredWebP, + declaredJpeg, + 'https://decla.red', + 'The website of the video game' + ), + description: new Text( + `Using SDF-2D, I developed a conquest-style multiplayer browser game. It even runs on mobiles.` + ), + more: [ + new Text(`The scene is set in space, two teams have to conquer small planets, while they can also shoot at the other team. + Points are given based on the number of planets controlled, + and the first team which reaches a predefined score wins.`), + new Text(`As for the communication, a server-client architecture is used. Messaging is provided by Socket.IO and a custom + serialisation solution.`), + new Text(`This (along with SDF-2D) was my BSc thesis project, so more in-depth information about them + can be found in my thesis linked below.`), + ], + links: [ + new GitHub('https://github.com/schmelczerandras/decla.red'), + new Thesis(thesis), + new Open('https://decla.red'), + ], + }, + { + title: `2D ray tracing`, + date: `2020 Autumn`, + figure: new Preview( + sdf2dWebP, + sdf2dJpeg, + 'https://sdf2d.schmelczer.dev', + 'A webpage showcasing the SDF-2D project.' + ), + description: new Text(`I created the SDF-2D library for efficiently rendering 2D scenes using ray tracing. + My solution relies on signed distance fields (SDF-s), it supports both WebGL and WebGL2, + and is an easily reusable and extendible NPM package.`), + more: [ + new Text(`A multitude of optimisations were needed to achieve real-time performance even on low-end mobile devices. + These include deferred shading, tile-based rendering, and dynamic shader generation to eliminate unnecessary + instructions. Additionally, there were some interesting quirks of specific hardware that also needed to be overcome.`), + new Text(`The end result is a reusable library written in TypeScript with a — subjectively — simple and elegant API. + For more information please check out the GitHub repository or the NPM package itself. Or simply enjoy the + mesmerizing demo scenes.`), + ], + links: [ + new GitHub('https://github.com/schmelczerandras/sdf-2d'), + new Open('https://sdf2d.schmelczer.dev'), + ], + }, + { + title: `Video game on an ATtiny85`, + date: `2020 Spring`, + figure: new Video( + last(adAstraPoster.images).path, + adAstraMp4, + adAstraWebM, + `controls playsinline preload="none"` + ), + description: new Text(`A simple game engine with a sample game set in space. The greatest challenge was to overcome + the very limited resources of the hardware, this was also the most rewarding part.`), + more: [ + new Text(`For reducing complexity while maintaining performance, a balance had to be found between object-oriented + and structural programming. For example, a simple prototype-based inheritance is used for the game objects. + Meanwhile, an optimized SIMD utilizing low-level driver is used for drawing on the display. + I think the codebase is quite readable and at the same time the + maximum frame times are between 15 ms and 20 ms at 8 MHz clock speed, which I find quite impressive.`), + new Text(`As for the hardware, it is rather simple. Aside from the ATtiny85V, a D096-12864-SPI7 display is used for + output and a TSOP4838 for input. The circuit runs on 3.3V, so a regulator is also needed. It uses a current + of 8mA to 11mA on full brightness and around 1.5mA on standby mode.`), + new Text( + `There is also fault-tolerant persistent data storage using the built-in EEPROM. + For creating sprites (which are also stored in EEPROM) I made a tool to convert PNG-s into C code. + This can also be found on GitHub as well as the entire project.` ), - description: new Text( - `From the animation we can see that my algorithm does a somewhat acceptable job at - predicting (blue graph) the EUR/USD rates (green graph).` + ], + links: [new GitHub('https://github.com/schmelczerandras/ad_astra')], + }, + + { + title: `Predicting foreign exchange rates`, + date: `2019 Autumn`, + figure: new Video( + null, + forexMp4, + forexWebM, + `autoplay loop muted playsinline controls` + ), + description: new Text( + `From the animation we can see that my algorithm does a somewhat acceptable job at + predicting (blue graph) the EUR/USD rates (green graph).` + ), + more: [ + new Text( + `In a nutshell, the algorithm (written with Python - NumPy, SciPy, Flask), + extrapolates in the frequency domain. The steps are the following: smoothing the input values, + differentiating, applying a short-time Fourier-transformation with overlapped (and Hanning-windowed) windows, + extrapolating and then applying the inverse of these transformations to the extrapolated values.` ), - more: [ - new Text( - `In a nutshell, the algorithm (written with Python - NumPy, SciPy, Flask), - extrapolates in the frequency domain. The steps are the following: smoothing the input values, - differentiating, applying a short-time Fourier-transformation with overlapped (and Hanning-windowed) windows, - extrapolating and then applying the inverse of these transformations to the extrapolated values.` - ), - new Text( - `Of course, there is still plenty of room for improvement, but even with this simple algorithm - a mostly profitable trading strategy is viable. In my free time I may put more work into it.` - ), - ], - links: [], - }, - { - date: `2019 November`, - title: `My Notes`, - figure: new Image( - myNotesWebP, - myNotesJpeg, - `two screenshots of the application` + new Text( + `Of course, there is still plenty of room for improvement, but even with this simple algorithm + a mostly profitable trading strategy is viable. In my free time I may put more work into it.` ), - description: new Text( - `A minimalist note organizer and editor powered by Markwon.` + ], + links: [], + }, + { + date: `2019 November`, + title: `My Notes`, + figure: new Image(myNotesWebP, myNotesJpeg, `two screenshots of the application`), + description: new Text( + `A minimalist note organizer and editor powered by Markwon.` + ), + more: [ + new Text( + `A basic android app for creating and filtering notes written in markdown.` ), - more: [ - new Text( - `A basic android app for creating and filtering notes written in markdown.` - ), - new Anchor( - `https://github.com/schmelczerandras/my-notes`, - `MyNotes on GitHub` - ), - new Text( - `It was my homework for BME's Android and web development course. - It was also my first experience with Android development.` - ), - ], - links: [], - }, - { - date: `2018 October - November`, - title: `Simulating the cooling system of a nuclear facility`, - figure: new Image( - processSimulatorWebP, - processSimulatorJpeg, - `a screenshot of the simulator` + new Anchor(`https://github.com/schmelczerandras/my-notes`, `MyNotes on GitHub`), + new Text( + `It was my homework for BME's Android and web development course. + It was also my first experience with Android development.` ), - description: new Text( - `Dynamically calculating the temperatures and flow velocities - in a fluid-based cooling system based on a simple model.` + ], + links: [], + }, + { + date: `2018 October - November`, + title: `Simulating the cooling system of a nuclear facility`, + figure: new Image( + processSimulatorWebP, + processSimulatorJpeg, + `a screenshot of the simulator` + ), + description: new Text( + `Dynamically calculating the temperatures and flow velocities + in a fluid-based cooling system based on a simple model.` + ), + more: [ + new Text( + `A simulated system can contain reactors (heaters / coolers), pumps, heat exchangers, + drains sources, and of course, pipes.` ), - more: [ - new Text( - `A simulated system can contain reactors (heaters / coolers), pumps, heat exchangers, - drains sources, and of course, pipes.` - ), - new Text( - `The algorithm takes advantages of graphs and matrices to get to a next time frame.` - ), - new Text( - `Python is used for the backend along with Flask and NumPy. A REST API facilitates - the communication between the layers. For drawing the frontend HTML5 canvas is utilized.` - ), - ], - links: [], - }, - { - date: `2018 October - November`, - title: `Graph editing application`, - figure: new Image( - processSimulatorInputWebP, - processSimulatorInputJpeg, - `a picture of the simulator's UI` + new Text( + `The algorithm takes advantages of graphs and matrices to get to a next time frame.` ), - description: new Text( - `An intuitive editor to create and edit input files for the nuclear facility simulator.` + new Text( + `Python is used for the backend along with Flask and NumPy. A REST API facilitates + the communication between the layers. For drawing the frontend HTML5 canvas is utilized.` ), - more: [ - new Text( - `Nodes can be moved with drag&drop gestures. Editing the parameters of elements - can be done on the right panel.` - ), - new Text( - `The UI is built with JavaFX. The output can be exported as JSON or - directly uploaded to the simulation backend.` - ), - ], - links: [], - }, - { - date: `2018 July - August`, - title: `City simulation`, - figure: new Image( - citySimulationWebP, - citySimulationJpeg, - `a picture of a low-poly city` + ], + links: [], + }, + { + date: `2018 October - November`, + title: `Graph editing application`, + figure: new Image( + processSimulatorInputWebP, + processSimulatorInputJpeg, + `a picture of the simulator's UI` + ), + description: new Text( + `An intuitive editor to create and edit input files for the nuclear facility simulator.` + ), + more: [ + new Text( + `Nodes can be moved with drag&drop gestures. Editing the parameters of elements + can be done on the right panel.` ), - description: new Text( - `Simulating a city where car crashes are more frequent than usual.` + new Text( + `The UI is built with JavaFX. The output can be exported as JSON or + directly uploaded to the simulation backend.` ), - more: [ - new Text( - `Through a REST API the state of the traffic lights can be changed. - The 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.` - ), - new Text( - `This was created for a Cybersecurity challenge. With the help of this program - the contestants could instantly see the effect of their work.` - ), - new Text( - `The most interesting aspect of this project was building it in a server-client architecture. - The decisions of the agents is calculated server-side. The real challenge was broadcasting - these decisions in a fault-tolerant way using minimal bandwidth.` - ), - new Text( - `The program is made with Unity using C# as the scripting language. The models and animations - were also made by me using Blender.` - ), - ], - links: [], - }, - { - date: `2018 June`, - title: `Photo colour grader`, - figure: new Image(colourWebP, colourJpeg, `a picture of the app`), - description: new Text( - `An innovative (at least I thought so) colour grader web application.` + ], + links: [], + }, + { + date: `2018 July - August`, + title: `City simulation`, + figure: new Image( + citySimulationWebP, + citySimulationJpeg, + `a picture of a low-poly city` + ), + description: new Text( + `Simulating a city where car crashes are more frequent than usual.` + ), + more: [ + new Text( + `Through a REST API the state of the traffic lights can be changed. + The 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.` ), - more: [ - new Text( - `The most noteworthy feature of this application is the colour selector UI. - This program is only intended as a proof-of-concept, I wanted to experiment with - some ideas and this was the outcome.` - ), - new Text( - `You can select some colours and then apply transformations to the other colours as a - function of their distance to the selected colour.` - ), - new Text( - `By clicking on a coloured circle you can change its settings. - New circles can be created by clicking in the large circle (and they can also be moved by drag & drop).` - ), - ], - links: [new Open('color.schmelczer.dev')], - }, - { - date: `2017 autumn`, - title: `Platform game`, - figure: new Image(platformWebP, platformJpeg, `a picture of the app`), - description: new Text( - `A 3D game written in C with the help of SDL 1.2 (I haven't heard of GPU programming at the time).` + new Text( + `This was created for a Cybersecurity challenge. With the help of this program + the contestants could instantly see the effect of their work.` ), - more: [ - new Text( - `The maps are randomly generated and fully destroyable. - The player is getting chased by flying enemies. Overall, I find it a really enjoyable game.` - ), - new Text(`I did this as a homework for my Basics of Programming course.`), - ], - links: [], - }, - { - date: `2016 summer`, - title: `Photos`, - figure: new Image(photosWebP, photosJpeg, `a picture of the website`), - description: new Text(`A simple web page where you can view my photos.`), - links: [new Open('https://photo.schmelczer.dev')], - }, - { - date: `2016 spring`, - title: `Lights synchronised to music`, - figure: new Video( - last(ledPoster.images).path, - ledMp4, - ledWebM, - `controls playsinline preload="none"` + new Text( + `The most interesting aspect of this project was building it in a server-client architecture. + The decisions of the agents is calculated server-side. The real challenge was broadcasting + these decisions in a fault-tolerant way using minimal bandwidth.` ), - description: new Text( - `A full stack application with a built-in - music player which music controls the colour of some RGB LED strips.` + new Text( + `The program is made with Unity using C# as the scripting language. The models and animations + were also made by me using Blender.` ), - more: [ - new Text( - `This was my first non-trivial project which got finished. Obviously, - it is rather far from perfect, but I am still proud that I was able to build it on my own.` - ), - new Text( - `The backend logic is written in Python the FFT is provided by NumPy. - A quite simple frontend for accessing the music player and changing - the settings also got built using vanilla web development technologies.` - ), - ], - links: [], - }, - ], - }), - footer: new PageFooter({ - title: `Learn more`, - curriculaVitae: [{ name: `Curriculum vitae`, url: cvEnglish }], - email: `andras@schmelczer.dev`, - lastEditText: `Last modified on `, - lastEdit: new Date(2020, 11 - 1, 17), // months are 0 indexed - }), - }; + ], + links: [], + }, + { + date: `2018 June`, + title: `Photo colour grader`, + figure: new Image(colourWebP, colourJpeg, `a picture of the app`), + description: new Text( + `An innovative (at least I thought so) colour grader web application.` + ), + more: [ + new Text( + `The most noteworthy feature of this application is the colour selector UI. + This program is only intended as a proof-of-concept, I wanted to experiment with + some ideas and this was the outcome.` + ), + new Text( + `You can select some colours and then apply transformations to the other colours as a + function of their distance to the selected colour.` + ), + new Text( + `By clicking on a coloured circle you can change its settings. + New circles can be created by clicking in the large circle (and they can also be moved by drag & drop).` + ), + ], + links: [new Open('color.schmelczer.dev')], + }, + { + date: `2017 autumn`, + title: `Platform game`, + figure: new Image(platformWebP, platformJpeg, `a picture of the app`), + description: new Text( + `A 3D game written in C with the help of SDL 1.2 (I haven't heard of GPU programming at the time).` + ), + more: [ + new Text( + `The maps are randomly generated and fully destroyable. + The player is getting chased by flying enemies. Overall, I find it a really enjoyable game.` + ), + new Text(`I did this as a homework for my Basics of Programming course.`), + ], + links: [], + }, + { + date: `2016 summer`, + title: `Photos`, + figure: new Image(photosWebP, photosJpeg, `a picture of the website`), + description: new Text(`A simple web page where you can view my photos.`), + links: [new Open('https://photo.schmelczer.dev')], + }, + { + date: `2016 spring`, + title: `Lights synchronised to music`, + figure: new Video( + last(ledPoster.images).path, + ledMp4, + ledWebM, + `controls playsinline preload="none"` + ), + description: new Text( + `A full stack application with a built-in + music player which music controls the colour of some RGB LED strips.` + ), + more: [ + new Text( + `This was my first non-trivial project which got finished. Obviously, + it is rather far from perfect, but I am still proud that I was able to build it on my own.` + ), + new Text( + `The backend logic is written in Python the FFT is provided by NumPy. + A quite simple frontend for accessing the music player and changing + the settings also got built using vanilla web development technologies.` + ), + ], + links: [], + }, + ], + }); + + const footer = new PageFooter({ + title: `Learn more`, + curriculaVitae: [{ name: `Curriculum vitae`, url: cvEnglish }], + email: `andras@schmelczer.dev`, + lastEditText: `Last modified on `, + lastEdit: new Date(2020, 11 - 1, 17), // months are 0 indexed + }); new Body(document.querySelector('main'), [ - ...Object.values(page), - new PageBackground(page.header, [page.timeline], page.footer), + new PageImageViewer(), + header, + timeline, + footer, + new PageBackground(header, [timeline], footer), ]); }; diff --git a/src/style/vars.scss b/src/style/vars.scss index 26c9aae..3d3f440 100644 --- a/src/style/vars.scss +++ b/src/style/vars.scss @@ -3,7 +3,7 @@ @use 'animations/animations' as *; :root { - --transition-time: 250ms; + --transition-time: 150ms; --line-width: 3px; --line-height: 18px; --accent-color: #b7455e; diff --git a/src/types/portfolio.ts b/src/types/portfolio.ts index 02508c5..fbc3e96 100644 --- a/src/types/portfolio.ts +++ b/src/types/portfolio.ts @@ -6,12 +6,6 @@ import { PageElement } from '../page/page-element'; import { url } from './url'; import { Preview } from '../page/basics/preview/preview'; -export interface Portfolio { - header: Header; - timeline: Timeline; - footer: Footer; -} - export interface Header { name: string; picture: Image;