Refactor portfolio
This commit is contained in:
schmelczerandras
parent
eda999107d
commit
5592828c92
7 changed files with 309 additions and 328 deletions
|
|
@ -1,4 +1,4 @@
|
|||
import './about.scss';
|
||||
import './header.scss';
|
||||
import { Header } from '../../types/portfolio';
|
||||
import { html } from '../../types/html';
|
||||
|
||||
|
|
@ -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';
|
||||
|
|
@ -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));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
607
src/portfolio.ts
607
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),
|
||||
]);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
@use 'animations/animations' as *;
|
||||
|
||||
:root {
|
||||
--transition-time: 250ms;
|
||||
--transition-time: 150ms;
|
||||
--line-width: 3px;
|
||||
--line-height: 18px;
|
||||
--accent-color: #b7455e;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue