Case Study
Hog Royale
An interactive Clash Royale 'Hog Rider' character profile - a creative-freedom HTML project in vanilla JavaScript.
Nov – Dec 2021
The problem
The brief was open-ended: design an engaging character profile for an HTML project, with creative freedom as the main constraint. I built Hog Royale around the Hog Rider from Clash Royale, Supercell's real-time strategy card game.
The approach
The experience is built entirely in HTML, CSS and vanilla JavaScript. It opens on an immersive landing page with a game-styled start button and sound effects that trigger on hover, then moves into a tutorial-styled introduction where the character's avatar fades in.
From there, a carousel presents the Hog Rider's attributes and abilities, a dynamic slider lets you modify his stats in real time, and an interactive chat feature mimics the tone and style of the game itself.
The outcome
A playful, self-contained character profile that leans into the source material - proof that plain HTML, CSS and JavaScript can carry a genuinely interactive, game-flavoured experience without a framework.
Learnings
An early project in pure front-end craft: animation, sound and interaction driven entirely by vanilla JavaScript, and the freedom to let a theme shape every design decision.