Building a TUI-Inspired Portfolio with React

Terminal User Interfaces (TUIs) have a unique aesthetic that combines nostalgia with functionality. In this article, I'll walk you through how I built this portfolio site.

##The Design Philosophy

The goal was to create something that feels like a modern terminal application while maintaining excellent usability. I drew inspiration from tools like htop, vim, and tmux.

##Tech Stack

• •React 18 with TypeScript
• •Tailwind CSS for styling
• •Framer Motion for animations
• •Vite for blazing fast builds

##The Panel Component

The core building block is the TuiPanel component. Here's a simplified version:

export function TuiPanel({ title, children }: TuiPanelProps) {
  return (
    <div className="border border-border bg-background">
      <div className="border-b px-4 py-2">
        <span className="text-tui-magenta">┌</span>
        <span>{title}</span>
        <span className="text-tui-magenta">┐</span>
      </div>
      <div className="p-4">{children}</div>
    </div>
  );
}

"The best interfaces are the ones that get out of your way while still being delightful to use."