Interaction design / Identity
Classility
A personality quiz that becomes a fantasy character, with an illustrated card worth keeping.
- React
- TypeScript
- Vite
- React Router
- html-to-image
What I contributed
Built the question flow, weighted scoring and conditional class matching, result presentation and downloadable card experience.
What came out of it
A live fantasy quiz with twenty archetypes, dimensional scoring and individually rendered result cards.
Turn a result into a character.
Classility takes a familiar personality-quiz structure and gives it a fantasy vocabulary. Twenty questions map choices to RPG archetypes such as Paladin, Druid and Spellblade. The experience is playful: a way to explore identity, rather than a clinical assessment.
A result includes more than a class name. Lore, personality traits, a party role and a growth quest make each archetype feel like a character someone might want to inhabit.
Consistent logic beneath the atmosphere.
Answers contribute weighted scores across six dimensions: Power, Faith, Arcana, Nature, Guard and Tactics. Conditional rules then select a class, with priorities handling overlapping matches. The same answers produce the same result.
My contribution covers the quiz flow, scoring and result presentation. Data defines questions, dimensions and archetypes, keeping the content separate from the interface and making matching behaviour inspectable.
The result has a life beyond the quiz.
Illustrated cards combine a class sprite, equipment and party-role crest into a downloadable PNG. A dedicated card renderer also supports repeatable exports, while protected result routes avoid presenting an incomplete quiz as a finished profile.
Hash-based routing keeps the experience compatible with static GitHub Pages hosting. The mobile layout carries the same question and result flow onto a smaller screen.
A complete, shareable experience.
The live project offers twenty archetypes, a card gallery and a reference for its scoring dimensions. Its source also includes tools for examining whether classes can be reached and how results are distributed.
Classility demonstrates how I connect deterministic behaviour with an expressive interface: the underlying system stays consistent while the result feels personal.