Personal projects

These are a few bits and bobs that I've either been working on in my spare time, or some cool parts from bigger projects that I wanted to show off.

Wrestling Top Trumps

This Top Trumps wrestling game was my proudest achievement from the first year of my dev experience. Mid-card Wrestling was the first site I ever built, originally just a space for hosting blogs about my contentious wrestling opinions. My brother suggested I test my skills by building an interactive game, so I thought it could be fun to play Top Trumps against 'the computer' (a randomised JavaScript array).

Outside of some basic dropdown menus, this was my first experience with more complex JavaScript, a challenge I really enjoyed. The functionality was achieved by creating two arrays of wrestler cards (js objects) for the player and computer, acting like decks. Each card/object was assigned a value corresponding to the OVR rating shown. When the game starts, an object is selected from each array at random and is then shown on the screen in its card form. The value of each object is calculated, and the object/card with the highest value is declared the winner.

See the Pen Snowman Animation by James Dillon (@JamesDillon) on CodePen.

Snowman Animation

Feeling like a festive elf, this past Christmas I decided to test my animation chops and make a snowman disappear using CSS. Aside from the creativity involved with the animation itself, I had fun learning how to layer elements, utilising z-index to build a dynamic UI. If you need an emotional ad ready for next Christmas, I am available. Feel free to check out the end product and the code behind it.

See the Pen Untitled by James Dillon (@JamesDillon) on CodePen.

Coffee Animation

I've always been interested in the visually creative boundaries of web development. In searching for ways to upskill, I came across a fun coffee machine animation by Henrique Rodrigues, made entirely with CSS. It was a great example for me to learn the mechanics of CSS animation as well as utilising pseudo-elements (before, after) that developers have at their disposal.

I decided to remake this animation here step by step to learn the process, before adding some extra features like shine and shadow-depth to jazz it up a bit. I wish I could take credit for this idea but it was all Henrique.

See the Pen Toaster Animation by James Dillon (@JamesDillon) on CodePen.

Toaster Animation

After remaking the coffee machine, I wanted to expand my animated kitchen with a friendly toaster. I had to put my newfound knowledge of keyframes into practice by creating my own animation, a process I found very rewarding.

The popping toast, handle spring and the smile were more straightforward in isolation, but the biggest challenge came with opening the eyes as well as timing everything to run in sync. A very fiddly task but I always chuckle when I see that toaster smile.

See the Pen Untitled by James Dillon (@JamesDillon) on CodePen.

Kettle Animation

To complete the kitchen I added a kettle. Some might say this looks more like a campsite kettle than one found in a kitchen, but sometimes you have to block out the negativity and crack on. This is definitely one of my more complex animations, in terms of length, amount of animated features, and in timing it all together. I wanted to add a little realism by using cubic-bezier to add some bounce to the lid opening, and I thought it'd be cool to see the water level drop as the kettle started to steam.

See the Pen Modal Animation by James Dillon (@JamesDillon) on CodePen.

Modal Animation

At this point I realised it can't all be fun and snowmen and kitchen appliances, so I decided to animate something more practical in a sliding modal. Although maybe not quite as visually captivating as my previous animations, I had just as much fun figuring out how to make this modal move around the screen. This was also my first experience integrating JavaScript into an animation, as it actually starts when you press a button, not on screen load like the others.

Play Fetch with my Dog (API)

Outside of a few YouTube tutorials, this was my first real experience with managing data from APIs. I wanted to use the famous Dog CEO API to create something interesting for users to interact with. This React app fetches a complete list of dog breeds from the API data, displays them in a dropdown, and will dynamically render a photo of the chosen dog from the list. Fingers crossed this is never required, but there's also error state included for if the API isn't playing ball that day.

ON
OFF

Toggle Animation

I decided to carry on making practical components with a basic toggle button, which presented a different set of challenges from the other animations. The time for everything to execute is so small that it was quite granular working out the timings for every aspect of the animation. What should I add to the modal and toggle in my component library? Please send your suggestions in through my contact fo... Okay, maybe a contact form should be the next component.