thtauhid/terminal-portfolio

A portfolio site that looks and feels like a terminal. Built with React + Tailwind.

terminal-portfolio

Read our goals and roadmap here.

About

A portfolio site template that looks and feels like a terminal.

Production: https://my-terminal-portfolio.vercel.app/

Installation

git clone https://github.com/thtauhid/terminal-portfolio
cd terminal-portfolio
npm install

Usage

To run the development server:

npm run dev

To build the project:

npm run build

Technologies Used

1. Vite: Vite is a build tool that helps make your web development faster by providing quick development server and efficient production builds.

2. React: React is a JavaScript library for building user interfaces. It helps create interactive and reusable components for web applications.

3. React Hook Form: React Hook Form is a library for managing and validating form input in React applications. It simplifies form handling.

4. TypeScript: TypeScript is a programming language that adds static typing to JavaScript, making it easier to catch and prevent common errors in your code.

5. ESLint: ESLint is a tool for identifying and fixing common errors and maintaining code quality in JavaScript and TypeScript.

6. Tailwind CSS: Tailwind CSS is a utility-first CSS framework that simplifies styling by providing pre-built classes for common styles.

7. Vercel Analytics: This is a package for adding analytics and monitoring to your web application, often used for tracking user interactions and performance.

Deployment

You can deploy this project to any static site hosting service.

Some of the popular ones are:

• Vercel (Recommended)
• Netlify

Deploying to Vercel

Vercel is a recommended platform for deploying your terminal-portfolio. Here are the steps to deploy your project to Vercel and enable Vercel Analytics:

1. Sign in to your Vercel account or create one if you don't have an account yet.

2. Install the Vercel CLI by running the following command:

npm install -g vercel

3. Authenticate your Vercel account using the following command:

vercel login

4. Navigate to your project directory:

cd terminal-portfolio

5. Deploy your project to Vercel:

vercel

6. Follow the prompts to configure your deployment settings. Make sure to choose a domain name and set up the deployment environment according to your preferences.

7. Once the deployment is complete, your terminal-portfolio will be live on Vercel, and Vercel Analytics will be enabled by default, providing you with valuable insights into your website's performance.

Contributing

Contributing Guide

Feel free to open an issue if you find a bug or want to suggest a feature.

Hacktoberfest

1. Star the project.
2. Join our Discord server to discuss ideas and ask questions.
3. Please make sure to read the rules before opening a pull request.
4. The maintainer(s) will add the hacktoberfest-accepted label after reviewing and accepting your pull request.
5. Refer to the dedicated hacktoberfest project view to see what issues are available to work on.
6. Low quality PRs will not be merged

Contributors

Made with contrib.rocks.

License

MIT License

terminal-portfolio's Issues

Allow visitor to set his/her name

Create a command such that the user is able to set his/her name.
The name should show in place of visitor

JOIN DISCORD

Hey everyone,
Queries are solved much faster on Discord.

Join the discord server to connect with others and get your queries solved faster.

Invitation Link: https://discord.gg/3jvahVGKfa

Add Prettier config file

Currently, we do not have any auto-formatting in place.
A prettier config file needs to be created so that we can automatically format the code without giving headache to the contributors.

Ref: https://prettier.io/docs/en/configuration.html

Icon support

Integrate any of the font libraries that are available.
Currently, there is no specific preferred library.

Please note: whichever icon library you choose, it should include popular social icons like FB, LinkedIn, GitHub, etc.

---

Join our Discord server to discuss ideas and ask questions.

Create better dummy data

I have put some dummy data, but it can be much much better in terms of quality and quantity.
Feed free to improve the quality and quantity of the data.
Try to make the data look real-ish.

Add support for google analytics

Currently, we only support Vercel Analytics. Some users might want to use Google Analytics.
Need to add support for it.

---

Join our Discord server to discuss ideas, ask questions, and collaborate with others.

Convert into PWA

---

Join our Discord server to discuss ideas and ask questions.

Create user data parser

As this project is heading in a new direction, now we need to build a user data parser.
This is going to be one of the core functionalities.

Remove pnpm and add npm

Allow adding details to any of commands

• #42
• #38
• #39
• #40

Add support for user to define values through environment

Currently, all the values of the terminal interfaces are hardcoded in constants.ts
We want to load it from the environment if it is defined in the environment.

---

Join our Discord server to discuss ideas and ask questions.

Automatic Scrolling Should Be There

I have encountered an issue on site where the automatic scrolling feature does not work as expected. When the output exceeds the visible screen area, users are required to manually scroll down to view the full result. This behavior is counterintuitive and disrupts the user experience.

Project Road Map

Almost all the features are in place.
Now we need to decide the future of this project.

Possible futures-
Project is kept in it's present state.

• Users can clone the repo
• Add their own details in data.json
• Host on their own

Or we can move in this direction-
SaaS Model (Suggest me better name)

• Users can come to this repo
• Submit their basic details
• They will get a terminal styled portfolio with link
• They can share the link with their friends

I really like the BioDrop project. This model is similar to BioDrop.

---

Join our Discord server to discuss ideas, ask questions, and collaborate with others.

Improve styling of the app

Though the app somewhat looks like the Ubuntu terminal, some design modifications can still be done.
This is a somewhat open-ended issue, you are not bound by my thoughts, feel free to implement your thoughts to align the design of the app with Ubuntu terminal.

Replacing John Doe with user input

It's very easy to implement, we can just ask for the username, email of the user and show that in the about and contact commands

If this issue looks okay to implement, pls do assign me the same.

Add mobile support

Currently, the application is designed for desktop browsers only.
Need to add mobile support.

Create history command

When a user enters the command "history", he/she should be able to see the commands previously entered.

A relevant screenshot-

about answer can be made little bit more detailed.

Detailed guideline on how to add user's own data

Currently, all the data is hosted in the data.json file.
We need to create a detailed guideline on how a regular user can edit the data.json file to cater to his/her needs.

---

Join our Discord server to discuss ideas and ask questions.

Migrate `visit project` feature from `Homepage` to `Profile` page

We have added support to visit projects via #69.
But this feature lives on Homepage at this moment.
We are migrating everything from Homepage to Profile page.

Need to migrate this feature as well.
Refer to #69 to understand the implementation.

Add lint-staged package

Add details about vercel analytics in readme

The application supports vercel analytics.
Need to add details in README on how one can set up vercel analytics.

Allow user to change theme

---

Join our Discord server to discuss ideas and ask questions.

Remove vite logo and add custom logo

Currently, the Vite logo is shown as the favicon.
We need to replace it.
Create a logo (it can be as simple as the letter 'P') in any photo editing tool.
Then replace the existing Vite logo in the repo.

Refactor App.tsx

The codebase is growing. It's becoming hard to maintain and navigate through the code.
We need to refactor App.tsx. These changes need to be made

• Create separate files for components
• move functions to separate files of their own

This should declutter App.tsx

---

Join our Discord server to discuss ideas and ask questions.

Enforce styling guideline

Currently, we are not enforcing any styling guidelines.
We need to enforce basic styling & formatting.
For now, it'll be limited to using prettier to format the code.

These tasks need to be completed to enforce the styling guidelines-

• #44
• #45
• #46

---

Join our Discord server to discuss ideas and ask questions.

LOOKING FOR MAINTAINERS

LOOKING FOR MAINTAINERS

It's bit difficult to maintain the repo by myself only.
Looking for maintainers who can respond to issues, review PRs, and provide feedback.

There's no minimum time commitment.

If you are interested please email me at [email protected]

Feature: Can we have a command for download downloadables?

How about having a command download that maybe used to download possible downloadables that might be listed in data.json file.

For example:
On running download resume downloads resume pdf file.

Auto add contributors in readme

Add husky & pre-commit hook

---

Join our Discord server to discuss ideas and ask questions.

Up arrow key cursor behaviour

When using the up arrow key, the cursor remains at the beginning of the command line, unlike in a real terminal where it moves to the end of the command line.

I can work on it.

Add work-in-progress bot/action

---

Join our Discord server to discuss ideas and ask questions.

contact can also provide details like LinkedIn id and GitHub along with email.

Adding that clear command In available command

Adding clear commands in the available command below the "contact",
clear <= same as this

will you please assign me this issue under hacktoberfest'23?

bug: commands and cursor are invisible in arch theme

Description

When the theme is set to arch the commands and cursor are invisible.

How to Reproduce

1. Go to my-terminal-portfolio.vercel.app/
2. Run command theme
3. Run command theme set arch
   The cursor will be vanished and any command typed after that will be invisible.

Screen Recording

f9937b9a-4b33-46cc-9d6a-7daeac91a2e3.mp4

I would like to work on this issue!

Add documentation regarding tech stack

You can list the technologies we are using in the package.json file and add the details to README.

Add profile builder tool

Create a tool that users can use to

• Users should be able to edit their existing data using GUI
• Users should be able to use drag and drop functionality to rearrange their data

Adding these functionalities will help the users to easily create and edit their terminal-portfolio.

---

Join our Discord server to discuss ideas and ask questions.

Add window buttons and title

In all the operating systems we have buttons (minimize, maximize, close) and also the title.
We want to add the buttons + title in this app also.

Photo Credit: GeeksForKeeks

Persist data like theme, etc to persist between sessions

Do we need this functionality? It can contribute to a better UX

Add more commands

Some more commands can be added.

• #17
• #3

Ability to visit the project links

• I can help you to create feature where visitors can select the project.
• This is for hacktoberfest 2023.
• Also we can change the font theme to something terminal based font.

Empty return should not say 'command not found'

Remove input field and receive input from the whole window

Currently, we are using an input field to take input. It is not a good idea and has many drawbacks.
We need to remove the input area and add such a way that we will capture all input that happens in the whole window.

experience - command can be added

Create documentation for deploying to Netlify

Currently, we have documentation for deploying to Vercel. But we don't have documentation for deploying to Netlify.
Need to add documentation for it.

---

Join our Discord server to discuss ideas, ask questions, and collaborate with others.

Create multiple themes

---

Join our Discord server to discuss ideas and ask questions.

Changing the appearance of the Portfolio.

Pull Request Link --> #32

Portfolio after updating :

Portfolio before updating :

Since the portfolio was looking quite unattractive from UI point of view, I have updated the UI of the portfolio to some extend.
My changes :

1. Changed the Bg color (Added a gradient).
2. Added a Heading.
3. Added a Subheading.
4. Added a Hint.
5. Styled using Tailwind CSS.

I hope this will get approved for Hacktoberfest 2023!

New Homepage design

Implement-

• Global state
• about
• create
• help
• clear
• history
• setname
• theme

Skills can be described specifying languages ad tools.

Allow user to navigate through his/her past commands through keyboard arrow keys

Ideally, the user should be able to navigate through his/her command history using the up and down arrow keys.
Currently, no such integration is in place.
This needs to be implemented.