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

Terminal style portfolio website built with React, TypeScript and Styled-Components.
https://github.com/satnaing/terminal-portfolio

github learn portfolio react reactjs styled-components terminal terminal-portfolio terminal-style-website terminal-styled typescript

Last synced: about 9 hours ago
JSON representation

Terminal style portfolio website built with React, TypeScript and Styled-Components.

• Host: GitHub
• URL: https://github.com/satnaing/terminal-portfolio
• Owner: satnaing
• License: mit
• Created: 2022-06-01T12:51:00.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-09-08T05:15:06.000Z (3 months ago)
• Last Synced: 2024-12-14T16:02:47.007Z (7 days ago)
• Topics: github, learn, portfolio, react, reactjs, styled-components, terminal, terminal-portfolio, terminal-style-website, terminal-styled, typescript
• Language: TypeScript
• Homepage: https://terminal.satnaing.dev/
• Size: 1.03 MB
• Stars: 510
• Watchers: 3
• Forks: 88
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Terminal Portfolio Website by Sat Naing

![Terminal Portfolio Website by Sat Naing](https://user-images.githubusercontent.com/53733092/194220661-e2ff8b4c-f64a-4b64-a836-c52fae6bbcda.png)

![ts](https://badgen.net/badge/Built%20With/TypeScript/blue?style=flat-square)

[![Netlify Status](https://api.netlify.com/api/v1/badges/81fdb91d-c06f-46c2-b18d-dfc6f090f281/deploy-status)](https://app.netlify.com/sites/terminal-sn/deploys)

![Gitmoji](https://img.shields.io/badge/gitmoji-%20😜%20😍-FFDD67.svg?style=flat-square)

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

## 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](https://reactjs.org/), [TypeScript](https://www.typescriptlang.org/)  

**Styling** - [Styled-Components](https://styled-components.com/)  

**UI/UX** - [Figma](https://figma.com/)  

**State Management** - [ContextAPI](https://reactjs.org/docs/context.html)  

**Testing** - [Vitest](https://vitest.dev/), [React Testing Library](https://testing-library.com/)  

**Deployment** - [Netlify](https://app.netlify.com/)

## Multiple Themes

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

![terminal-portfolio-themes](https://user-images.githubusercontent.com/53733092/194221801-94f1c28b-4865-4b7f-a73e-d41132519bea.png)

## Lighthouse Score







## Running Locally

Clone the project

```bash

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

```

Go to the project directory

```bash

cd terminal-portfolio

```

Remove remote origin

```bash

git remote remove origin

```

Install dependencies

```bash

npm install

```

Start the server

```bash

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.

- [term m4tt72](https://term.m4tt72.com/)

- [Forrest](https://fkcodes.com/)

## Author

- [@satnaing](https://satnaing.dev)