DEV Community

Cover image for I created a terminal style website.

I created a terminal style website.

Yassine Fathi on November 15, 2021

Link: https://term.m4tt72.com Repo: https://github.com/m4tt72/terminal Why? I'm a Linux enthusiast, and I tried creating something tha...
Collapse
 
jancizmar profile image
Jan Cizmar •

That's cool! I wanted to create exact the same thing. Now I can just use yours and replace your name. :D

Collapse
 
m4tt72 profile image
Yassine Fathi •

Haha, feel free to do that 👀. I might add a command that will generate a similar website with custom name, theme, font etc...

Collapse
 
jancizmar profile image
Jan Cizmar •

I'd like it with black background please. 😄

Collapse
 
leodarpan profile image
DARPAN ANEJA •

hahahaha. Very creative!!!

Collapse
 
doctorew profile image
Drew Schillinger • • Edited

One feature suggestion -- perhaps complete the command with tab (like when I type whoa {tab} it completes to whom

Also, the jackass in me tried sudo. There's an Easter egg waiting for you to code with that somehow

(finishing my MBA by the end of next month and starting a new job next week. But if I have the time (which is a big iff), I'll make a PR)

Collapse
 
m4tt72 profile image
Yassine Fathi •

@doctorew check out the latest release, I added the tab completions and... an easter egg... ;)

Collapse
 
doctorew profile image
Drew Schillinger •

YO!!!! Are you me from the past?? LOL

I got a good (not so good) talking to when we redid the video site back in 2009 or 2010 and I inserted the Family Guy version of this when someone enters the Konami code.

Looking back, I have no idea how I kept that job with the shiz I pulled off in my formative years 😂😂 (yes I know that’s an old person’s emoji)

Collapse
 
m4tt72 profile image
Yassine Fathi •

Oh yeah about that tab completions, I'm currently working on that. As well as arrows to browse the history. But I mean, I'm worried I'm going to reinvent bash 😅

Collapse
 
doctorew profile image
Drew Schillinger •

Take it from an old geezer like me -- no such thing as "reinventing" when you see it as deeply learning why and how something works ;-)

Excelsior!

Collapse
 
rkoziol profile image
Radek K. •

Wooow, looks really cool and original :D One remark from my side, maybe it will be better to get back focus on input when user click somewhere on the page? Now you need to click exactly in the line where input is.

Collapse
 
doctorew profile image
Drew Schillinger • • Edited

Love it! Reminds me of the time we made the Adult Swim site look like a broken server /Apache directory. Everybody thought we got hacked -- even the server devs (who knew we were on Nginx and could see there was ads on the page💀💀)

Collapse
 
pengeszikra profile image
Peter Vivo •

weather is great!

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
m4tt72 profile image
Yassine Fathi •

I might extract that data later and make it easy for other people to use ;)

Collapse
 
yuanhao profile image
YuanHao Chiang •

Looks amazing. The weather widget blew my mind -- does it look like that on Linux at all?

Collapse
 
yuanhao profile image
YuanHao Chiang •

Ahh, also, I am getting an error on your instagram link account: instagram.com/m4tt72

Collapse
 
m4tt72 profile image
Yassine Fathi •

Thanks for pointing that out 🙏

Collapse
 
suavebajaj profile image
Suave Bajaj •

I am not able to see the terminal style as posted. Have you changed the website design?

Collapse
 
m4tt72 profile image
Yassine Fathi •

Yes, now it's available on term.m4tt72.com

Collapse
 
suavebajaj profile image
Suave Bajaj •

Ok! I should have not entered sudo. But wow! amazing work

Collapse
 
eljayadobe profile image
Eljay-Adobe •

Now if it had moria or angband or rogue or nethack or omega...

Very retro, I like it!

Collapse
 
m4tt72 profile image
Yassine Fathi •

Oh nice suggestion! Thanks

Collapse
 
leodarpan profile image
DARPAN ANEJA •

Will eagerly wait to see the full version in action!!

Collapse
 
warakateng profile image
Warakateng •

Jedi Yassine

Collapse
 
ironcladdev profile image
IroncladDev •

Wow, this is super nice, man!!

Collapse
 
kachidk profile image
Nwanguma Victor •

Very nice site, but it's not responsive on mobile

Collapse
 
m4tt72 profile image
Yassine Fathi •

It's quite tricky to make it responsive, especially with ascii art stuff. I tried reducing the font-size, but ended up being too small, so what I did instead is set a minimum size on mobile viewport. Not really the best solution, but it's a terminal, it should only be viewed on desktop, right?

Collapse
 
skino2020 profile image
skino •

Amazing site dude. im trying to do something similar at the min with Laravel using the TALL stack, may need to pick your brain on how you have achieved some stuff lol.

Collapse
 
m4tt72 profile image
Yassine Fathi •

I will publish another post when it gets open-sourced, and you can check out the code and see how it works. Most of the challenges that I faced are UI.

I also build a bin system close to how unix works. Just export a function in a forlder with args and return a string, and it will be automatically picked up by the shell I created and added to the help command.

Collapse
 
katafrakt profile image
Paweł Świątkowski •

Pretty cool. I imagine it could be used to emulate old text adventure games experience ;)

Collapse
 
m4tt72 profile image
Yassine Fathi •

Oh good idea, I might add text based games to it. Or when it's open-sourced, someone else will ;)

Collapse
 
shriji profile image
Shriji •

Awesome!

Collapse
 
jeremymonatte profile image
Mbenga •

Really nice 👏👏

Collapse
 
fkkarakurt profile image
Fatih Küçükkarakurt •

I really like it looks great. The joke in the Vim and Emacs commands... hahah everything is great. Good luck!

Collapse
 
dibasdauliya profile image
Dibas Dauliya •

LOL! Just tried.

Collapse
 
dibasdauliya profile image
Dibas Dauliya •

Wooooowwwww! Amazing Work!🤩🤩🤩

Collapse
 
misly profile image
Misly •

Looks awesome

Collapse
 
raftlabs profile image
RaftLabs - AI App Dev Agency •

Woah, this looks extremely neat! Kudos!

Collapse
 
stephendpmurphy profile image
Stephen Murphy •

Ok, that's pretty awesome.

Collapse
 
henrikvtcodes profile image
Henrik VT •

This is super cool!
I've been hacking around on a portfolio for a while and I might just use parts of this. Terminals are awesome.

Collapse
 
algodame profile image
Chiamaka Ojiyi •

So cool. Please write a tutorial on how to do this. Will be so valuable

Collapse
 
m4tt72 profile image
Yassine Fathi •

Planning to do that soon

Collapse
 
hardikchopra profile image
Hardik Chopra • • Edited

Loved it ❤️ Great Work

Collapse
 
funetes profile image
KimHwan •

sooooooo nice

Collapse
 
arcticspacefox profile image
ArcticSpaceFox •

Mibile version is kinda broken, will that be more responsive in the future?

Collapse
 
m4tt72 profile image
Yassine Fathi •

Could you please submit an issue here: github.com/m4tt72/terminal/issues I will work on it later 🙏

Collapse
 
rishitkhandelwal profile image
Rishit Khandelwal •

nice work

Collapse
 
dongphuchaitrieu profile image
Đồng Phục Hải Triều •

That's cool man!

Collapse
 
kiyov09 profile image
Enrique Mejías •

Pretty cool!

Collapse
 
young1874988 profile image
young •

looks very cool

Collapse
 
areeburrub profile image
Areeb ur Rub •

Amazing work dude,
I thinking of contributing to this repo and make it compatible with mobile also.

Collapse
 
garikaib profile image
garikaib •

You missed nano. vi, vim and emacs are covered

Collapse
 
hilalahmad32 profile image
Hilal ahmad •

sir how i contact you
+923423601581
whatsapp me Please

Collapse
 
prana10 profile image
Prana •

wow

Collapse
 
rohithaditya profile image
Rohithaditya •

Cool

Collapse
 
bekbrace profile image
Bek Brace •

Great job, Yassine [nice touch for Vim and Emacs ;) )
Can I use your code and modify it for my own use ?
I will give you full credit with your page link
Thanks

Collapse
 
m4tt72 profile image
Yassine Fathi •

Hello Ben, thank you! Yes of course, the project is open-source, feel free to use it. Also if you have any suggestions that will help improve the project, feel free to submit a PR ;)

Collapse
 
jaskaran5ingh profile image
Jaskaran Singh •

That's awesome

Collapse
 
alco profile image
Jakub Stibůrek •

Awesome project.

Collapse
 
skino2020 profile image
skino • • Edited

Absolutely Love this. i dropped you an email but here is what i have so far to my edit :)

My Terminal

Collapse
 
m4tt72 profile image
Yassine Fathi •

That's cool!

Collapse
 
mukulcreator profile image
Mukul Kumar •

it's awesome. It can be a great replacement for resume.

Collapse
 
oncuoztekin profile image
Öncü •

Cool bro, cool 😎

Collapse
 
iamsbharti profile image
Iamsbharti •

Just wow 🎉🎉🎉

Collapse
 
thetrendycoder profile image
Sara Ounissi •

That is very very cool!! I wanted to do the same one day, I love the kind of retro gaming vibe it gives. Keep it up!

Collapse
 
m4tt72 profile image
Yassine Fathi •

I added a link to the repo, feel free to check out the code!

Collapse
 
mekapilbasnet profile image
Kapil •

Awesome :)

Collapse
 
rifath profile image
Rifat hossain •

Nice Weather output

Collapse
 
extinctsion profile image
Aditya •

wow! we can use vim/vi/emacs

Collapse
 
leodarpan profile image
DARPAN ANEJA •

Beautifully crafted website mate!!!...
I guess your life is literally beautiful!!

Collapse
 
dirtymartiniexe profile image
Dirty Martini Marketing •

Really nice and refreshing take on a personal website, well done!

Collapse
 
m4tt72 profile image
Yassine Fathi •

Thanks 🙏

Collapse
 
sirlpc profile image
SirLpc •

Wow, it`s so cool!!!!

Collapse
 
shubhamhkr profile image
shubhamhkr •

its awesome

Collapse
 
ensanityel profile image
ENSANITYel •

i want this terminal but in a small section of my screen not on the entire screen what should i do