Devlog #09

I got some spare time to work today, so I thought I would add a few tiny features to elevate the Pass n’ Play experience. I think this project is ready to ship; each game is fully playable and I think now is a good time where feedback can help me greatly improve each game so it provides the best experience possible!

Completed Work: Parties

With a lot of assistance from AI (when figuring out how to properly get my localStorage function working), I have incorporated a new “Party” system into each game! It allows a group to save all of their names as a “Party” to their device so that they can quickly fill in every player’s name upon loading a new game. The new system supports up to 8 parties, which can each be given a unique name. Aside from making it easier to switch games, because of its localStorage usage, if the same group of friends regularly use my website, they can skip the step of inputting their names every time they decide to play.

This idea was inspired by a similar feature I saw on an app (I can’t find its name) that was very similar to Imposter Who. Right now, the system is built into each game’s game setup screen, but I am considering moving it to the home screen so that each game screen is a bit more clean. If you are a reviewer reading this, let me know if the “Party” system gets in the way.

Completed Work: Round Timer

I also added the option for a round timer to the Imposter game. It was relatively simple as I just had to move around the timer code I used for Signal Jam. The CSS was moved to my global CSS file and I copied over and adjusted the HTML and JS.

While I was at it, I made a few more polishes, such as adding a custom designed scroll bar.

Next Steps:

I am going to ship the project today. I already have my README drafted, I just need to make a few edits.

I am not done with this project. I’m going to wait and see what feedback I get, but some plans I have for the future are making a globalized JavaScript file, adding a custom word/prompt bank feature to most games, adding more prompts to each game, adding more party games that can be played on one screen and adding a filter and sort system to the homepage. 

Thanks for reading! 

Devlog #08

Development has really slowed down now that I am entering the thick of it at school. Regardless, over the past two weekends, I finished Signal Jam and started the fourth (and final) game before shipping, The Outsider!

Completed Work: Signal Jam

Finishing this up was quick and smooth. I don’t remember exactly how long it took, but it was fast enough that I decided to wait until completing the idea I had sitting in the back of my mind (The Outsider) before posting another devlog.

I reused the Results screen code from the previous games, tweaked the content to be specific to the game, and added a few extra if statements since this game has more win conditions. After playtesting, I made some small polish changes and committed everything.

Completed Work: The Outsider

This game’s flow was inspired by Chameleon.  I went in expecting it to make a quick reskin of Imposter with a new word grid feature, but building that grid took more time than planned. Getting the grid to look good on both mobile and desktop was tricky. I eventually decided to lock mobile players into landscape mode so the grid would have more space and be easier to see when everyone’s looking at the same screen. Then, I had to figure out wrapping and line break issues to ensure the words were consistently displayed neatly.

One technical highlight I would like to share is that, originally, I thought about storing the selected word index using a data-selected-index attribute on the grid container, but since attributes only store strings, handling 0 (the first cell index) would have required extra checks to avoid false negatives. Instead, I used a closure variable (selectedIndex) inside the function that built the word grid. This clean solution enables it to reset automatically each time the grid renders, which also clears the previous selection. 

Next Steps:

The project is basically ready to ship! I’ll make one more devlog to add some localStorage features and wrap things up before release. 

Thanks for reading!

Devlog #07

The CSS Revamp is complete and the third game for Pass n’ Play is in development. After this devlog, I’m going to make sure I post more frequent devlogs. I keep procrastinating…

Completed Work: Finished Polishing Website

After the last devlog, I spent 4 more hours finishing up the CSS and the Imposter Game. The second installment to Pass n’ Play is now fully functional, with 156 different words to play with. It is also fully polished to a level I am ready to present, both in game flow and aesthetics. I think one thing that made this process longer than I had initially thought it would be is the fact many minute details needed adjustments throughout all my code. Since I had copied over the secret saboteur code for the imposter game before changing up the UI, I had to ensure I properly transferred the new style changes I made to the HTML and JS of the imposter game (since only my css is globalized).

I finally think I have locked in the style that I would like to use for this website and that my code is a lot more organized than before. This should hopefully make development quicker in the future.

Completed Work: New Game

Also continuing from my last devlog, I have begun working on the third party game for Pass n’ Play: Signal Jam. Its fundamental gameplay is similar to the classic 20 Questions, however it has specialized roles which I believe create interesting dynamics and increase the fun. The game flow was inspired by another party game called Werewords. So far I have my game information, game setup, main discussion and voting screens done. It currently has 75 unique words as game prompts.

I’m finding it a bit hard to add additional insightful details because I am basically repeating the process I had to make the Imposter. So, I’m going to describe how I have refined my process to work a bit faster than with the Imposter game.

I first made the Game Information page so I have all the rules established. Each game is its own file that keeps all files specific to the game within it. So in order to write the game information I copied the Secret Saboteur info.html and edited the content to explain the rules for Signal Jam. This page has no JavaScript and was already linked to my generalized info.css file, so I did not have to do anything else.

After that, I started building the game in sections, starting with all the code I would need up to the discussion screen. For the HTML, I would copy over individual blocks of code I knew I could reuse (often editing them to fit the language of the new game), note what new components  I needed, and research how I could add it to the game. For instance, this game has a round timer, which no other game had, so I had to add  a few new HTML and JS elements. Also, to keep things organized, instead of adding more stuff to the main game.css file, I used a separate style.css page. Once everything was polished to a level I was happy with, I started on the next chunk of my game. I continued this process until the game was completed. This was much better than what I did before for the Imposter game where I basically duplicated all the code for Secret Saboteur and then scoured through it to see what I needed to change and remove.

Next Steps:

I primarily need to complete the game (which is almost done, I just need to make the Results Screen!) Afterwards, I want to add a custom word bank feature to the game that saves with localStorage and an option to add a round timer to the discussion screen. Finally, I got to think of one more game to add before I ship.

Thanks for reading! 

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!