Summary

This is a 'web novel' of the classic story from F. Scott Fitzgerald. After its copyright had expired, I used it to explore designing long-form, segmented content. The layout and typography were inspired by The New Yorker magazine, which made it a great UI design exercise. With more time, I would have implemented auto-bookmarking. This media format works well with short chapters, nonfiction stories, or guides. For those scenarios and if redoing this project today, I would use a static site generator with reusable components for easier updates and a faster development turnaround time.

Media

Project Links

Features

Pleasant reading on mobile, tablets, and monitors
Quick chapter navigation

Design / Tech

Code:

HTML,
CSS,
JavaScript

Libs:

Tailwind,
Alpine

Testing:

Sizzy

Host:

GitHub Pages

Process

After making the cover and navigation, I proceeded to prepare the chapter content. A public epub file was opened in Calibri book editing software, and the HTML was copied and formatted into individual chapter pages. The font 'Caslon' was used for the body text; layout and sizing adjustments were made for various screen sizes; and 'next page' links were added at the end of each chapter.