Katrina Hayes

Web developer

About

I'm a web developer based in Sydney, Australia, currently working as a frontend dev, but increasing the type and scope of backend work I take on. The main languages and frameworks I use in my day-to-day work are ES6, React, SASS and PHP.

In 2018 I emerged from the mind-bending fog of General Assembly's Web Development Immersive course. Learning languages – Spanish, French, Arabic, and most recently Japanese – had long been my thing, and learning computer languages became a logical next step. Coding has opened my brain to new ways of thinking, and I love that I'm in a world of endless learning.

When I'm not coding, you'll find me planning trips, reading books, being frustrated & fascinated in equal measure by the little people in my life, and in constant need of coffee.

Oh, and I dabble in using code to generate art. The background of this website is one big canvas that changes each time you click.

Skills

JavaScript (ES6)
React
jQuery
HTML5/CSS3
SASS
Responsive design
PHP
Wordpress
SQL
Git

In progress

Node.js (& Express)
MongoDB & Mongoose
Python
Ruby
Rails

Projects

Below are the projects I worked on when I first started coding via General Assembly's Web Development Immersive course.

Playways

See it in action (Chrome on desktop is best for now!)

Playways

Playways is a sound visualiser and generative art app built using the p5 and p5.sound libraries. It works by continually analysing a song's amplitude and using that data to render visualisations. Every canvas comes out a little differently.

Users can listen to preloaded music or switch to mic mode to make/listen to their own music. Note: Currently works best in Chrome & Firefox on desktop due to difficulties getting around browser restrictions for autoloading and autoplaying sound.

Waltz

View/listen live (only on desktop for now!)

Music visualisation for Waltz #2

This project is an experiment in using the Web Audio API to analyse and visualise sound, in this case the song Waltz #2 by Elliot Smith from his album XO.

It works by measuring the song's frequency and using this data to create a waveform, a frequency bar graph and a pulsing square. Note: Currently works best on desktop rather than mobile.

CoCanvas

Make pixel art on the live site

CoCanvas

CoCanvas is a pixel art app that allows users to draw pixel art on a neverending canvas with friends and strangers on the internet. It was developed in collaboration with Mandy Tang, Vu Le and Rob Harkness.

CoCanvas has a Rails backend, is fully responsive, and features multiuser drawing on a canvas element updated live via Action Cable and WebSockets as well as a live chat component created in React.js.

BookPinch

View the live site & pinch books

BookPinch

BookPinch is a book tracking app that allows users to sign up and search for books which they then track as 'to read', 'reading' and 'read'. Users can mark their favourite books then find other users who have similar book tastes, and explore those users' favourites shelf for new reading ideas.

BookPinch is built with Ruby on Rails and uses the Goodreads API for the book search function as well as the Google Books API for providing a preview link.

Noughts&Crosses

View the live site & play a game

Noughts & Crosses

My Project 0, this website allows users to play Noughts & Crosses against another human or the (not very smart at this stage) computer. It is built using JavaScript (including jQuery), HTML and CSS.

It sounded simple, but coding this was my first proper foray into the mind-stretching world of game logic. I followed my code around and around as it played out, only to re-write and re-follow it until (finally!) it more or less acted how I was hoping. I won't soon forget that sweet feeling.