Skip to content

A terminal styled static website template with discord theme.

License

Notifications You must be signed in to change notification settings

Sang-Buster/Portfolio-Terminal

Repository files navigation

Portofolio-Terminal

A Terminal Style Portofolio Static Wbsite Template with Discord Theme
Web_Preview

Discord_Color_Palette

You can find several pre-configured themes in themes.json, and you can replace the colors in config.json with the theme color you like! Themes are based on this website. Other included themes:

  • Default
  • Gruvbox
  • Dracula
  • Nord
  • One-Dark/Light
  • Monokai
  • Mocha
  • Solarized
  • Paraiso

🚀 Set-up

Portfolio-Terminal requires the yarn package manager. You can install yarn here.

Clone this repository to a location of your choice

git clone https://github.com/Sang-Buster/Portfolio-Terminal.git && cd Portfolio-Terminal

Then install dependencies and start developing there:

yarn install && yarn dev

Docker Usage

First, clone the project and edit config.json to your liking. Then run the following to start the container in the background:

docker-compose up -d

If you know what you were doing, you can also try changing Dockerfile & docker-compose.yml! Learn more about Docker here.

📄 Configuration

Basic Configuration

90% of Portfolio-Terminal's configurations are done through the config.json file.

{
  "readmeUrl": // create a Github README and link it here!
  "title": // title of the website
  "name": // your name, included in 'about' command
  "ascii": // ascii art to display
  "social": {
    "github": // your handle
    "linkedin": // your handle
  },
  "email": // your email
  "ps1_hostname": "SingSong" // hostname in prompt
  "ps1_username": "visitor", // username in prompt
  "resume_url": "../resume.pdf", // path to your resume
  "non_terminal_url": "W",
  "colors": {
    "light": {
      ...
    },
    "dark": {
      ... // you can use existing templates in themes.json or use your own!
    }
  }
}

Feel free to change it as you see fit!

Favicons

Favicons are located in public/, along with the other files you may want to upload to your website. I used this website to generate favicons.

Banner

You may also want to change the output of the banner command. To do that, simply paste your generated banner in src/utils/bin/commands.ts. I used this website to generate my banner.

Advanced Configuration

If you want to further customize your page, feel free to change the source code to your liking!

🌐 Deploy on Vercel

The easiest way to deploy a Next.js app is to use the Vercel Platform from the creators of Next.js.

You can install vercel cli and follow the instruction here.

You can also connect your github account to vercel and have vercel automatically deploy the github repository for you.

Credit

Based on M4TT72's Terminal and Cveinnt's LiveTerm