Introduction

I've always been drawn to terminal aesthetics. The green text on black backgrounds, the blinking cursors, the feeling of direct control. When I decided to rebuild my portfolio, I knew I wanted to capture that feeling in a modern web experience.

Why a Terminal Theme?

A terminal-styled portfolio stands out. It's unconventional, memorable, and immediately communicates that you're a developer. But more importantly, it's fun to build and interact with.

The key was balancing aesthetics with usability. Too much "terminal" and it becomes gimmicky. Too little and it's just another dark-themed site.

The Tech Stack

• Next.js 16 — App Router, server components, Turbopack
• Tailwind CSS v4 — CSS-first configuration, OKLCH colors
• shadcn/ui — Radix-Nova components for accessibility
• Framer Motion — For smooth transitions and scroll animations
• Sanity CMS — Content management for projects and blog

Key Components

The terminal window chrome (dots + title bar + content area) is a reusable component that wraps any content. It gives the site visual consistency while keeping the code clean.

Lessons Learned

1. Dark mode should always be the default for terminal themes
2. Monospace fonts need generous line-height for readability
3. Terminal animations (typing, glitch) are best used sparingly
4. Every "gimmick" should serve the content, not distract from it