Personal Website — The First Astro Rebuild

The earlier version of this portfolio: a static Astro site with technical writing, interactive canvas experiments, and a custom Markdown-to-MDX workflow.

Technologies Used

AstroTypeScriptReactCanvasMDXGitHub Pages
⋮⋮

Table of Contents

Why I rebuilt it

My previous site used a Hexo theme that was difficult to change without fighting its structure. The deployment worked, but the code did not feel like mine. I moved to Astro so I could control the layout, content pipeline, and small interactions directly while keeping the output static enough for GitHub Pages.

This project is the earlier version of the site you are reading now. It became both my publishing tool and a place to test ideas that did not fit inside a normal portfolio template.

Writing and publishing

Posts live with the code as Markdown or MDX. The content stack supports mathematical notation, Mermaid diagrams, syntax highlighting, tags, search, and generated thumbnails. Astro renders the public pages ahead of time, so the site does not need a server or database in production.

I also wrote a file-watching Markdown-to-MDX workflow. Its purpose was practical: I wanted to write ordinary Markdown and let the build step insert the extra structure needed by interactive components. The repository still exposes that tool through its md-to-mdx command alongside scripts for new posts, thumbnail generation, and performance checks.

Interactive canvas

One version of the homepage included a drawing experiment inspired by Impressionism and Neo-Impressionism. Pointer movement became a field of short marks rather than a literal line. I varied direction, velocity, and angle so the result felt more like layered brushwork.

The interesting part was performance. Directly adding more particles made the effect richer but quickly overwhelmed the browser. I had to reduce per-frame work, reuse data, and make movement depend on velocity instead of storing an expensive history of positions.

How it changed

The early site taught me that animation should support hierarchy, not compete with the writing. The current design is calmer, more accessible, and more selective about client-side work, but it still uses the same basic foundation: Astro, content kept close to the source, and static deployment through GitHub Pages.

The public repository contains the site’s current code and its earlier experiments.