terminal-portfolio's Introduction

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

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

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.

Author

@satnaing

terminal-portfolio's Issues

Thank You!

The only issue is that the code was so easy to use that I kind of wish it took longer to use 😄

Thanks for sharing!

Why use useEffect instead of pure event listeners?

In this component: src/components/Terminal.tsx
You have:

  // focus on input when terminal is clicked
  const handleDivClick = () => {
    inputRef.current && inputRef.current.focus();
  };
  useEffect(() => {
    document.addEventListener("click", handleDivClick);
    return () => {
      document.removeEventListener("click", handleDivClick);
    };
  }, [containerRef]);

I see you've sprinkled some useEffect hooks to handle click events. Why not just use a simple addEventListener callback function instead?

I'm not trying to be an a@@ just generally curious and want to learn how other devs design their architectures.

satnaing / terminal-portfolio Goto Github PK

terminal-portfolio's Introduction

Terminal Portfolio Website by Sat Naing

Features

Tech Stack

Multiple Themes

Lighthouse Score

Running Locally

Inspiration and Credits

Author

terminal-portfolio's People

Contributors

Stargazers

Watchers

Forkers

terminal-portfolio's Issues

Recommend Projects

Recommend Topics

Recommend Org