DEV Community

Cover image for I built a terminal-like portfolio with Vue 3
Sam Zhang
Sam Zhang

Posted on • Updated on

I built a terminal-like portfolio with Vue 3

Hey guys, I'm Sam Zhang.

Edit: since a lot of you are commenting about it, I would like to mention one thing though that this "portfolio" is just made for fun and not recommended to use in a real world application if you're really looking for a job.

Recently I've updated my personal website. Originally I used LogTure as my primary website, but I think it's not "cool" enough.

So I started building a cooler one. After Googling around, I decided to make a terminal-like site similar to yasfu.net with Vue 3.

Vue 3 is still new to me though. I mainly work on React projects recently and didn't explore the new features introduced in Vue 3. So this time I decided to give it a try. And after struggling with errors, I finally finished this project.

Demo: https://samzhangjy.com/

GitHub: https://github.com/samzhangjy/VueTerm

And of course, feel free to report issues to me!

However there're some downsides about this project. One is that the current bash-like command system has some trouble handling complicated paths. So for example, when you type in cd ../folder/subfolder will cause an inner failure of cd.

Recursive might be a good way to solve this problem and I'll try to implement it into this project in the near future.

And here is the end of the article. Feel free to play around with my project!

Discussion (25)

Collapse
chuckhriczko profile image
Charles Hriczko

This is unique. I love it. I read a comment saying you're 13 and if that's true, keep it up my friend. The world needs outside of the box thinkers and developers. Don't let anyone hold you back even if others tell you your ideas are insane. The only thing that's insane is not doing what your heart tells you.

Collapse
samzhangjy profile image
Sam Zhang Author

Yep that's true! Thank you!

Collapse
ecyrbe profile image
ecyrbe

Hello,

You advertise yourself as a 13 year old freelance from china.

I'd like to remind you that even in china legal labour age is 16. Not 13.

I have no way to know why you are doing it. Maybe your familly is really poor. I'm from western culture where child work is seen as exploitation.

But if your familly is not in absolute need for money, give yourself a break. You'll work for real soon enough.

Collapse
samzhangjy profile image
Sam Zhang Author

Hey there. Well actually this is just for fun as a project for exploring Vue 3 and not really looking for work xD. I only work on some open source projects!

Collapse
ecyrbe profile image
ecyrbe • Edited on

Please, don't to take it as a rude comment. I'm only doing it to protect you from being exploited even if you are ok with it.

I'd like to remind you that Freelance means working for pay. And doing portfolio means you want to advertise yourself to land a Job or make yourself known to potential clients.
You don't need those if you're 13 year old.

Enjoy your young age, don't fall in work too young, preserve yourself.

Thread Thread
samzhangjy profile image
Sam Zhang Author

Haha that's fine... Then I think I might have some misunderstanding in those words when writing this article. I'm not a big fan of working currently lol.

And thanks indeed! Have a good day!

Collapse
ozymandias09 profile image
Marcos Batista • Edited on

Shhhsh, sorry man, you're not from a third world country.

Many people work in his 13, and that's ok, family is no always supportive, or rich, sometimes, we have to sacrifice a little for a brighter Future for our brothers and sisters.

Collapse
shambashib21 profile image
Shambashib Majumdar

Loved the project! Love from India!

Collapse
tiagorangel2011 profile image
Tiago Rangel

Well, I think it's not so cool, because anyone needs to see help, then to type ls and then cat welcome.md to know more about you.
So, my opinion is that it is a little complicated to browse the website

Collapse
samzhangjy profile image
Sam Zhang Author

I would agree with you in a real world application. This one is made just for fun however and the ease of use is not my primary goal. Instead I'm just using this project to try out some cool features! Thanks anyway!

Collapse
moose_said profile image
Mostafa Said

It's cool to allow it as a second option but not the primary portfolio.

Collapse
samzhangjy profile image
Sam Zhang Author

Yes I would agree with you if to use it in the real world. But actually this one is just made for fun to try out Vue 3 and some other cool stuff. Thanks though!

Collapse
moose_said profile image
Mostafa Said

If so, then it's looking awesome πŸ‘Œ

Collapse
shershen08 profile image
Mikhail Kuznetcov

Would be great to add autocompletion to the terminal you have.
Current UI is completely geek-oriented, so I would think of making it feel more natural to a real CLI

Collapse
samzhangjy profile image
Sam Zhang Author

Yep that's a great idea. I'll try adding it to my project!

Collapse
ben profile image
Ben Halpern

Neat

Collapse
andrewbaisden profile image
Andrew Baisden

Wow excellent very unique thats for sure.

Collapse
wrench1815 profile image
Hardeep Kumar

Hey that's some good stuff. I really liked the idea, looking forward to see more on it. (might even try myself)

Collapse
samzhangjy profile image
Sam Zhang Author

Thanks for checking it out!

Collapse
jcubic profile image
Jakub T. Jankiewicz • Edited on

Few issues:

  • You have normal input element and it's really hard to focus if you click away.
  • no tab completion, pressing tab and you get focus in downloaded file.
Collapse
samzhangjy profile image
Sam Zhang Author

Thanks for commenting! I'll try to solve those issues in the future.

Collapse
optimisedu profile image
optimisedu

Interesting and technical but it lacks acessability, won't be SEO friendly ( that's not a huge issue for this usecase) it feels unoriginal and an empty shell while being technically skillful.

Why not make it your own, change the animation, don't copy, add commands, put some GUI in there so there is an acessable shell it can retain the look and feel.

That is my feeling - great job but it is a too close to a clone.

Collapse
samzhangjy profile image
Sam Zhang Author • Edited on

Uh actually I developed this from zero and didn't copied anybody. I was inspired from other similar work when choosing that type to build though. However it's happy to hear it's that real!

Collapse
optimisedu profile image
optimisedu • Edited on

Sorry empty shell was a poor pun does that make more sense - technically great but the web is a GUI, reducing it to a command line reduces accessibility. Whether you mind or it matters. Shrug

Thread Thread
samzhangjy profile image
Sam Zhang Author

oops. Then I might misunderstood that. Yes, GUI is pretty much the most important thing for web applications. Perhaps I will add some GUI into the current shell in the future. Thanks!