lunarweb

A static portfolio website built with Astro.

I rebuild it quite often, each time using different technologies. I treat it as a playground for testing new things.

For the first version of this website I used React along with EmotionCSS for styling (I am a huge fan of CSS-in-JS).

Not long after that I rebuilt it with NextJS and PandaCSS. Both frameworks are designed to mix the modern, reactive way of building websites with the performance and stability of pre-rendered content.

Half a year later (April 2024) I started working on current version of Lunarweb. This time utilizing the modular framework Astro which is amazing for building mostly-static websites like this one.

Another half a year(ish) later (December 2024) I redesigned it again. Astro version was bumped to 5.1, Vue was replaced with Svelte 5 and Panda CSS with Daisy UI.

How it’s built

Content of all /projects pages is written with MDX, which is a way of mixing JavaScript components (Svelte and Astro in my case) with syntax of Markdown. Astro has a great support for it. Below you can see a fragment of how it looks like. Along with syntax highlighting which I am utilizing in some examples.

import { componentsMap } from '../../components/mdx/components.svelte';
export const components = componentsMap; // mapping components with custom styling

/* ... */

Content of all **/projects** pages is written with [MDX](https://mdxjs.com/), which is a way of mixing JavaScript components (Svelte and Astro in my case) with syntax of Markdown. Astro has a great support for it. Below you can see a fragment of how it looks like. Along with syntax highlighting which I am utilizing in some examples.