IVAN BURDA

Obviously, this project in my development portfolio is the site you are visiting right now. I built this site to replace my Wordpress blog and originally I built it shortly after I started learning web development seriously.

This project was first built in HTML and CSS. Later on when I learnt Saas and Javascript, I completely refactored the site and added some JS-based features such as overlay windows with details on individual projects. Also the mobile navigation is heavily relying on JS.

• Deployed with Netlify
• Responsive to all screen sizes
• Built with accessibility on mind

As my first API-based Javascript project I decided to build a currency convertor. To make it more exciting, I enhanced it with a visual comparison of relative currency powers which is displayed in addition to the exchange rate.

I used an API from Currencylayer.com, only to find out at the end the free version would not allow me to call it from an HTTPS origin when deployed online. I switched therefore exchangerate-api.com which solved this issue. The nice thing was my implementation was ready to consume the new API without code reworking.

The free API does not allow any currency-pair requests such as CZK-GBP, rather it provides only exchange rates to a default base currency(EUR, USD). This required that I had to abstract on the fly a conversion rate for any pair selected by the user.

In order to save traffic, I implemeted also cache, to request the new exchange rates from the server, only if the local-stored ones are older than 24 hours.

• Implemented local storage to save the latest selected currency pair
• Implemented caching to save API requests
• Uses console logging to show what is going on
• Fully screen-size responsive

Taking on this challenge of building a personal presentation for a pole dance artist and instructor, I knew I would give a push to my CSS skills. The goal was to build a visually attractive site, including several animations to convey the feeling of movement and dynamics.

It turned out in addition to CSS I learnt a lot of new Javascript too. I needed it to trigger animations based on an event such as the user's scrolling position.

I also implemented my first overlay gallery. Afterwards I extracted it for an easy re-use in my other projects.

In November 2017 I started to learn playing the guitar with Justin Guitar. Nearly right away I wondered whether there was an app that would allow me to practice chords in a random order. Unfortunately, I could not find one which would meet my needs.

In 2020, while learning web development, and thinking about an interesting project to build, I realised I could build on my own a tool which I had been looking for. I started working immediately and what you see here is the result of my work. I have already shared the Chord Coach with other students using the Justin Guitar website, collected feedback and introduced improvements.

This was a javascript-heavy project and while working on it I practiced what I have learnt so far and on top of that I further broadened my JS skills. The biggest challenge was managing button states to make sure they will always display the way they should depending on the application state. I wonder how frameworks will allow me to tackle this with more elegance in the future - compared to the plain JS which I used now.

Another challenge was making the countdown-alarm sound play on iOs devices where all browser sounds are muted by default. I did not give up and managed to find online a suggestion which worked! Like they say, Google is a developer's best friend. While implementing the countdown I also practised recursive functions, which finally showed me what they can be used for. I loved working on this project - it was a great development experience and the result is my own Chord Coach app which will help me and hopefully also other guitar students to practice chords in a more efficient and enjoyable way!

When I was done and happy with the app for practicing chord changes, I decided to create another, complementary app for training chord audio recognition. While doing this, I used a newly-learnt module pattern for organising structuring code. I used the module pattern for the Chord Spotting extension of my app, as well as for all code of the originally develope Chord-changing app. The module pattern allowed me to encapsulate functions and remove from the global scope any code that should not be there. While doing this I practised refactoring, which was valuable experience.

On top of this all, I redesigned the whole UI, so that it is more visually appealing. Now I am completely satisfied! Let's go and share it with others!

I wanted to build something useful with the publicly available API of the Wiener Linien in Vienna where I live. In order to know what is the next best connection to take in the morning and in the evening when going to work and back, I have decided to build a little app that would help me with this.

The API capabilities which are freely available are rather limited and searching for a connection from point A to point B is not supported. The API however, provides departure countdowns from any public transport stops. On the way to work and back I have to change trams once. My solution list next trams leaving from home/work and color-codes them based on expected waiting time for the mid-way connections. This helps me to reduce waiting times and feel more in charge of my commuting.

The goal of this project was to use: Open Data, Google Maps API, and create something that would be useful. I enjoy walking in the city of Vienna, so I have created a map that enables me to discover art in the public space.

Vienna offers data of art objects in public space, including their coordinants. In the first iteration of my project, I worked with a smaller data set containing just ornamental fountains. I mapped the data I needed to an array of new objects and displayed the individual fountains in the map. I also added a window with a description and a link to an external resource to find more information and an image. Afterwards I added a realtime geolocation of the user, so that it is always possible to navigate to the fountains by following the map.

As a second iteration of the project, I worked with a larger data set of more that 2000 objects, containing not only ornamental fountains but also other forms of art. Again, I mapped needed data to an array of new objects and displayed this data in the map, building on top of the first iteration.

However, displaying 2000+ markers in the map turned out to be difficult (performance, cluttered view), so I decided to display only items within 1km from the user's geolocation. To do this I needed to calculate a distance between two geographical points from their coordinates. I used Haversine formula, which I read about on Wikipedia, and got the script for the calculation at Stack Overflow. I at least made sure I understand what the script does and why. Showing only items within 1km proximity is not an issue because the user is not expected to go and visit art located more than 1km from their position. The app should rather help the user discover art in the nearest proximity and learn that way more about the city as a side-effect of moving around in everyday life.

Once done, I also included clustering of item markers, so that when the user zooms in/out the markers get grouped and the map easier to view.

The goal of this project was to visualise a person's life. Having the ability to see all days, one becomes more motivated to appreaciate every single of them. At the technical level the goal was to get more experience with creating a user flow, a registration/login form, input validations, working with the local storage, generating content dynamically based on user's input.

A user can create a new profile or login to an existing one. When creating a new profile, the provided answers are used to retrieve a user's life expectancy based on real-world static JSON data. Based on the user's life expectancy, the application visualises all days in a user's life - those that have elapsed and those that still remain. Each day can be clicked to add a note and customize its image. The user's 1st birthday and the last expected day come with a default image/note, yet these can be overwritten.

An already created profile can be re-visited. Instead of creating a new profile, the user can login with an existing one. If a creation is attempted for an existing name, a login is offered instead. Of course, all data is stored only locally, in the storage of user's browser. There is no real authentication in place.

It is also possible to login as an admin (username: admin, pass: winettou) to see a list of all existing profiles and login with any of them without a password.

The main challenge of this project was to generate all the years and days properly (different number of days in individual months, leap years, etc.). Also working with the local storage was a really good exercise. In addition to that I had to handle cases when a user outlives their expected age - in such a case I had to visualise the extra days and reflect this situation also in the general progress bar.

Once I learn node.js I plan to implement also the backend and REST API for this project.