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!

Top comments (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

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

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

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

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

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
 
tr11 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

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

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

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

Thanks for checking it out!

Collapse
 
jcubic profile image
Jakub T. Jankiewicz • Edited

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

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

Some comments may only be visible to logged-in visitors. Sign in to view all comments.