We first created our website midway through the 2023/24 F1 in Schools competition. It’s been available on cobraracing.ie since then, but its code has been kept a secret. Today, I am proud to announce that our website is now fully open-source. This marks a big step forward for us, and we believe that it warrants a brand-new blog post. In this post, I’ll be explaining the thinking behind our website’s design and how I implemented it.
Before we get started, you might be wondering why we need a good website in the first place. In STEM Racing, teams are required to contact companies to acquire sponsorships, which make up the majority of our funds. Our website and social media presence are a part of how we make a good impression to potential sponsors, and ultimately acquire their support in return for benefits. So it’s quite important for us to have a website that’s up to date and nice to look at.
If I’m being completely honest, the website was originally made to be as simple as possible while still looking nice. Last year was quite rushed for us, as we had zero experience when we started, so the website needed to be quick to make. However, we have upgraded it (and we still are upgrading it) over time to make it even better. At the top, the design incorporates a floating navbar with a background blur effect. It was inspired by the navbar in the ScrewFast template.
The website’s body contains five main sections: a hero, our team, about us, our sponsors, and our car. There’s also a small footer with links to our socials and a copyright notice. The design’s simplicity is important as it allows it to convey the necessary information in an efficient manner.
Implementing the website was comparatively easy. I modified Bootstrap’s carousel template to create the main body – with the exception of the hero and the list of sponsors – which sped up development a lot. The navbar took me while for what it is, I ended up fighting with the dark mode toggle to get it to work (I still haven’t managed to get the address bar theming right on Safari). My favourite part of the site is the Lenis smooth scrolling, it was easy to implement and works like a charm.
Ultimately, the website design is quite effective for us. It’s simple, it’s easy to navigate, and it’s fast. Most important of all, it provides a great experience for you, the visitor. Now that it’s open-source, hopefully it can help you out too.
From today onwards, the main branch of our website’s repository will contain the exact code used at cobraracing.ie. You may also see some other branches from time to time for new features or updates, but don’t rely on them as they’re usually deleted after some time. The website is still very much under development, and I’m so excited to be able to develop it in public.
That’s it! Thanks for reading this blog post, and if you want to keep up to date with everything Cobra Racing, don’t forget to follow us on Instagram, LinkedIn, and WhatsApp! If social media isn’t your thing, you can always subscribe to our newsletter below.
See you again soon!
Subscribe to our newsletter
Enter your email below to receive updates:
Leave a Reply