Have a browse through Kelly's Projects

About this portfolio

Hi, I'm Kelly Watters and this is a living document of my projects in frontend web development and design.

My approach is having a solid foundation with web basics (HTML, CSS, and JavaScript), mindful of clean design, accurate information, and good accessibility.

I'm learning how frameworks and language supersets enhance vanilla tools and developer experience. The current mix is TypeScript, SCSS, and React.

Responsive website design and development

Cakes Unlimited is a custom website I built using an end-to-end process, from design to development to deployment.

The project focus is responsive layout design and how it translates code, with the goal of a deployed static website for others to view.

I devised a custom theme around cakes and baking, which influenced my design choices, particularly with colour.

Project features

Responsive layout design with attention to font, colours, and contrast.
Code implementation in HTML, CSS, and JavaScript. Emphasis on CSS grid and flexbox.
Learning accessibility, thinking in UI components, and image management.
Source control with Git and GitHub and deployment to Netlify.
Custom-written copy text and license-appropriate image stock.

See the website

Visit the Cakes Unlimited website.

Note: This project is adapted from CSS course material from Kevin Powell at Master.dev.

A variety of snippets of blog post articles on colour topics.

Colour research and blogging

I write about colour as a special interest and wanted a way to self-publish my topics online. This project served as an early entry point into web development.

My goal was to create a custom website using a popular template-based service (such as WordPress and Squarespace) and to learn their trade-offs for a technically-curious user.

This project had the advantage of letting me combine my interest in arts and writing with that of exploring a higher-level facet of the web ecosystem.

Project features

Methodical research: devising a research question, investigating existing information online and in print, reporting my own observations.
Management of a custom domain and template-based WordPress website.
Controlled experimentation with art materials such as paint mixing and swatching.
Custom image work using my own digitised painting, free image stock, and art supply brand marketing.

Browse through some articles

Swirls of black and white paint mixing greys on canvas.

Read article on chromatic black

A paintbrush dipped in blue paint resting on the edge of a paint jar.

Read article on pigment hues

A computer keyboard covered in coloured paint splatters.

Read article on mixing greys

A collage of watercolour paint tubes and flora in nature.

Read article on natural paints

A paintbrush dabbing a watercolour palette fading to a computer screen showing code.

Read article on creative coding

An online tic-tac-toe game board showing a game in progress.

Tic-Tac-Toe browser game

This Tic-Tac-Toe is my version of the classic game, made to play in a web browser.

I created this game to improve my JavaScript coding skills, and to learn more about game logic behind the scenes.

Future iterations of this project would have a dynamic CSS theme for light and dark modes and would also accomodate two human players.

Project features

HTML, CSS, and JavaScript with a minimalist design.

Launch a game of Tic-Tac-Toe in the browser.

$A computer drawing of an H tree fractal shape.$

Fractal visualisation

This project is a 2D drawing program that renders fractal-like H shapes to a web browser.

I created this program to visualise an interesting and abstract concept (fractals and H Trees), and to learn basic graphics programming with web technologies.