Welcome to my blog (again)

I’ll start off by apologising to those of you who were checking my website for updates throughout 2025.

Life threw a few curveballs my way last year¹ and I didn’t post new material on the website that I created. Once things finally settled down, I thought it was about time that I revisited my website and finally wrote a blog post with meaningful content. Before I started though, I couldn’t help but notice how “loud” my website design was; it had too much personality…and not in a good way. Although I am a big proponent of using quirky fonts and bold accent colours, I kept feeling that my previous choices were unbalanced and could potentially distract you from reading or looking through my material.

Not only that, behind the scenes my approach to component blocks and code refractorisation were messy and incomplete. And, if I’m being completely honest, I was so focused on designing the website that I deferred the most critical aspect of the blog — the automation that collects and presents all the material I’ve written².

Recreating my website

Instead of reworking or massaging my existing website to amend and rejuvenate the design and coding decisions I made in 2024, it was time to start afresh contrary my initial blog post where I insisted that I’d “resist” the temptation to “re-do some of the components and styles.” I relearnt how to use the Astro Framework, focusing on how to collect and automatically format blogs using .md or .mdx files; revisited some FrontEnd Masters material for vanilla HTML and CSS organisation; and — my favourite part — created mock up designs in Affinity Designer.

Experimenting with Google AI Studio and using Affinity Designer

As an experiment, I thought this would be an excellent opportunity to try Google’s AI Studio to create a website using a high-level, vague prompt. I didn’t expect much from “Create a sophisticated, minimalist personal website for Rafida Deo focusing on typographic design and personal writing.”

I was so wrong.

So, in full disclosure, I’d like to attribute some of the design choices I’ve made to Google’s AI Studio: the heading font choice (PlayFair Display) and the grid-like design for the home page. The React-based website, however, did some funky things when the viewport width decreased, and had some odd CSS choices that were declared in multiple places.

After this mini AI experiment, I used Affinity Designer to visualise how my new website would look with different screen widths and orientations. Figure 1 is a screenshot of the multiple Affinity Designer artboards I created as part of the mock-up phase. I experimented with different shades and colours, different font sizes, and different element positions across the artboards displayed. Click on the figure to open it up in a new tab to have a closer look!

Figure 1. A screenshot of my preliminary, mock-up website design using Affinity Designer. Click the image to zoom in, noting that the filler text is a bunch of gibberish.

Implementing learnings from the “Build your first Astro blog” tutorial

For anyone who is interested in how to build a blog from scratch, I highly recommend going through Astro’s “build your first Astro blog” tutorial which can be found on the Astro website³. As summarised on their site, the tutorial walks through how to:

Set up your development environment and create a project, which in my case was through npm create astro@latest, opting for a minimal template. Back when I created my first website and was still quite new to github and git, I found the “test your knowledge” and “checklist for moving on” fields of the tutorial to be quite valuable.
Create pages and blog posts for your website. This is a detailed, multi-step demonstration of how to create new .astro using the generated template as a basis for demonstrating how to update the code with the explicit objective of creating a blog. To make it more challenging, there are many “try it yourself” sections that users need to be expand to see the answers.
Build with Astro components. Components are extremely versatile building blocks that are designed to be reused throughout your application. For example, the header, footer, and base layout I use for blog posts are all components. This portion of the tutorial also introduces you to <slot/>elements which act as a placeholder for content that can be “slotted” in — you’ll see below that I use a <slot/> in my base layout.
Add interactivity to your site through the use of JavaScript or TypeScript files. This is incredibly helpful depending on the complexity of the project.
Deploy your site to the web. I chose to skip this part of the tutorial because I have used CloudFlare to deploy a website in the past. However, Kevin Powell’s “Professional CSS: Build a Website from Scratch” course on FrontEnd Masters goes through how easy it is to use Netlify to host websites⁴.

The structure of my `BaseLayout.astro` and `PostLayout.astro`

Here is the HTML of my base layout, demonstrating the use of components and <slot/> elements:

---
import "../styles/global.css";

import Header from "../components/Header.astro";
import Footer from "../components/Footer.astro";

const { title, description } = Astro.props;
---

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
        <meta name="viewport" content="width=device-width" />
        <meta name="generator" content={Astro.generator} />
        <meta name="description" content={description} />
        <link
            rel="preload"
            href="/fonts/Inter-VariableFont.woff2"
            as="font"
            type="font/woff2"
            crossorigin
        />
        <title>{title}</title>
    </head>
    <body>
        <div class="site-wrapper">
            <Header />
            <main>
                <slot />
            </main>
            <Footer />
        </div>
    </body>
</html>

Below is the HTML of my post layout. For those of you who aren’t familiar with Astro or HTML, I’d like to point out that the post layout HTML (i.e., what is used to structure a post like the one you’re reading) differs from base layout HTML.

---
import "../styles/global.css";

import BaseLayout from "../layouts/BaseLayout.astro";
import BackToIndex from "../components/BackToIndex.astro";

const { frontmatter } = Astro.props;

const pubDate = frontmatter.pubDate;

const formattedPubDate = pubDate.toLocaleDateString("en-AU", {
    day: "2-digit",
    month: "long",
    year: "numeric",
    timeZone: "UTC",
});
---

<BaseLayout title={frontmatter.title} description={frontmatter.description}>
    <section>
        <BackToIndex />
    </section>
    <section class="content-wrapper pd-block-xl">
        <div class="wrapper" data-width="narrow">
            <h1 class="heading-center pd-bottom">{frontmatter.title}</h1>
            <p class="date">{formattedPubDate}</p>
        </div>
        <div
            class="wrapper pd-block-xs border-top pd-bottom"
            data-width="very narrow"
        >
        </div>
        <article class="wrapper" data-width="narrow">
            <slot />
        </article>
    </section>
</BaseLayout>

BaseLayout.astro is the basis of my PostLayout.astro as it (by design) forms the backbone of all pages of my website. There will always be a <head/> and <body/> for each page, and within the <body/> there will always be a Header.astro component, <main/> and Footer.astro component. The HTML presented above is injected into the <slot/> of the BaseLayout.astro.

For those who look closely at the CSS, you’ll see that I’ve chosen not to use TailWind CSS. Instead, I created my own class selectors (and associated data attributes) and utilities to reinforce learnings from multiple FrontEnd Masters’ courses. Maybe I’ll try out TailWind for the next iteration of my website⁵.

What’s next

Finally writing some blogs!

The purpose of this website isn’t just to share technical learnings and insights. I also want to use this as a medium where I share more personal material. The first blog I am currently compiling is a chronicle of journal entries I kept during my graduate program. Although those days have long gone, I want to share that chapter of my life with you. And by doing so I will, on a platform where I control the content, never lose those precious words.

From a programming, data analysis and data visualisation point of view, I have a lot to write about. Without going into too much detail, I am currently drafting a post on how I’ve approached visualisations for large, matrix based risk assessments.

I hope you stay tuned and enjoy the upcoming material.

More on this later. ↩
getCollection() is a function available in the Astro framework that allows my site to automatically gather all my posts, organise them, and keep everything in sync without me having to wire things up by hand every time I add something new. Without it, the blog might look finished, but it involves doing far more manual work. ↩
See the guided Astro tutorial here. The Astro documentation is very detailed, and I cannot emphasise how important it is to utilise it when starting your own project. For example, I made the decision to use .mdx files for my blogs and needed to update the project’s configuration. The documentation was really good at explaining how the configuration file needed to be structured for this. Tangentially, towards the end of the website development, I thought it would visually interesting to have a File Tree component similar to the one presented within the Astro documentation. After searching through the documentation, I learnt that Astro uses Starlight for its official documentation framework; the File Tree I wanted to make is a component from that framework and the associated code can be found on GitHub! ↩
See Kevin Powell’s FrontEnd Masters material here. ↩
I know it’s unlikely that I’ll like the design of this current iteration of my website in a year from now. ↩