T.O.M. - Tabby of Motivation

Stressed about studies? This cat's got your back (and purrs encouragement)!

Comment

Inspiration

The primary inspiration behind T.O.M. was actually none other than our own lives as college students. With all the near-constant rushing and stress to make it to class, submit assignments on time, pass exams, and put out quality projects, there is little time left for us to catch our breath in between and admire our handiwork. Through T.O.M., we hope to encourage students, namely those in college, to give themselves a much-needed pat on the back every now and then and remind them that regardless of how hard things feel right now, they are doing great and are on track to achieve all their dreams and goals.

What it does

At his core, T.O.M. is simple. When activated, he displays an encouraging message to the user and reads it aloud to them. By clicking him again, he will read you another encouraging message. (You may even hear one of his favorite cat-themed proverbs!) Despite this seemingly simple surface functionality, there is a multitude of design elements incorporated into the website design that enables T.O.M. to have the calming and encouraging presence we intended. The primary color of the website is a dark shade of olive green, a color that, for many, represents harmony, peace, and tranquility. T.O.M.’s bow is a bright shade of cream, which provides a pop of energy and inspiration to the viewer, as well as a visual contrast to the rest of the website. The top menu includes just three pages - the Home page, where you first meet T.O.M.; an About Us page where you have a chance to meet and connect with our team; and a Mission Statement page where you can view the vision for T.O.M. The simple design of our website enables even first-time users to easily access and meet T.O.M., and hear his many tabby words of wisdom.

How we built it

The entire project was built on Visual Studio Code, and mostly comprises HTML and CSS. There is also some embedded JavaScript, which was used on our text-to-speech and message selection functions. The completed application was deployed on Vercel through a GitHub repository.

Challenges we ran into

We ran into quite some challenges with UI development and figuring out the text-to-speech function of T.O.M. One unexpected challenge with UI development involved choosing the right color scheme for everything we wanted to include. At first, we planned on using a blue-and-orange color scheme, but this design was ultimately scrapped in favor of more calm and “less explosive” colors. The text-to-speech function of T.O.M. took quite some time to get working, given our limited experience with anything like it.

Accomplishments that we're proud of

We are most proud of the visual design of our website. Through the use of only a few theme colors and a simple, accessible layout with well-placed user interaction elements, we were able to create a relatively minimalist and intuitive layout for the user to navigate. We are also really proud of the new skills and techniques we’ve been able to pick up through the creation of this website. While these may not be the most advanced skillsets, many of the things we did were still things we’ve never done before on a website, and were a valuable step forward in our coding skills.

What we learned

The main thing that we learned through this project was how to create better and more advanced UI designs using HTML/CSS and Javascript. While we all had some experience with these languages, this project was a big step forward in terms of design and features from all the previous websites we’ve made. It was a bit of a hassle, particularly in the beginning, getting the initial skeleton of the website figured out, and we had to use a few CSS styles we were unfamiliar with. Another thing we learned was how to create and implement a text-to-speech feature for a website. None of us had prior experience in this, and it involved a lot of trial and error to get right.

What's next for T.O.M. - Tabby of Motivation

In the future, we look to expand the functionality of T.O.M. to be more than just a fun source of encouragement for users. By integrating a GPT model with T.O.M., we aim to allow him to generate schedules for college students based on parameters taken as input, such as the things they need to do in the day and how much time each thing should take. This will require significant JavaScript and Python usage, along with a full stack framework like Django, but it will broadly expand functionality of T.O.M. and enable him to become much more than just a talking tabby (though that function will definitely stay!).

Built With

Share this project:

Updates