Why My Personal Website Looks Like a Linux Terminal

I've always wanted to create a personal website for myself, but was’nt sure how to create it from scratch.

It was really exhausting, always took a lot of my time to just create a basic looking ones,which i was’nt satisfied at all.

That's when I stumbled on Terminal-styled websites. The moment I saw it, I knew: this is the vibe. Then i surfed through github repos and eventually found the one, LiveTerm by Cveinnt.

So i just took it, no shame at all, and just tweaked it a little to my liking. Let me show you how in this blog.

---

2. Clear Goal

The goal was simple:

• Build a personal linux-themed website that feels unique, interactive, and lightweight.

• Keep it highly customizable so I can change themes and content without diving deep into code every time.

• Create it in under 2 hours.

---

3. Setup & Tools

I started with LiveTerm, a Github Repo from Cveinnt for building terminal-themed websites.

Here's what I used:

• Framework: Next.js

• Config File: config.json (handles 90% of customization)

• Package Manager: Yarn

• Deployment: Vercel

---

4. Step-by-Step Code Breakdown

Clone the repo

Go on to my github account and search for ‘Personal_website’.From there, follow the below steps

For Cloning

git clone https://github.com/adheeb2/Personal_website.git
cd Personal_website

Install dependencies

yarn install

Run locally

yarn dev

Now your site runs at http://localhost:3000.

Run docker

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

Customize config.json

Here's the part where it really becomes your site.

{
  "title": "Title of webpage",
  "name": "Your name",
  "ascii": "ascii-art-here",
  "social": {
    "github": "yourhandle",
    "linkedin": "yourhandle"
  },
  "email": "your@email.com",
  "ps1_hostname": "yourname",
  "ps1_username": "visitor",
  "resume_url": "./resume.pdf",
  "colors": {
    "dark": { ... },
    "light": { ... }
  }
}

Change the ASCII art, social links, hostname, and theme colors.

You can find demo to refer for your theme. For that check the demo folder present in the folder structure.From there you will get an understanding of how each theme looks like.

You can either choose this for your website or create themes on your own, the choice is yours.

---

7. Takeaways Summary

• Terminal-style websites are a unique alternative to cookie-cutter portfolios.

• With LiveTerm + config.json, customization is dead simple.

• Customize ASCII art and themes of your liking.

• Deployment on Vercel is as simple as it gets for deploying

---

8. Optional: Folder Structure

.
├── assets
├── config.json
├── demo
├── docker-compose.yml
├── Dockerfile
├── install
├── LICENSE
├── next.config.js
├── next-env.d.ts
├── node_modules
├── package.json
├── postcss.config.js
├── public
├── README.md
├── src
├── tailwind.config.js
├── themes.json
├── tsconfig.json
├── vercel.json
└── yarn.lock