Terminal Portfolio Website by Sat Naing

My perfolio website in terminal version developed with React, TypeScript and Styled-Components. Multiple themes supported and keyboard shortcuts can be used for some functionalities.

Blog Post: https://satnaing.dev/blog/posts/how-do-i-develop-my-terminal-portfolio-website-with-react

Demo

Demo - try it in your editor

Features

• Responsive Design 📱💻
• Multiple themes 🎨
• Autocomplete feature ✨ (TAB | Ctrl + i)
• Go previous and next command ⬆️⬇️
• View command history 📖
• PWA and Offline Support 🔥
• Well-tested ✅

Tech Stack

Frontend - React, TypeScript
Styling - Styled-Components
UI/UX - Figma
State Management - ContextAPI
Testing - Vitest, React Testing Library
Deployment - Netlify

Multiple Themes

Demo - Dark theme
Demo - light theme
Demo - blue-matrix theme
Demo - espresso theme
Demo - green-goblin theme
Demo - ubuntu theme

Currently, this website supports 6 themes. Type themes in the terminal for more info.

Lighthouse Score

Running Locally

Clone the project

git clone https://github.com/satnaing/terminal-portfolio.git

Go to the project directory

cd terminal-portfolio

Remove remote origin

git remote remove origin

Install dependencies

npm install

Start the server

npm run dev

Inspiration and Credits

Here are some inspiration for this kind of terminal website. Only some features and functionalities are inspired by these following websites. All codes are written on my own.

• I built this repository using Jinno
• term m4tt72
• Forrest

Author

• @satnaing