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.