Overview

Inspiration Generation is a solo web project built around two public APIs: the Art Institute of Chicago's collection API and the Motivational Spark API. The site shows a random Impressionist painting alongside motivational quotes, combined into a single, cohesive browsing experience. It was built entirely in HTML, CSS, and JavaScript, with a focus on API integration and a clean frontend experience.

The User Experience

The interface is intentionally minimal, keeping the artwork at the center of attention. Users can step through paintings sequentially using arrow navigation, fetch a new quote independently, or hit a single button to randomize both the artwork and quote at the same time. Each painting is accompanied by its title, artist name, and additional details pulled directly from the Art Institute of Chicago's JSON data. The color transitions are animated with a fade, giving the whole experience a calm, serene quality.

Dynamic Color Theming

The most distinctive feature of the project leverages a dominant color field included in the Art Institute of Chicago's API response. Rather than displaying each painting against a fixed background, the interface reads that value on every fetch and updates both the background color and text color of the page to match.

Technical Approach

The core challenge was handling multiple API calls cleanly. The "randomize both" button required managing the two API calls together. Managing the data flow and parsing and selectively displaying the relevant JSON fields required deliberate, structured JavaScript. The result is a frontend that feels easy to use despite the complexity happening underneath.