← All posts

Web Development

The stack behind this site.

This site brings together my projects, notes, and experiments. It combines a personal homepage with a blog, using a small set of tools to keep writing, development, and publishing straightforward.

Astro at the core

Astro builds the pages and brings the site together. It uses static site generation: pages are prepared during the build, ready to serve to visitors.

That suits a portfolio and blog well. The content is available as HTML, with a little JavaScript for small touches such as the code-inspired header.

Markdown for writing

Posts are written in Markdown and stored alongside the site’s code. Astro’s content collections organize them and keep their titles, dates, categories, and tags consistent.

It is a familiar, text-based workflow that fits naturally with Git and my editor.

Sass for styling, Vue for interactivity

Sass handles the styling, while reusable Astro components keep the layout consistent across the homepage and posts.

The stack also includes Vue for features that need richer interaction. The current page structure is built with Astro components.

KaTeX and Mermaid for technical posts

KaTeX adds mathematical notation, and Mermaid adds diagrams written as text. They make it easier to explain an equation, a system, or the flow of a project within a post.

Both render during the build, so the published equations and diagrams display without JavaScript.

Markdown and components

Astro build

Generated site files

Static hosting

For example, KaTeX can display the quadratic formula:

x=−b±b2−4ac2ax = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}

The LaTeX source:

x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}

A Docker-based workflow

Node.js and pnpm handle the development tools and dependencies. Docker provides a consistent environment for running the site locally and building it for publication, while Prettier keeps the source formatting tidy.

The result is a static site with a workflow that feels at home in the terminal: write a post, preview it, and build the site. A practical foundation for sharing web projects, Linux notes, and low-level experiments.