DEV Community

loading...
Cover image for I Built a VSCode Inspired Developer Portfolio

I Built a VSCode Inspired Developer Portfolio

Nitin Ranganath on May 08, 2021

The Idea & Inspiration Truth be told, I've lost count of the number of amazing portfolio websites I've visited and been in awe of. I...
Collapse
khangnd profile image
Khang

I love creative ideas like this and very well done 👍
You might as well like to check out mine (windows inspired portfolio): khang-nd.github.io 😁

Collapse
realniendoo profile image
Abdul Rauf 🇬🇭

Your portfolio is sick man🔥🔥🔥🔥 I wish I was this good😀

Collapse
khangnd profile image
Khang

You will for sure :)

Collapse
christiangroeber profile image
Christian Gröber • Edited

Love how so many people are doing home screens now, here's mine: christian-groeber.ch

Still a work in Progress

Collapse
itsnitinr profile image
Nitin Ranganath Author

Wow, so creative! My only recommendation is to get a free SSL certificate for Photography Portfolio page.

Collapse
codeboi profile image
Timothy Rowell

LOL. i love it :D

Collapse
ishikaa_2302 profile image
Ishika Gupta

Something amazing and unique.
Great work 🙌🏻

Collapse
itsnitinr profile image
Nitin Ranganath Author

Thank you!

Collapse
mehdi_jai profile image
MEDOSTUDIO • Edited

Hhh out of the box. I liked it 👌🏽👌🏽

Collapse
itsnitinr profile image
Nitin Ranganath Author

Woah, this is amazing. I can surely learn a thing or two from this. Great job!

Collapse
hima_khaitan profile image
Himanshu • Edited

Hey There! Inspired from you I built my DEV Portfolio
github-portfolio.vercel.app/

Thanks Dude! Do checkout!
Portfolio

Collapse
itsnitinr profile image
Nitin Ranganath Author

Woah, looks amazing. Couldn't distinguish this from the original website. Great idea and implementation.

Collapse
hima_khaitan profile image
Himanshu

Means a lot! Thanks dude!

Collapse
panasoft profile image
Abdul-Razak Alhassan

That is so cool... Maybe your contact form can look like a terminal opened in VScode!

Collapse
itsnitinr profile image
Nitin Ranganath Author

Great idea!

Collapse
popeating profile image
popeating

Looks cool, but is a bit confusing from ux perspective
Some examples:

  • all the top menu (and the dots menu on right) have no link but still a pointer when hovering
  • The pages can be reached in many ways, but their menu are not organized: About is the only page that have an icon on the lower part, all the pages are under the "portfolio" but still accessible via the left icon menu

You should probably clean up the interface its quiete frustrating having more (different) links leading always to the same page

Collapse
itsnitinr profile image
Nitin Ranganath Author

Thank you and to be honest, I agree with you. I was pondering over the same thing that how there are multiple ways to reach the same page. I'll see how I can improve it but I really appreciate the suggestions.

The dots on the menu don't have any functionality for now but I was planning to mimic some minimize and maximize animations. Not sure if I should do that but I'll give it a try.

I've kept the above page icon on the lower part because VSCode has this icon on the lower part as well. While it is for managing accounts I guess, I thought the icon could signify an about page for me. But I totally get your point. Once again, good suggestions and thanks a lot.

Collapse
hyprnrgy profile image
Kuldeep Ravishankar

Hey, nithin! I absolutely loved the portfolio and would love to share your work with others too. I think this is a great example of a simple yet minimalistic portfolio that all programmers should be inspired by!

Collapse
itsnitinr profile image
Nitin Ranganath Author

Wow, thanks a lot for the appreciation. Feel free to share in case you'd like to.

Collapse
codeboi profile image
Timothy Rowell

Is it ok if I used this project, and customize it as my own? I would give you full credit.

Collapse
itsnitinr profile image
Nitin Ranganath Author

Definitely. Go for it. I'd love to see you make it your own.

Collapse
codeboi profile image
Timothy Rowell

Thanks!!

Collapse
manitej profile image
Manitej ⚡

Amazing idea man!

Collapse
itsnitinr profile image
Nitin Ranganath Author

Thank you! Inspired by the Ubuntu one I mentioned in the article.

Collapse
manitej profile image
Manitej ⚡

Looks cool. I'll try to give a PR

Collapse
mrmuhammadali profile image
Muhammad Ali

Good work, I liked the idea. You can add resizing support in sidebar using react-resizable-element.

Collapse
itsnitinr profile image
Nitin Ranganath Author

Wow, this is really cool. I'll consider adding this. Thank you!

Collapse
jsbroks profile image
Justin Brooks
Thread Thread
mrmuhammadali profile image
Muhammad Ali

Thanks for the suggestion but you can look at the bundle size comparisons as well.

Collapse
codeboi profile image
Timothy Rowell

whats the run command?

Collapse
itsnitinr profile image
Nitin Ranganath Author

Hi, you can run the project in development mode using npm run dev or yarn dev. Make sure you install all the packages first though. Let me know if you need any help :)

Collapse
codeboi profile image
Timothy Rowell

Oh i fixed it Nvm thx.

Collapse
codeboi profile image
Timothy Rowell

Hey im using repl.it and its diffrent soo... I need your help

Collapse
codeboi profile image
Timothy Rowell

ok

Collapse
somanathgoudar profile image
Somanath Goudar

Dude! That is just Amazing. Impressive

Collapse
itsnitinr profile image
Nitin Ranganath Author

Thanks! Do let me know if you have any suggestions or feedback 😃

Collapse
cenacr007_harsh profile image
KUMAR HARSH

That is insanely cool, literally blew my mind.

Collapse
itsnitinr profile image
Nitin Ranganath Author

Thanks a lot!

Collapse
hima_khaitan profile image
Himanshu

Loved the Idea Dude!

Collapse
michelebarreto profile image
Michele Barreto

amei, está incrível parabéns !!

Collapse
itsnitinr profile image
Nitin Ranganath Author

Muito obrigado :)

Collapse
codeboi profile image
Timothy Rowell

can you follow me so we can privately chat?

Collapse
itsnitinr profile image
Nitin Ranganath Author

Sure

Collapse
ladvace profile image
Gianmarco

Very cool project!

Collapse
mkrajaci profile image
Mario Krajacic

I love it

Collapse
aguaragazu profile image
Aguara Gazu

Wow!!

Collapse
vaibhavkhulbe profile image
Vaibhav Khulbe

Wonderful work!

Collapse
ytrkptl profile image
Yatrik Patel

Wow.

Collapse
pb profile image
Pawel

It's so cool.
Loved it.

Collapse
citizen428 profile image
Michael Kohl

Is “React out to me” a pun or did you mean “reach”?

Collapse
itsnitinr profile image
Nitin Ranganath Author

Oops, between you and me, it's most certainly a typo. But for others, it's a feature, not a bug!

Collapse
karlosos profile image
Karol Działowski

That's cool! How have you created the gif in the readme? It's gorgeous.

Collapse
itsnitinr profile image
Nitin Ranganath Author

Thank you! It's from canva.com

They have multiple animated presentation templates so I edited one them, added a screenshot, exported as gif, uploaded to Imgur and used that link in the readme. 😅

Collapse
lindaicing profile image
Linda

This is such a neat idea and great execution! Love it!

Collapse
kascharowski profile image
Diego Kascharowski

That's soooo nice :D

Collapse
codeboi profile image
Timothy Rowell

I would love to help!

Collapse
itsnitinr profile image
Nitin Ranganath Author

I truly appreciate that! :)

Collapse
dev_emmy profile image
nshimiye_emmy

great idea thanks

Collapse
navaneethbysani profile image
Navaneeth Bysani

Nice! Great Innovation

Collapse
mukul_singhal profile image
Mukul Singhal

This is soooo Coool . Awesome Detailing😀😀

Collapse
commentme profile image
Unnati Bamania

Impressive

Collapse
itsnitinr profile image
Nitin Ranganath Author

Thank you! 😄

Collapse
codeboi profile image
Timothy Rowell

IT HAS NO HTML WHAAAAA.

Collapse
codeboi profile image
Timothy Rowell

Add this file
.replit
and inside put:

language = "nodejs"
run = "npm run dev"

Collapse
cesar_code profile image
César

to be honest, I didn't see this coming! Nice touch🔥🔥

Collapse
rupayanr profile image
Rupayan Roy

Very creative

Collapse
itsnitinr profile image
Nitin Ranganath Author

Thank you!

Collapse
antonijodod profile image
Antonijo Đođ

It's so cool. Well done

Collapse
itsnitinr profile image
Nitin Ranganath Author

Thank you!

Collapse
whippingdot profile image
Sanjaay R.

Wait how did you log into my todoist account on the ubuntu portfolio?? DON'T STEAL MY PASSWORDS

Collapse
tjasa profile image
Tjaša

Such a cool idea, it looks awesome! ✨

Collapse
itsnitinr profile image
Nitin Ranganath Author

Thank you! 😄