Projects

Some projects that I have made previously, I’m constantly working on something or the other though, there’s a LIST~this is a todo to implement~ at the bottom of things that I intend to get to or am currently working on, many of these will be shelved, but it is worth trying.

APOD API Frontend#

Live Demo | Source Code

As an experiment to try out SolidJS I decided to implement a public API using it to get my hands somewhat dirty with it and understand its fundamentals. Along with that, I decided to use Anime.js to do some simple animations as it had been hyped by a few online communities. Overall, I really liked working with SolidJS, especially the bit where I get the real DOM to work with and not vDOM like with React.

Image Background Remover#

Live Demo | Source Code

Online tool can remove background and foreground from images. Made with React, Typescript, Nodejs & RapidAPI. Utilises freely usable APIs on the backend to send the image data and returns the image with the removed background or foreground with the options that were selected.

Nine Key Piano#

Live Demo | Source Code

A little piano made to experiment with HTML5 Audio features. Sounds sourced completely freely. The main challenge in this was to get the sounds to start and stop as one would expect in a normal real-life piano.

Quote Generator#

Live Demo | Source Code

Fetches quotes from a JSON file and displays it with a random colour. The hardest part was figuring out ways to generate colours that are not a complete eyesore. P.S - The text changes colour from light to dark depending on the colours, it is accurate 90% of the time. 100% would require a colour store and I wanted to generate colours not fetch them. Made with React.

Markdown Editor & Previewer#

Live Demo | Source Code

Tried to parse text, realised it was reinventing the wheel and used appropriate Marked.js library instead for that part. Completely made in VanillaJS with very minimal HTML/CSS. Theming with custom CSS is super easy with Markdown as demonstrated by this very site so that can be applied there for own purposes.

Choropleth Map - Data Vis#

Live Demo | Source Code

Little Experiment with D3.js using public data. It is quasi interactive - you can see the data when you hover over different counties. However, it is not fully animated or zooms in when you click a county - intended feature.

Heat Map - Data Vis#

Live Demo | Source Code

Another Project that was made with D3.js. I’d certainly put it as one of my favourite libraries and heat maps are certainly the absolute best types of data visualisisers for nearly everything in the world. My biggest challenge with this heat map in particular was getting the colour interpolation correct so the lows are much lighter and highs are much more saturated.