DEV Community

Cover image for My profile website is now a terminal

My profile website is now a terminal

protium on May 25, 2022

When I was younger I used to think that my profile website would be a really cool, fully featured website, with shiny colors and animations; built ...
Collapse
 
pbnj profile image
Peter Benjamin (they/them)

What command would you add to your profile terminal?

First thing I tried was vim .

Then I tried sudo apt update && sudo apt install -y vim.

Therefore, I am requesting these features so I can do remote development on your website 😅

Collapse
 
protium profile image
protium

well, it is possible to use the cloud9 editor with vim bindings 🤔
ace.c9.io/build/kitchen-sink.html

Collapse
 
luiz0x29a profile image
Real AI

sudo emerge vim

Collapse
 
rajeshroyal profile image
Rajesh Royal

🤣

Collapse
 
oatw profile image
oatw • Edited

Nice!

What command would you add to your profile terminal?

rm -rf /*
Enter fullscreen mode Exit fullscreen mode

😅

Collapse
 
protium profile image
protium • Edited

Now it supports glob patterns (without flags) 💪🏼
github.com/protiumx/protiumx.githu...

Collapse
 
jzombie profile image
jzombie

Hey, nice looking terminal. I did something similar recently, and happened to notice on your terminal the backspace doesn't work if you've gone beyond one line. I accomplished that with using a span tag for the line text, with the blinking cursor concatenated on the end. The actual input being hidden.

You can check out the version I built at: reshell.org/dr-reshell

Collapse
 
protium profile image
protium

Nice catch!
I fixed it here github.com/protiumx/protiumx.githu...

Also reshell looks really cool!

Collapse
 
jzombie profile image
jzombie

Thanks!

Collapse
 
msc profile image
Mario Sanchez Carrion

Awesome idea! My personal website is pretty minimal, but this is definitely taking things to the next level.

Intuitively, my first command was "ls", and it worked. Then I tried "nano" to open the files. When that didn't work I tried "cat" and it worked fine (also pretty intuitive).

Where I had more trouble is trying to open the resume.pdf file, since cat doesn't recognize the pdf format. I then tried "open" just for the sake of it and it gave me a list of arguments, including resume (without the extension), so "open resume" did work. To make it more intuitive perhaps one upgrade could be allowing the opening of files using the extension (.md or .pdf).

Really great project!

Collapse
 
protium profile image
protium

That's a good idea actually, I added it, it should be live now
Thank you for your comment!

Collapse
 
eekee profile image
Ethan Azariah

You could make randc display the images in-line as the w3m browser used to do with X11 xterm in the early 00s. :)

As someone who started using Linux in 1998 and has used a variety of command-line systems before and since, I find your command set interesting. :) If I hadn't known about the help command, it would have been the second thing I tried after repeated attempts at tab completion and maybe ls /bin too. (I'm sure even older Unix users would have been slightly disturbed by my use of tab completion. :p ) But help is a good command. I had to laugh when you declared your command list to be intuitive when the command to list file contents is called cat! ;) It certainly is intuitive for people familiar with the Unix command line and I can understand wanting to exclude others for certain purposes, but I lived through the era where everyone was talking about intuitive interfaces and so I had to laugh. :D

On a practical note, I see you mention glob patterns but cat doesn't support them. I used DOS heavily in the 90s and I use PowerShell a bit now, and I can tell you that inconsistencies in how different commands parse their command lines can be really uncomfortable. Unix systems have the shell handle pattern expansion, so it's always consistent. After years of DOS, I found that to be a relief. But why do I want cat to take patterns? I find typing unfamiliar words accurately to be hard, so whenever I'm stuck without tab completion, I use patterns. It's become a habit because sometimes, patterns are quicker.

This might be a bug:
In Firefox, open blog.md opens a complicated XML file with no style information. Browser info; (thanks for the handy command):
anonymous@protiumx.dev:~$ uname
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:101.0) Gecko/20100101 Firefox/101.0

Outside the terminal, I'm sorry to say I find the blog pages hard to read. My eyes don't adjust well to low contrast, and when I try to read it anyway, I get unpleasantly dazzled by brighter bits. I had the same problem with DOS in the 90s; it's a good thing I never had to use it for work. In Linux, when I had too little disk space for both Emacs and X Windows, I chose X Windows because it had a configurable xterm. In both DOS and Linux, there were a lot of programs I just didn't use because I couldn't make their displays comfortable. But on the web in recent years, I used to use a contrast enhancer but the only good one of those turned out to include some really nasty spyware. I should look again to see if others have got good.

Collapse
 
protium profile image
protium

Thank you for the insightful comment!
My bad, I forgot that the blog.md file is actually “virtual”, parsed from the RSS feed. I will add a fix later.

Tab autocomplete shouldn’t be difficult to implement, I might take a look as well.
Cheers!

Collapse
 
rajeshroyal profile image
Rajesh Royal

tip: - if you are using ad blockers you may not see the terminal text. You may need to open it in incognito.

Collapse
 
protium profile image
protium

which add blocker? I didn’t experience the same

Collapse
 
rajeshroyal profile image
Rajesh Royal

Ghostry, Popup blocker, YouTube ad blocker, and Ad Blocker [hand sign logo] these three.

Thread Thread
 
protium profile image
protium

Interesting. I only use uBlock. I guess the popup blocker will block the command randc or open since it opens a new tab/window

Collapse
 
christiankozalla profile image
Christian Kozalla

I experienced this differently. I'm using brave both on my phone and laptop. On my laptop everything was working fine, but on mobile I could see my own text input and command output

Collapse
 
phyberapex profile image
PhyberApex • Edited

First of all great work. Looks really nice! What I don't like is your advocating for throwing away npm. While I do get the appeal of simplicity you should not forget the features you get from using a packet manager for third party libraries. One being handling of updates. As it is right now you will have to "know" that there is an update for the library you are using. Any updates (even security related ones) you are in danger of missing and thus maybe allowing malicious actors to attack your site. While I think the actual risk here is minimal I really don't want this not to be mentioned as third party libraries and dependency management are one of the top security issues we face today in applications security.

Nonetheless awesome idea :D

~Cheers

Collapse
 
protium profile image
protium

That's is a fair point!
I based my decision on:

  • locking the version of xterm I'm using
  • no CI/CD planned
  • simplicity also means less maintenance
  • the script doesn't interact with external services (checked the source) so I'm not risking visitors to be tracked

I'll surely setup typescript and yarn if the project grows. For now it has been super fun to do it, just vanilla js and html

Collapse
 
hq063 profile image
Gonzalo HQ063

Nice idea, however non tech people might never even realize they can write help to get a list of available commands and might quit without being able to do any interaction.
I would add some legend on terminal welcome message.

Also, open resume opens a 404 page on protiumx.dev/resume.pdf

Collapse
 
protium profile image
protium • Edited

I actually made it for tech people and recruiters only, since it has mostly data about my work experience or blog posts.
Thanks for the catch! I moved that file and forgot to update the url

Collapse
 
pandademic profile image
Pandademic

Amazing job , and great article!

I'd just like to report a typo:

Also, cool web apps contain photos of cats, so I decided to write a randc command what will open a rando photo of a cat.

It say's 'rando' , I believe you meant to put random?

Anyway ,

Cheers and nice portfolio!

Collapse
 
juniordevforlife profile image
Jason F

Where's the neofetch command? 😁

Kidding, sorta

This is awesome! It's projects like this that keep the web fun!

Collapse
 
protium profile image
protium

That could be fun! I just need to figure out what information would make sense to show haha

Collapse
 
snikhill profile image
Nikkhiel Seath

To borrow and modify a lyric: "The older I get the more I realise" that it is the simple stuff and not complex ui that makes a portfolio success.

Collapse
 
hammzj profile image
Zachary Hamm

I've been looking to do the same thing for a while! This is awesome stuff. Really love this.

Also, I very much enjoyed how that exit command works 😉

Collapse
 
protium profile image
protium

💃🏻💃🏻

Collapse
 
dhanush9952 profile image
Dhanush • Edited

commands not working in mobile browser?
..
Its working only in PC web browser.

Collapse
 
protium profile image
protium

Which browser? I only tried on my iphone with chrome.
But also I didn't plan support for mobile yet. Maybe it makes sense to at list rotate the screen 🤔

Collapse
 
dhanush9952 profile image
Dhanush

Android with chrome. You have done it unique. I have not seen anything like this before. Keep up the good work. 👍

Collapse
 
andrewbaisden profile image
Andrew Baisden

Cool concept.

Collapse
 
khuongduybui profile image
Duy K. Bui

hey I wanna report a serious bug! I ran the command "whoami" but got the output from "whoareyou" instead!!!

Nicely done my friend.

Collapse
 
protium profile image
protium

haha that was a dilemma to me. it makes sense to use whois but whoami is well known for printing information about current the user. in this case I changed the command description to current developer

Collapse
 
dinniej profile image
Nguyen Ngoc Dat

Pinned, will try to make one my own

Collapse
 
protium profile image
protium

Would love to see the results :D

Collapse
 
vardhiro profile image
Dhirodatto Biswas

Nice idea though but not working in my phone 😅😓.

Collapse
 
protium profile image
protium

oh damn, which browser?

Collapse
 
vardhiro profile image
Dhirodatto Biswas

Chrome.....

Collapse
 
anthonybrown profile image
Tony Brown

That’s really cool

Collapse
 
zodman profile image
Andres 🐍 in 🇨🇦

good effort!

Collapse
 
snelson1 profile image
Sophia Nelson

Excellent read

Collapse
 
andresbecker profile image
Andres Becker

This is great inspiration for my own site

Collapse
 
protium profile image
protium

Really glad that’s the case!

Collapse
 
vulcanwm profile image
Medea

This is really cool!

Collapse
 
protium profile image
protium

thanks! ❤️

Collapse
 
ben profile image
Ben Halpern

Very good execution

Collapse
 
protium profile image
protium

oh thanks Ben!

Collapse
 
protium profile image
protium

It looks nice!

Collapse
 
akoshodi profile image
Akinwale Oshodi

Tab completion

Collapse
 
sakitkepala profile image
Andika Priyotama

Really cool! I feel inspired to get one 😬

Collapse
 
milanobrtlik profile image
Milan Obrtlik

It's super cool!
For us, developers.

What about people not familiar with CLI? E.g. project managers, HR... You bring hard times to them really quickly :D

Collapse
 
protium profile image
protium

Actually this was also intended for them. I truly think recruiters should have a good grasp on the tech side

Collapse
 
ismaestro profile image
Ismael Ramos 🚀

what happened?

Collapse
 
protium profile image
protium

maybe some github pages issue? I can see the site normally

Collapse
 
sria91 profile image
Srikanth Anantharam

The terminal doesn't work on my android phone.

Collapse
 
goodevilgenius profile image
Dan Jones

Cool. Didn't work in Firefox Mobile, though. After typing a command and hitting enter, the command disappeared and nothing happened.

Collapse
 
aaravrrrrrr profile image
Aarav Reddy

Nice post

Collapse
 
ashleyjsheridan profile image
Ashley Sheridan

While it is really cool, who is it for? Recruiters and hiring managers tend to be not very technical, and even of those who are, they would have to know how to use shell commands.