Devlog #5

This one is probably going to be a bit of a mess. Firstly, I spent time adjusting the CSS styles to look more pleasing. Then, I had to figure out why the API didn’t work on GitHub Pages, and the solution was simply just reading the guide!!! I should do that more. Then the images were failing to load in GitHub Pages, which required further debugging. The last thing I made were five shortcuts relevant to me, and probably others too if I had to guess.

Devlog #4

Figuring out APIs took a long time as this is my first time using one and using Vite…
Before all of that, I spent almost an hour changing the search button to an icon and wondering why it was misaligning the search engine selector and search bar, and then I added the foundation for a settings menu.
Now over three hours were spent on figuring out Pexels API. I installed Vite midway through this project, so I had to sift through what was unnecessary. Okay, then came the image API. I bounced between Unsplash and Pexels and landed with Pexels. I had no clue how to integrate an API key at this point, so that took me a long time. Actually getting fetching images to work was a hell of a lot of debugging on my own. Eventually I got it to work after a lot of time… I decided to make the background images randomized per hour, but for now it is per minute for testing. I will need to adjust styles further later.
It’s also bugged with the GitHub Pages deployment, so I’ll need to figure that out too… oh well.

Devlog #3

I burned an hour and 45 minutes on making the search engines switchable… :D
I spent around an hour trying to make a functioning drop down menu, first with CSS :hover pseudo-class but to no avail, before moving to a button with JS to toggle it. Then I had to fight the positioning for maybe ten minutes. Getting it to work was much easier, but still took me some time as I needed to figure out how I could more easily add click event listeners to all options without separately getting each element.
I’ll add more engines later, but I want to make a shortcut dock for preferred or most visited sites next.

Devlog #2

I spent time adding CSS styles to the search bar and added a clock. I experimented with more pseudo-classes so that there is a slight glow effect when you select or hover over the search buttons. The clock was simple but the first JS I used in this project. I also added another font to use for the time and search bar text itself, still using Google Fonts.

A nature-themed New Tab page

I’m now working on the New Tab mission. I have started with making a basic search query that does function along with a basic design.
It took me some time to figure out how to make the search bar actually work, all because I put name="q" in the wrong place…
I decided to experiment with custom fonts using the Google Font API. I spent some time trying to figure out how to get it to work with a .ttf file and other ways, before I realized how Google makes it very simple by providing the HTML links.

Devlog #7

I made a simple start-up screen, but I spent an hour fighting image scaling and general dimension quirks until I (mostly) figured it out. I used a simple fade-in from black paired with a fading blur effect to try and recreate the intro to Rabbit and Steel, along with using a cut version of the intro OST. (except I forgot browsers block autoplaying audio)

Devlog #6

Well, now I move onto WebOS 2.

I made the windows resizable! It took way too long to figure out why scrolling content wasn’t working, since I wanted it to be able to scroll if a window was really small. But, that was really only one of the problems. After figuring that out, I still needed to readjust the apps and the other content, such as the music room animation or the timer crow. The best option I could think of? Don’t even deal with it (for now). So for the time being, the animations are gone.

I also made the app icons animated with basic CSS animations, and I think it just adds a nice touch to it.

Devlog #3

Added the contact section and a header. I’m not sure that there’s much to talk about, it’s just a contact section with links to my GitHub and my email, and the header simply links to each section.

Devlog #2

I have added a Projects section to the site. I tried using classes more over inline styles. I also made use of the detail and summary tags to make each section collapsible.
Unfortunately I don’t exactly have many projects to put up here, but I’m sure that will change over time.

Devlog #1

I’m now working on the personal website mission, which I’ll probably expand further beyond it’s completion. I made simple containers for the title and text sections, and have only written out the about me section. I made it themed around autumn (or at least, barely, for now?) because autumn is the best season and I will die on this hill.

Devlog #5

Added a timer app. This took a bit of time to figure out in terms of functionality. But I was far more frustrated with trying to position Twili (the crow) and the rings in the center. Like the music player rabbits, this is animated as well, and the rings rotate. I also added sound effects from Rabbit and Steel for the timer being started and when it goes off, since what good does a timer do if it doesn’t notify you audibly?

Devlog #4

Added a music player. This music player just uses the Spotify preview embed of a playlist containing the full Rabbit and Steel OST, which I thought was preferable than importing all the sound files. It took me some time to figure out how to make the image animated, as it was a spritesheet taken directly from the game, but I think it adds a lot more to the music player. In future apps, I definitely want to add more animated assets.
I have also expanded the settings page to include all backgrounds in Rabbit and Steel, and I have utilized local storage to save the settings and the background for future visits.

Devlog #3

Added a settings page, albeit very barebones at the moment. This allows you to change the backgrounds; matching with game area backgrounds in Rabbit and Steel. There are two settings for window blur and drop shadow.
I also spent (a lot of) time trying to add transitions but I honestly still have no clue how to use them properly.
I’ll add more backgrounds to select later, but I want to make some other app.

Devlog #2

I did some polishing and made a new app. I decided not to make a notes app as the guide directs, because I felt it to be unfitting. So, I instead made an embedded wiki (although I hate Fandom, Miraheze will not load).

A Rabbit and Steel themed WebOS?

You should steel yourself NOW!

Rabbit and Steel has been one of my favorite games to play, especially with friends. So I thought, if I were to make a WebOS for Stardance, I wouldn’t try to make one that would be useful in every single sector possible, but something that I would just have fun with. So I landed with a Rabbit and Steel themed idea.

Right now, all I’ve made is the landing window, topbar, and a background, loosely based on the white border and dark transparent background used in the Rabbit and Steel UI.

Obviously, the next course of action is following through on the guide, but then I will try to add more Rabbit and Steel themed features later.

Anyways, you should play Rabbit and Steel.