This is the index
Animated 3D TARDIS
My contribution to CodePen Brighton’s space-themed ‘pass the pen‘ collaboration in October 2018, inspired (naturally) by the first female Doctor Who making her TV debut the same week.
I had absolutely no idea how I was going to make a spinning TARDIS, but I wanted it to be pure CSS, as simple and quick as possible, and to look convincing. I came across various over-complicated examples online but whittled it down to this four-sided 3D box (side image created first in Illustrator), animated to look like it’s flying through space and time…
Drumkit in SCSS and JavaScript
This drumkit, hand-coded in (lots of) CSS, became a great opportunity to teach myself SCSS. Yes, it would have been easier to create the drumkit as an SVG in Illustrator! But as I had previously made projects with SVG illustrations, writing it in SCSS was a new challenge.
Hitting a key animates the drum and plays the corresponding audio — based on a JavaScript challenge from Wes Bos’ JavaScript30 course.
Demoed at CodePen Brighton Show & Tell October 2018.
Best viewed in Chrome on desktop.
Bat the Bunny game
This whack-a-mole style game started life as a JavaScript challenge from Wes Bos’ JavaScript30 course. There were a few aspects I thought could be improved so, with Easter on the way, I decided to make Bat-the-Bunny!
I included a countdown timer and, with my own illustrations, added a ‘random bunnies’ feature where three different bunny images are called at random. This idea could be expanded — what about different speeds, or a rare golden bunny that earns you extra points?
Best viewed on desktop.
WordPress portfolio site
The perfect project to learn more about WordPress, I decided to build this very portfolio site from scratch; mobile-first, coding my own custom theme with PHP for WordPress, SCSS and JavaScript.
It has been an extremely steep learning curve, but very satisfying and will continue developing!
Brighton Advent Calendar
Mobile-first with CSS Grid layout and responsive text. JavaScript detects the ‘date’ of each door, and serves details of that day’s festive event in a modal window. Illustrations are created in Photoshop and Illustrator.
No peeking — if the door has a higher number than today’s date, it won’t open! [disabled for demo purposes]
Built for codebar Brighton’s annual Christmas Show & Tell competition, showing a nice progression from my entry the previous year!
Great Escape Festival list app
(Note: it takes the app a moment to ‘wake up’)
As a keen music fan, I go to The Great Escape festival every year and share ‘who-to-see’ tips with friends through text, WhatsApp, Facebook… but I wanted to store this growing list in one place, where anyone with the URL could view and interact with it.
Built on Glitch, the ‘wishlist’ is a simple Node.js app with SQLite database. From the start this had to work on mobile, for users out and about during the festival.
In the original 2018 wishlist, features include being able to upvote other people’s tips, and order the list alphabetically and by most popular. In 2019, I was able to expand this and add useful day tags and table filters.
Challenges
One of my biggest challenges came when I realised, through testing, that Glitch is not compatible with older browsers/mobile OS — JavaScript won’t run. It was important to flag this in a message all users could access, so I had to replace my original JS ‘read more’ collapsible (which didn’t open on all devices) with a pure CSS version. It took longer, but I felt it was necessary.
Attention to detail
My scrupulous attention to detail also came into play, as I pre-empted things that might bother me when other people started adding to the list! So entries are styled to be capitalised, as is the first word of the description. There is a maximum character limit and, whether a description is added or not, each entry is vertically centred in its row.
For brand recognition — and because I like the style — the design is modelled on The Great Escape website.