Devlog 05

There are a lot of cool bookshelf CSS designs out there. One particular one had a full 3D system, where one could rotate a book out of a bookshelf and slightly tilt it around based on the cursor position. It was too complicated for me to replicate with my current abilities, so I made a simplified version of that, where the bookshelf has a simplified book spine that reveals a book cover when hovered on. I also set up a “display view” where a book always shows its cover, as if it was a book on a stand. I’m happy with how it turned out!

Completed Work

• Added bookshelf interface
  To be honest, my “To Be Read” list in my old reading journal is a bit outdated. So, I updated my “To Be Read” list with books suggested by teachers and titles I’ve recently been meaning to pick up. To keep things clean, I configured the CSS to trigger a horizontal scrollbar if the shelf fills up with too many books.

I made a few front-end mistakes that took up some time to fix. For instance, it took me a while to figure out I wrote ‘scr’ instead of ‘src’ when embedding most of my images from this page. I also misnamed my width-limit and centering classes between my CSS and HTML, causing the layout to break across the page. This can be seen in the attached image. I briefly tested a small accent bar, which you can see in the in progress picture under the Project Hail Mary book cover, but removed it since it wasn’t adapting smoothly to different book widths.

I tried adding a folded 3D paper label for the “TBR Shelf,” but for some reason it would not show up. You can even see the blank card in the broken photo. At first I thought it was because I had accidentally retyped the same class assignments (after taking a short break), causing conflicting class statements but that did not solve the issue. To save time, I swapped it for a clean card design. 

• Styled featured book section
  I tried to mimic the same style as my journal cards and the current reading card on the homepage.

Next Steps

I’m going to add my reading journals logs to the website, and build out the “reading room” before tagging the v1.0 release. In the future, I may add genre-specific shelf filters and pop-up info cards for each title. 

Thanks for reading! - 2026/08/12-14