Devlog #06

It certainly has been a while since my last devlog! I paused development for a few weeks in order to finish another website idea I had been working on. I honestly then procrastinated on working on this again once I realized I had to readjust and familiarize myself to the inner workings of my old code. It was definitely more disorganised than I had remembered leaving it. When I did eventually start,  school was also beginning, so I have only been able to work on it in small intervals throughout the week. This slow development, combined with the roadblocks I stumbled upon (as described below) made the past 10 hours of development time come quite unexpectedly.

Completed Work: Imposter Game Functionality

As I said in the last devlog, I would begin to work on my second game: Imposter. I got the HTML done relatively quickly. I would say about half of my time was spent finishing the game logic for my Imposter game, which is now fully functional. It honestly took longer than I thought because my code for Secret Saboteur did not translate as smoothly as I thought it would to the imposter game.

Directly copy-pasting the Secret Saboteur code for the Imposter game led to a few errors, and I spent a lot of time combing through the imposter code to figure out what needed to be changed or removed from the secret saboteur code. I definitely need to figure out a better approach for adding new games. Fortunately, I have been able to implement Secret Sabouter’s CSS without many issues.

Completed Work: Design Revamp

As I was working on Imposter, I had been brainstorming ways to improve the UI and had settled on a few ideas. So before polishing the CSS for the Imposter game, I decided to revamp and finalize the UI for the secret saboteur game. With my old design, I felt as though everything was competing for attention. I think I used the card style way too often, which did not bring much diversity to the design and made organization a bit fuzzy. With my new design changes, I believe my design now has more breathing room and utilizes each game’s accent colors more directly. I also tried to make my shadow sizes, border radii and spacing a bit more consistent. Instead of using emojis, I have been trying to complete SVG icons. I sourced them from Lucide’s Lucide and Bootstrap’s icon libraries.

This definitely took up most of my time. Completing this took a lot longer than I was expecting. I think one reason time flew by so quickly is because when I first tried to change up my design, I messed up a lot of things. Midway through the process, I was questioning if doing this was a mistake, because I had ruined the look of Secret Saboteur and caused its game flow to stop working due to inconsistently changing a few class names. If I had to do this again, I would take note of exactly what I changed so I can easily work through errors and debugging.

I also found that as I was redoing my design, I ended up cleaning up a bit of my Javascript and CSS in the process. There was quite a bit of code from abandoned ideas still hanging around.

Next Steps:

I would not say the Imposter Game or the design changes are completely done. Those 10 hours snuck up on me; I think I need to spend a bit more time getting each of my games the level of polish I would like. However, I don;t think it will take too long, as I am really close to finishing this “polishing” process.

After that, I’m going to try and add two more games before making my first ship. You’ll have to wait until the next devlog to see what party game I add next. By the way, feel free to suggest any games and I’ll try to see if I can add them.

Thanks for reading! - 2026/09/06

Building Devlog

Stratum is assembled and fully functionable!

This was my second time ever soldering in my life, so I had to do a bit of review before soldering. Fortunately, everything went smoothly once I had started soldering. 

I started soldering the LEDs first so I had a completely flat surface to work on. I believe my first initial joints were cold, but I soon got the hang of putting on the pad to heat it up, adding the solder and removing it before removing the soldering iron, so I was able to fix up those joints. I do remember I also melted the plastic of one of the LEDS, but it still seems to be functional. Afterwards, I did the diodes, then the OLED, then XIAO RP2040 and lastly the rotary encoder. I got the hang of feeding the solder into the heated joint area pretty quickly. I honestly spent more time setting up the electronic components so it is in a good position to solder than actually soldering.

Once a small issue that did arise was that my OLED cutout was not big enough to allow the whole OLED to poke through the top plate. Although the screen is not blocked, this prevents switches from being able to fully stick itself inside the PCB hole. However, I was still able to (just barely) solder together the switch pins to the PCB. The connection is still strong, so my oversight was not disastrous. Screwing the case together was relatively simple. I also had an issue getting the XIAO RP2040 to connect to my laptop. Turns out almost all the USB-C cables in my house are for charging only, not data transfer. 

I did not include this in the logged time, but when I first uploaded my firmware, the OLED displayed a static pattern instead of “MAIN” (the default layer). After a bit of troubleshooting I eventually figured out it was because I included a clear action in all of the function responsible for controlling my OLED display. I fixed this by removing it and adding a function that pads every line to full width (clearing previous text in the process) instead of clearing the whole buffer.

*FYI: I did all of my design work for the macropad during the Outpost event, so my design got approved using the form rather than on Stardance. To ensure my design hours don’t get added to my build hours, I just decided to make a new project dedicated to tracking my build progress.

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 #05

The first Pass n’ Play game is now fully playable and polished! The core functionality was finished shortly after posting the last devlog (about 3.5 hours of coding in), but the real work happened afterward. In order to make the game feel more polished and actually part of the Pass n’ Play design system I had to tighten the layout, fix hierarchy inconsistencies, and clean up the UI. 

Completed Work: Javascript

Right after posting the last devlog, I realized I had completely forgotten to implement the Guesser role. Once I added it, I noticed I had accidentally configured the game so the first player always became the guesser. This meant rewriting a section of my assignRoles() function so roles actually randomize correctly.

After that, I finished the Javascript for both the guessing screen and the results screen. The biggest friction point was the saboteur button layout. I originally formatted them in a column, but switching to rows made the spacing and logic behave properly.

The longest debugging issue came from something small. I had removed a header from the info popup in my HTML, but forgot to delete the Javascript function that controlled it. This “ghost” function caused a whole section of my script to stop working, and I kept thinking I had broken other functions. Once I finally noticed and removed the unused function, everything went back to normal.

Completed Work: CSS

Once the game was functional, I felt the CSS still looked unpolished. The text inside <main> did not feel like part of the same physical UI system as the buttons and headers. I rebuilt these text blocks into proper card badges so they look like real components instead of raw HTML. I also inverted the text hierarchy for the game header, removed redundant labels, and cleaned up the popup by removing the extra close anchor and header (which caused the Javascript issue mentioned earlier).

I also spent time making sure the design would translate well to mobile. With some research and AI help (which only confirmed formatting issues and did not write code), I updated my layout so everything uses a unified 600px max‑width. This prevents the header from overflowing on smaller screens and makes the whole app feel like a cohesive handheld interface. The button grids now collapse into balanced two‑column stacks on narrow displays.

While doing this, I adjusted a few element styles, reorganized the setup elements into a clean vertical column grid, and grouped Play Again and New Game into a structural wrapper so their spacing is predictable. Overall, making the spacing and alignment more intentional helped the entire interface feel more cohesive.

Next Steps

I am now starting work on Pass n’ Play’s second game: Imposter, based on the “Imposter Who?” party game that was popular earlier this year. I am also still unhappy with how the Game Setup screen looks, so I will probably adjust it soon. Any advice on improving the design would be greatly appreciated. 

Thanks for reading! - 2026/08/06

Devlog #04

I have almost finished the first party game for Play n’ Play the past few days. I completed almost all of the game CSS, did most of the JavaScript and made some additional edits and fixes. For instance, after reviewing the HTML my sleep deprived mind wrote last devlog I realized I had copied the old game layout a bit too closely to my liking; including parts I specifically wanted to improve. With a clearer head the next morning, I redesigned the setup screen. One change I made, for instance, replaced the bulky button grid with compact quantity selectors for choosing the player and saboteur count.

It was at this moment I realized I should go back into my planning doc and finalize my notes on game logic. Some of the mechanics I originally wrote down didn’t match the flow I wanted anymore, so I rewrote those sections and made sure the updated logic was reflected in my JavaScript structure.

This redesign also helped me clarify how players move through the game (especially the setup and guessing phases) which made the later coding steps feel more intentional.

JavaScript Progress

I said in the last devlog that I would update once the JavaScript was finished, but my logged time was approaching the 10‑hour cap, so I wanted to post earlier to be safe. Right now, the JS is fully implemented up to the guessing screen, which puts me at roughly 3/5 of the game logic completed.

My workflow looked like this: I explained my game logic to an AI (ChatGPT) and asked it to describe the functions I would need, just to outline their purpose (it did not write the actual code for me). With those descriptions and my own research, I drafted the most of JS file in commented sections like game setup, discussion, and event listeners. You can even see these comments in the JS screenshot. After that, I wrote the actual functions myself, discovering how each piece worked as I went.

I should also note I used AI for some tedious tasks, like checking the game’s 105 discussion prompts (most of which I derived from the oold game version) for duplicates or adjusting ones that weren’t broad enough for a general audience.

Completing CSS 

Even though I started with JavaScript, I eventually drifted into CSS (partly because I wanted a break, and partly because I wasn’t sure how clean my HTML structure was). I swapped back and forth between working on JS and CSS until I accidentally completed most of the styling.

Implementing the CSS helped me see where I needed more classes or where the markup was missing hooks for interactivity. For instance, writing the CSS made it easy to envision and test how the progression button would look when disabled or enabled (depending on if all the required information on the game setup screen was complete). I’m hoping developing future games for this project will go faster now that I’m more familiar with this workflow.

Additional Reflections

Working on this project has taught me a lot about VSCode shortcuts I didn’t know before; small things that make typing and navigating code much faster.

Learning JavaScript has definitely harder for me than learning HTML and CSS, but I’ve noticed some similarities to C++, which I’ve used for past hardware projects. That familiarity makes the learning curve feel a bit less steep.

As for the website design… something still feels slightly “off.” I can’t pinpoint it yet, but I think the aesthetic could be improved. If you have suggestions, I would greatly appreciate feedback in the comments. 

Next Steps

My plan is to finish the JavaScript completely, then polish everything afterward and commit my updates to GitHub. If all goes well, the next devlog will cover the finished, playable version of Secret Saboteur.

Thanks for reading! — 2026/08/04

Devlog #03

Built the main HTML structure for Secret Saboteur (my first game) today. I was able to speed my planning process up by referencing the layout I had set up in my previous draft, making sure to not directly copy my old code. I may add a few more additional components as I work on the JS and CSS later on. 

I found that writing a big block of HTML at once makes it a lot harder to find typos, which I often made. Another thing I spent a lot of time on was  cleaning my HTML structure so adding JavaScript later won’t turn into a mess. The hardest part was preparing the markup for JavaScript. I’m used to only setting things up for CSS, but after researching JS (and getting debugging hints from AI), I realized I needed to specify waayyy more classes than usual.

Now that the foundation is finally in place, my next step will be making the game actually functionable by bringing it to life with JavaScript.

Thanks for reading! - 2026/08/01

Devlog #02

Added consistent styling to both game instruction pages. I styled the instructions for the first game, Secret Saboteur, on my site and added a new instructions page for another game - Imposter (based on Imposter Who?). I reused the homepage’s layout and visual identity, but the fun part was making the accent colors fully customizable. By turning the accent colors into CSS variables, I could swap themes right from the HTML without touching the stylesheet!

I think this small change made the site feel cohesive while keeping customization effortless. It’s satisfying seeing design consistency emerge from my use of variables and general coding structure.

Thanks for reading! - 2026/07/29-30

Devlog #01

Today, I worked on making and styling the homepage. I also drafted the info page for one of my games, Secret Saboteur, in html. The hardest part today was trying to organize my code so that I could easily add more games in the future. Much time was spent fixing a few syntax errors I made that broke my CSS design.

Pass n’ Play will be a website that hosts multiple party games that can all be played on one device (preferably a phone). It will be great for times when a group of friends want to play a game but have no board or card games handy. It avoids the issue of playing over a poor connection or not everyone having their own device, which many online multiplayer games have.

Project Inspiration

During school at lunch, my friends and I used to play Imposter Who? at lunch. However, we eventually got bored of the categories and didn’t want to pay for the expanded word banks. This made me wonder if I could code my own version of the game that had its own categories - which led me to create a quite scrappy version, heavily influenced with AI and super disorganized (the whole game crammed into a single, 2375 lined, html file). I also started to add a super buggy version of Secret Saboteur, based on a Smosh Games video I had recently watched.

So I decided that I would reattempt making those games from scratch for the Stardance challenge. This time, much more organized and with no AI. The only thing I will be borrowing from the previous version is some word banks I made.

Completed Work

In my previous version, the instructions were cramped onto one screen and honestly were not that clear, so I gave each game a dedicated info screen in the new remake. Additionally, the games did not really have an identity of their own. The CSS was pretty basic (the only other color was cyan). 

The new design draws partial inspiration from Nintendo and heavily from neo‑brutalism web design. A guide I found on Medium I read that really helped me capture the aesthetic. Each game will share the same overall style but have its own emoji and accent color, giving it a distinct identity while keeping the ecosystem cohesive.

Next Steps

The next devlog will probably be when I finish styling the info page for Secret Sabotuer, which will be the first game I will make functional. I’m also compiling a list of party games that work well on one device. So far I’m planning to include Chameleon and my own game, Role Roulette.

If you have any suggestions for fun one‑screen party games, I’d love to hear them!

Thanks for reading! - 2026/07/29

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 03

I gotta go to bed soon, however, I would say my website is finished and I have successfully completed my challenge!

Completed Work

At first I went for a more pink and orange-ish color palette (as I was mimicking the color palette on my Canva design) and felt it gave a warm, cozy feeling. However, my favorite color is blue, so in an attempt to make the website more personal to me I experimented around with the colors - which ended up taking a bit longer than expected. Afterwards, I learned that it was possible to make elements, like a paperclip, completely out of CSS, so I spent the rest of my time adding a paper clip to the archived section of my website. I also made a few small formatting changes to the html (like adding line breaks and fixing typos, for instance) to polish up the design a bit more. I also added a favicon.

Although I could add some more elements, I feel like I have completed my main objective and would like to use my remaining time to prep my website for submission!

Next Steps

I will definitely try to consistently make small future updates to the site where I will add more logs and scrapbook elements to the site. I’m thinking of making it messier with doodles, polaroids, and scrap paper scattered around the margins. I’m also debating the font as I feel it lacks some readability but it also matches my rushed handwriting well.

Thanks for reading!

Devlog 02

I decided to go with the scrapbook theme as I feel like it would be more fun to implement. The layout is actually inspired by a Canva design I made for a school project where I found that I could make a decent looking scrapbook design without adding a bunch of fancy elements. A few simple shapes, rotated and colored nicely produced a cohesive design.

An hour later…I got the bulk of the css complete. All I have now is polish, although I’m pretty happy with how it is already. I think I have been able to get a “scrapbook” vibe without having to add a lot of textures. The layout is actually inspired by a Canva design I did for one for a project where I found adding simple shapes can create a nice-looking scrapbook design without adding a bunch of paper elements.

Completed Work

An hour later, I have gotten the bulk of the CSS complete, and I am pretty happy with how it turned out.. I think I was able to get a “scrapbook vibe” without having to add a lot of texture. I really like how the navigation turned out. At first it was a band at the top of the website, but I decided to remove the title from it and make it part of the “hero” section of my website and then use a flex box to center and format the navigation links, which I feel really improved the design.

Next Steps

The time I have allotted for this project is running out…I’m just going to do some touch ups and I think I will be ready to ship!

Thanks for reading!

Devlog 01

After attending Jenin’s Personal Site Workshop, I felt inspired to jump back into web design and push my limits. I am challenging myself to build a completely new website from scratch by the end of this evening, meaning I only have about 5 hours to do it. Using what I learned from the workshop and a bit of past experimentation with HTML/CSS on w3schools, the clock is officially ticking.

Project Vision

I don’t want to reveal too much personal information, but I still want to make a website that feels personal to me. At the same time, I need to keep it simple. I am constraining this design to all fit on one webpage and avoiding javascript usage so I actually have a chance at finishing this in one evening.

I had a general idea of what I wanted to make: a semi-anonymous digital journal website with monthly updates. A website I could use to quickly see my growth without having to read a lot of details. Yet - planning the html for the website was a bit of a challenge. I came up with two website drafts I scrapped mid-way before settling on an idea and finally finishing the html. The picture I took shows my general html outline. I have written each entry in greater detail on a separate document.

Next Steps

Next up is the CSS. I’m debating on doing a notebook style (line paper background, website looks like it’s all contained in a notebook) or a scrapbook style (a little bit more work but I can add some fun elements).

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!