9 ms·

Just redesigned my personal site with a TTY-style interface

271 points by abdisaDev 1y ago

kazinator 1y ago
On mobile, the viewport scrolls to the top of the page each time you type a character, moving the command line down and out of view. If the viewport must move when you type it should jump to the bottom.
Gualdrapo 1y ago
On firefox mobile I neeed to double-tap Enter to run any "command"
noshitsherlock 1y ago
Great idea a lot of military communication is still like this. I think efficiency and clarity.
AndrewOMartin 1y ago
It's cute. Needs a pager ;)
feisuzhu 1y ago
No tab completion!
ale42 1y ago
It needs a switch to enable a "true" terminal mode... e.g. with such a font https://caglrc.cc/~svo/glasstty/ https://caglrc.cc/~svo/glasstty/ and slightly blurred characters!
jampekka 1y ago
I have two tabs at tty7 but the contents aren't in sync!
altsyset 1y ago
Great job, I like it
Daviey 1y ago
It's wonderful, great job. It looks like you used, https://github.com/bony2023/react-terminal https://github.com/bony2023/react-terminal which is an interesting project. The title for "Help" isn't a terminal font, it jumps out as misplaced. Also, suggestion is to add some hidden easter egg commands. I was surprised `whoami` worked, but then I saw it in `help` and was sad. But anyway: abdisaDev@chillSpot:~$ whoami visitor@linux_x86_64-Europe_London abdisaDev@chillSpot:~$
- Apfel 1y ago
  There's at least one easter egg! use developer --color (sorry, I have a habit of digging through source)
  - abdisaDev 1y ago
    You found it! Shhh… let’s keep it our little secret ;)
slyle 1y ago
[dead]
stuaxo 1y ago
"This terminal hates being squished. Deploy a bigger screen. " I thought 1920x1080 was acceptable on a laptop :(
- nosioptar 1y ago
  It's a friggin terminal, it should only need 80x25 characters to not feel squished.
ineiti 1y ago
No ls and no cd?
- salter2 1y ago
  No matter what I'm doing in a terminal as soon as it opens I use ls. I always get so disappointed when these sites don't have it (none ever do). Please let me do terminal things in a terminal.
Philpax 1y ago
I'm going to represent the critical opinion and say: this is cute and I like the idea in theory, but if I encountered this in the wild, I would just leave the page. I explore most informational websites with a mouse or a touchscreen - I don't want to type to navigate your website! A middleground might be to make the commands clickable, so that clicking on "help" automatically inserts and runs it, and clicking on any of the commands in "help" does the same. You would still frustrate users who would have to keep scrolling up to reach the navigation, but it would make it usable without a keyboard.
- dgimla20 1y ago
  It's a cool looking site, but these terminal style sites (seen a few of them from web developers and software types) look terrible on phones and tablets (keyboard constantly present), which is well over 60% of web traffic now. You have to keep in mind your audience. If you presume everybody visiting this site is software-inclined, it's fine. I know a lot of less tech-literate users who would leave something like this straight away thinking they're being hacked or something daft.
  - deleted 1y ago
    [deleted]
  - buu700 1y ago
    I know a lot of less tech-literate users who would leave something like this straight away thinking they're being hacked or something daft. That reminds me of the time my friend and I put together a silly shell script called pentagonhack.sh that went through an 80s-movie-style nonsense hacking sequence while you mashed the keys. Most of the content was inside jokes, but there were a number of all caps references to a Pentagon server with warnings about unauthorized access being forbidden, and overall it looked pretty plausible to someone with no technical background or even cursory knowledge of SSH and Bash. Anyway, my friend got bored one day and fired up the script in a TTY on his laptop during lunch in our high school cafeteria. Apparently his friend who'd been sitting nearby noticed and started paying attention to what was on his screen, and then understandably found it alarming when by all appearances he was in the middle of typing out a command to run a malware executable on a Pentagon server. So she stands up and yells, "JOSH IS HACKING THE PENTAGON!". Of course he immediately switches back to X11/GNOME, probably with some homework assignment open in OpenOffice or an active Blackboard tab in Firefox, and everyone looks at his screen before looking back at her like she's crazy. The way he tells it, she was practically ready to go call the cops until he explained the joke and calmed her down.
febed 1y ago
now do telnet
rckt 1y ago
Looks nice, but feels like it's not complete. No tab completion. The font styles are not terminal like. Looks weird with those headers. Would be also great to be able to click stuff. In my opinion this needs improvement in either way. Otherwise feels half-baked, you didn't go full terminal way at the same time did not give an easy way to navigate.
- JdeBP 1y ago
  You are the second person, after feisuzhu, to talk of tab completion. But we were told a TTY not a shell. Historically, there were all sorts of user interfaces that one could get over a terminal, not just Unix, GNU, and other shells. There were BBSes of many flavours, Prestel, and any number of bespoke menu-driven systems. Giving people a shell inside a WWW browser has been done, and is even somewhat hackneyed at this point. (https://news.ycombinator.com/item?id=39829463 https://news.ycombinator.com/item?id=39829463 got 0 votes and 0 comments.) But some other kind of terminal interface makes for an interesting change. The phrase "You are in a maze of twisty passages, all alike." seems apposite, at this point. (-:
- conrs 1y ago
  Howdy, I took a stab at adding some of these features to my own implementation, the tab completion is pretty rudimentary though. Clickable things was a great idea, I have ls's output as a link that auto runs the corresponding command to view the content. https://con.rs https://con.rs if you're curious!
Galicarnax 1y ago
Add a pager like `less` (e.g. `$ projects | less`). And `exit` should close the page.
codeqihan 1y ago
It looks pretty good on my laptop, though the font doesn't quite look like a terminal's (especially the bold), but overall it's still pretty nice. It would be even better if some simple commands (like the most basic grep, less) could be added.
quotemstr 1y ago
If you want to flex as a traditionalist, you might want to consider adopting the https://motherfuckingwebsite.com/ https://motherfuckingwebsite.com/ aesthetic instead of the terminal one. The former remains browsable, whereas a terminal interface, however cute, creates enough UI friction to drive casual readers away.
- noduerme 1y ago
  friction to drive casual readers away is actually what you want if you don't like casual readers.
gr4vityWall 1y ago
I like it. It felt personal and non-intrusive.
aligundogdu 1y ago
Recently, I’ve been working on my own website and spending a lot of time thinking about how it should look and feel. I have to admit — I liked yours so much I’m almost jealous! Just a small note: It would be even better if the projects in the "Projects" section were clickable and led to their details.
jarbus 1y ago
I like it as a fun experiment, but I definitely wouldn't require users to interact with my website so much in order to start viewing the content
- ssgodderidge 1y ago
  Maybe the initial message could be enhanced with more content?
maze-le 1y ago
Very nice, but if you want to use it professionally you should consider having an alternative "clear text" version for recruiters and the like. The technically minded will find it nice but most people won't know what to do or what any of this means. And you could consider adding `ls`, `cd` and `exit` just for fun -- it was the first thing I've tried.
- xtiansimon 1y ago
  I’ve trained bookkeepers to run Python scripts on Windows, and ls/dir, cd are foundational, including the syntax for a script command’s arguments. For the clear text version, it could be a hypertext document run by an app! Haha
- noduerme 1y ago
  er, I assume that they made this site because they're far too good to work for anyone who doesn't want to take the time to find out how it works. In other words, recruiters need not apply.
  - MOARDONGZPLZ 1y ago
    I would love to hire this person (in theory), but every job I post gets hundreds of inbound applicants, and while hiring is one of the most important aspects of my job, it is second to delivering software with value. I really don’t have time to seek out every person out there who may have a resume, much less a quirky resume, so I send recruiters who work for me to find good candidates for top of funnel. I don’t think there is anything wrong with this.
    - johnisgood 1y ago
      Do you hire for full-remote? I have mobility issues.
- claiir 1y ago
  Maybe just have commands auto-execute if you click on links in the existing text? That would allow someone to experience the entire interface on a touch device! :> E.g. there is **__contact__** in the page, bold and underlined, but you cannot click on it to do anything.
9dev 1y ago
Slightly disappointed my `sudo rm -rf /` wouldn’t do anything.
- kmoser 1y ago
  Check your local filesystem; you might be surprised :)
emilfihlman 1y ago
Hah, I see exactly the same issues as I had when trying to implement TUI on mobile (autocomplete fail, no arrow keys, blocking view, ...). It's just so painful and actual seems almost impossible to leverage the virtual keyboard for input.
dmd 1y ago
I just made mine look terminal-ly. https://3e.org/dmd/ https://3e.org/dmd/
kaishiro 1y ago
Cool! This is fun, and I love seeing people try out alternative website UIs. We did something similar for our company website (link in my profile if you’re interested). It started out as more of a TTY but eventually had to find a middle ground for reproducible pages. We didn't really care much for SEO but I wanted to see if there was a way to deliver consistent content while maintaining that style.
_joel 1y ago
`→ 'ls': command not found. use 'help' to list available commands!` err
MelodyUwU 1y ago
few "commands" that id like to see: ls, cd, less (better reading), uname, echo. would be nice for sure! otherwise it seems some fonts are not really terminal-like. looks good and simple right now though. also: abdisaDev@chillSpot:~$ whoami visitor@linux_aarch64-CET
Fokamul 1y ago
[dead]
noduerme 1y ago
I love it. This is really original. It's beautiful and entirely unnecessary, but that's what makes it good. Of course there are old BBSs and things on the web where you can have a TTY experience, but I can't remember ever seeing a person's portfolio site designed by hand like this to mimic that feeling. It's impressive for being so clean and minimal while at the same time obviously difficult to accomplish in such a polished way. Top notch.
qiine 1y ago
no tab completion ? ;p
BiraIgnacio 1y ago
Really cool, thanks for sharing. Very original indeed.
ribcage 1y ago
[dead]
fjfaase 1y ago
Maybe turn it into an adventure game. I recently though about making an adventure game about my house and the surroundings.
Sparkenstein 1y ago
shameless plug portfolio (5+ years old): prabhanjan.dev
sigilis 1y ago
I did something like this myself a little while back, knownothing.dev It’s fun to put together nonstandard interfaces. I had the idea of streaming in text like you were connected by an old modem to a remote system. Never experienced it myself, as I am not old enough, but I found the idea aesthetically pleasing.
- netsharc 1y ago
  > streaming in text Nowadays people would think your site is an LLM page, since ChatGPT implemented this and now every LLM apparently has to do the same...
  - sigilis 1y ago
    You know, I hadn't really considered that. I do find the text streaming aspect of LLM interfaces to be a charming solution to the latency issue. What's old is new again.
- JdeBP 1y ago
  I have. It's not quite right, and its off enough to be in the uncanny valley for those who have seen this. Mainly the difference is in how the prompt should be streamed as well, and how the prompt does not re-appear until the command has finished. With late 1980s character-mode terminals one could do clever things with margins and have a scrolling area in the middle of the screen and an input area at the bottom, so it's not wrong per se. It's just not how things commonly worked. (The clever things brigade were a select few. Mostly the whole screen would scroll.) A greater than symbol as the prompt character and an e-mail address in the prompt didn't commonly go together, either. If there was an e-mail address, it was some type of Unix shell, and the prompt character was conventionally dollar or hash. If the prompt character was a greater than symbol then it was a BASIC or MS/PC/DR-DOS which didn't do e-mail addresses and multi-user. Again, it's not wrong, as famously prompts can be customized, but it's just ever so slightly off .
o1o1o1 1y ago
I really like it, well done! As others mentioned, if you use this to attract clients or recruiters, I recommend adding a version for non-technical folks. As a nerd I'd love to see some more colors like in the themes you can set using Prezto or Oh-My-ZSH (reference: https://github.com/sorin-ionescu/prezto?tab=readme-ov-file#themes https://github.com/sorin-ionescu/prezto?tab=readme-ov-file#t...). For the projects I think some click function to open an ncurses-like modal would be cool :) Another idea: what about adding a light mode? P.S.: I would also add `rm -rf` and return something like "nice try ^_^"
hombre_fatal 1y ago
Make it fully navigable by clicking. Every time you suggest commands (like "help"), let the user click them, and the UI responds as if they typed it and hit enter. Every command that can be typed/clicked can be highlighted a green color or something.
- kindawinda 1y ago
  don't tell him what to do
- conrs 1y ago
  Great idea, I went ahead and implemented it on my own site: https://con.rs https://con.rs
Bengalilol 1y ago
1st second of my 1st visit: ls → 'ls': command not found. use 'help' to list available commands! Anyway, fun UI. I was a little less impressed by the 'projects' page, I would have loved being able to visit the projects.
epasveer 1y ago
It won't let me pick up the axe.
- spookie 1y ago
  wdym?
  - wunderlust 1y ago
    I believe it's a reference to some of the old terminal RPG games, like Arabela (or something like that).
drob518 1y ago
Just FYI, it’s not mobile friendly.
jetbalsa 1y ago
reminds me of my own personal website at http://jrwr.sdf.org http://jrwr.sdf.org
- anthk 1y ago
  It doesn't work under Links/lynx, something SDF'ers use daily =)
ThinkingGuy 1y ago
Ironically, it doesn't work on a text-only browser. All you get in ELinks is: Link: preload Link: preload
- alkh 1y ago
  Black screen in Lynx for me as well (:
JadoJodo 1y ago
Very cool! Note: This doesn't work with Vimium installed, since only certain keystrokes make it through to the page. I think the input would need to be an input field in order for that to work.
- mtoohig 1y ago
  You should be able to press 'i' to enter 'insert' mode then the site should work.
agumonkey 1y ago
Introducing ReactRouterTTY
OhMeadhbh 1y ago
Nice! I did the same a while ago: HTTPS://BI6.US/ . I've been using the VT220mod and VT323 typefaces for various projects for a while. It just made sense to make my vanity site look like a terminal from the 80s. Links to the fonts can be found at HTTPS://BI6.US/A.HTML and the whole thing is creative commons licensed. Feel free to use the boilerplate for your own non-commercial projects, though I ask for attribution.
ploum 1y ago
This is awesome. I should copy that for https://offpunk.net https://offpunk.net
malablaster 1y ago
I did this like 15 years ago for my personal site too! Looks great.
masswerk 1y ago
This is a dangerous path! I once did the same and it grew to become https://masswerk.at/jsuix https://masswerk.at/jsuix ;-) (Historical note: pixels were bigger, in 2003. Feel free to zoom in / increase the text size.)
- umbra07 1y ago
  oh this is amazing. i like the `man`-help implementation. `ps` too!
  - masswerk 1y ago
    Some more info is here: https://masswerk.at/jsuix/jsuix-documentation.txt https://masswerk.at/jsuix/jsuix-documentation.txt All the man pages (same as `man -p`): https://masswerk.at/jsuix/man.txt https://masswerk.at/jsuix/man.txt (I think, the simple vi implementation acquired a scrolling bug, if the buffer starts with less than an entire screen.) Also, try `invaders` (it does games, too). ;-)
urbandw311er 1y ago
Nice! It would be good if help <command> displayed specific help for that command.
mjmsmith 1y ago
Nice work! abdisaDev@chillSpot:~$ whoami visitor@macintel-America_New_York Should be 'macarm' fwiw.
BinaryPie 1y ago
There used to be tons of these and even turn key libraries that do all of this and much much more. Especially in the early to mid 00s. Did you do any research into them before you built this?
Angostura 1y ago
i hope you are monitoring for how many people tried rm -rf /
anthk 1y ago
I sse nothing under Links/lynx. Meanwhile, sacc/cgo, gem.awk, offpunk, just work like a terminal prompt under an atom n270 netbook.
whywhywhywhy 1y ago
Make ls work and have the commands listed in help show up as programs.
sdsd 1y ago
Love it! I added a little terminal thing to my site awhile back: https://danbednarski.github.io/ https://danbednarski.github.io/ It's not really useful, just fun (for me)
huhtenberg 1y ago
F12 is blocked. That's not nice.
- kmoser 1y ago
  Right-click, then inspect
  - huhtenberg 1y ago
    Of course.
rezonant 1y ago
Obvious first command, "cat /etc/passwd"
RayJSeth 1y ago
Love seeing folks passion projects like this! Feels very old-web, not just stylistically, but also just the culture of folks making things that _they_ want to and just putting them out there. I recently put a minor terminal-ish toy on my personal site https://rayjseth.io/ https://rayjseth.io/ as an excuse to play with the infra to build/deploy go-wasm+Next in Vercel. Always feel like those labor of love tangent projects are the best place to grow new skills :)
von_lohengramm 1y ago
I instinctively pressed ^W to delete a word and closed the tab. Nice.
conrs 1y ago
Awesome! We should talk, very curious about your implementation. https://con.rs https://con.rs (a refactor, limited functionality) https://blog.con.rs/series/#mash https://blog.con.rs/series/#mash (posts related to the saga of development, recently revived!) Also stealing all these ideas from the comment thread on how to improve it :)
abaymado 1y ago
Good job! Make it more mobile-friendly (only tested on iPhone). Like many others suggested, make the segments clickable for non-technical people to navigate, and add commands like cd, ls, etc., to make it more interesting for hackers. Gobez!
- conrs 1y ago
  I took a stab at adding some mobile friendliness to my own implementation, if you wanted to take a look: https://con.rs https://con.rs
rafram 1y ago
Fun! Though it shouldn't scroll down on every key press, only ones that input a character. Command/ctrl-clicking a link jumps down to the bottom right now.
andrethegiant 1y ago
If you like this, you'll also like https://root.vc https://root.vc
noufalibrahim 1y ago
Nice. One of the earliest examples of terminal style websites I've seen was jwz's www dot jwz dot org. (Linking from here produces a different site). I remember it being like this 20 years ago and it still is.
- duxup 1y ago
  Apparently that user doesn't want people linking from this site or something. I guess they don't like anyone who happens to click on a hyperlink here...
  - noufalibrahim 1y ago
    Wasn't aware of that. I'll edit my link
- conrs 1y ago
  Link NSFW - props on style though.
ryao 1y ago
You might as well add support for viewing this over telnet too.
ge96 1y ago
clear isn't a command? dang
rubyfan 1y ago
That was fun, thanks for sharing!
ag8 1y ago
Reminds me of https://szge.ca https://szge.ca, which comes with fake keyboard and fan noises:)
freeamz 1y ago
Isn't this just https://xtermjs.org https://xtermjs.org ? Possible past discussions: https://news.ycombinator.com/item?id=28797535 https://news.ycombinator.com/item?id=28797535 can we get a dump of the hacker news archive?
CaesarA 1y ago
This is a really cool design for a website, but I can't imagine it would be too user friendly for mobile users. It's still awesome to use on desktop.
- conrs 1y ago
  Howdy - I know I'm digging this up from the past, but your comment prompted me to add some mobile friendliness to my own take at this: https://con.rs https://con.rs Of note - autosuggest options, clickable links for ls output.
mindcrime 1y ago
Was anybody else disappointed to find that "plugh", "plover", and "xyzzy" don't do anything? :-(
larodi 1y ago
What’s the point of having tty style site only to link to non-tty, rich UI apps…?
Cyphase 1y ago
Not exactly the same kind of thing, but reminds me of the new(-ish) Music for Programming design: https://musicforprogramming.net/ https://musicforprogramming.net/
swiftcoder 1y ago
I enjoyed navigating this, however, I would recommend that you make the various sub-pages linkable (maybe the TTY opens and runs the correct command if you follow a link to a sub page?) - it's hard to share anything about you from this site.
tiulpin 1y ago
Have a similar thing for my own personal website – https://tiulp.in/ https://tiulp.in/, with the important commands implemented, tab completion... and if you have WebGPU, something more :)) (you can grab a template here https://github.com/tiulpin/kotlin-cv.js https://github.com/tiulpin/kotlin-cv.js)
pmlnr 1y ago
[dead]

271 points by abdisaDev 1y ago

On mobile, the viewport scrolls to the top of the page each time you type a character, moving the command line down and out of view. If the viewport must move when you type it should jump to the bottom.

Gualdrapo 1y ago

On firefox mobile I neeed to double-tap Enter to run any "command"

noshitsherlock 1y ago

Great idea a lot of military communication is still like this. I think efficiency and clarity.

AndrewOMartin 1y ago

It's cute. Needs a pager ;)

feisuzhu 1y ago

No tab completion!

ale42 1y ago

It needs a switch to enable a "true" terminal mode... e.g. with such a font https://caglrc.cc/~svo/glasstty/ https://caglrc.cc/~svo/glasstty/ and slightly blurred characters!

jampekka 1y ago

I have two tabs at tty7 but the contents aren't in sync!

altsyset 1y ago

Great job, I like it

Daviey 1y ago

It's wonderful, great job. It looks like you used, https://github.com/bony2023/react-terminal https://github.com/bony2023/react-terminal which is an interesting project. The title for "Help" isn't a terminal font, it jumps out as misplaced. Also, suggestion is to add some hidden easter egg commands. I was surprised `whoami` worked, but then I saw it in `help` and was sad. But anyway: abdisaDev@chillSpot:~$ whoami visitor@linux_x86_64-Europe_London abdisaDev@chillSpot:~$

Apfel 1y ago
There's at least one easter egg! use developer --color (sorry, I have a habit of digging through source)
- abdisaDev 1y ago
  You found it! Shhh… let’s keep it our little secret ;)

slyle 1y ago

[dead]

stuaxo 1y ago

"This terminal hates being squished. Deploy a bigger screen. " I thought 1920x1080 was acceptable on a laptop :(

nosioptar 1y ago
It's a friggin terminal, it should only need 80x25 characters to not feel squished.

ineiti 1y ago

No ls and no cd?

salter2 1y ago
No matter what I'm doing in a terminal as soon as it opens I use ls. I always get so disappointed when these sites don't have it (none ever do). Please let me do terminal things in a terminal.

Philpax 1y ago

I'm going to represent the critical opinion and say: this is cute and I like the idea in theory, but if I encountered this in the wild, I would just leave the page. I explore most informational websites with a mouse or a touchscreen - I don't want to type to navigate your website! A middleground might be to make the commands clickable, so that clicking on "help" automatically inserts and runs it, and clicking on any of the commands in "help" does the same. You would still frustrate users who would have to keep scrolling up to reach the navigation, but it would make it usable without a keyboard.

dgimla20 1y ago
It's a cool looking site, but these terminal style sites (seen a few of them from web developers and software types) look terrible on phones and tablets (keyboard constantly present), which is well over 60% of web traffic now. You have to keep in mind your audience. If you presume everybody visiting this site is software-inclined, it's fine. I know a lot of less tech-literate users who would leave something like this straight away thinking they're being hacked or something daft.
- deleted 1y ago
  [deleted]
- buu700 1y ago
  I know a lot of less tech-literate users who would leave something like this straight away thinking they're being hacked or something daft. That reminds me of the time my friend and I put together a silly shell script called pentagonhack.sh that went through an 80s-movie-style nonsense hacking sequence while you mashed the keys. Most of the content was inside jokes, but there were a number of all caps references to a Pentagon server with warnings about unauthorized access being forbidden, and overall it looked pretty plausible to someone with no technical background or even cursory knowledge of SSH and Bash. Anyway, my friend got bored one day and fired up the script in a TTY on his laptop during lunch in our high school cafeteria. Apparently his friend who'd been sitting nearby noticed and started paying attention to what was on his screen, and then understandably found it alarming when by all appearances he was in the middle of typing out a command to run a malware executable on a Pentagon server. So she stands up and yells, "JOSH IS HACKING THE PENTAGON!". Of course he immediately switches back to X11/GNOME, probably with some homework assignment open in OpenOffice or an active Blackboard tab in Firefox, and everyone looks at his screen before looking back at her like she's crazy. The way he tells it, she was practically ready to go call the cops until he explained the joke and calmed her down.

febed 1y ago

now do telnet

rckt 1y ago

Looks nice, but feels like it's not complete. No tab completion. The font styles are not terminal like. Looks weird with those headers. Would be also great to be able to click stuff. In my opinion this needs improvement in either way. Otherwise feels half-baked, you didn't go full terminal way at the same time did not give an easy way to navigate.

JdeBP 1y ago
You are the second person, after feisuzhu, to talk of tab completion. But we were told a TTY not a shell. Historically, there were all sorts of user interfaces that one could get over a terminal, not just Unix, GNU, and other shells. There were BBSes of many flavours, Prestel, and any number of bespoke menu-driven systems. Giving people a shell inside a WWW browser has been done, and is even somewhat hackneyed at this point. (https://news.ycombinator.com/item?id=39829463 https://news.ycombinator.com/item?id=39829463 got 0 votes and 0 comments.) But some other kind of terminal interface makes for an interesting change. The phrase "You are in a maze of twisty passages, all alike." seems apposite, at this point. (-:
conrs 1y ago
Howdy, I took a stab at adding some of these features to my own implementation, the tab completion is pretty rudimentary though. Clickable things was a great idea, I have ls's output as a link that auto runs the corresponding command to view the content. https://con.rs https://con.rs if you're curious!

Galicarnax 1y ago

Add a pager like `less` (e.g. `$ projects | less`). And `exit` should close the page.

codeqihan 1y ago

It looks pretty good on my laptop, though the font doesn't quite look like a terminal's (especially the bold), but overall it's still pretty nice. It would be even better if some simple commands (like the most basic grep, less) could be added.

quotemstr 1y ago

If you want to flex as a traditionalist, you might want to consider adopting the https://motherfuckingwebsite.com/ https://motherfuckingwebsite.com/ aesthetic instead of the terminal one. The former remains browsable, whereas a terminal interface, however cute, creates enough UI friction to drive casual readers away.

noduerme 1y ago
friction to drive casual readers away is actually what you want if you don't like casual readers.

gr4vityWall 1y ago

I like it. It felt personal and non-intrusive.

aligundogdu 1y ago

Recently, I’ve been working on my own website and spending a lot of time thinking about how it should look and feel. I have to admit — I liked yours so much I’m almost jealous! Just a small note: It would be even better if the projects in the "Projects" section were clickable and led to their details.

jarbus 1y ago

I like it as a fun experiment, but I definitely wouldn't require users to interact with my website so much in order to start viewing the content

ssgodderidge 1y ago
Maybe the initial message could be enhanced with more content?

maze-le 1y ago

Very nice, but if you want to use it professionally you should consider having an alternative "clear text" version for recruiters and the like. The technically minded will find it nice but most people won't know what to do or what any of this means. And you could consider adding `ls`, `cd` and `exit` just for fun -- it was the first thing I've tried.

xtiansimon 1y ago
I’ve trained bookkeepers to run Python scripts on Windows, and ls/dir, cd are foundational, including the syntax for a script command’s arguments. For the clear text version, it could be a hypertext document run by an app! Haha
noduerme 1y ago
er, I assume that they made this site because they're far too good to work for anyone who doesn't want to take the time to find out how it works. In other words, recruiters need not apply.
- MOARDONGZPLZ 1y ago
  I would love to hire this person (in theory), but every job I post gets hundreds of inbound applicants, and while hiring is one of the most important aspects of my job, it is second to delivering software with value. I really don’t have time to seek out every person out there who may have a resume, much less a quirky resume, so I send recruiters who work for me to find good candidates for top of funnel. I don’t think there is anything wrong with this.
  - johnisgood 1y ago
    Do you hire for full-remote? I have mobility issues.
claiir 1y ago
Maybe just have commands auto-execute if you click on links in the existing text? That would allow someone to experience the entire interface on a touch device! :> E.g. there is **__contact__** in the page, bold and underlined, but you cannot click on it to do anything.

9dev 1y ago

Slightly disappointed my `sudo rm -rf /` wouldn’t do anything.

kmoser 1y ago
Check your local filesystem; you might be surprised :)

emilfihlman 1y ago

Hah, I see exactly the same issues as I had when trying to implement TUI on mobile (autocomplete fail, no arrow keys, blocking view, ...). It's just so painful and actual seems almost impossible to leverage the virtual keyboard for input.

dmd 1y ago

I just made mine look terminal-ly. https://3e.org/dmd/ https://3e.org/dmd/

kaishiro 1y ago

Cool! This is fun, and I love seeing people try out alternative website UIs. We did something similar for our company website (link in my profile if you’re interested). It started out as more of a TTY but eventually had to find a middle ground for reproducible pages. We didn't really care much for SEO but I wanted to see if there was a way to deliver consistent content while maintaining that style.

_joel 1y ago

`→ 'ls': command not found. use 'help' to list available commands!` err

MelodyUwU 1y ago

few "commands" that id like to see: ls, cd, less (better reading), uname, echo. would be nice for sure! otherwise it seems some fonts are not really terminal-like. looks good and simple right now though. also: abdisaDev@chillSpot:~$ whoami visitor@linux_aarch64-CET

Fokamul 1y ago

[dead]

noduerme 1y ago

I love it. This is really original. It's beautiful and entirely unnecessary, but that's what makes it good. Of course there are old BBSs and things on the web where you can have a TTY experience, but I can't remember ever seeing a person's portfolio site designed by hand like this to mimic that feeling. It's impressive for being so clean and minimal while at the same time obviously difficult to accomplish in such a polished way. Top notch.

qiine 1y ago

no tab completion ? ;p

BiraIgnacio 1y ago

Really cool, thanks for sharing. Very original indeed.

ribcage 1y ago

[dead]

fjfaase 1y ago

Maybe turn it into an adventure game. I recently though about making an adventure game about my house and the surroundings.

Sparkenstein 1y ago

shameless plug portfolio (5+ years old): prabhanjan.dev

sigilis 1y ago

I did something like this myself a little while back, knownothing.dev It’s fun to put together nonstandard interfaces. I had the idea of streaming in text like you were connected by an old modem to a remote system. Never experienced it myself, as I am not old enough, but I found the idea aesthetically pleasing.

netsharc 1y ago
> streaming in text Nowadays people would think your site is an LLM page, since ChatGPT implemented this and now every LLM apparently has to do the same...
- sigilis 1y ago
  You know, I hadn't really considered that. I do find the text streaming aspect of LLM interfaces to be a charming solution to the latency issue. What's old is new again.
JdeBP 1y ago
I have. It's not quite right, and its off enough to be in the uncanny valley for those who have seen this. Mainly the difference is in how the prompt should be streamed as well, and how the prompt does not re-appear until the command has finished. With late 1980s character-mode terminals one could do clever things with margins and have a scrolling area in the middle of the screen and an input area at the bottom, so it's not wrong per se. It's just not how things commonly worked. (The clever things brigade were a select few. Mostly the whole screen would scroll.) A greater than symbol as the prompt character and an e-mail address in the prompt didn't commonly go together, either. If there was an e-mail address, it was some type of Unix shell, and the prompt character was conventionally dollar or hash. If the prompt character was a greater than symbol then it was a BASIC or MS/PC/DR-DOS which didn't do e-mail addresses and multi-user. Again, it's not wrong, as famously prompts can be customized, but it's just ever so slightly off .

o1o1o1 1y ago

I really like it, well done! As others mentioned, if you use this to attract clients or recruiters, I recommend adding a version for non-technical folks. As a nerd I'd love to see some more colors like in the themes you can set using Prezto or Oh-My-ZSH (reference: https://github.com/sorin-ionescu/prezto?tab=readme-ov-file#themes https://github.com/sorin-ionescu/prezto?tab=readme-ov-file#t...). For the projects I think some click function to open an ncurses-like modal would be cool :) Another idea: what about adding a light mode? P.S.: I would also add `rm -rf` and return something like "nice try ^_^"

hombre_fatal 1y ago

Make it fully navigable by clicking. Every time you suggest commands (like "help"), let the user click them, and the UI responds as if they typed it and hit enter. Every command that can be typed/clicked can be highlighted a green color or something.

kindawinda 1y ago
don't tell him what to do
conrs 1y ago
Great idea, I went ahead and implemented it on my own site: https://con.rs https://con.rs

Bengalilol 1y ago

1st second of my 1st visit: ls → 'ls': command not found. use 'help' to list available commands! Anyway, fun UI. I was a little less impressed by the 'projects' page, I would have loved being able to visit the projects.

epasveer 1y ago

It won't let me pick up the axe.

spookie 1y ago
wdym?
- wunderlust 1y ago
  I believe it's a reference to some of the old terminal RPG games, like Arabela (or something like that).

drob518 1y ago

Just FYI, it’s not mobile friendly.

jetbalsa 1y ago

reminds me of my own personal website at http://jrwr.sdf.org http://jrwr.sdf.org

anthk 1y ago
It doesn't work under Links/lynx, something SDF'ers use daily =)

ThinkingGuy 1y ago

Ironically, it doesn't work on a text-only browser. All you get in ELinks is: Link: preload Link: preload

alkh 1y ago
Black screen in Lynx for me as well (:

JadoJodo 1y ago

Very cool! Note: This doesn't work with Vimium installed, since only certain keystrokes make it through to the page. I think the input would need to be an input field in order for that to work.

mtoohig 1y ago
You should be able to press 'i' to enter 'insert' mode then the site should work.

agumonkey 1y ago

Introducing ReactRouterTTY

OhMeadhbh 1y ago

Nice! I did the same a while ago: HTTPS://BI6.US/ . I've been using the VT220mod and VT323 typefaces for various projects for a while. It just made sense to make my vanity site look like a terminal from the 80s. Links to the fonts can be found at HTTPS://BI6.US/A.HTML and the whole thing is creative commons licensed. Feel free to use the boilerplate for your own non-commercial projects, though I ask for attribution.

ploum 1y ago

This is awesome. I should copy that for https://offpunk.net https://offpunk.net

malablaster 1y ago

I did this like 15 years ago for my personal site too! Looks great.

masswerk 1y ago

This is a dangerous path! I once did the same and it grew to become https://masswerk.at/jsuix https://masswerk.at/jsuix ;-) (Historical note: pixels were bigger, in 2003. Feel free to zoom in / increase the text size.)

umbra07 1y ago
oh this is amazing. i like the `man`-help implementation. `ps` too!
- masswerk 1y ago
  Some more info is here: https://masswerk.at/jsuix/jsuix-documentation.txt https://masswerk.at/jsuix/jsuix-documentation.txt All the man pages (same as `man -p`): https://masswerk.at/jsuix/man.txt https://masswerk.at/jsuix/man.txt (I think, the simple vi implementation acquired a scrolling bug, if the buffer starts with less than an entire screen.) Also, try `invaders` (it does games, too). ;-)

urbandw311er 1y ago

Nice! It would be good if help <command> displayed specific help for that command.

mjmsmith 1y ago

Nice work! abdisaDev@chillSpot:~$ whoami visitor@macintel-America_New_York Should be 'macarm' fwiw.

BinaryPie 1y ago

There used to be tons of these and even turn key libraries that do all of this and much much more. Especially in the early to mid 00s. Did you do any research into them before you built this?

Angostura 1y ago

i hope you are monitoring for how many people tried rm -rf /

anthk 1y ago

I sse nothing under Links/lynx. Meanwhile, sacc/cgo, gem.awk, offpunk, just work like a terminal prompt under an atom n270 netbook.

whywhywhywhy 1y ago

Make ls work and have the commands listed in help show up as programs.

sdsd 1y ago

Love it! I added a little terminal thing to my site awhile back: https://danbednarski.github.io/ https://danbednarski.github.io/ It's not really useful, just fun (for me)

huhtenberg 1y ago

F12 is blocked. That's not nice.

kmoser 1y ago
Right-click, then inspect
- huhtenberg 1y ago
  Of course.

rezonant 1y ago

Obvious first command, "cat /etc/passwd"

RayJSeth 1y ago

Love seeing folks passion projects like this! Feels very old-web, not just stylistically, but also just the culture of folks making things that _they_ want to and just putting them out there. I recently put a minor terminal-ish toy on my personal site https://rayjseth.io/ https://rayjseth.io/ as an excuse to play with the infra to build/deploy go-wasm+Next in Vercel. Always feel like those labor of love tangent projects are the best place to grow new skills :)

von_lohengramm 1y ago

I instinctively pressed ^W to delete a word and closed the tab. Nice.

conrs 1y ago

Awesome! We should talk, very curious about your implementation. https://con.rs https://con.rs (a refactor, limited functionality) https://blog.con.rs/series/#mash https://blog.con.rs/series/#mash (posts related to the saga of development, recently revived!) Also stealing all these ideas from the comment thread on how to improve it :)

abaymado 1y ago

Good job! Make it more mobile-friendly (only tested on iPhone). Like many others suggested, make the segments clickable for non-technical people to navigate, and add commands like cd, ls, etc., to make it more interesting for hackers. Gobez!

conrs 1y ago
I took a stab at adding some mobile friendliness to my own implementation, if you wanted to take a look: https://con.rs https://con.rs

rafram 1y ago

Fun! Though it shouldn't scroll down on every key press, only ones that input a character. Command/ctrl-clicking a link jumps down to the bottom right now.

andrethegiant 1y ago

If you like this, you'll also like https://root.vc https://root.vc

noufalibrahim 1y ago

Nice. One of the earliest examples of terminal style websites I've seen was jwz's www dot jwz dot org. (Linking from here produces a different site). I remember it being like this 20 years ago and it still is.

duxup 1y ago
Apparently that user doesn't want people linking from this site or something. I guess they don't like anyone who happens to click on a hyperlink here...
- noufalibrahim 1y ago
  Wasn't aware of that. I'll edit my link
conrs 1y ago
Link NSFW - props on style though.

ryao 1y ago

You might as well add support for viewing this over telnet too.

ge96 1y ago

clear isn't a command? dang

rubyfan 1y ago

That was fun, thanks for sharing!

ag8 1y ago

Reminds me of https://szge.ca https://szge.ca, which comes with fake keyboard and fan noises:)

freeamz 1y ago

Isn't this just https://xtermjs.org https://xtermjs.org ? Possible past discussions: https://news.ycombinator.com/item?id=28797535 https://news.ycombinator.com/item?id=28797535 can we get a dump of the hacker news archive?

CaesarA 1y ago

This is a really cool design for a website, but I can't imagine it would be too user friendly for mobile users. It's still awesome to use on desktop.

conrs 1y ago
Howdy - I know I'm digging this up from the past, but your comment prompted me to add some mobile friendliness to my own take at this: https://con.rs https://con.rs Of note - autosuggest options, clickable links for ls output.

mindcrime 1y ago

Was anybody else disappointed to find that "plugh", "plover", and "xyzzy" don't do anything? :-(

larodi 1y ago

What’s the point of having tty style site only to link to non-tty, rich UI apps…?

Cyphase 1y ago

Not exactly the same kind of thing, but reminds me of the new(-ish) Music for Programming design: https://musicforprogramming.net/ https://musicforprogramming.net/

swiftcoder 1y ago

I enjoyed navigating this, however, I would recommend that you make the various sub-pages linkable (maybe the TTY opens and runs the correct command if you follow a link to a sub page?) - it's hard to share anything about you from this site.

tiulpin 1y ago

Have a similar thing for my own personal website – https://tiulp.in/ https://tiulp.in/, with the important commands implemented, tab completion... and if you have WebGPU, something more :)) (you can grab a template here https://github.com/tiulpin/kotlin-cv.js https://github.com/tiulpin/kotlin-cv.js)

pmlnr 1y ago

[dead]