Reformat timeline elements
This commit is contained in:
parent
af45688029
commit
aab4cade5e
17 changed files with 201 additions and 336 deletions
|
|
@ -7,69 +7,62 @@ import { PageElement } from '../page/page-element';
|
|||
import { PageTimeline } from '../page/timeline/timeline';
|
||||
import cvEnglish from './media/cv-andras-schmelczer.pdf';
|
||||
import me from './media/me.jpg';
|
||||
import { adAstraTimelineElement } from './projects/ad-astra';
|
||||
import { citySimulationTimelineElement } from './projects/city-simulation';
|
||||
import { declaredTimelineElement } from './projects/declared';
|
||||
import { forexTimelineElement } from './projects/forex';
|
||||
import { greatAiTimelineElement } from './projects/great-ai';
|
||||
import { ledsTimelineElement } from './projects/leds';
|
||||
import { myNotesTimelineElement } from './projects/my-notes';
|
||||
import { nuclearTimelineElement } from './projects/nuclear';
|
||||
import { nuclearEditorTimelineElement } from './projects/nuclear-editor';
|
||||
import { photosTimelineElement } from './projects/photos';
|
||||
import { platformGameTimelineElement } from './projects/platform-game';
|
||||
import { sdf2dTimelineElement } from './projects/sdf2d';
|
||||
import { towersTimelineElement } from './projects/towers';
|
||||
import { adAstra } from './projects/ad-astra';
|
||||
import { citySimulation } from './projects/city-simulation';
|
||||
import { declared } from './projects/declared';
|
||||
import { forex } from './projects/forex';
|
||||
import { greatAi } from './projects/great-ai';
|
||||
import { leds } from './projects/leds';
|
||||
import { myNotes } from './projects/my-notes';
|
||||
import { nuclear } from './projects/nuclear';
|
||||
import { nuclearEditor } from './projects/nuclear-editor';
|
||||
import { photos } from './projects/photos';
|
||||
import { platformGame } from './projects/platform-game';
|
||||
import { sdf2d } from './projects/sdf2d';
|
||||
import { towers } from './projects/towers';
|
||||
import { CV, Email, GitHubLink, LinkedIn } from './shared';
|
||||
|
||||
export const createPortfolio = (): Array<PageElement> => [
|
||||
new Main(
|
||||
new PageBackground(1, 1),
|
||||
new PageHeader({
|
||||
name: `András Schmelczer`,
|
||||
name: 'András Schmelczer',
|
||||
image: me,
|
||||
imageAltText: `a picture of me`,
|
||||
imageAltText: 'a picture of me',
|
||||
about: [
|
||||
`
|
||||
With more than six years of professional experience and a degree in Computer Science, I can confidently tackle any challenge regardless of its complexity. My interests span diverse areas, making me able to architect vast and sophisticated systems with a clear understanding. I'm keen on designing distributed systems, especially when AI/ML is involved.
|
||||
`,
|
||||
`
|
||||
I'm excited to take my part in connecting people and providing them with AI/ML solutions along with the necessary computing capabilities which were unimaginable even a decade ago.
|
||||
`,
|
||||
`
|
||||
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.
|
||||
`,
|
||||
"With more than six years of professional experience and a degree in Computer Science, I can confidently tackle any challenge regardless of its complexity. My interests span diverse areas, making me able to architect vast and sophisticated systems with a clear understanding. I'm keen on designing distributed systems, especially when AI/ML is involved.",
|
||||
"I'm excited to take my part in connecting people and providing them with AI/ML solutions along with the necessary computing capabilities which were unimaginable even a decade ago.",
|
||||
' 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`,
|
||||
showMoreText: 'Show details',
|
||||
showLessText: 'Show less',
|
||||
elements: [
|
||||
greatAiTimelineElement,
|
||||
declaredTimelineElement,
|
||||
sdf2dTimelineElement,
|
||||
adAstraTimelineElement,
|
||||
forexTimelineElement,
|
||||
myNotesTimelineElement,
|
||||
towersTimelineElement,
|
||||
nuclearTimelineElement,
|
||||
nuclearEditorTimelineElement,
|
||||
citySimulationTimelineElement,
|
||||
platformGameTimelineElement,
|
||||
photosTimelineElement,
|
||||
ledsTimelineElement,
|
||||
greatAi,
|
||||
declared,
|
||||
sdf2d,
|
||||
adAstra,
|
||||
forex,
|
||||
myNotes,
|
||||
towers,
|
||||
nuclear,
|
||||
nuclearEditor,
|
||||
citySimulation,
|
||||
platformGame,
|
||||
photos,
|
||||
leds,
|
||||
],
|
||||
}),
|
||||
Footer({
|
||||
title: `Learn more`,
|
||||
title: 'Learn more',
|
||||
links: [
|
||||
CV(cvEnglish),
|
||||
GitHubLink('https://github.com/schmelczer'),
|
||||
LinkedIn('https://www.linkedin.com/in/andras-schmelczer'),
|
||||
Email('mailto:andras@schmelczer.dev'),
|
||||
],
|
||||
lastEditText: `Last modified on `,
|
||||
lastEditText: 'Last modified on ',
|
||||
})
|
||||
),
|
||||
new PageImageViewer(),
|
||||
|
|
|
|||
|
|
@ -1,40 +1,25 @@
|
|||
import { Video } from '../../page/basics/video/video';
|
||||
import { TimelineElementParameters } from '../../page/timeline/timeline-element/timeline-element-parameters';
|
||||
import adAstra from '../media/ad_astra.jpg';
|
||||
import { Video } from '../../page/video/video';
|
||||
import adAstraPoster from '../media/ad_astra.jpg';
|
||||
import adAstraMp4 from '../media/mp4/ad_astra.mp4';
|
||||
import adAstraWebM from '../media/webm/ad_astra.webm';
|
||||
import { GitHub } from '../shared';
|
||||
import { GitHub, videoPosterAltText } from '../shared';
|
||||
|
||||
export const adAstraTimelineElement: TimelineElementParameters = {
|
||||
title: `Gaming on an ATtiny85`,
|
||||
date: `2020 spring`,
|
||||
export const adAstra: TimelineElementParameters = {
|
||||
title: 'Gaming on an ATtiny85',
|
||||
date: '2020 spring',
|
||||
figure: new Video({
|
||||
poster: adAstra,
|
||||
poster: adAstraPoster,
|
||||
mp4: adAstraMp4,
|
||||
webm: adAstraWebM,
|
||||
altText: videoPosterAltText,
|
||||
}),
|
||||
description: `
|
||||
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.
|
||||
`,
|
||||
description:
|
||||
'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: [
|
||||
`
|
||||
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 optimised SIMD utilising low-level driver is used for rendering to the display.
|
||||
I think, the codebase is quite readable and at the same time also fast, with the maximum frame times
|
||||
being between 15 and 20 milliseconds at a clock speed of 8 MHz. That means, it runs quite stably at 50-60 FPS.
|
||||
`,
|
||||
`
|
||||
As for the hardware, it is quite 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.
|
||||
`,
|
||||
`
|
||||
There is also fault-tolerant persistent data storage utilising the built-in EEPROM.
|
||||
For creating sprites (which are also stored in EEPROM), I made a tool to convert PNG-s into C array definitions.
|
||||
This can also be found on GitHub along with the entire project.
|
||||
`,
|
||||
'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 optimised SIMD utilising low-level driver is used for rendering to the display. I think, the codebase is quite readable and at the same time also fast, with the maximum frame times being between 15 and 20 milliseconds at a clock speed of 8 MHz. That means, it runs quite stably at 50-60 FPS.',
|
||||
'As for the hardware, it is quite 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.',
|
||||
'There is also fault-tolerant persistent data storage utilising the built-in EEPROM. For creating sprites (which are also stored in EEPROM), I made a tool to convert PNG-s into C array definitions. This can also be found on GitHub along with the entire project.',
|
||||
],
|
||||
links: [GitHub('https://github.com/schmelczerandras/ad_astra')],
|
||||
links: [GitHub('https://github.com/schmelczer/ad_astra')],
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,37 +1,25 @@
|
|||
import { Video } from '../../page/basics/video/video';
|
||||
import { TimelineElementParameters } from '../../page/timeline/timeline-element/timeline-element-parameters';
|
||||
import { Video } from '../../page/video/video';
|
||||
import citySimulationMp4 from '../media/mp4/simulation.mp4';
|
||||
import citySimulationPoster from '../media/simulation.jpg';
|
||||
import citySimulationWebM from '../media/webm/simulation.webm';
|
||||
import { videoPosterAltText } from '../shared';
|
||||
|
||||
export const citySimulationTimelineElement: TimelineElementParameters = {
|
||||
title: `City simulation`,
|
||||
date: `2018 July - August`,
|
||||
export const citySimulation: TimelineElementParameters = {
|
||||
title: 'City simulation',
|
||||
date: '2018 July - August',
|
||||
figure: new Video({
|
||||
poster: citySimulationPoster,
|
||||
mp4: citySimulationMp4,
|
||||
webm: citySimulationWebM,
|
||||
altText: videoPosterAltText,
|
||||
}),
|
||||
description: `Simulating a city where car crashes are more frequent than usual.`,
|
||||
description: 'Simulating a city where car crashes are more frequent than usual.',
|
||||
more: [
|
||||
`
|
||||
The state of the traffic lights can be changed through a REST API.
|
||||
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.
|
||||
`,
|
||||
`
|
||||
This was created for a cybersecurity challenge. With the help of this program
|
||||
the contestants could instantly see the effect of their work.
|
||||
`,
|
||||
`
|
||||
The most interesting aspect of this project was building it in a server-client architecture.
|
||||
Every decision of the agents is calculated server-side. The real challenge was broadcasting
|
||||
these decisions in a fault-tolerant way using minimal bandwidth.
|
||||
`,
|
||||
`
|
||||
It is made with Unity using C# as the scripting language.
|
||||
The models and animations were also made by me using Blender.
|
||||
`,
|
||||
'The state of the traffic lights can be changed through a REST API. 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.',
|
||||
'This was created for a cybersecurity challenge. With the help of this program the contestants could instantly see the effect of their work.',
|
||||
'The most interesting aspect of this project was building it in a server-client architecture. Every decision of the agents is calculated server-side. The real challenge was broadcasting these decisions in a fault-tolerant way using minimal bandwidth.',
|
||||
'It is made with Unity using C# as the scripting language. The models and animations were also made by me using Blender.',
|
||||
],
|
||||
links: [],
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,31 +1,20 @@
|
|||
import { Image } from '../../page/basics/image/image.html';
|
||||
import { Image } from '../../page/image-viewer/image/image.html';
|
||||
import { TimelineElementParameters } from '../../page/timeline/timeline-element/timeline-element-parameters';
|
||||
import colour from '../media/color.jpg';
|
||||
import colorsPoster from '../media/color.jpg';
|
||||
|
||||
export const colorsTimelineElement: TimelineElementParameters = {
|
||||
title: `Photo colour grader`,
|
||||
date: `2018 June`,
|
||||
export const colors: TimelineElementParameters = {
|
||||
title: 'Photo colour grader',
|
||||
date: '2018 June',
|
||||
figure: Image({
|
||||
image: colour,
|
||||
alt: `a picture of the app`,
|
||||
image: colorsPoster,
|
||||
alt: 'a picture of the app',
|
||||
container: true,
|
||||
}),
|
||||
description: `An innovative (at least I thought so) colour grader web application.`,
|
||||
description: 'An innovative (at least I thought so) colour grader web application.',
|
||||
more: [
|
||||
`
|
||||
The most noteworthy feature of this application is the colour selector UI.
|
||||
This program is only intended as a proof-of-concept, I would have liked to
|
||||
experiment with some ideas and this was the outcome.
|
||||
`,
|
||||
`
|
||||
You can select some colours and then apply transformations to the other colours as a
|
||||
function of their distance to the selected colour.
|
||||
`,
|
||||
`
|
||||
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).
|
||||
`,
|
||||
'The most noteworthy feature of this application is the colour selector UI. This program is only intended as a proof-of-concept, I would have liked to experiment with some ideas and this was the outcome.',
|
||||
'You can select some colours and then apply transformations to the other colours as a function of their distance to the selected colour.',
|
||||
'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: [],
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,33 +1,26 @@
|
|||
import { Preview } from '../../page/basics/preview/preview';
|
||||
import { Preview } from '../../page/preview/preview';
|
||||
import { TimelineElementParameters } from '../../page/timeline/timeline-element/timeline-element-parameters';
|
||||
import declared from '../media/decla-red.png';
|
||||
import declaredPoster from '../media/decla-red.png';
|
||||
import bscThesis from '../media/sdf2d-andras-schmelczer.pdf';
|
||||
import { GitHub, Open, Thesis } from '../shared';
|
||||
|
||||
export const declaredTimelineElement: TimelineElementParameters = {
|
||||
title: `Multiplayer game`,
|
||||
date: `2020 autumn`,
|
||||
figure: new Preview(declared, 'https://decla.red', 'The website of the video game'),
|
||||
description: `
|
||||
Using SDF-2D (my ray tracing graphics library), I created a conquest-style multiplayer browser game.
|
||||
It even runs on mobiles.
|
||||
`,
|
||||
export const declared: TimelineElementParameters = {
|
||||
title: 'Multiplayer game',
|
||||
date: '2020 autumn',
|
||||
figure: new Preview(
|
||||
declaredPoster,
|
||||
'https://decla.red',
|
||||
'The website of the video game'
|
||||
),
|
||||
description:
|
||||
'Using SDF-2D (my ray tracing graphics library), I created a conquest-style multiplayer browser game. It even runs on mobiles.',
|
||||
more: [
|
||||
`
|
||||
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.
|
||||
`,
|
||||
`
|
||||
As for the communication, a server-client architecture is used. Messaging is provided by Socket.IO and
|
||||
a custom serialisation solution.
|
||||
`,
|
||||
`
|
||||
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.
|
||||
`,
|
||||
'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.',
|
||||
'As for the communication, a server-client architecture is used. Messaging is provided by Socket.IO and a custom serialisation solution.',
|
||||
'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: [
|
||||
GitHub('https://github.com/schmelczerandras/decla.red'),
|
||||
GitHub('https://github.com/schmelczer/decla.red'),
|
||||
Thesis(bscThesis),
|
||||
Open('https://decla.red'),
|
||||
],
|
||||
|
|
|
|||
|
|
@ -1,33 +1,25 @@
|
|||
import { Video } from '../../page/basics/video/video';
|
||||
import { TimelineElementParameters } from '../../page/timeline/timeline-element/timeline-element-parameters';
|
||||
import { Video } from '../../page/video/video';
|
||||
import forexPoster from '../media/forex.jpg';
|
||||
import forexMp4 from '../media/mp4/forex.mp4';
|
||||
import forexWebM from '../media/webm/forex.webm';
|
||||
import { videoPosterAltText } from '../shared';
|
||||
|
||||
export const forexTimelineElement: TimelineElementParameters = {
|
||||
title: `Predicting foreign exchange rates`,
|
||||
date: `2019 autumn`,
|
||||
export const forex: TimelineElementParameters = {
|
||||
title: 'Predicting foreign exchange rates',
|
||||
date: '2019 autumn',
|
||||
figure: new Video({
|
||||
poster: forexPoster,
|
||||
mp4: forexMp4,
|
||||
webm: forexWebM,
|
||||
invertButton: true,
|
||||
altText: videoPosterAltText,
|
||||
}),
|
||||
description: `
|
||||
From the animation, we can see that my implementation does a somewhat acceptable job at
|
||||
predicting (blue graph) the EUR/USD rates (green graph).
|
||||
`,
|
||||
description:
|
||||
'From the animation, we can see that my implementation does a somewhat acceptable job at predicting (blue graph) the EUR/USD rates (green graph).',
|
||||
more: [
|
||||
`
|
||||
In a nutshell, the algorithm (written in Python using NumPy, SciPy, and Flask)
|
||||
predicts 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 resulting values.
|
||||
`,
|
||||
`
|
||||
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.
|
||||
`,
|
||||
'In a nutshell, the algorithm (written in Python using NumPy, SciPy, and Flask) predicts 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 resulting values.',
|
||||
'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: [],
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,32 +1,24 @@
|
|||
import { Image } from '../../page/basics/image/image.html';
|
||||
import { Image } from '../../page/image-viewer/image/image.html';
|
||||
import { TimelineElementParameters } from '../../page/timeline/timeline-element/timeline-element-parameters';
|
||||
import mscThesis from '../media/great-ai-andras-schmelczer.pdf';
|
||||
import greatAi from '../media/great-ai.png';
|
||||
import greatAiPoster from '../media/great-ai.png';
|
||||
import { Open, PyPi, Thesis } from '../shared';
|
||||
|
||||
export const greatAiTimelineElement: TimelineElementParameters = {
|
||||
title: `GreatAI`,
|
||||
date: `2022`,
|
||||
export const greatAi: TimelineElementParameters = {
|
||||
title: 'GreatAI',
|
||||
date: '2022',
|
||||
figure: Image({
|
||||
image: greatAi,
|
||||
alt: `some example code using GreatAI`,
|
||||
image: greatAiPoster,
|
||||
alt: 'some example code using GreatAI',
|
||||
container: true,
|
||||
}),
|
||||
description: `
|
||||
I investigated an approach to increase the adoption rate of ML deployment libraries and hence the overall quality of deployed AI services in the industry. I did this by simultaneously focusing on providing robust, automated implementations of best practices and an accessible API. One of the outcomes of the research is the GreatAI framework.
|
||||
`,
|
||||
description:
|
||||
'I investigated an approach to increase the adoption rate of ML deployment libraries and hence the overall quality of deployed AI services in the industry. I did this by simultaneously focusing on providing robust, automated implementations of best practices and an accessible API. One of the outcomes of the research is the GreatAI framework.',
|
||||
more: [
|
||||
`
|
||||
Applying AI is becoming increasingly more accessible, but many case studies have shown that these applications are often deployed poorly. This may lead to suboptimal performance and the introduction of unintended biases.
|
||||
`,
|
||||
`
|
||||
The research presents 33 AI/ML deployment best practices, the difficulties of implementing them, and ways to overcome these challenges. These target the transition from prototype AI code into production-ready software. GreatAI helps implement these best practices through an accessible interface.`,
|
||||
`
|
||||
Feedback from professional data scientists and software engineers showed that ease of use and functionality are equally important in deciding to adopt deployment technologies, and the proposed framework was rated positively in both dimensions.
|
||||
`,
|
||||
`
|
||||
For more details, checkout the GitHub page or the paper.
|
||||
`,
|
||||
'Applying AI is becoming increasingly more accessible, but many case studies have shown that these applications are often deployed poorly. This may lead to suboptimal performance and the introduction of unintended biases.',
|
||||
'The research presents 33 AI/ML deployment best practices, the difficulties of implementing them, and ways to overcome these challenges. These target the transition from prototype AI code into production-ready software. GreatAI helps implement these best practices through an accessible interface.',
|
||||
'Feedback from professional data scientists and software engineers showed that ease of use and functionality are equally important in deciding to adopt deployment technologies, and the proposed framework was rated positively in both dimensions.',
|
||||
'For more details, checkout the GitHub page or the paper.',
|
||||
],
|
||||
links: [
|
||||
PyPi('https://pypi.org/project/great-ai/'),
|
||||
|
|
|
|||
|
|
@ -1,32 +1,24 @@
|
|||
import { Video } from '../../page/basics/video/video';
|
||||
import { TimelineElementParameters } from '../../page/timeline/timeline-element/timeline-element-parameters';
|
||||
import { Video } from '../../page/video/video';
|
||||
import ledPoster from '../media/led.jpg';
|
||||
import ledMp4 from '../media/mp4/led.mp4';
|
||||
import ledWebM from '../media/webm/led.webm';
|
||||
import { videoPosterAltText } from '../shared';
|
||||
|
||||
export const ledsTimelineElement: TimelineElementParameters = {
|
||||
title: `Lights synchronised to music`,
|
||||
date: `2016 spring`,
|
||||
export const leds: TimelineElementParameters = {
|
||||
title: 'Lights synchronised to music',
|
||||
date: '2016 spring',
|
||||
figure: new Video({
|
||||
poster: ledPoster,
|
||||
mp4: ledMp4,
|
||||
webm: ledWebM,
|
||||
altText: videoPosterAltText,
|
||||
}),
|
||||
description: `
|
||||
A full stack application with a built-in music player
|
||||
the output of which controls the colour of a couple of RGB LED strips.
|
||||
`,
|
||||
description:
|
||||
'A full stack application with a built-in music player the output of which controls the colour of a couple of RGB LED strips.',
|
||||
more: [
|
||||
`
|
||||
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.
|
||||
`,
|
||||
`
|
||||
The backend logic is written in Python, the FFT implementation 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.
|
||||
`,
|
||||
'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.',
|
||||
'The backend logic is written in Python, the FFT implementation 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: [],
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,27 +1,20 @@
|
|||
import { Image } from '../../page/basics/image/image.html';
|
||||
import { Image } from '../../page/image-viewer/image/image.html';
|
||||
import { TimelineElementParameters } from '../../page/timeline/timeline-element/timeline-element-parameters';
|
||||
import myNotes from '../media/my-notes.png';
|
||||
import myNotesPoster from '../media/my-notes.png';
|
||||
import { GitHub } from '../shared';
|
||||
|
||||
export const myNotesTimelineElement: TimelineElementParameters = {
|
||||
title: `My Notes`,
|
||||
date: `2019 November`,
|
||||
export const myNotes: TimelineElementParameters = {
|
||||
title: 'My Notes',
|
||||
date: '2019 November',
|
||||
figure: Image({
|
||||
image: myNotes,
|
||||
alt: `two screenshots of the application`,
|
||||
image: myNotesPoster,
|
||||
alt: 'two screenshots of the application',
|
||||
container: true,
|
||||
}),
|
||||
description: `A minimalist note organiser and editor powered by Markwon.`,
|
||||
description: 'A minimalist note organiser and editor powered by Markwon.',
|
||||
more: [
|
||||
`
|
||||
This is a basic android app for creating and filtering markdown notes
|
||||
(based on #hashtags). It was my first exposure to Android development.
|
||||
`,
|
||||
`
|
||||
All in all, it is not a tremendous engineering feat, but at least it's usable.
|
||||
The knowledge gained while working on it was the more significant outcome of this
|
||||
adventure.
|
||||
`,
|
||||
'This is a basic android app for creating and filtering markdown notes (based on #hashtags). It was my first exposure to Android development.',
|
||||
"All in all, it is not a tremendous engineering feat, but at least it's usable. The knowledge gained while working on it was the more significant outcome of this adventure.",
|
||||
],
|
||||
links: [GitHub('https://github.com/schmelczerandras/my-notes')],
|
||||
links: [GitHub('https://github.com/schmelczer/my-notes')],
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,27 +1,20 @@
|
|||
import { Image } from '../../page/basics/image/image.html';
|
||||
import { Image } from '../../page/image-viewer/image/image.html';
|
||||
import { TimelineElementParameters } from '../../page/timeline/timeline-element/timeline-element-parameters';
|
||||
import processSimulatorInput from '../media/process-simulator-input.jpg';
|
||||
import nuclearEditorPoster from '../media/process-simulator-input.jpg';
|
||||
|
||||
export const nuclearEditorTimelineElement: TimelineElementParameters = {
|
||||
title: `Graph editing application`,
|
||||
date: `2018 October - November`,
|
||||
export const nuclearEditor: TimelineElementParameters = {
|
||||
title: 'Graph editing application',
|
||||
date: '2018 October - November',
|
||||
figure: Image({
|
||||
image: processSimulatorInput,
|
||||
alt: `a picture of the simulator's UI`,
|
||||
image: nuclearEditorPoster,
|
||||
alt: "a picture of the simulator's UI",
|
||||
container: true,
|
||||
}),
|
||||
description: `
|
||||
An intuitive editor to create and edit input for the nuclear facility simulator.
|
||||
`,
|
||||
description:
|
||||
'An intuitive editor to create and edit input for the nuclear facility simulator.',
|
||||
more: [
|
||||
`
|
||||
Nodes can be moved with drag & drop gestures.
|
||||
Editing the parameters of elements can be done on the right panel.
|
||||
`,
|
||||
`
|
||||
The UI is built with JavaFX. The output can be exported as JSON or
|
||||
directly uploaded to the simulation backend.
|
||||
`,
|
||||
'Nodes can be moved with drag & drop gestures. Editing the parameters of elements can be done on the right panel.',
|
||||
'The UI is built with JavaFX. The output can be exported as JSON or directly uploaded to the simulation backend.',
|
||||
],
|
||||
links: [],
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,38 +1,21 @@
|
|||
import { Image } from '../../page/basics/image/image.html';
|
||||
import { Image } from '../../page/image-viewer/image/image.html';
|
||||
import { TimelineElementParameters } from '../../page/timeline/timeline-element/timeline-element-parameters';
|
||||
import processSimulator from '../media/process-simulator.jpg';
|
||||
import processSimulatorPoster from '../media/process-simulator.jpg';
|
||||
|
||||
export const nuclearTimelineElement: TimelineElementParameters = {
|
||||
title: `Simulating the cooling system of a nuclear facility`,
|
||||
date: `2018 October - November`,
|
||||
export const nuclear: TimelineElementParameters = {
|
||||
title: 'Simulating the cooling system of a nuclear facility',
|
||||
date: '2018 October - November',
|
||||
figure: Image({
|
||||
image: processSimulator,
|
||||
alt: `a screenshot of the simulator`,
|
||||
image: processSimulatorPoster,
|
||||
alt: 'a screenshot of the simulator',
|
||||
container: true,
|
||||
}),
|
||||
description: `
|
||||
The temperatures and flow velocities are dynamically calculated in a fluid-based
|
||||
cooling system based on a simple model.
|
||||
`,
|
||||
description:
|
||||
'The temperatures and flow velocities are dynamically calculated in a fluid-based cooling system based on a simple model.',
|
||||
more: [
|
||||
`
|
||||
A simulated system can contain reactors (heaters), coolers, pumps, heat exchangers,
|
||||
drains, sources, and of course, pipes. With this, simple yet believable configurations
|
||||
can be defined. The aim of the project was to create a cheaply calculated and
|
||||
(for layman) a convincingly looking simulation.
|
||||
`,
|
||||
`
|
||||
The algorithm takes advantages of graphs and matrices to get to a next time frame. First,
|
||||
water flows are distributed by traversing the graph of pipes. Then a matrix is populated
|
||||
with the relations of the nodes (based on the water flow between them).
|
||||
After considering the base temperatures and heaters, the matrix is solved resulting in the
|
||||
current temperature of each node. This can be iteratively continued.
|
||||
`,
|
||||
`
|
||||
Python is used for the backend along with Flask and NumPy. A REST API facilitates
|
||||
the communication between the layers. For rendering on the frontend, a HTML5 canvas
|
||||
is utilised.
|
||||
`,
|
||||
'A simulated system can contain reactors (heaters), coolers, pumps, heat exchangers, drains, sources, and of course, pipes. With this, simple yet believable configurations can be defined. The aim of the project was to create a cheaply calculated and (for layman) a convincingly looking simulation.',
|
||||
'The algorithm takes advantages of graphs and matrices to get to a next time frame. First, water flows are distributed by traversing the graph of pipes. Then a matrix is populated with the relations of the nodes (based on the water flow between them). After considering the base temperatures and heaters, the matrix is solved resulting in the current temperature of each node. This can be iteratively continued.',
|
||||
'Python is used for the backend along with Flask and NumPy. A REST API facilitates the communication between the layers. For rendering on the frontend, a HTML5 canvas is utilised.',
|
||||
],
|
||||
links: [],
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,27 +1,20 @@
|
|||
import { Image } from '../../page/basics/image/image.html';
|
||||
import { Image } from '../../page/image-viewer/image/image.html';
|
||||
import { TimelineElementParameters } from '../../page/timeline/timeline-element/timeline-element-parameters';
|
||||
import photos from '../media/photos.jpg';
|
||||
import photosPoster from '../media/photos.jpg';
|
||||
import { Open } from '../shared';
|
||||
|
||||
export const photosTimelineElement: TimelineElementParameters = {
|
||||
title: `Photos`,
|
||||
date: `2016 summer`,
|
||||
export const photos: TimelineElementParameters = {
|
||||
title: 'Photos',
|
||||
date: '2016 summer',
|
||||
figure: Image({
|
||||
image: photos,
|
||||
alt: `a picture of the website`,
|
||||
image: photosPoster,
|
||||
alt: 'a picture of the website',
|
||||
container: true,
|
||||
}),
|
||||
description: `A simple webpage where you can view my photos.`,
|
||||
description: 'A simple webpage where you can view my photos.',
|
||||
more: [
|
||||
`
|
||||
Taking time to appreciate the world around us fills me with joy. That's why I like
|
||||
to go on walks with a camera. I might not end up with great photos, nonetheless, I usually
|
||||
end up with some inspiration regarding my current or next project.
|
||||
`,
|
||||
`
|
||||
As for the webpage, a webpack script generates the site from the photos in a directory,
|
||||
automatic resizing to multiple quality settings is also part of the pipeline.
|
||||
`,
|
||||
"Taking time to appreciate the world around us fills me with joy. That's why I like to go on walks with a camera. I might not end up with great photos, nonetheless, I usually end up with some inspiration regarding my current or next project.",
|
||||
'As for the webpage, a webpack script generates the site from the photos in a directory, automatic resizing to multiple quality settings is also part of the pipeline.',
|
||||
],
|
||||
links: [Open('https://photo.schmelczer.dev')],
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,26 +1,24 @@
|
|||
import { Video } from '../../page/basics/video/video';
|
||||
import { TimelineElementParameters } from '../../page/timeline/timeline-element/timeline-element-parameters';
|
||||
import { Video } from '../../page/video/video';
|
||||
import platformMp4 from '../media/mp4/platform.mp4';
|
||||
import platformPoster from '../media/platform.png';
|
||||
import platformWebM from '../media/webm/platform.webm';
|
||||
import { videoPosterAltText } from '../shared';
|
||||
|
||||
export const platformGameTimelineElement: TimelineElementParameters = {
|
||||
title: `Platform game`,
|
||||
date: `2017 autumn`,
|
||||
export const platformGame: TimelineElementParameters = {
|
||||
title: 'Platform game',
|
||||
date: '2017 autumn',
|
||||
figure: new Video({
|
||||
poster: platformPoster,
|
||||
mp4: platformMp4,
|
||||
webm: platformWebM,
|
||||
altText: videoPosterAltText,
|
||||
}),
|
||||
description: `A 3D game written in C with the help of SDL 1.2 (I haven't heard of GPU programming at the time).`,
|
||||
description:
|
||||
"A 3D game written in C with the help of SDL 1.2 (I haven't heard of GPU programming at the time).",
|
||||
more: [
|
||||
`
|
||||
The maps are randomly generated and fully destroyable.
|
||||
The player is getting chased by flying enemies. Overall, I find it a really enjoyable game.
|
||||
`,
|
||||
`
|
||||
I did this as a homework for my Basics of Programming course.
|
||||
`,
|
||||
'The maps are randomly generated and fully destroyable. The player is getting chased by flying enemies. Overall, I find it a really enjoyable game.',
|
||||
'I did this as a homework for my Basics of Programming course.',
|
||||
],
|
||||
links: [],
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,35 +1,22 @@
|
|||
import { Preview } from '../../page/basics/preview/preview';
|
||||
import { Preview } from '../../page/preview/preview';
|
||||
import { TimelineElementParameters } from '../../page/timeline/timeline-element/timeline-element-parameters';
|
||||
import sdf2d from '../media/sdf2d.png';
|
||||
import sdf2dPoster from '../media/sdf2d.png';
|
||||
import { NPM, Open, Youtube } from '../shared';
|
||||
|
||||
export const sdf2dTimelineElement: TimelineElementParameters = {
|
||||
title: `2D ray tracing`,
|
||||
date: `2020 autumn`,
|
||||
export const sdf2d: TimelineElementParameters = {
|
||||
title: '2D ray tracing',
|
||||
date: '2020 autumn',
|
||||
figure: new Preview(
|
||||
sdf2d,
|
||||
sdf2dPoster,
|
||||
'https://sdf2d.schmelczer.dev',
|
||||
'A webpage showcasing the SDF-2D project.'
|
||||
),
|
||||
description: `
|
||||
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 extensible NPM package.
|
||||
`,
|
||||
description:
|
||||
'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 extensible NPM package.',
|
||||
more: [
|
||||
`
|
||||
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.
|
||||
`,
|
||||
`
|
||||
The 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
|
||||
mesmerising demo scenes.
|
||||
`,
|
||||
`
|
||||
Creating this library package is also covered in my thesis (available above).
|
||||
`,
|
||||
'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.',
|
||||
'The 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 mesmerising demo scenes.',
|
||||
'Creating this library package is also covered in my thesis (available above).',
|
||||
],
|
||||
links: [
|
||||
NPM('https://www.npmjs.com/package/sdf-2d'),
|
||||
|
|
|
|||
|
|
@ -1,31 +1,23 @@
|
|||
import { Image } from '../../page/basics/image/image.html';
|
||||
import { Image } from '../../page/image-viewer/image/image.html';
|
||||
import { TimelineElementParameters } from '../../page/timeline/timeline-element/timeline-element-parameters';
|
||||
import towers from '../media/towers.png';
|
||||
import towersPoster from '../media/towers.png';
|
||||
import { GitHub, Open } from '../shared';
|
||||
|
||||
export const towersTimelineElement: TimelineElementParameters = {
|
||||
title: `Towers tracking app`,
|
||||
date: `2019 August - September`,
|
||||
export const towers: TimelineElementParameters = {
|
||||
title: 'Towers tracking app',
|
||||
date: '2019 August - September',
|
||||
figure: Image({
|
||||
image: towers,
|
||||
alt: `a picture of the website`,
|
||||
image: towersPoster,
|
||||
alt: 'a picture of the website',
|
||||
container: true,
|
||||
}),
|
||||
description: `An aesthetic representation of your previous and current goals/tasks.`,
|
||||
description: 'An aesthetic representation of your previous and current goals/tasks.',
|
||||
more: [
|
||||
`
|
||||
This project served me with an opportunity to deepen my Angular knowledge. The most interesting aspect of it
|
||||
(apart from designing and implementing the pleasing visuals) was coming up with its data structure and persistence.
|
||||
Finally, I decided on using a trie. Its properties make it fairly simple to find the difference between the server stored
|
||||
and client stored versions and then only send this delta through the network. Also, its immutable nature helped with
|
||||
the code quality as well.
|
||||
`,
|
||||
`
|
||||
In hindsight, I would certainly add some finishing touches to it. For instance, dark mode, a tutorial, and PWA features.
|
||||
`,
|
||||
'This project served me with an opportunity to deepen my Angular knowledge. The most interesting aspect of it (apart from designing and implementing the pleasing visuals) was coming up with its data structure and persistence. Finally, I decided on using a trie. Its properties make it fairly simple to find the difference between the server stored and client stored versions and then only send this delta through the network. Also, its immutable nature helped with the code quality as well.',
|
||||
'In hindsight, I would certainly add some finishing touches to it. For instance, dark mode, a tutorial, and PWA features.',
|
||||
],
|
||||
links: [
|
||||
GitHub('https://github.com/schmelczerandras/life-towers/'),
|
||||
GitHub('https://github.com/schmelczer/life-towers/'),
|
||||
Open('https://towers.schmelczer.dev'),
|
||||
],
|
||||
};
|
||||
|
|
|
|||
|
|
@ -6,8 +6,8 @@ import openIcon from '../../static/icons/open.svg';
|
|||
import packageIcon from '../../static/icons/package.svg';
|
||||
import pythonIcon from '../../static/icons/python.svg';
|
||||
import youtubeIcon from '../../static/icons/youtube.svg';
|
||||
import { ImageAnchorFactory } from '../page/basics/image-anchor/image-anchor.html';
|
||||
import { ImageButtonFactory } from '../page/basics/image-button/image-button.html';
|
||||
import { ImageAnchorFactory } from '../page/image-anchor/image-anchor.html';
|
||||
import { ImageButtonFactory } from '../page/image-button/image-button.html';
|
||||
|
||||
export const GitHub = ImageButtonFactory(gitHubIcon, 'Open on GitHub');
|
||||
export const NPM = ImageButtonFactory(packageIcon, 'Open on npm');
|
||||
|
|
@ -22,3 +22,5 @@ export const CV = ImageAnchorFactory(cvIcon, 'Download my CV');
|
|||
export const GitHubLink = ImageAnchorFactory(gitHubIcon, 'Find me on GitHub');
|
||||
export const LinkedIn = ImageAnchorFactory(linkedInIcon, 'Find me on LinkedIn');
|
||||
export const Email = ImageAnchorFactory(emailIcon, 'andras@schmelczer.dev');
|
||||
|
||||
export const videoPosterAltText = 'thumbnail for the video';
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@ export const Image = ({
|
|||
/>
|
||||
</picture>
|
||||
</div>
|
||||
${container ? `</div>` : ''}
|
||||
${container ? '</div>' : ''}
|
||||
`;
|
||||
|
||||
const getSizes = (image: ResponsiveImage, imageScreenRatio: number): string =>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue