belize
SeaSS
Uploaded on 28th December 2024
Keen to practise my CSS skills and highlight Belize's coastline diversity, I built SeaSS to take the user on a journey as they scroll through the cayes' corals.
Take a look at some of the incredible sea creatures I was lucky enough to spot on my snorkelling trips and adventures around the island.
And don't forget to "Go Slow" - an iconic phrase uttered by every local reminding me to take it easy!
I saw 3 gorgeous Hawksbill Turtles on my trip
"Go Slow" - Caye Caulker's famous saying
A beautiful school of fish under coral caves
These Southern Stingrays came right up to my feet on the beach
Squint and you'll spot 2 rare manatees - the dogs of the sea
Nurse sharks swim around me
I spent a total of just 9 days in Belize - 6 days in the stunning Caye Caulker, and the remainder chilling in the nature-surrounded San Ignacio. My time on the caye was spent with 10 amazing fellow backpackers I met, and we all celebrated the infamous 'Sunday Funday', Christmas Eve and Christmas Day together, doing various activities.
I actually ended up not having a second to code on the island, instead challenging myself to build and complete Belize's project in just the 3 days I had on the west side!
Luckily, like so many of us across the world, I also used those weird "in between Christmas and New Year" days to relax and enjoy the surroundings. This meant many an hour on my laptop swinging in the veranda hammocks, and coding with the resident hostel cat!
Comfy coding in San Ignacio hammocks
Sunday Funday in Caye Caulker - no time to code!
My ginger coding buddy
Christmas on the Caye!
Beautiful nature sunsets in San Ignacio
For this project, I knew that I wanted to have a play with CSS positioning and animations. This is an area of coding that I was fairly unfamiliar with until I switched to the web team at my previous job at the start of 2024, and that I really wanted to continue practising and exploring. Before embarking on SeaSS, I always thought absolute positioning was a nightmare, but now I can see its beauty in layering and the flexibility it can bring to build up an image.
Given the very short time frame I had to build this app in, I wanted to keep the user interaction to a minimum, allowing a simple horizontal scroll. I brought the journey to life by animating each animal, either across the page to look as if it was swimming, or simply bobbing in place.
Every sea creature included in the project is one that I was lucky enough to spot in real life. Although I know SeaSS won't do their beauty justice, I hope I can pass on even a bit of the magic I felt seeing them to a user!
Starting point - don't forget to "Go Slow"!
A spotted eagle ray swims passed the user
End screen, but you can "Swim Again"!
This was an absolute whirlwind project for me, especially given I challenged myself both in terms of time and attempting to work with CSS properties that I wasn't overly confident in.
Of course, there are so many things I would've loved to have done to make this project more polished: better, more uniform images to create a higher quality experience, smoother and more advanced animation keyframes, seabed shadows for each animal to add depth and realism to the app, a more seamless approach to restarting the "swim" that doesn't involve a whole re-render, and so much more.
I am, however, so glad I rose to the challenge, and I am happy with what I managed to achieve in the time.
As always, drop me a message if you spot any bugs, have any improvement ideas, or have any suggestions for future country projects!