How I made an interactive hero section with p5.js for my website

When I made the decision to go freelance, setting up my own website became a top priority but also a huge source of anxiety. I needed potential clients to take me seriously, understand my areas of expertise, have confidence in the standard of my work and get to know me all at the same time.

While I was in full-time employment, I never had the time nor the real need for a personal website, but always envied others who did - I started and then shelved about four over the years. Funnily enough, p5.js was one of my first real forays in to writing code; I would watch Daniel Shiffman's YouTube channel The Coding Train and follow along to the best of my ability. I became obsessed with the instant gratification of tweaking my code and seeing the resulting sketch on the screen change. During this period, I was working on my final year project in my degree, a paper analysing the retro game 'Lights Out!'. The game is played on a grid of lights, where toggling one of them on or off also toggles the state of the four or fewer orthogonally adjacent lights. I'd followed along with The Coding Train's tutorials making Minesweeper and Noughts and Crosses, also played on a grid, so figured coding up my own version of 'Lights Out!' would be a great exercise in my learning and help me gain a deeper understanding of the game for my uni project.

While I was in full-time employment, I never had the time nor the real need for a personal website, but always envied others who did - I started and then shelved about four over the years. Funnily enough, p5.js was one of my first real forays in to writing code; I would watch Daniel Shiffman's YouTube channel The Coding Train and follow along to the best of my ability. I became obsessed with the instant gr...