When I decided to create my personal website, I wanted something unique that reflected my love for technology and development. A static Hugo blog was perfect for the foundation, but I wanted to add something special - an interactive terminal component that visitors could actually use.
The idea came from my daily workflow. As a developer, I spend most of my time in terminals, typing commands, and navigating through systems. What if I could bring that experience to my website? Not just as a visual gimmick, but as a functional interface that visitors could interact with.
Building an interactive terminal in a static site presented several interesting challenges:
I started with plain JavaScript, but quickly realized I needed something more robust. After experimenting with Preact, I settled on React with TypeScript for type safety and better component management.
Vite became the obvious choice for building the React component. Its fast compilation and excellent TypeScript support made development smooth and efficient.
The biggest challenge was integrating a modern React component into a static Hugo site. The solution was to:
The terminal component consists of two main parts:
Handles the modal display for command output, with:
Manages the interactive input with:
Beyond basic navigation, I added some entertaining Easter eggs:
sudo rm -rf /* - Shows a friendly “Nice try! 😄” messagewhoami - Returns “web-user”pwd - Shows “/home/coryrenard.com”date - Displays current date/timeecho [text] - Echoes back any textThe final implementation provides a seamless experience where visitors can:
cd commandscd .. to go back (browser back button)This project reinforced several important principles:
The terminal is just the beginning. I’m considering adding:
The interactive terminal has become more than just a navigation tool - it’s a conversation starter and a reflection of my development philosophy. It shows that even static websites can be dynamic and engaging.
Try typing help in the terminal to see all available commands!