The Project
Halo Infinite is one of my favourite games to play. I have been a lifelong fan ever since the original Xbox came out.
Compared to the previous title Halo 5, Halo Infinite opts to take a different approach when it comes to gameplay. Not every weapon is powerful which is different to what Halo 5 was.
This got me thinking, what if there were a guide on how to use certain weapons in Halo Infinite. So, this is a concept on how that could look.
Weapons of choice
- Next JS
- Tailwind CSS
- Sanity IO
- Vercel
The Sanity Studio
Using Sanity, I went right ahead an defined my structure. Compared to previous projects, I wanted this to be more modular. Therefore, while there are several types of documents, the content is all modular and can be mixed.
Sanity IO is one of many CMSs to support the Next JS preview mode which means you can edit content and see the changes on keypress! And once you are happy with the content, using on-demand revalidation you can make the changes live in under a second.
The Image CDN provides useful utilities such as hotspot and crop allowing for art direction meaning I can upload any image without having to edit beforehand.
The Content
I approached this from a fact sheet point of view. The following is how the guide is structured:
- Show an image of the weapon
- Highlight key points
- Introduce the weapon
- A quote from someone in the community
- Highlight pros and cons
- How you can play with this item
- Miscellaneous block
The content was a lengthy process but since I was using TailwindCSS I could make changes quickly and test different layouts.
Pagespeed
Using previous techniques, I was able to get a 95 Pagespeed score on mobile and 100 on desktop.
