MantisDir

Have you ever wanted to keep a strange pet? Mine was the mantis. They just look so cool, and anyone who grew up with Kamen Rider like I did probably feels the same.

In Thailand, where I used to live, there are only a few kinds, and the cool ones are rare and live deep in the forest. When I moved to Canada I finally had more free time, so I thought about keeping one. Then I found out that the exotic ones are against the law here, and the fine can go up to $250,000! (WTH)

So I gave up on keeping them. Instead, when my Web Development class was learning Vue and Sass, and how to fetch data from a SQL database, I made a directory of them. That’s MantisDir.

I wanted it to look like a serious site. It’s a single page with a plain name: Mantis plus Directory. The font is a serif that feels academic, but I picked a tall one so it still looks current. The page is laid out like a flyer you’d pick up at a library, and using it feels like opening a sheet folded in three.

I built a small dataset of mantis species, starting from the biggest question: where in the world do you find them? That gave me six regions, each with its own biome, the land and climate they live in. Pick a region and its biome opens with the species that live there. I made the biome images with AI and kept them all in the same tone, angle and style. The last panel is the species itself. It’s a simple site, and every function has its own clear space.

For responsive, I turned the panels into steps you click through. A tablet shows two columns and a phone shows one, so nobody has to scroll to read anything.

If I kept going, I think this format could work for any serious set of information served in bite-size pieces. It doesn’t have to be mantises. It could be fish, dogs, cats or appliances, anything people want in a directory that’s easy to sort and easy to understand.