They are part of my web development portfolio:
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
This is my website related to my music activities.
Flip the card for more detail.
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 | ||
This is a pictionary like game.
Flip the card for more detail.
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 | ||
This web app keeps tab of the nutritional value of the food I eat.
Flip the card for more detail.
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
Tribute page to Charlie Chaplin and his work.
Flip the card for more detail.
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 |
This is a remake of the classical Simon game.
Flip the card for more detail.
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 | ||
An experimental site to get multiple users logged in.
Flip the card for more detail.
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 |
Experiment with Web Audio API.
Flip the card for more detail.
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 |
An experiment with creating images with svg.
Flip the card for more detail.
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. . . . . .
