Swan emoji

Personal Portfolio

My current personal portfolio, built with Astro and MDX.

Technologies Used




GitHub Actions

Tailwind CSS


Notable Features

  • Statically generated at build time for CDN-level latency
  • Automatically-updating README with Github workflows
  • Automated a11y testing with Playwright
  • Optimized images with Cloudinary
  • Ease in adding new articles with MDX

Integrating MDX

Using @astrojs/mdx (opens in a new tab) to add MDX support was straight-forward.

All that was needed was installing and configuring the integration, and done! (Thanks Astro team!)

Automated Testing

Thanks to @axe-core/playwright - npm (opens in a new tab) , A11Y testing with playwright was super easy.

You can see my current a11y tests file (opens in a new tab) which asserts that every page in the website is accessible using the AxeBuilder.analyze method, and my current Github worflow setup (opens in a new tab) which sets up a node environment and runs the tests using pnpm dlx playwright test

Optimzied Images

You can view my current optimized image component (opens in a new tab) which I can import to MDX.

In this component, I basically check whether the link provided is external or internal, and apply the following optimizations:

  • Set the delivery type to fetch (if it’s external)
  • Construct an image source set for the image
  • Resize each image to fit the current viewport width

Automatically-Updating README

Updating the README preview image every time I make a visual change to the website is inefficient and time-consuming, so I looked into ways of automating it.

What I currently do is:

And I run the above script on every push to the production branch ( view my current workflow for automatically updating preview images in README (opens in a new tab) )

Lessons Learned

Learned a lot about Github Actions and Github Workflows, also Astro and MDX, and finally image optimizations.


If you have any feedback about the site or want to connect, email me at contact@leda.dev, or if you prefer you can use the form below: