Hello everyone! Welcome to Nate's Space, Portfolio of Design and Code., And this is 'Project' page, the work that I proud with!

MantisDir is a mini directory about mantis species around the world. It organizes the data by continent and subspecies, using information pulled from an SQL database through Lumen Laravel and Vue.js.

For those who are passionate about tiny creatures and nature, I’m one of them. I really like mantises because of their beautiful shapes and fancy colors. To me, they are one of the most beautiful insect hunters in the world. I even wanted to keep them as pets, but unfortunately, it’s illegal in Canada and the fine for keeping a mantis can be up to 200,000 CAD. Since I can’t raise them, I decided to build a website about them instead. I believe other mantis lovers will enjoy it too!

The challenge of this project came in two parts. First was pulling data from SQL using Lumen, which is a micro-framework of Laravel that I’m still not very familiar with. The task was to show two levels of data, but in my case, I made it into three levels, which added a bit more complexity.

I wanted to create a nature-focused website that looks clean, stylish, and academic, but still easy and pleasant to read. That’s why I spent quite a bit of time carefully adjusting the layout. In the end, I went with a simple paper-like layout where each of the three data sections is displayed with equally sized full-width images. On responsive screens, the layout shifts slightly to create a more dynamic and playful feel.

I prepared the mantis data by focusing only on the standard mantis species. I didn’t include other types like Leaf or Orchid mantises because that would make the scope too wide. I organized the data into three levels. The first level is by continent, then by subspecies in each country, and finally by local area. In total, there are 20 species included. I think this is a good amount for a beginner-level project—it’s enough to show the diversity of mantises without being overwhelming.

I spent quite a lot of time understanding how to fetch second and third-level data. It turned out to be a great learning point because I got to practice using Vue while working with data fetching at the same time. This project brought me one step closer to becoming a Full Stack developer.

n the end, I reduced my use of plain JavaScript and focused more on using pure Vue.js to control how each data box appears layer by layer. I also adjusted how the boxes respond to different screen sizes to make the layout fully responsive. While working on the layout, I added a fun extra detail by including biome information. Through this process, I started to understand how convenient it can be to add and display data when everything is well-organized in the database. It turned out to be easier than I expected.

Even though I didn’t spend a huge amount of time building this project, I’m really proud of it. I feel like this reflects the kind of design and content work I’ve always wanted to do. The format isn’t boring—it’s the right size for the topic, not too overwhelming (though future expansion will require good control). It also seems like a solid base that can grow into a beautiful and meaningful knowledge archive. More importantly, this project helped me understand how critical the connection between backend and frontend is when it comes to web design and development. I really enjoyed working on it, and I see it as something I’d love to keep developing in the future!