Overview

Here you'll find a variety of different web dev projects that I've created over the years, from responsive pages to API-driven applications.

In my career and studies I've used the following technologies: React, JavaScript, HTML, CSS, Postman, RESTful APIs, Node.js, Express.js, MongoDB, Bootstrap, jQuery, and Angular.

Image Pixelation App

Make Any Image 8-bit

Degrade images of family members so they're unrecognisable!

In my 2D unity game I needed some pixel art and thought I'd create a little app that allows you to upload images and then pixelize them.

The user uploads an image into memory, then from there it's processed and displayed using the canvas. You can choose the pixel size, greyscale output, 8-bit colour palettes from classic home computers, output image size & width, and finally to download the image.

Created using HTML, CSS & JavaScript. You can see the full code over on GitHub.

Display Data App

Visualise Backend Data

Multiple ways of viewing your backend data

This React coding challenge was designed to test how many different ways you could visually display backend sales data.

The user can select dates using a calender, then further break down the sales data with the sorting by category drop down menu. Buttons provide a faster way to select by current day, month etc. The results are displayed as text, in a column graph and doughnut graph.

The page was created using React, react-chart.js, react-datepicker libraries.

Doom Armour Calculator

Efficient Calculations

What better way to encapsulate the famously fun 1993 3d game but in a 2d webpage? And maths.

For one of my VR projects I needed an efficient way to calculate the amount of hit points removed from both your health total, and if you have any, your armour total.

Points should be removed from the armour amount first, and then the health. So if you have 100 health, 20 Armour, and a hit point is worth 30, you should be left with 90 health and 0 armour. Does that make sense??

The page is responsive & was created using pure HTML, CSS & JavaScript. You can see the full code over on GitHub.

Weather App

API Connected weather App

Cirrusly, why look out the window when you can use a computer? Unless I've mist something?

Here we're grabbing the weather results from the user selected location. As well as returning the weather, we're also offering advice on the appropriate atire (which is responsive depending on the returned tempturature).

We're making use of the openweathermap.org API to return these results.

You can see the full code over on GitHub.

Audiogram

Audio Recording Social Media App

The audio-sharing social-network. The world definitly needs more social media!

In this app, user is limited to 10 seconds recording time and doesn't have the ability to delete their messages. It also features a secure log-in and the option to post replies on other users recordings.

Interestingly the app 'Clubhouse' was released a year after this, but allowed the user to record 30 second messages. It was valued at $100 million, sadly this app has yet to be valued at anything.

This was our final project as part of the Ironhack Berlin Web Dev course. It was built using the following;

React, Node.js, Express.js, MongoDB, Bootstrap, HTML & CSS

You can see the full code over on GitHub.

Pets Of Berlin App

Location Based Pet Breeding App

Hopefully you won't find this app to boar-ing...

Help your guinea pig to find new friends and breeding partners. This website was built as our second project for the Ironhack Berlin web development bootcamp.

Create a secure account and then tag your location and let other users see your animals details.

It primarily uses the Google Maps API and was built using Node.js, Express.js, MongoDB, jQuery, Bootstrap, HTML & CSS

You can see the full code over on GitHub.

To Do List

Angular TODO List App

This is a classic 'TODO' list app that was created using Angular and using the JSON placeholder API to gather the TODOs.

You can see the full code over on GitHub.

Brexit Game

Phaser Fun

The game you can't win!

Designed to be overly-complicated, you need to decide if the anti-EU headline is true or false by collecting a 'yes' or 'no' tick, all the while balancing public anger and gullibility by collecting pints of beer. Every correct guess spawns an English flag which if you accidentally collect will end the game ("Avoid Nationalism!").

This game was created using the Phaser library and Javascript for the first project of Ironhack Berlin.

You can see the code over on GitHub.