Move files

src/data/projects/ad-astra.ts

@@ -0,0 +1,43 @@
+import adAstraWebP from '../media/ad_astra.jpg?format=webp';
+import adAstraJpeg from '../media/ad_astra.jpg?format=jpg';
+import adAstraMp4 from '../media/mp4/ad_astra.mp4';
+import adAstraWebM from '../media/webm/ad_astra.webm';
+
+import { GitHub } from '../shared';
+import { Video } from '../../page/basics/video/video';
+import { TimelineElementParameters } from '../../page/timeline/timeline-element/timeline-element';
+
+export const adAstraTimelineElement: TimelineElementParameters = {
+  title: `Gaming on an ATtiny85`,
+  date: `2020 spring`,
+  figure: new Video({
+    posterWebP: adAstraWebP,
+    posterJpeg: adAstraJpeg,
+    mp4: adAstraMp4,
+    webm: adAstraWebM,
+  }),
+  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.
+    `,
+  ],
+  links: [new GitHub('https://github.com/schmelczerandras/ad_astra')],
+};

src/data/projects/city-simulation.ts

@@ -0,0 +1,40 @@
+import citySimulationPosterWebP from '../media/simulation.jpg?format=webp';
+import citySimulationPosterJpeg from '../media/simulation.jpg?format=jpg';
+import citySimulationMp4 from '../media/mp4/simulation.mp4';
+import citySimulationWebM from '../media/webm/simulation.webm';
+
+import { Video } from '../../page/basics/video/video';
+import { TimelineElementParameters } from '../../page/timeline/timeline-element/timeline-element';
+
+export const citySimulationTimelineElement: TimelineElementParameters = {
+  title: `City simulation`,
+  date: `2018 July - August`,
+  figure: new Video({
+    posterWebP: citySimulationPosterWebP,
+    posterJpeg: citySimulationPosterJpeg,
+    mp4: citySimulationMp4,
+    webm: citySimulationWebM,
+  }),
+  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.
+    `,
+  ],
+  links: [],
+};

src/data/projects/colors.ts

@@ -0,0 +1,29 @@
+import colourJpeg from '../media/color.jpg?format=jpg';
+import colourWebP from '../media/color.jpg?format=webp';
+
+import { Image } from '../../page/basics/image/image';
+import { TimelineElementParameters } from '../../page/timeline/timeline-element/timeline-element';
+
+export const colorsTimelineElement: TimelineElementParameters = {
+  title: `Photo colour grader`,
+  date: `2018 June`,
+  figure: new Image(colourWebP, colourJpeg, `a picture of the app`),
+  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).
+    `,
+  ],
+  links: [],
+};

src/data/projects/declared.ts

@@ -0,0 +1,41 @@
+import declaredJpeg from '../media/decla-red.png?format=jpg';
+import declaredWebP from '../media/decla-red.png?format=webp';
+import thesis from '../media/thesis-andras-schmelczer.pdf';
+
+import { Preview } from '../../page/basics/preview/preview';
+import { GitHub, Thesis, Open } from '../shared';
+import { TimelineElementParameters } from '../../page/timeline/timeline-element/timeline-element';
+
+export const declaredTimelineElement: TimelineElementParameters = {
+  title: `Multiplayer game`,
+  date: `2020 autumn`,
+  figure: new Preview(
+    declaredWebP,
+    declaredJpeg,
+    '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.
+    `,
+  ],
+  links: [
+    new GitHub('https://github.com/schmelczerandras/decla.red'),
+    new Thesis(thesis),
+    new Open('https://decla.red'),
+  ],
+};

src/data/projects/forex.ts

@@ -0,0 +1,36 @@
+import forexPosterWebP from '../media/forex.jpg?format=webp';
+import forexPosterJpeg from '../media/forex.jpg?format=jpg';
+import forexMp4 from '../media/mp4/forex.mp4';
+import forexWebM from '../media/webm/forex.webm';
+
+import { Video } from '../../page/basics/video/video';
+import { TimelineElementParameters } from '../../page/timeline/timeline-element/timeline-element';
+
+export const forexTimelineElement: TimelineElementParameters = {
+  title: `Predicting foreign exchange rates`,
+  date: `2019 autumn`,
+  figure: new Video({
+    posterWebP: forexPosterWebP,
+    posterJpeg: forexPosterJpeg,
+    mp4: forexMp4,
+    webm: forexWebM,
+    invertButton: true,
+  }),
+  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.
+    `,
+  ],
+  links: [],
+};

src/data/projects/leds.ts

@@ -0,0 +1,35 @@
+import ledPosterWebP from '../media/led.jpg?format=webp';
+import ledPosterJpeg from '../media/led.jpg?format=jpg';
+import ledMp4 from '../media/mp4/led.mp4';
+import ledWebM from '../media/webm/led.webm';
+
+import { Video } from '../../page/basics/video/video';
+import { TimelineElementParameters } from '../../page/timeline/timeline-element/timeline-element';
+
+export const ledsTimelineElement: TimelineElementParameters = {
+  title: `Lights synchronised to music`,
+  date: `2016 spring`,
+  figure: new Video({
+    posterWebP: ledPosterWebP,
+    posterJpeg: ledPosterJpeg,
+    mp4: ledMp4,
+    webm: ledWebM,
+  }),
+  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.
+    `,
+  ],
+  links: [],
+};

src/data/projects/my-notes.ts

@@ -0,0 +1,25 @@
+import myNotesJpeg from '../media/my-notes.png?format=jpg';
+import myNotesWebP from '../media/my-notes.png?format=webp';
+
+import { Image } from '../../page/basics/image/image';
+import { GitHub } from '../shared';
+import { TimelineElementParameters } from '../../page/timeline/timeline-element/timeline-element';
+
+export const myNotesTimelineElement: TimelineElementParameters = {
+  title: `My Notes`,
+  date: `2019 November`,
+  figure: new Image(myNotesWebP, myNotesJpeg, `two screenshots of the application`),
+  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.
+    `,
+  ],
+  links: [new GitHub('https://github.com/schmelczerandras/my-notes')],
+};

src/data/projects/nuclear-editor.ts

@@ -0,0 +1,29 @@
+import processSimulatorInputJpeg from '../media/process-simulator-input.jpg?format=jpg';
+import processSimulatorInputWebP from '../media/process-simulator-input.jpg?format=webp';
+
+import { Image } from '../../page/basics/image/image';
+import { TimelineElementParameters } from '../../page/timeline/timeline-element/timeline-element';
+
+export const nuclearEditorTimelineElement: TimelineElementParameters = {
+  title: `Graph editing application`,
+  date: `2018 October - November`,
+  figure: new Image(
+    processSimulatorInputWebP,
+    processSimulatorInputJpeg,
+    `a picture of the simulator's UI`
+  ),
+  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.
+    `,
+  ],
+  links: [],
+};

src/data/projects/nuclear.ts

@@ -0,0 +1,40 @@
+import processSimulatorJpeg from '../media/process-simulator.jpg?format=jpg';
+import processSimulatorWebP from '../media/process-simulator.jpg?format=webp';
+
+import { Image } from '../../page/basics/image/image';
+import { TimelineElementParameters } from '../../page/timeline/timeline-element/timeline-element';
+
+export const nuclearTimelineElement: TimelineElementParameters = {
+  title: `Simulating the cooling system of a nuclear facility`,
+  date: `2018 October - November`,
+  figure: new Image(
+    processSimulatorWebP,
+    processSimulatorJpeg,
+    `a screenshot of the simulator`
+  ),
+  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.
+    `,
+  ],
+  links: [],
+};

src/data/projects/photos.ts

@@ -0,0 +1,25 @@
+import photosJpeg from '../media/photos.jpg?format=jpg';
+import photosWebP from '../media/photos.jpg?format=webp';
+
+import { Image } from '../../page/basics/image/image';
+import { Open } from '../shared';
+import { TimelineElementParameters } from '../../page/timeline/timeline-element/timeline-element';
+
+export const photosTimelineElement: TimelineElementParameters = {
+  title: `Photos`,
+  date: `2016 summer`,
+  figure: new Image(photosWebP, photosJpeg, `a picture of the website`),
+  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.
+    `,
+  ],
+  links: [new Open('https://photo.schmelczer.dev')],
+};

src/data/projects/platform-game.ts

@@ -0,0 +1,29 @@
+import platformPosterWebP from '../media/platform.png?format=webp';
+import platformPosterJpeg from '../media/platform.png?format=jpg';
+import platformMp4 from '../media/mp4/platform.mp4';
+import platformWebM from '../media/webm/platform.webm';
+
+import { Video } from '../../page/basics/video/video';
+import { TimelineElementParameters } from '../../page/timeline/timeline-element/timeline-element';
+
+export const platformGameTimelineElement: TimelineElementParameters = {
+  title: `Platform game`,
+  date: `2017 autumn`,
+  figure: new Video({
+    posterWebP: platformPosterWebP,
+    posterJpeg: platformPosterJpeg,
+    mp4: platformMp4,
+    webm: platformWebM,
+  }),
+  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.
+    `,
+  ],
+  links: [],
+};

src/data/projects/sdf2d.ts

@@ -0,0 +1,42 @@
+import sdf2dJpeg from '../media/sdf2d.png?format=jpg';
+import sdf2dWebP from '../media/sdf2d.png?format=webp';
+
+import { Preview } from '../../page/basics/preview/preview';
+import { Open, NPM, Youtube } from '../shared';
+import { TimelineElementParameters } from '../../page/timeline/timeline-element/timeline-element';
+
+export const sdf2dTimelineElement: TimelineElementParameters = {
+  title: `2D ray tracing`,
+  date: `2020 autumn`,
+  figure: new Preview(
+    sdf2dWebP,
+    sdf2dJpeg,
+    '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.
+  `,
+  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).
+    `,
+  ],
+  links: [
+    new NPM('https://www.npmjs.com/package/sdf-2d'),
+    new Youtube('https://www.youtube.com/watch?v=K3cEtnZUNR0'),
+    new Open('https://sdf2d.schmelczer.dev'),
+  ],
+};

src/data/projects/towers.ts

@@ -0,0 +1,29 @@
+import towersJpeg from '../media/towers.png?format=jpg';
+import towersWebP from '../media/towers.png?format=webp';
+
+import { Image } from '../../page/basics/image/image';
+import { Open, GitHub } from '../shared';
+import { TimelineElementParameters } from '../../page/timeline/timeline-element/timeline-element';
+
+export const towersTimelineElement: TimelineElementParameters = {
+  title: `Towers tracking app`,
+  date: `2019 August - September`,
+  figure: new Image(towersWebP, towersJpeg, `a picture of the website`),
+  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.
+    `,
+  ],
+  links: [
+    new GitHub('https://github.com/schmelczerandras/life-towers/'),
+    new Open('https://towers.schmelczer.dev'),
+  ],
+};