background image

Anthony Bonello

Full Stack Web Developer

This website is updated regularly.

Book a Flight

The following are some examples of web pages that I have developed

They are part of my web development portfolio:

Independent Music Professional

This webpage is my own site related to my music-related activities. It has brief information about the different activities I do. It also has a few examples of my compositions. It makes use of parallax effect background.

Technologies used

  • HTML
  • CSS
  • jQuery
  • Bootstrap
Github Repository
Deployment

Independent Music Professional

This is my website related to my music activities.

anthonybonello.co.uk

Flip the card for more detail.

Riddle Me This Game

The purpose of the game is to guess a word or phrase from a given picture similar to Pictionary. Three attempts are allowed. With each subsequent attempt, further clues will be shown at the expense of reduced points. Once you log in you'll be taken to your user page where you can see a list of games you played and the points gained. A Hall of Fame keeps track of the best 10 results obtained for a single game and another for total points gained by users over all the games they played.

Technologies used
HTML CSS jQuery Bootstrap
p5.js Python Flask flask_mail
Jinja JSON OOP unit testing
Github Repository Deployment on Heroku

Riddle Me This Game

This is a pictionary like game.

riddle me this game

Flip the card for more detail.

Nutrition Value App

This web app allows you to explore the nutritional value of various food items. The user can filter by using the interactive d3.js graphs. All CRUD functionality is available for the data which is held in a MongoDB database.
More information available in the About page and in the README.md which can be found in the git repository.

Technologies used
HTML CSS jQuery Bootstrap
d3.js crossfilter dc.js Python
Flask flask_mail flask_pymongo
Jinja MongoDB unit testing
Github Repository Deployment on Heroku

Nutrition Value App

This web app keeps tab of the nutritional value of the food I eat.

Nutrition Web App

Flip the card for more detail.

Charlie Chaplin

I built this tribute page as a practice in controlling the flow of content using jQuery. It is based on a codepen exercise. An important feature of this page is the film strip which moves in opposite direction to the page.

Technologies used

  • HTML
  • CSS
  • jQuery
  • Bootstrap
Github Repository
Deployment

Charlie Chaplin

Tribute page to Charlie Chaplin and his work.

charlie chaplin tribute site

Flip the card for more detail.

Simon Game

I recreated simon game which runs in a browser. As the game progresses there are various aspects of the GUI which change, The color of the title on the game "console" changes, and a number shows the length of the sequence. There is also an option to change the set of sounds. Two are implemented at present but other sets can be added. If an error occurs "Err" is displayed and a short tune is played using the current sound set.

Technologies used
HTML CSS jQuery
Github Repository
Deployment

Simon Game

This is a remake of the classical Simon game.

Simon Game

Flip the card for more detail.

Addition Game

This project's purpose is to explore how to get more than one user logged in at one time without interfeering. I used object-oriented design. I also used a JSON to store the data about the users and games played. Additionally, if a user is logged in and tries to log in somewhere else, be it a different tab on the same browser or a totally different device, the user will be warned and given the option to proceed, thus deleting the previous session or abort the current log in attempt. I also implemented storing the hashes for the passwords.

Technologies used
HTML CSS jQuery Bootstrap
Python Flask Jinja JSON
Github Repository Deployment on Heroku

Addition Game

An experimental site to get multiple users logged in.

addition game

Flip the card for more detail.

WebApp Audio

WebAudio API is a way of creating sound directly in the browser. In this way there is no need to load audio. It should work in all browsers that support WebAudio API like Firefox and Chrome.




Technologies used
HTML CSS javascript Web Audio API
Github Repository
Deployment

WebApp Audio

Experiment with Web Audio API.

web audio api

Flip the card for more detail.

Explore SVG

Apart from creating static images with svg, we can also animate those images. The animation in this case is achieved completely using CSS.
Canvas which is a way to build scalable vector graphics is a very important building block of graphs used by other libraries such as d3.js. In combination with crossfilter and DC.js these technologies can be very powerful in data analysis and display.



Technologies used
HTML CSS SVG
Github Repository
Deployment

Explore SVG

An experiment with creating images with svg.

explore svg

Flip the card for more detail.

The following are some examples of web pages that I have developed

They are part of my web development portfolio:

Project Repository Technology Description
Exploring AngularJS - - -
Diving Man - - -
Thorin and Company GitHub Repository - -
My First Chat GitHub Repository - -

WATCH THIS SPACE. . . . . .