Personal Website (brian.re)

I spent a while testing out all the functionality on my website (including on mobile devices) and made a variety of minor page fixes!

I also improved the old 404 page to use my new page design.

I created a project card component and added a featured projects section on the home screen! I also moved all database query functions into dedicated projects.ts and blog.ts modules so they can be reused across the codebase.

I noticed that as I’ve been adding more pages, the navbar on mobile is becoming more and more crammed, so I created a simple hamburger navigation menu for smaller screens!

Besides that, I added 5-minute caching for projects and blog posts (since database reads are a lil’ slow) using Next.js’ unstable_cache function, and cleaned up the rest of the SVGs across the codebase to their own icon file in components/icons.

Almost ready to ship :D just gonna add a “featured projects” section on the homepage!

I finished adding a projects page and created a Payload collection so I don’t need to hard code them! I also added Payload email functionality for password resets, cleaned up the environment variable setup, and upgraded all dependencies.

Payload has lacked official support for Next.js v16 for quite some time now, but it’s finally here!!

Made some big organizational changes! I moved all of the icons in Skills.tsx and constants.tsx (contact links, footer links, etc.) into designated tsx files for reusability.

I also DRY’d out the skills data by assigning it in constants.tsx and mapping over it! Besides that, I just made a couple bug fixes and ran prettier.

Making the projects page next!

I added a nice fade animation when switching between skill tabs! I also added a favicon by pointing the source to my GitHub profile picture URL, and fixed a few more bugs.

I finished updating both the music player and the printer modal to use our new color scheme!

I ditched @tailwindcss/typography and completely transformed the styling of blog posts! Spent the past 2 hours designing custom CSS to pair with Payload’s RichText output.

Super happy with the results. Codeblocks look amazing now! Next step will be fixing the music player and printer modal to have them use our new color scheme.

I’ve been thinking about the website for a while, and figured there’s just so much wrong with it. The color scheme is incredibly generic and boring, and it seems more like a product landing page than a personal website.

So after a little over 2 hours of experimenting with different hues, and creating custom Tailwind classes to use across the website, I made some big changes! The website looks much more cozy now and features a nice navy blue design with a new font. I also scrapped the old grid background since it’s pretty generic. I’m incredibly happy about the new font and I think it makes the website much more inviting (I found it here)!

Next step will be fixing blog posts since they’re really messy with Tailwind Typography.

I added a printer section on my website and a modal to enter in the message! I also added filtering to block any inappropriate content using obscenity, rate limiting with Redis to limit each IP address to 1 successful request per 24 hours, and implemented VPN/Proxy checks with proxycheck.io.

Generally I’m strictly against VPN blocking, but unfortunately in my case I think it’s the only effective way to prevent abuse (I want to be able to sleep at night ).

Besides those changes, I also installed and ran prettier in the repo, and added basic Vercel analytics to see how many page visits I’m getting!

Finished implementing a printer module in the client to facilitate message printing! It uses Redis to store the messages as well, and the client polls every 30 seconds to pop the values and print them out.

I also made some major Redis command optimizations by using Lua execution for the printer module and a Hash structure for the status. I was able to drastically minimize the amount of commands necessary to sync the status and fetch new printer messages, which is definitely a huge plus considering there’s a monthly command limit on the free plan.

Time to build a messages input box on the website!

I’ve finally finished with the Settings page! I also made a few more bug fixes, removed the custom fonts (they look worse), made some security improvements for the Electron app (removed sandbox and nodeIntegration), and refactored the onboarding/settings validation and flow. Added a noice fade-in animation on the loading screen too!

I decided against a Devices page since it’s honestly unnecessary. If I really need to see the list of devices, I can just read the Redis status key.

My next idea was adding some cool label printer functionality! I have a shipping label printer and hundreds of unused sticky labels, so I thought it would be cool if I added a message box on my website that would print out these messages right on my desk!

I finished updating the website to properly parse the status data, and now it displays properly, yay!

The website backend fetches the status key from the Redis database, goes through each record, and sets the status of the device with the lowest priority number (a lower number means higher priority).

I’ve finished adding the Mappings page! I can now add a new application by its name and customize the status displayed when the app window is in focus.

Next step will be implementing the new status JSON structure into the website itself… so we can actually start using it!

I’ve made huge changes to the overall project folder structure so the codebase stays organized!

I also added windowless functionality (to keep running in the background), open at login (incl. for Linux), and renamed some functions as well for better clarity :D

The Status page is finally complete! I finished building the UI and added the main process logic as well to handle manual overrides, invisible mode, and serve live updates to the renderer process every 30 seconds!

I also added the get-windows library to find the currently active window and check if there’s a corresponding mapping (which I’ll be adding next in the Mappings page!).

Installed and ran eslint + prettier as well :)

Currently working on the Status page of the UI, which will feature an overview of the live status, as well as the option to enter a manual override or appear invisible.

I’ll still need to work on the logic in the main process that checks for open applications to update my status properly.

Finally finished adding an onboarding flow where I configure my settings like device ID, priority, and Redis API credentials!

When starting up the client now, it checks if the settings are valid, and if they aren’t, the onboarding flow is opened. Before saving the new configuration, the main process attempts to establish a connection with the Redis API first to ensure the credentials are valid.

Next step will be building the actual dashboard.

Forgot to devlog! So far I’ve built the core of the Electron app, and added a super simple interface just for testing to make sure Redis is working (it is!).

Next steps will be creating an onboarding flow where I can input the Redis credentials and customize my settings upon installation!

First devlog! I decided that I’ll build a lightweight client to report my status instead of relying on Hackatime and Slack presence to guess (which is what my website has been doing before :/).

So far I’ve migrated the /api/status endpoint to read a Redis database, which will be updated by the client to transmit my status!

I’ll be writing the client in Electron next! Had to create a new repository for it, which you can find here: https://github.com/brianwalczak/cabin-client