Devlog 06

After 26 hours, I can say that Version 1.0 of Pages for Pages is complete!!! I thought getting the site ready for shipping would be easy since I only had one more page idea. I underestimated how long it would take to implement everything, polish my styling, and fix the many issues I encountered.

Completed Work

The workspace I described in Devlog 03 has now become the Library Lounge. Features like the soundscape mixer, Pomodoro timer, and “Dim the Lights” button were heavily inspired by I Miss My Cafe, but I added my own design spin to fit the library theme and what I would personally want while annotating a book.

• Pomodoro Interface
  This was heavily inspired by Codynn’s Build a Pomodoro App  tutorial on YouTube. To avoid copying the code, I studied the final design, tried to recreate it myself, and then checked my work against the source code. This helped me simplify some of the JavaScript, despite me also making other parts harder for myself.
• “Dim the Lights” Button
  Essentially dark mode for the Lounge, designed for nighttime reading. It changes the site to an espresso theme and blends the navigation and footer into the background to increase focus. (I may add a site-wide dark mode in the future.)
• Soundscape Mixer
  I did not make the audio; it was sourced from Pixabay. It pairs especially well with a Jazz music video in the media player.
• Media Player
  One of my favorite features! It allows users to play any YouTube video that permits embedding directly on the page. I made it for music compilations and study-with-me videos while working, partly to avoid the distractions of switching tabs. This was the most complicated feature I made, and I relied heavily on AI for this part. My overall AI usage should still be well below 30% of the project.
• Favicon
  The favicon uses the same book design as my Stardance project image. I made it in Canva and used favicon.io to convert the PNG into an .ico file.
• Reading Logs
  All the reading logs for books currently featured on the site are now in. The site doesn’t represent every book I’ve read this year; I chose some of the most polished logs from my previous notebook. Going forward, I intend for the site to become my main log for new books.
• UI & Mobile Fixes
  After adding the logs, I moved the book images and navigation buttons higher on the Reading Journal page because the entries stretched the container. I also finally tested the site on mobile after deploying it to GitHub Pages and discovered I had forgotten to style the navigation for smaller screens. The last 30 minutes were spent fixing that. The site is functional on mobile, although it is designed primarily for desktop.

Notable Bugs I Faced

• A JavaScript conflict appeared when I added the new page’s code to my main script.js, so I eventually moved it into a separate file.
• There were so many typos that they kept slowing me down.
• 40 minutes, if not more, were spent trying to figure out why the YouTube media player wouldn’t work. I initially assumed VS Code’s Live Preview was the problem, but it wasn’t. After lots of debugging (and some AI help), I discovered I hadn’t properly implemented the embed path into iFramePlayer.src. Fixing that caused a second YouTube configuration error, which I investigated through the console on my deployed site—only to discover that it suddenly worked!? Was Live Preview the problem? As the number one rule of programming says: “If it works, don’t touch it.”

Next Steps

I believe all I have to do now is prep the README and ship the site!

Thanks for reading! - 2026/08/15-18