I decided to make a browser-based infinite-scroller game. This project was written purely in Javascript and represents a series of inventive solutions and personal triumphs. There was plenty of excitement along the way, but a lot of challenges too - for example, how to detect seagulls collisions without the infrastructure of a game engine? (I will explain all if I land an interview!) Incidentally, the idea for this game was originally sparked when I made the little flashing cursor in Word-Thing - a perfect example of small programming discoveries opening the door to bigger ideas.

I am particularly pleased with the simple yet effective background design, achieved with CCS gradients, and the parallax effect of the parasols and the fence moving at different speeds. Better still were the bespoke solutions I devised to make the fence and the parasols keep scrolling forever seamlessly, Hannah-Barbera-style.

With the running, jumping and ducking essentially continuing indefinately until the player's luck runs out (that is, once five seagulls have hit you!) and the addictive urge to beat their highest score, this is my friends' favourite project of mine, and hopefully you will enjoy it too!

After reading that Wordle was originally written in Javascript, I set out to make my own daily word game, based on an old idea of mine. My rules were: it had to be a single-page brower-based app; be entirely front-end, with no database connection; and that it needed to automatically update with a new word every day. It succeeded on all counts, and cycles through two months' worth of daily games.

I had a lot of fun making this. It was a marathon of problem-solving through sheer necessity, and I feel that I became a better Javascript developer as I brought my ideas to life. Every day I would think of a new feature, and I would quickly think of a way to make it happen. (An unseen supporting feature is the mini Javascript project I made, hosted locally, to help me to set the games - an onscreen interactive grid that creates the required arrays of winning letters, index numbers and randomised filler-letters that make-up the game's data.)

With constant eureka-moments and educational discoveries, as well as making reality of an idea I'd had long before I had any coding skills, Word-Thing is the project that I am most proud of.

This project is a simple idea: a visual guestbook made up of coloured pixels. was written with PHP/ MySQL on the server-size, and vanilla in-browser Javascript for the front-end. The guestbook is a grid 100 pixels wide and 100 deep; a total of 10,000 pixels up for grabs.

The idea is that the user clicks on a white pixel on the square, chooses a colour, and saves it, along with some information about themself and a personal message for the world - leaving behind a coloured pixel to represent their entry. Anyone clicking on a claimed pixel - assisted by the handy magnification function! - is able to view the user’s information and message. I added extra functionality to stop users from over-writing claimed pixels, and also barred used from selecting white (the default) as their colour.

Incidentally, I originally wanted to make out of one million pixels, ie. 1000 x 1000 pixels, but since this involved loading an array that also contained one million elements, the loading time was immense; I soon had a rethink!

Every good portfolio needs an API project, and this is mine. TFL have quite a few APIs available to developers, and I wanted to make something that would be useful in everyday life. The result is a helpful single-page application that warns the user about TFL stations with step-free access outages, with further details available with a click.

I have always enjoyed working with APIs and their real-world data, and I liked the idea that my project would look a little different every time I used it. The best part was my experimentation with Javascript animation via the setTimeout() function - building on the flashing cursor in Word-Thing, I enjoyed making elements move across the screen for the first time. This set the stage for 'Mind The Seagulls!', where I set out to take the technique to new heights.

Essentially a project-within-a-project to prevent spammy signups on the NextAbode website, I was so pleased with the result that I felt this was worthy of inclusion in its own right. I decided to make my own 'Captcha' functionality, which I named 'Gatekeeper', after noticing users with weird mixed-case names and email addresses kept registering with my half-built website.It is a no-frills affair but it was instantly successful - I have not had a spammy user registration since!

The user's input is just part of a secret formula, with the 'correct' answer requiring the participation of the database, making it near-impossible to guess. I have used it in other projects too: 'Pixels Guestbook' is protected from baddies and bots - and so is this website! If you would like to see ‘Gatekeeper’ in action for yourself, head to the contact form and get in touch!

This project is actually more of a favour for a friend who is starting an online estate agency business than a portfolio project. Although he designed the layout and wrote all the words himself, he has no web develoment skills, and so I offered to help. However, it ended up becoming such a big task that I had to include it my portfolio to make my time worthwhile!

Most of the hard work actually went into the fully-functioning backend admin area, but this is of course hidden away behind a secure login.Nevertheless, this project was a tour-de-force in PHP and Javascript working together, and I enjoyed a lot of challenges and achievements in both the back and front-end tasks. Even on the rather static front page, there is a fair amount of Javascript behind the scenes. Plus, it was then that I created my trusty Gatekeeper. (I also created the logo, which was unexpectedly brilliant, if I say so myself!)

I embarked on this project after completing a book that taught the React framework. Aside from making use of my new knowledge, I specificlly wanted to give the project a backend that benefited from my earlier lessons in Django. So it was that my React frontend and my Django backed worked together via an API, following a setup that is familiar in many workplaces with this technology. I appreciate that ecommerce sites are something of a cliche among portfolios, but I in fact work for an ecommerce company, and so was essentially writing what I know!

I kept on adding features familiar to online shoppers, most notably the coupon code functionality. It must be said that this project dates from a time before I truly hit my stride with CSS, and so the design doesn't live up to the work I put in with React and Django.

I am glad that I took the time to learn React, since it only seems to be getting more popular with employers, but my main takeaway was a reignited enthusiasm for Javascript, and inspired me to go back-to-basics and conentrate on the vanilla language itself. Also, with python being a constant feature of my current job, I no longer felt the need to use it my portfolio projects. From here on in, any backends would be with PHP, which appears to be a more popular choice in the real world.

Made during the same period when I was learning React from a book, I created this charming little puzzle out of a desire to test my new skills. I was rebuilding an older idea using React that was originally created in Django (see 'Python projects' section), having realised that a font-end language and framework was much more suitable. For example the old Django version, which was based on numbers instead of pictures, forced the page to refresh with every move, whereas the whole point with any form of Javascript is, of course, to make elements change without refreshing!

Another key difference is the data is stored in the browser with my good friend localStorage, whereas the earlier version made use of some slightly mis-purposed Cookies. As with my other old projects, this one is encumbered by a lack of attention given to the CSS side, which is something I've sought to address in all my recent work. (By comparison, the much more recent 'Mind The Seagulls' is CSS on steroids!)

Interestingly, this game contains a mechanism I devised for choosing which moves the user can make, which was reborn in the later 'Word-Thing' to great effect! (If you're curious, that's the windmill at Cley-Next-The-Sea, Norfolk.)

These are my oldest projects, which showcase my early skills in Python and bending the Django framework to my will. They are very basic in their appearance, since I was more concerned about what they did than how they looked, and at the time had yet to truly explore CSS and front-end design, which is why I have relegated them to the bottom of this list. (Having said that, Heroku kindly abolished their free tier, so not including them would be a waste of money!)

The projects include: The earlier numbers version of the puzzle game, '9 Squares Game'; and my first and perhaps finest foray into the world of APIs: 'Twitter Spelling Police'. This was an amusing little bot whose entire job was to search for the most recent common typos on Twitter, allowing the user to admonish the typee with a pre-written lecture at the click of a button! I fully expected to be banned within days, and so I collected screenshots just in case. That turned out to be a shrewd move, because the next year brought Elon Musk's wildly-successful acquisition of Twitter. One of his first moves of humbling genius was to destroy the API I was using; I had no appetite to pay for the replacement API, so my screenshots are now all that remain. It was fun/ funny while it lasted!

Elsewhere are: An API project that gathers weather information and plots the best - and worst! - locations for a picnic on a map; An office diary that emails everyone their respective diary notes; and a calculator with three interchangeable skins. All in all these are respectable early works, but I am a lot more proud of what came later.