Rebuilding mniz.xyz from Scratch

I had a website. It was fine. It used React, had a purple theme, did the thing.

Then I decided to blow it up and redo it properly.

Why rebuild?

The old site worked but editing it was annoying. To add a blog post I had to touch multiple files — the post itself, a list file, sometimes a featured post array. Adding a project meant the same dance. It wasn’t unmanageable, but it wasn’t fun, and if something isn’t fun I’ll procrastinate on it indefinitely.

I wanted one rule: drop a file in the right folder, it appears everywhere it should, automatically.

The stack

Astro 5 with SSR via the Node.js adapter. Blog posts and project pages are .mdx files — one file each, with frontmatter for metadata. Astro reads them, generates all the routes, builds the listing pages, the tag pages, the home page previews. I don’t touch anything else.

// add a blog post:
src/content/blog/my-new-post.mdx  ← done

// add a project:
src/content/projects/my-project.mdx  ← done

The frontmatter does the heavy lifting:

---
title: "Post Title"
date: 2026-03-02
tags: [astro, web-dev]
featured: true   # ← shows up on home page automatically
---

That featured: true flag is the whole system. Home page queries for featured content. I don’t maintain a separate list anywhere.

The design

I wanted something that felt like it came from a terminal — but not in a cringe “green text on black” way. The goal was both things at once: high-tech and actually designed.

The nav is lifted from GNU nano. If you’ve ever been stuck in nano on a server, you know the bottom bar:

^G Help   ^O Write Out   ^W Where Is   ^X Exit

That’s the whole nav. ^H Home ^B Blog ^P Projects ^C Contact ^T Theme. They’re not real keyboard shortcuts… except they kind of are. Press b when you’re not in an input and you go to Blog. Press t to toggle theme. The visual is the nav, the keyboard shortcuts are an easter egg.

The hamburger opens a left drawer styled like nano’s title bar. Small thing, but it makes the whole aesthetic coherent.

Cards have a 3D tilt effect that follows your mouse position — the tilt angle calculated from cursor distance from center, with a radial glow that also tracks the cursor. It’s subtle but it makes the page feel alive without being distracting.

Color system: purple everywhere. Dark mode uses #a855f7 as the accent with #0a0a0f background. Light mode flips to a lavender background (#f0ebff) with a deeper purple (#7c3aed). There’s a scanline overlay in dark mode — a barely-visible repeating gradient that gives the screen a slight CRT texture. You won’t notice it consciously but you’d notice if it was gone.

Self-hosted

The site runs on my home server behind Nginx, which reverse proxies to the Astro SSR Node.js process. The contact form sends email via Nodemailer through my Mailcow setup.

SSR was the right call even though most of the site is static content — it means I can add server-side functionality later without switching frameworks. The content pages (/blog/[slug], /projects/[slug], /tags/[tag]) are prerendered to static HTML at build time. Only the contact form API endpoint is actually server-side at runtime.

What’s next

More posts. More projects. The site’s easy enough to update now that I’ll actually do it.