October 2018 - 2022

Various websites over the years,

Front-End Web Developer and Creative Coder

Overview

From the moment I started learning how to make websites, I discovered a newfound appreciation for just how much of a creative art it can become. While there is no canvas per se, and there are still coding rules to follow, CSS and JavaScript present the means to display your thoughts and artistry on the web.

Here are some of the websites I've most enjoyed creating, using all manner of templates, libraries and vanilla coding.

Tools

  • Figma
  • HTML, CSS, JS
  • HTML templates
  • CSS frameworks
  • JS libraries
  • Github (version control)
A screenshot containing the work section of this very website

Digital Media BSc Web Design module

Web design modules in the first two years of university largely consisted of following the basics about HTML and CSS, introduced the idea of HTML templates (HMTL5up), CSS libraries and the use of wordpress.

House of Flavour was a single page website created for a fictional healthy eating restaurant. The project required research into the "client" and development of an appropriate, informational website with directions to the restaurant.

Hosue of Flavour webpage header

Digital Media BSc Creative Coding modules

Creative Coding consisted of the use of different JavaScript libraries - namely p5.JS and Three JS - to create interesting animations and digital art pieces.

Since this module took place alongside Web Design, I decided to use my knowledge from that module to create a HTML5up based website containing all my creative coding works for the first year!

A webpage containing links to different art pieces Sliders and buttons control an amount of spinning circles that bounce across this animated coding piece Different coloured and different sized circles are spread across a digital artpiece

In my second year, I used Three JS to create an interactable audio-visual experience. I wrote a brief electronic piece of music, exported each track as a separate file and attached them all to a different 3D planet and associated track slider.

By turning the sliders up or down, you could increase or decrease the volume - which in turn caused the planets to bounce with more vigor or disappear from view. This allowed for an infinitely looping variable tune with a cool space themed backdrop.

A space themed backdrop holds a series of planets rotating around a sun

Star Wars The Old Republic - Public Test Server mini-blog

During the break between years 1 and 2 of university, I hand-built a blog site tracking information and development changes for the upcoming expansion to one of my favourite games. I kept the golden theme of the game's official website, and ideated on ways to show a vast amount of information in a tidy and efficient manner.

SWTOR blogsite with a table containing ability trees

This portfolio website!

While I could have used any of the existing template website builders, I instead decided to take a much more intimate and personal approach to my digital portfolio. This gave me much greater control over the layout and tools used.

I ended up using tailwind as my current css library of choice because it maintains the perfect balance between rapid development and coding granularity. Overall I am very pleased with how it turned out and it is definitely my favourite portfolio that I have created so far.

Conclusion

Each project, I learn something new about how to create more engaging and visually interesting websites. This keeps me on my toes and ensures that my work always stays interesting.