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

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

Devlog 04

It has been a while since I did some work on this! Since the last devlog, I have been focused on refining the reading journal to the point it is now almost complete! Doing this section of this website has helped me learn a few new things about Javascript inputs. Additionally, I have read up on how to commit in Github and realized I have been doing them horribly wrong. From now on, I’m going to follow proper commit practices (like writing in the imperative). I’ll also see if I can edit my old ones so they are better.

Completed Work

• Added journal interface and search bar functionality
  You can see how it looks in the attached video. The search bar input searches books based on the book title. I structured the JavaScript so that I can easily add new entries using an array with key-value pairs. The books I chose to feature in my reading journal for now are not necessarily the most recent ones I have read, rather they are just some of the books I found really interesting or really liked and also had detailed entries in my previous reading journal.

I think most of my time was used learning the JavaScript I would need to implement the search and the touch screen swipe functionality. I also had an issue where some of my CSS did not work at all, causing elements to not be placed where I wanted to, only to realize I had changed up a class name accidentally from my JavaScript to my CSS. 

• Changed the front page card
  Its contrast is a lot better now. Before I was going for a cardboard vibe, but it does not really work with the site background. I also changed the featured book as I have finished reading the original book and want to keep the site up to date.

• Renamed Reading Room to Reading Journal
  The feature I described in the last devlog will now become the reading room. I think it also makes more sense to just call it Reading Journal.

Next Steps

I am going to work on the Bookshelf now. I believe it’s going to mostly be CSS, so I hope it will be quick. I’ll probably add my journal entry content in by then as well.  I am also thinking of implementing some sort of date system rather than having the page always go back to the first entry in my JavaScript.

Thanks for reading! - 2026/08/10

Devlog 03

2026/07/27
I was originally planning to submit this website to the Personal Website mission, but I noticed this project was taking longer than I expected. So I decided I will submit this as its own standalone project and save my other website idea for the mission instead. I feel like this approach prevents me from rushing my site development, and enables me to take the time to learn and understand how to implement all the features I want in order to build a fully polished website.

For instance, I am now thinking of adding a new feature: a page dedicated to studying or annotating books. I’m imagining a cozy little workspace with a pomodoro timer, a to‑do list, quick media access, and a notes section where I can jot down thoughts before turning them into proper journal entries. Please feel free to suggest any other feature you think this reading website should have!

Completed Work

• Designed the site’s navigation so it looks like a folder time system. 

I achieved this by formatting the header section into a flexbox with a green background ( my website’s accent color) so I did not have to add borders to my folder tabs. I then converted the navigation into a flexbox, removed the default list styling, and added padding around each link so they resembled folder tabs.  After adjusting the fonts and colors so the tabs look cohesive, I added an active class to each navigation link on its corresponding HTML page.

• Adjusted prose animation

I essentially rebuilt the intro sequence to make my website feel more cinematic, which took a bit longer than expected because I kept making typos that broke the whole sequence…

Before, the prose text simply faded in when you opened the site, and the JavaScript let you skip it with a key press or screen tap. You’ll have to see the new animation on the finished site! >:) It sets the tone way better and makes the prose feel more intentional.

Next Steps

I still have to polish the other pages. I’m going to start with formatting the Reading Room section and start adding journal logs.

Now that I’ve decided I’m going to go at a slower pace, I’m going to make sure  I want to understand every syntax choice I make instead of just throwing code I see online that will supposedly modify an element the way I want it to so I truly get to know HTML, CSS, and JavaScript more deeply.

Thanks for reading!

Devlog 02

2026/07/25-26

Today I discovered that web design is really fun! I loved experimenting with all the different effects I could create using CSS. Honestly, I was surprised by how simple some features were to implement. For example, I hadn’t realized that changing an element’s color based on its state only requires specifying that state (like :hover or :active) before assigning the style rules. 

Completed Work

So far I have only really been polishing the home page. 
Here is a brief overview of things I have completed:

• Added two google fonts

I chose Lora as my body text as it is known for being a readable font and I really wanted to use a serif font for this website. I chose DM Serif Display as my header font because it is still serif, but distinct enough from Lora that the headers still pop out and keep the page from looking bland.

• Determined website color pallette and applied the colors to background and text (including links and their various states)

I went for a cream-colored background, with earthy tones as accents.

• Centered home page text and added a subtle glow effect to all letters using text shadow
• Formatted buttons
• Added intro animation 

It’s a little bit dramatic but was really fun and not too hard to implement. I spent some time adding a JavaScript function to allow someone to skip the animation by clicking or pressing a key as I found it a bit annoying to have the animation replay every time I went back to the homescreen.

• Polished “What I’m currently reading section” on the home page.

By doing this, I learned how useful flex boxes are for organizing content. They made it much easier to design the “Currently Reading” section on my homepage as everything aligned neatly without me having to fight with margins or positioning. Most of my time today went into experimenting with this layout. I think I’ll use a similar CSS structure when building the journal pages later on. 

Google’s search AI, Gemini, was a huge help in finding the syntax I needed quickly. However, I made sure to write all my code myself. Instead of asking AI to build entire sections of my project, I only used it to clarify specific syntax questions (like how to rotate a flex box) and then worked through the implementation on my own.

Next Steps

Before I go any further, I’m going to have to work on my organization. My indentation is inconsistent and has been making looking over my code a bit confusing!

After that, I’m going to work on the navigation, and then I am going to continue working on the CSS for the other pages. I’ll probably simultaneously work on the Javascript for certain elements at the same time - meaning my third devlog might be my last.

Thanks for reading!

Devlog 01

2026/07/24
I used to keep track of the books I read in a reading journal. It not only fueled my interest in literature but also helped me read with greater intention, as I knew I would have to record my thoughts later. Over time, though, schoolwork took over and my entries slowly dwindled in frequency until I completely stopped. Now that summer has returned, I’m reviving my reading journal…this time in digital form!

Project Vision

I want my website to stay simple yet meaningful. I don’t want to take too long to build it and want it to be easy to update. It will have three pages: the Home, the Reading Room, and the Bookshelf.

I’m aiming for a cozy, library‑like atmosphere. The home page will set that tone right away with a short prose piece explaining the site’s name while setting its mood. It will include a link to the Reading Room and have a “Currently Reading” section below.

The Reading Room will hold my actual journal entries. Visitors will be able to browse through them or search for a specific book to view its entry. I plan to learn some JavaScript through this feature as I think it’ll be a fun challenge and a great way to make the site interactive.

The Bookshelf will serve as my TBR list. I’ll experiment with CSS to make it feel like users are pulling out a book when they hover or click. There will also be a small “Featured” section where I’ll recommend a book I loved, hopefully adding to the library theme! (It’s like a librarian’s book recommendation!)

Completed Work

This idea came together while following Jenin’s Personal Site Workshop. I spent about the first half hour experimenting with HTML and CSS while brainstorming the concept. After that, I took my ideas together and drafted the site structure entirely in HTML.

I mostly followed the personal site guide, only searching for extra features I wanted to add. Whenever I used code examples from online sources, I made sure to understand how each function worked and challenged myself to apply it elsewhere in my code so I was learning HTML properly through practice.

Next Steps

With the HTML foundation complete, my next goal is to polish the site using CSS. I anticipate that will be the focus of my next devlog. After styling, I’ll dive into JavaScript and add finishing touches before shipping the final version.

Thanks for reading!