As suggested, I made a reusable 'cat' component that takes in 'whichcat' as a parameter to determine the particular cat that should be used for a query with axios. Once the data for the specified 'cat' is returned, it then populates the component with the breed, description, a slide show of images, and many other qualities related to that particular breed. The user can go through the images with the corresponding buttons that will increment or decrement by one to index into the array of images for the particular cat. There is also a header with anchor tags that will allow the user to skip to each cat shown on the page.

Finally, to create a better visual experience for the user, I made each of the cat attributes correspond to a simple bar graph (1 being 20% full and 5 being 100% full). I started by taking a gray container and making it equilavent to 100% of the parent div. Next, I make 5 different classes with different widths and background colors corresponding to the returned numbers 1-5. Then, I used style binding to attach the respective class and change the background color based on the number returned by the particular attribute.