background image

Anthony Bonello

FullStack Webdesign

This website is updated regularly.

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.

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. . . . . .