Building a Terminal Portfolio with Astro + Remotion

2026-02-18 · 2 min read

blog/development blog/astro

Every developer needs a portfolio. But I wanted something that felt alive — not another static grid of project cards. The idea: a fully interactive terminal that you can actually type commands into.

The Stack

Astro 5 for static generation and islands architecture
React for the interactive terminal component
Tailwind CSS v4 with custom CSS variable theming
Remotion for the drone showreel player
Vercel for deployment

Why Astro?

The answer is simple: I wanted the best of both worlds. Static HTML for content pages (fast, SEO-friendly) and React islands for interactive bits (terminal, theme switcher, video player).

The Theme System

Inspired by Monkeytype’s theme switching, I built a 5-theme system using CSS custom properties. Each theme defines a set of variables (--bg, --accent, --text, etc.) and switching is instant — no page reload, no flash of unstyled content.

:root {
  --bg: #323437;
  --accent: #e1b814;
  --text: #d1d0c5;
}

[data-theme="dracula"] {
  --bg: #282a36;
  --accent: #50fa7b;
  --text: #f8f8f2;
}

The Terminal

The terminal component is a React island using client:only="react". It supports command history, auto-animation, and clickable directory listings that navigate to actual pages.

After 3 seconds of inactivity, it auto-types whoami and ls interests/ to show visitors what’s possible.

What’s Next

I’m planning to add:

Obsidian-powered blog (this post is the proof it works)
Remotion-rendered drone showreel with real video clips
More themes from the community