I made a Terminal Portfolio
This article shows you how I made my terminal portfolio using React and Typescript.
Introduction
I made a terminal-like portfolio website, which I recently deployed. This project was forked from satnaing, and after forking it, I added my own features.
Tech Stack
This is a entirely frontend project with no server code involved. For the frontend, The original creator chose React over plain JavaScript and Next.js. Here’s his reasons:
- Declarative Code: Writing declarative code makes managing the HTML DOM less tedious compared to imperative JavaScript.
- Performance and Reliability: React is known for its speed and reliability.
- Simplicity: I didn’t require extensive SEO features, routing, or image optimization that Next.js offers. I opted for TypeScript for its type-checking benefits.
The original creator of the repository I forked used styled-components for styling his react components.
Here’s a quick recap of my tech stack:
- Frontend: ReactJS, TypeScript
- Styling: Styled-Components
- State Management: Context API
- Deployment: Vercel
Features
Here are some features of my terminal portfolio website:
Multiple Themes
Users can switch between multiple themes. At the time of writing, there are five themes available, with plans to add more in the future. The selected theme is saved in storage, ensuring it persists after a page refresh.
Command-line Completion
To provide an nice terminal experience, satnaing implemented a CLI completion feature that auto-completes incomplete typed commands when the you press ‘Tab’ or ‘Ctrl + I’.
Previous Commands
Users can navigate through previously typed commands using the Up and Down Arrow keys.
View/Clear Command History
Users can view previously typed commands by typing ‘history’ in the command line. The command history and terminal screen can be cleared by typing ‘clear’ or pressing ‘Ctrl + L’.
Theme Showcase
Here’s a video demonstrating different themes available in the terminal portfolio and me giving my opinion:
Conclusion
This is my first time overly working with react components, and I think the website turned out great.
