v2026.09.06
UI/UX changes and adding Storybook
Published Sep 6 · 2 min readTable of Contents
Website
The whole thing has changed! I locked in and actually made something beyond “okay na ‘to”—it’s a Filipino expression that conveys the energy of “this is probably fine.”
On the homepage, I added a list of my five latest articles or writeups, followed by a feature section for Against the Dying Light which is a publication where I write under my pen name Rage—sometimes I also call the publication itself Rage because I agree it is quite a mouthful. And then there’s a short blurb about myself, and finally a list of my previous work experience.
The publication pages and entry pages have also changed a little bit, but I will probably polish this more over the next days. Oh, and I added a reading time metric for each article!
Internal tooling
Storybook
I added Storybook Astro to the project to be able to prototype designs much quicker and so I can have a playground for experimental designs or components in development that the site isn’t using just yet.
The setup was pretty straightforward, except for two things:
- Styling with SCSS
- Fonts
I did have to change the way I’m writing my styles if I want to write a story for an Astro component. Previously, in my .astro files I have a <style lang="scss"> for styles. This doesn’t work with Storybook Astro for some reason, although the documentation say it automatically injects styles (maybe only for vanilla CSS?). As a result, for any components I am developing via Storybook I need a separate Component.module.scss file for styling.
I also had to re-declare my @font-faces in a .storybook/preview.css file (it also imports my global.scss) because my font variables are not resolving into anything otherwise.